/* tab style */
.r-tabs {
    position: relative;
}
.r-tabs .r-tabs-nav {
    text-align: right;
    /*margin-right: 40px;*/
}
.r-tabs .r-tabs-nav .r-tabs-tab {
    position: relative;
    top: 1px;
}
.r-tabs .r-tabs-nav .r-tabs-anchor {
    margin-bottom: 1px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    color: #4f97cc;
}

.r-tabs .r-tabs-nav .r-tabs-state-active {
    background-color: #27629e;
    margin-bottom: -1px;
    /*border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;*/
}

.r-tabs .r-tabs-nav .r-tabs-state-disabled {
    opacity: 0.5;
}

.r-tabs .r-tabs-nav .r-tabs-state-active .r-tabs-anchor {
    color: #fff;
    background-color: #27629e;
}

.r-tabs .r-tabs-accordion-title .r-tabs-anchor {
    display: block;
    padding: 10px;
    background-color: #00aadd;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    margin-bottom: 3px;
}
.r-tabs .r-tabs-accordion-title.r-tabs-state-disabled {
    opacity: 0.5;
}
.r-tabs .r-tabs-accordion-title.r-tabs-state-active .r-tabs-anchor {
    background-color: #fff;
    color: #00aadd;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    margin-bottom: 0;
}

#main-tab
{
    padding: 10px;
    color: #4f97cc;
}

#horizontalTab2
{
    color: #4f97cc;   
}

.fix-height
{
    height: 960px;
}

/* yugang style */
#canvasHolder
{
    overflow:hidden;
}

canvas 
{
   position: relative;
   left: -80px;
   top: 50px;
}

#panel .scroll {
    top: 38px;
}

#horizontalTab
{
    background-color: #e7f8fe;
}

#mainnav-wrapper, #panel 
{
    -webkit-transition: top 0.4s ease-out 0.3s;
    transition: top 0.4s ease-out 0.3s;
}

.myButton-info {
    display:inline-block;
    cursor:pointer;
    color:#036eb7;
    padding:6px 6px;
    margin-left: 5px;
    /*width: 20px;*/
    text-align: center;
    text-decoration:none;
}

.myButton-info:hover {
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    background-color: #006eb7;
    padding:6px 6px;
    margin-left: 5px;
    text-align: center;
    text-decoration:none;
}

.myButton-submit {
    background-color:#9cb5c3;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    padding:4px 12px;
    margin-left: 5px;
    width: 100px;
    text-align: center;
    text-decoration:none;
}

.myButton-reset {
    background-color:#67aadc;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    padding:4px 12px;
    margin-left: 5px;
    width: 100px;
    text-align: center;
    text-decoration:none;
}

.myButton-fishInfo {
    background-color:#036eb7;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    padding:4px 12px;
    margin-left: 5px;
    text-align: center;
    text-decoration:none;
}

#panel-wrapper
{
    /*position:relative;*/
    position:absolute;
    top: 48px;
    right: 12px;
    overflow-x:hidden !important;
    margin-right:0px;
    width: 350px;
    z-index: 100;
    padding-bottom: 10px;
}

#panel 
{
    position:relative;
    margin-left: 50px;
    font-size: 12px;
    color: #036eb7;
}

.table-input td
{
    height: 35px;
    border:1px solid #00aadd;
}

.table-result td
{
    height: 30px;
    border:1px solid #00aadd;
}

.table-input input
{
   border: solid 1px #9cb5c3;
   text-align: center;
   color: #036eb7;
   border:1px solid #00aadd;
}

.table-input select
{
   border: solid 1px #9cb5c3;
   color: #036eb7;
   height: 24px;
   /*margin-left: 5px;*/
   background: url(images/yugang/dropdown-arrow.png) no-repeat right white;
   ::webkit-back;
   appearance:none;
   -moz-appearance:none !important; /* Firefox */
   -webkit-appearance:none; /* Safari and Chrome */
   text-indent: 0.01px;
   text-overflow: "";
   width: 75px;
   /*overflow: hidden;*/
   overflow-x:hidden;
   /*overflow: -moz-hidden-unscrollable;*/
   display: inline-block;
   position:relative;
}

