/* CSS Document */

.red_trans {background:url(../images/idacol/red_trans_bg.png);}

.green_trans {background:url(../images/natracol/green_trans.png);}

.pink_trans {background:url(../images/essenzia/pink_trans.png);}

.org_trans {background:url(../images/simpsons/org_trans.png);}



@media screen and (min-width: 700px) {

.inner_page_container {
  padding: 0px 10px;
  margin: 0px auto 15px;
  /*position: relative;
  overflow: hidden;*/
  max-width:980px;
  width: auto;
  display:block;
}

.banner {width:100%; max-width:980px; height:auto; border: 1px solid #ddd; margin:0px 0px 20px;}

.banner img {width:100%; display:block;}

.left_div {width:66%; height:auto; float:left;}

.brandinfo_box {/*max-width: 608px;*/ width: auto; padding:20px 20px 5px 20px; border-width: 4px 1px 1px 1px; border-style:solid; border-color:#ddd; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:13px; color:#333; margin-bottom:15px;}

.type_box {width:auto; height:78px;  border:1px solid #ddd; margin: 0px 0px 15px 0px; position:relative; background-repeat:no-repeat; background-position: right center; font-size:18px;}

.type_box a {width:100%; height:100%; display:block; padding:0px; background: url(../images/type_trans.png) repeat-y right top; color:#333; text-transform:uppercase;}

.type_box a span {width:auto; height:auto; display:table; padding:0px 25px; position:absolute; margin:auto; left:0px; right:0px; top:0px; bottom:0px;}

.certificate_box {width: 31%; /*max-width: 320px;*/ height: auto; min-height:300px; float: right; border:1px solid #ddd; margin: 0px 0px 0px 0px; text-align: center;}

.certificate_box .cert_title {width:auto; height: auto;  /*background:#FFF;*/ padding: 13px 0px; margin-bottom:10px; font-size:18px; color:#fff; text-align:center;}

.certificate_box .cert_each_box {width: 40%; height: auto; margin: 0px 2% 21px; display:inline-block; text-align:center; vertical-align: middle;}

.certificate_box .cert_each_box img {width: auto; max-width:100%;}


}

@media screen and (max-width: 699px) {
	
.inner_page_container {
  padding: 0px 10px;
  margin: 0px auto 15px;
  /*position: relative;
  overflow: hidden;*/
  max-width:980px;
  width: auto;
  display:block;
}

.banner {width:100%; max-width:980px; height:auto; border: 1px solid #ddd; margin:0px 0px 15px;}

.banner img {width:100%; display:block;}
	
.left_div {width: auto; max-width:100%; height:auto; float:left;}

.brandinfo_box {/*max-width: 608px;*/ width: auto; padding:10px 10px 5px 10px; border-width: 4px 1px 1px 1px; border-style:solid; border-color:#ddd; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:13px; color:#333; margin-bottom:15px;}

.type_box {width:auto; height:78px;  border:1px solid #ddd; margin: 0px 0px 15px 0px; position:relative; background-repeat:no-repeat; background-position: right center; font-size:18px;}

.type_box a {width:100%; height:100%; display:block; padding:0px; background: url(../images/type_trans.png) repeat-y left top; color:#333; text-transform:uppercase;}

.type_box a span {width:auto; height:auto; display:table; padding:0px 15px; position:absolute; margin:auto; left:0px; right:0px; top:0px; bottom:0px;}

.certificate_box {width:100%; /*max-width: 320px;*/ height:auto; min-height:300px; float: left; border:1px solid #ddd; margin: 0px 0px 0px 0px; text-align: center;}
	
.certificate_box .cert_title {width:auto; height: auto;  /*background:#FFF;*/ padding: 13px 0px; margin-bottom:10px; font-size:18px; color:#fff; text-align:center;}

.certificate_box .cert_each_box {width: 20%; min-width:70px; height: auto; margin: 0px 5% 21px; display:inline-block; text-align:center; vertical-align: middle;}

.certificate_box .cert_each_box img {width: auto; max-width:100%;}
	
	
}

@media screen and (min-width: 400px) {
.banner .b_b {display:block;}

.banner .b_s {display:none;}
}


@media screen and (max-width: 399px) {
.banner .b_b {display:none;}

.banner .b_s {display:block;}

.color_name {font-size:14px !important; font-weight:bold;}
}

.type_title {font-size:18px; font-family: 'Coda', Arial, sans-serif; margin-bottom:20px;}

.brandinfo_box p {margin-bottom:15px;}

.brandinfo_box ul {margin:0px 0px 0px 15px; }

.brandinfo_box ul li {margin-bottom:10px;}

.brandinfo_box ul ul {margin-top:10px;}

.brandinfo_box ul.green {list-style-image:url(../images/natracol_n/bull.png);}

.type_box a {-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
-webkit-transition: all .5s ease-in;
transition: all .5s ease-in;}

.type_box a:hover {background:url(../images/type_trans.png) repeat-y -700px top;
text-shadow: 1px 0px 2px #fff, -1px 0px 2px #fff, 0px 1px 2px #fff, 0px -1px 2px #fff; 
box-shadow: inset 0px 0px 10px #ccc; -webkit-box-shadow: inset 0px 0px 10px #ccc; -moz-box-shadow: inset 0px 0px 10px #ccc;
 }

.type_box a.red:hover {color:#ed1d24;}

.type_box a.green:hover {color:#20bf41;}

.type_box a.drkgreen:hover {color:#006738;}	

.certificate_box {
background: #eeeeee; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #eeeeee 0%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #eeeeee 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #eeeeee 0%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #eeeeee 0%,#ffffff 100%); /* IE10+ */
background: linear-gradient(to bottom,  #eeeeee 0%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
}




.color_box {width: auto; height:auto; border: 1px solid #ddd; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; margin-bottom:15px;}

.color_name {width: auto; height:auto; min-height:27px; padding:8px 25px 5px 45px; font-size:16px; color:#333; background:url(../images/plus_minus.png) no-repeat right top; cursor:pointer; position:relative;}

.color_name.no_pad {padding-left:25px !important;}

.openheader {background:url(../images/plus_minus.png) no-repeat right -80px;}

.color_name .color_div {width:28px; height:28px; display: block; margin:0px 0px 0px 0px; border: 1px solid #ddd; position:absolute; left:5px; top:5px;}

.color_name .bullet_bod {border-width:8px; border-style:solid; border-color:#fff; width:auto; height:auto; display: block; margin:0px 0px 0px 0px; position:absolute; left:10px; top:11px;}

.color_name span {display:inline-block; clear: left; }

.color_info_box {width: auto; height:auto; border-top: 1px solid #ddd; padding:15px; font-size:13px; color:#333;}

.color_info_box p {margin-bottom:15px; line-height:18px;}

.color_info_box p .shade {width:100%; max-width:300px; height:23px; vertical-align:middle; border: 1px solid #eee;}



.color_info_box p .light {width:225px; height:40px; display:inline-block; vertical-align:middle; background:url(../images/shades/sun_g.png) repeat-x;}

.color_info_box p .light .light_scale {width:auto; height:40px; display:block; background:url(../images/shades/sun.png) repeat-x;}


.color_info_box p .heat {width:225px; height:40px; display:inline-block; vertical-align:middle; background: url(../images/shades/temp_g.png) repeat-x;}

.color_info_box p .heat .heat_scale {width:auto; height:40px; display:block; background:url(../images/shades/temp.png) repeat-x;}


.color_info_box p .ph_scale_box {width:225px; height:50px; display:inline-block; background:url(../images/shades/ph_scale.png) center bottom no-repeat; vertical-align: top;}

.color_info_box p .ph_scale_box .ph_scale {width: auto; height:6px; border:1px solid #bbb; margin-top:5px; display:block; background:url(../images/shades/scale.png) #bbb;}

.color_info_box ul {margin-bottom:15px;}

.color_info_box ul li {width:170px; padding: 0px 15px 0px 10px; margin-bottom:5px; display:inline-block; list-style:none; background:url(../images/shades/bull.png) left 6px no-repeat; vertical-align:top;}

.color_info_box hr {height:1px; border:0px; background:url(../images/dot_line.png);}


.regulations {font-size:9px; color:#666; display: block; border-top: 1px solid #e6e6e6; padding-top:10px;}


.new_tag {width:53px; height:35px; background:url(../images/new_lbl.png) no-repeat; position:absolute; top:-15px; left:-7px;}

.prod_img {float:right; margin:0px 0px 10px 15px;}

@media screen and (max-width: 600px) 
{    
    .prod_img {margin:0px auto 10px auto; float:none; width:100%; max-width:250px;}
}