/* 
css reset
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/  
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}:focus{outline:0}body{line-height:1;color:black;background:white}ol,ul{list-style:none}table{border-collapse:separate;border-spacing:0}caption,th,td{text-align:left;font-weight:normal}blockquote:before,blockquote:after,q:before,q:after{content:""}blockquote,q{quotes:"" ""}

/* 
clear fix
http://www.webtoolkit.info/css-clearfix.html
*/
.clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.clearfix{display:inline-block}html[xmlns] .clearfix{display:block}* html .clearfix{height:1%}

/*
classes reutilizaveis
*/
.imgrpl{display:block;font-size:1px;text-indent:-9000px;}
.show{display:block;}
.hide{display:none;}
.hidden{visibility:hidden;}
.nb{border:none;background:transparent;}
.fl{float:left;display:inline;}
.fr{float:right;display:inline;}
.cb{clear: both;}
.selfix{vertical-align: 0 !important;vertical-align: -2px;}
.radfix{width:13px !important;height:13px !important;width:15px;height:15px;vertical-align: -2px;border:none;background:none;padding:0;margin:0;}

/* 
uso geral
*/ 

/* fonte */
body,div,td,p,span,input,select,textarea {font: 12px tahoma, sans-serif;color:#000;}

body {
	background: #c7e9ff
}
/* forms  */
input,select,textarea{border: 1px solid #000;background: #fff;color: #000;}
textarea{overflow:auto;}

/* links */
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:active{text-decoration:none;}
a:hover{text-decoration:underline;}

/* sirf */
@media screen {
	.sIFR-hasFlash h3.tit_green, .sIFR-hasFlash h3.tit_watergreen {
		visibility: hidden;
		font-family: Arial;
		font-size: 18pt;
		height: 29px;
	}
	.sIFR-hasFlash h3.tit_green {color: #0c6128}
	.sIFR-hasFlash h3.tit_watergreen {color: #97cbb5}
}

/*
estrutura
*/
#container {
	display: block;
	width: 1000px;
	height: 606px;
	/*margin: auto;*/
	left: 50%;
	top: 50%;
	margin-top: -303px;
	margin-left: -500px;
	position: absolute;
	background: url(../img/bg.jpg) no-repeat;
}

#header {
	display: block;
	width: 690px;
	height: 110px;
}

#content {
	display: block;
}
	
#sidebarleft {
	display: block;
	float: left;
	width: 15%;
	border-right: 1px solid #999;
}
		
#main {
	display: block;
	float: left;
	width: 650px;
	text-align: center;
	position: relative;
}
		
#sidebarright {
	display: block;
	float: right;
	width: 340px;
}
	
#footer {
	display: block;
	border: 1px solid #999;
}


/*================ títulos  */
h1.tit_propel {
	width: 527px;
	height: 80px;
	margin: 25px 0 0 9px;
	text-indent: -9999px;
	background: url(../img/tit_hydractive.png) no-repeat;
	
}
h2.gatorade {
	width: 80px;
	height: 85px;
	margin: 19px 16px 0 0;
	text-indent: -9999px;
	background: url(../img/tit_gatorade.png) no-repeat;
	
}
h3.zero_cal {
	width: 79px;
	height: 103px;
	margin: 35px 0 0 256px;
	text-indent: -9999px;
	background: url(../img/tit_zerocal.png) no-repeat;
}
h3.em_breve {
	width: 84px;
	height: 36px;
	top: 355px;
	left: 83px;
	text-indent: -9999px;
	position: absolute;
	background: url(../img/lbl_em_breve.png) no-repeat;
}

/*================= main */
.garrafa {
	margin-top: 11px;
}

.scroll {
	width: 330px;
	height: 421px;
	overflow: auto;
}
.area_scroll {
	margin-top: 45px;
	width: 250px;
}
/* lista */
dl.descricao dd p {
	color: #4e5c90;
	font-size: 13px;
	margin-bottom: 10px;
}
dl.descricao dd.referencia p {
	font-size: 10px;
	margin-bottom: 2px;
}
dl.descricao dt {
	color: #112168;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 10px;
}



/* plugin */
.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
	background: url(../img/scroll_barra.png) no-repeat center top;
}
.jScrollPaneDrag {
	position: absolute;
	background: url(../img/scroll_drag.png) no-repeat center ;
	cursor: pointer;
	overflow: hidden;
}
.jScrollPaneDrag:focus {
	cursor: -moz-grabbing;
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowUp:hover {
	/*background-color: #f60;*/
}

a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowDown:hover {
	/*background-color: #f60;*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	/*background-color: #f00;*/
}