/* www responsive - modify mercola-common.css */

html { background:#F7F7F7; }
body { min-width:1px !important; }

.span_1_of_2, .span_2_of_2 { width:49.2%; }

.visitfitness { border: 2px solid #D6E9F3; width:auto; float:none; height:175px; }
.visithp { border: 2px solid #ffe5aa; width:auto; float:none; height:175px; }
.visithp { background: url(//media.mercola.com/assets/images/mercola/hp.jpg); }
.visitfitness { background: url(//media.mercola.com/assets/images/mercola/fit.jpg); }
.visithp h3, .visitfitness h3 { font:bold 22px Arial; line-height:22px; text-align:left; padding-top:45px; padding-left:25px; }
.visithp h3 { width: 100px; }
.visitfitness h3 { width: 120px; }
.visithp a:link {text-decoration: none;}
.visithp a:hover { text-decoration:underline}
.visithp a {    
	cursor:pointer; color:#802604;
	margin: 0px;
    padding: 0px;
    font-size: 100%;
    vertical-align: baseline;
    background: none repeat scroll 0% 0% transparent;}
	
.abtdocbox { border: solid 2px #d6e9f3; font: normal 14px arial; padding:15px 20px; margin-bottom:10px; width:258px }

.abtdocbox {background: url(//media.mercola.com/assets/images/mercola/aboutdoc-hmbg.jpg) no-repeat}
.abtdocbox h1 { padding-bottom: 5px; font-size: 22px; }
.abtdocbox h3 { margin:0; padding-left:0; }
.abtdocbox p { font-size: 13px; }

.genericbox { border: solid 2px #d6e9f3; font: normal 14px arial; padding:15px 20px; margin-bottom:10px; }
.genericbox h1 { padding-bottom: 5px; font-size: 22px; }
.genericbox h3 { margin:0; padding-left:0; }
.genericbox p { font-size: 13px; }

.vitdside {
	height: 178px;
    background: url("//media.mercola.com/assets/images/vitd-large.jpg") no-repeat scroll 0 0 transparent;
    padding: 30px 20px 20px 20px;
    margin-bottom: 10px; 
}

.vitdside p { width: 150px; font-size: 18px; color: white; }
.vitdside a img { padding-top:30px; }

.cokeside  {
	height: 228px;
    background: url("//media.mercola.com/assets/images/mercola/cokejoke-large.jpg") no-repeat scroll 0 0 transparent;
    padding: 20px;
    margin-bottom: 10px; 
}

.cokeside p { width: 140px; font-size: 36px; color: white; }
.cokeside a img { padding-top:20px; }

.IEheight { height:100% }
.www-pad { margin-bottom:10px; padding:10px; }
.articles-box { border: 2px solid #D6E9F3; position: relative; padding-bottom: 10px; margin-bottom: 15px; }
.articles-box h1 { font-size:24px; }
.articlelistdiv { margin-left:0 !important; overflow: visible !important; font-size:13px !important; float:none !important; width:auto; }
.articlelistdiv div { margin: 5px 0 !important; color:gray }
.articlelistdiv h2 { font-size:18px; margin:0 !important; }
.imagearticle { height:87px; width:122px}
.home-articles { padding:10px 0 0 0; }
.home-article-thumb { width:205px; float:left; height:150px }
.home-article-thumb img { border:1px solid #e1e1e1; padding:1px; float:left; width:187px; height:135px}
.views-comments { font-size:12px !important; color:gray; margin:5px 0; }
.gray { color: #D9D9D9; padding: 0 5px; }
.social-text { float:left !important; }
.search-textbox { width: auto !important; float: none !important; }
#partners-footer { min-width:1px !important; }
#sidr-id-mainnav li { margin:0; }
nav li a:hover { color:white; }
nav li a.active { color:#0869BD; }
nav li a.active:hover { text-decoration:underline; }
#wrapper { background: none }
#page { background:none; text-align:left; }
#footer-links li { margin-left:5px !important }
#footer-links a:hover { text-decoration:underline; }


@media screen and (max-width: 969px)
{
	.vitdside {  padding:10px 20px;  background:#3867c3; height:auto; }
	.vitdside p { float:left; width:auto; padding-top:5px; margin:0; font-size:18px; }
    .vitdside a img { padding: 0px 10px 0 0; width: 110px; height: 35px; float: right;  }
    
    .cokeside {  padding:10px 20px 10px 20px;  background: #e61e2b; height:auto; }
	.cokeside p { float:left; width:auto; padding-top:10px; margin:0; font-size:18px; }
    .cokeside a img { padding: 0px 10px 0 0; width: 110px; height: 40px; float: right;  }
    
    h1 { font-size:24px; }
    #headcontainer { display: block; position: fixed; width: 100% !important; z-index: 200 !important; }
    #maincontentcontainer { margin-top:60px; }
    nav li { margin:0; }
    nav li a:hover { color:#0869BD; text-decoration:none; }
    nav li a.active:hover { text-decoration:none; }
   
    .span_1_of_2, .span_2_of_2 { width:49.2%; }
    
    .visithp, .visitfitness { height: auto; border: 2px solid #D6E9F3; width:auto; float:none; }
    .visithp { background: url("//media.mercola.com/assets/images/mercola/hp-sidelogo.jpg") no-repeat scroll center 10px rgba(0, 0, 0, 0); margin-right:10px;}
    .visitfitness { background: url("//media.mercola.com/assets/images/mercola/fitness-sidelogo.jpg") no-repeat scroll center 10px rgba(0, 0, 0, 0); }
    .visithp h3, .visitfitness h3 { margin:30px 0px 20px 0; text-align: center; width: auto; }
    
    #wrapper { background: #f7f7f7 }
    #page { background: #f7f7f7 !important }
    .search-icon,  #responsive-menu-button { padding-top: 25px; }
}

@media screen and (max-width: 900px) 
{
	.span_1_of_2, .span_2_of_2 { width:50%; }
}

@media screen and (max-width: 480px) 
{
	.visithp, .visitfitness { width:auto; height: auto; background:white; border: 2px solid #D6E9F3; margin-bottom:10px; }
	.visithp { background: url("//media.mercola.com/assets/images/mercola/hp-sidelogo-2.jpg") no-repeat scroll center 10px rgba(0, 0, 0, 0); margin-right:0px !important; }
	.visitfitness { background: url("//media.mercola.com/assets/images/mercola/fitness-sidelogo-2.jpg") no-repeat scroll center 10px rgba(0, 0, 0, 0); }
	.visithp h3, .visitfitness h3 { font-size: 16px !important; margin: 40px 0 0 0; padding:10px; }
	
	.vitdside a img, .cokeside a img { float: left; margin-top:10px; }
	.cokeside p { font-size:18px; margin-right:10px; }
	
	.home-article-thumb img { width:100px !important; height:72px !important; }
	.home-article-thumb { width: 115px !important; float: left; height: 78px !important; }
	
	.span_1_of_2, .span_2_of_2 { width:100%; }
}

/*iphone landscape*/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape)  
{
	.vitdside a img { float:left !important }
	}