@-moz-document url-prefix() {
    .table-input select {
         background: none !important;
    }
}

#select-div
{
    /*width: 75px !important;*/
    margin-left: 5px;
}

/*for IE 10+*/
.table-input select::-ms-expand {
    display: none;
}

.table-input-td3
{
    padding-left: 5px;
}

.ln-shadow
{
    margin-left: -20px;
    height: 22px;
    width: 299px;
    background: url(images/yugang/input-shadow.png) no-repeat top left;
}

#openpanelbutton {
    position: absolute;
    left: -50px;
    top: 0;
    width: 50px;
    /*max-height: 255px;*/
    height: 100%;
    background: url(images/yugang/panel-dark.png) no-repeat top left;
    z-index: 222222222222222222;
}

.panel_footer
{
    background: url(images/yugang/panel-footer.png) no-repeat top left;
    width: 350px;
    height: 50px;
}
 
.panel_content
{
    padding-left: 20px;
    padding-top: 10px;
}

.cal-rasult-panel div
{
    /*padding-top: 10px;*/
}

.panel_content
{
    background-color: white;
}

.panel_header
{
    background-color: #67aadc !important;
    height: 50px;
}

.panel_header p
{
    font-family: 微軟正黑體;
    padding-left: 20px;
    padding-top: 17px;
    color: white;
    font-size:20px;
    font-weight: bold;
}

#openpanelbutton.active {
    background: url(images/yugang/panel-close.png) no-repeat top left;
}

#openpanel {
    font-family: Helvetica, Arial, sans-serif;
    background-position: left bottom;
    background-repeat: no-repeat;
    display: block;
    float: right;
    text-transform: uppercase;
    z-index: 5000;
    margin: 0 5px 0 0;
    width: 30px;
    height: 60px;
}

#tab-header
{
    top: 47px;
    position: absolute;
    height: 153px;
    width: 978px;
    z-index: 90;
     
}

.tab-header
{
    top: 47px;
    position: absolute;
    height: 153px;
    width: 978px;
    z-index: 90;
}
     

.tab-header .tab-logo
{
    position: relative;
    top: 10px;
    left: 10px;
    line-height: 45px;
    /*padding-top: 45px;*/
    padding-left: 45px;
    font-size: 1.5em;
    font-weight: bold;
    /*width: 35px;*/
    color: #036eb7;
    height: 35px;
     
}

.tab-content
{
    position: absolute;
    top: 150px;
    left: 50px;
    width: 860px;
}

#aquarium_info_hometemp
{
    position: absolute;
    left: 270px;
    top: 25px;
}

#aquarium_info_aquariumtemp
{
    position: absolute;
    left: 450px;
    top: 25px;
}

#aquarium_info div {
    float: left;
    margin: 20px;
}

#openpanel .panel-button-text {
    display: none;
}

.result-panel
{
    background-color: #e3eff8;
    padding-bottom: 20px;
    min-height: 600px;
}

.result-panel-close
{
    position: absolute;
    right: 5px;
    z-index: 100;
}

.result-panel-header
{
    padding-left: 20px;
    padding-top: 10px;
    font-size: 26px;
}  

.tab-content table
{
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-top: solid 1px #b3d2e9;
    border-left: solid 1px #f0f6fb;
    border-right: solid 1px #b3d2e9;
    border-bottom: solid 1px #f0f6fb;
}

.tab-content table td
{
    text-align: left;
    border-left: solid 1px #b3d2e9;
    border-right: solid 1px #f0f6fb;
    border-top: solid 1px #f0f6fb;
    border-bottom: solid 1px #b3d2e9;
    padding: 10px;
    color: #036eb7;
}

.tab-content table input
{
   border: solid 1px #036eb7;
   text-align: center;
   color: #036eb7;
}  

.result-panel table
{
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-top: solid 1px #b3d2e9;
    border-left: solid 1px #f0f6fb;
    border-right: solid 1px #b3d2e9;
    border-bottom: solid 1px #f0f6fb;
    width: 96.5%;
}  

.result-panel table input
{
   border: solid 1px #036eb7;
   text-align: center;
   color: #036eb7;
}  

.result-panel table td
{
    text-align: left;
    border-left: solid 1px #b3d2e9;
    border-right: solid 1px #f0f6fb;
    border-top: solid 1px #f0f6fb;
    border-bottom: solid 1px #b3d2e9;
    padding: 10px;
    color: #036eb7;
}

#volumn-table td
{
    text-align: center;
}

#volumn-table img
{
    padding-top: 10px;
}

#volumn-table p
{
    padding: 5px;
}

.result-align-left
{
    text-align: center;
}

.result-div-1
{
    background-color: #67a9db;
    color: white;
    padding-left: 10px;
    margin-left: 5px;
    margin-top: 10px;
    margin-right: 20px;
    height: 28px;
}

.result-div-1
{
   padding-top: 5px;
}

.result-div-2
{
    background-color: #e3eff8;
    color: #27629e;
    margin-left: 5px;
    margin-right: 20px;
    margin-bottom: 22px;
    padding: 10px;
}

.result-div-2 a
{
    display: inline-block;
}

.myButton-detail 
{
    display:inline-block;
    cursor:pointer;
    color:#036eb7;
    /*margin-left: 3px;*/
    /*margin-top: 5px;*/
    /*margin-right: 3px;*/
    padding:3px 6px;
    /*margin: 5px;*/
    /*padding:6px 6px;*/
    /*margin-left: 5px;*/
    text-align: center;
    text-decoration:none;
}

.myButton-detail:hover 
{
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    background-color: #006eb7;
   /* margin-left: 3px;
    margin-top: 5px;
    margin-right: 3px;*/
    padding:3px 6px;
    /*padding:6px 6px;*/
    /*margin-left: 5px;*/
    text-align: center;
    text-decoration:none;
}

.fish-suggest
{
    float: left;
    width: 47% !important;
    margin-right: 5px !important;
}

.clear
{
    clear:both;
}

.AreaYG
{
    width: 100%;
}

.r-tabs-nav2
{
    margin-right: 60px !important;
}

#aquarium_mouse_tip
{
    font-family: 微軟正黑體;
    z-index: 100;
    position: absolute;
    left: 30px;
    top: 85px;
    width: 259px;
    height: 66px;
    background: url(images/yugang/mouse-wheel-tip.png) no-repeat top left;
    padding-left: 105px;
    font-size: 15px;
    padding-top: 22px;
}

.cal-p
{
    text-align: right;
}

.yugang a:link,.yugang a:visited{
	color: #FFF;
	text-decoration: none;
/*	padding-right: 8px;
	padding-left: 8px;*/
	}
	
	.yugang a:hover{
	color: #036;
	text-decoration: underline;
/*	padding-right: 8px;
	padding-left: 8px;*/
	background-color: #FFF;
	}
	
	.yugentit{
	background-color: #27629e;
	color: #FFF;
	padding-top: 8px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
		}
		
		.yugenBox{
	padding-right: 5px;
	padding-left: 5px;
	padding-top: 20px;
			}
			
			.yugenBox .goodsItem{
	margin-right: 8px;
	margin-left: 8px;
	padding-right: 5px;
	padding-left: 6px;
				}


.ygnowitem{
    color:yellow;
}

#default_yugang
{
  
}

#default_yugang p
{
    position: relative;
    bottom: 30px;
    color: red;
    text-align:  center;
}

#aquarium_sand_info
{
    font-family: 微軟正黑體;
    z-index: 100;
    position: absolute;
    left: 350px;
    top: 135px;
    width: 259px;
    height: 66px;
    background: url(images/yugang/sand-info-tip.png) no-repeat top left;
    padding-left: 65px;
    font-size: 15px;
    padding-top: 22px;
}