body {margin:auto; margin-top: 0px; margin-bottom: 10px; font-size:19px;font-family:"Roboto Slab",serif; color:#222244;line-height:1.5; margin-left: 0px;text-underline-position: under;}

H1{text-align: center; margin-bottom:20px;font-size:42px;font-weight: normal;line-height:normal;}
H2{font-size:30px;font-weight:normal;line-height:normal;padding: 15px 5px 2px 340px; text-underline-position: auto; background-clip:content-box; max-width: calc(60vw - 250px)}

.product-name {text-align: center; margin-bottom:20px;font-size:42px;font-weight: normal;line-height:normal;margin-top:20px;}  
/* because product names shouldn't be H1, so subhead becomes H1 on product pages */

.whatsnew{font-size:30px;font-weight:normal;line-height:normal}

.tiny{font-size:13px;font-family:Verdana,sans-serif;line-height:normal;display:inline-block;}

.textcent {text-align: center;}
.textleft {text-align: left;}
.textindent {margin-left: 40px;}

a:link{color:#114466}   /* must be in this order */
a:visited{color:#114466}
a:hover, a:focus{color:#DD0000}

.checkmark {color:#126412; font-family:verdana,sans-serif;}  /*because Roboto check mark is faint*/

HR {background-color:#9999BB;height:2px;border:none;}
IMG {border: 0px}
S {text-decoration-color:#CC0000; text-decoration-thickness: 3px;}
.textfield{font-size:18px; margin:3px;font-family:"Roboto Slab",serif; max-width:80%} 
/* formats placeholder in edit fields  - does not follow body tag*/

#skiptocontent a{position:absolute;left:45%;top:-40px;}
#skiptocontent a:focus{top:-0px; color:#DD0000; background-color:white;}

/* top banner block*/
.banner {height:70px; min-width: 980px; margin-bottom: 2px; margin-left: 20px; margin-right:20px;}

.banner-logo {float:left;margin-top: 10px; width: 301px; height: 59px;}

#topmenu-header{float:left;margin-left: calc(50vw - (151px + 320px + 100px + 20px));display:flex; justify-content: space-between; flex-wrap: nowrap; font-size:14px;font-weight:bold;margin-top:35px;text-decoration: none;line-height: 1.25;width: 640px;}
/* must be id not class because used by dropdown.js */

#condensed-menu-search {display:none}
#mobile-menu-glyph {display:none;}
#mobile-menu-header {display:none;}
#mobile-menu-search {display:none;}

.submenu {width: 350px; font-size:14px; font-weight: bold; z-index:100; background-color: NAVAJOWHITE; line-height:1.6; display:none; padding-top: 10px; padding-bottom: 10px;position: absolute; left:-70px;top: 36px; text-align:left; border-style:solid; border-width: 0 1px 1px 1px; border-radius: 5px;}
.submenu-header{position:relative; display:inline; cursor:pointer;text-align: center;}
.submenu-subhead {margin-left: 15px; padding-top:7px;}
.submenu-item a {color: #222244; padding: 1px 10px 1px 10px; text-decoration: none; margin-left: 30px;}
.submenu-item a:hover,a:focus{color: #EEEEEE; background-color:#222244;background-clip: padding-box}
.camera {vertical-align:middle; margin-right:5px; width:18px; height:18px;}

.social-block {float:right; width:200px; height: 65px; overflow:hidden;}
.search-block {margin-top:10px; margin-bottom:5px;margin-left:57px;}
.search-submit {width:16px; height: 18px; cursor: pointer}
.false-social-block {display:none}

.banner-mailboxes {min-width: 855px; width:100%;}
.banner-subhead {margin-left:10%; margin-right:10%;font-size:20px;font-weight: normal;} 

/* end top banner block*/

.main-content {width: 100%; margin:auto; max-width: 1500px;}

.left-column {float: left; max-width: 380px; width: calc(50vw - 478px); min-height:20px;}
.center-column {float:left; width: 740px; max-width: calc(75vw - 220px); padding-left: 30px; border-left: 2px solid #EFEFC6;}
.winmac {margin-top: 100px;} 

.left-column-intro {float: left; width: 450px; max-width:100vw;margin-left:20px; margin-bottom:20px; padding-left: 20px; padding-right:20px;background-color: #03092E;}
.center-column-intro {float:left;width: 900px; min-width: 400px; max-width: calc(100vw - 600px); padding-left: 30px; margin-left: 30px}

.printouts {display:flex; align-items:center; max-width:500px; margin-left:100px;}
.radiolabel {display: block;margin-top: -30px; margin-left: 50px;}
.topicslist-left {width: 50%; float:left; margin-right:20px;}
.topicslist-right {width: calc(50% - 20px); float:left;}
.callout {margin:auto; width:90%; max-width:700px; margin-top:30px; margin-bottom:0px; padding:7px 10px 10px 10px;background-color: NAVAJOWHITE; border-radius: 7px;}
.leaderboard {padding-top: 50px; margin:auto; margin-bottom: 5px; width:95%; max-width:728px; max-height:90px;}
.product-selector-box {float:left; width:290px; height: 100%; border: 1px solid blue;border-radius:5px;margin-bottom: 30px; margin-right: 25px; padding: 5px 10px 10px 10px;}

.right-column {float:left; width: 160px; padding-left: 25px;}
.right-column-product {float:left; width: 210px; padding-left: 35px;}
.ratingsbox {margin-top: 170px; padding: 10px; border: 2px solid gold; border-radius: 7px;}

.submit-button {font-size:16px;font-weight:bold; padding: 5px 15px 5px 15px;background-color:navajowhite; border-radius: 10px;}
.submit-button:hover,.submit-button:focus {color:white;background-color:darkgreen;cursor:pointer;}

.footer{font-size:15px;line-height:1.35;display:block;} 
.footer-rule {width: 220px; float: left;}
.footer-block {width: 940px; padding-left: 10px; padding-top: 10px; padding-bottom: 25px; padding-left: 10px; margin:auto; clear: both;}
.footer-split-left {float: left; width: 350px; margin-right: 60px;}
.footer-split-right {float: left; width: 400px; padding-top: 10px; padding-bottom: 10px;}
/* footer also used for partners list style*/

.login-container {position:fixed;top:50%;left:50%;width:320px; height:320px; margin-left:-160px; margin-top:-200px;}
.login-content {font-size:15px; color: #000077; background-color:#F0F8FF; width:300px; height:300px; max-width: 85%; border-radius:5px 5px 0px 0px; border: 1px solid black; padding-left:15px; padding-top:5px; padding-right:20px; line-height:1.3; margin:auto;}

.help-container {position:fixed; right: 10px; bottom: 0px; border-width: 1px 1px 0 1px; border-style:solid; border-color:#222244; border-radius: 5px 5px 0 0;}
.help-content {font-size:15px;font-weight:bold; background-color:NAVAJOWHITE; width:240px; border-radius:5px 5px 0px 0px; padding-left:15px; padding-top:5px; padding-right:20px; line-height:1.3;}
.help-filter{display:none}
#helpheader-mobile {visibility: hidden}

/*special page formats*/

/*partners page*/
.partners-content {width: 90vw; max-width: 1500px; margin:auto; } /* should be no wider than total width of columns - content style is footer*/
.statehead {min-width: 190px; font-size:18px;font-weight:bold;background-color:#E6E6BE;}
.partner-listing{font-size:18px;} 

/*walkthrough pages*/
.walkthroughblock {width: 1110px; margin:auto;max-width:100%;display:flex; padding-bottom:20px; margin-bottom:50px; justify-content: space-around; align-items: center; flex-wrap:wrap-reverse;}
.walkthroughblock-imageblock {max-width:700px; text-align: center;padding-left:10px;padding-right:20px;}
.walkthroughblock-image {max-width:75%; height:auto;}
.walkthroughblock-caption {width: 30%; min-width:300px; padding-left: 20px; padding-right:20px;padding-bottom:20px;}

/*rates pages*/
.ratecalculator {background: #EEEEEE; padding: 10px 20px 10px 20px;}

/*deliver-page cgi*/
.deliver-header {width: 800px; margin:auto; padding-top: 10px;}

/*order pages*/
.order-product-block {margin-bottom:15px; padding: 15px; background-color: #EEEEEE;}
.order-head{font-weight:bold;margin-bottom:0;line-height:normal;text-underline-position: auto}
.order-item {margin-top: 5px; margin-bottom:15px;}

/*move update page*/
.put-above-for-mobile {width: 35%; margin-right:100px; float:left;} 
.put-under-for-mobile {width: 35%; float:left;}

/*settings for search*/
#ss360-search-result-heading{font-size:24px;} /*found count*/
#ss360-layer h3.content-group-heading {font-size:22px; color:#222244; ;background-color:#ffffff; margin: 0; padding: 15px 0 0 0;}
#ss360-layer h3.content-group-heading::after {content: ":";}
#ss360-layer a:focus{ background-color: transparent; }

.video-container {position: relative; padding-bottom: 50%; padding-top: 35px; width:100%; height: 100%; overflow: hidden;}
.video-container iframe {position: absolute;top:0;left: 0;width: 100%;height: 100%;}
    
@media screen and (max-width: 1600px) {
    H2 {padding-left: calc(120px + 6vw)}
}

@media screen and (max-width: 1300px) {
    .social-block {display:none}
    #condensed-menu-search {display:inline}
    #topmenu-header{margin-left: calc(50vw - (151px + 275px + 20px)); width: 550px}
   .false-social-block {display:inline}  
    .left-column {max-width: calc(50vw - 398px); visibility:hidden; height:0px;}
    .center-column {max-width: 75vw}
    .right-column {display: none}
    .right-column-product {float:none; clear:both;width: 1200px;max-width: 75vw;margin-left: 5vw}
    .ratingsbox {width:90%; margin-top:10px;margin-left:0px}
    H2 {padding-left: calc(4vw - 10px); max-width: 95%}
}
     
@media screen and (max-width: 900px) {     

    .banner {min-width: 0px; margin-bottom: 10px; margin-left:0px; margin-right:0px;}
    .banner-logo {margin-top: 12px; margin-left:5px; max-width: calc(100vw - 100px); height: 59px;}
    
    #condensed-menu-search {display:none}
    #mobile-menu-glyph {display:inline; float:left; height: 18px; margin-top: 15px; margin-left: 40px; cursor:pointer;}
    #mobile-menu-header {display:inline; cursor:pointer;font-family: sans-serif;font-size:24px; margin-left:85%;}
    #mobile-menu-search {display:inline;margin-top: 0px; margin-bottom:10px;}
    
    .search-submit {width:16px; height: 18px; cursor: pointer}
    #mobile-search-icon {float:left; margin-top: 3px; margin-left: 15px; padding: 3px; background-color: white}
    
    #topmenu-header {flex-direction:column; position:fixed; top: 75px;left: 0px;  height: auto;  width:99vw; margin-top:0px; margin-left:0px; margin-bottom:10px; background-color:navajowhite;padding-left:10px;padding-bottom:15px;visibility:hidden; text-align: left;border:1px solid #222244;border-left:0px;z-index:100;}
    
    .submenu-header {left: 0px; margin-bottom:10px;margin-top:10px;padding-left: 10px; padding-right: 5px;text-align: left;}
    
    .submenu {left: 0px;top:40px; height: auto; width:98vw; margin-left:0px; border-style:solid; border-width: 1px 0px 1px 0px; padding-bottom: 10px;background-color:navajowhite;padding-left:5px;padding-right:5px;}
    
    .submenu-subhead {margin-left:0px;line-height: 1.4;padding-top:10px; padding-left:2px;padding-right:5px;}
    .submenu-item {margin-left:0px;padding-left:12px;line-height: 1.2;padding-right:5px;}
    .submenu-item::before {content: "\2219"; color:#224444; font-weight:bolder; font-size:20px}
    .submenu-item a {margin-left:0px;padding-left:12px;line-height: 1.2;padding-right:5px;}
    
    .banner-mailboxes {height:100px; min-width: 0px; width:100%; margin-bottom:10px;}
    .banner-head {width: 95%; margin:auto;}  
    .banner-subhead {margin-left:0%; margin-right:0%;margin-top:5px;} 
    /* end top banner block*/
    
     H2 {padding-left: 10px; max-width: 95%}
    .right-column-product {width: 900px;}
    .ratingsbox {width:90%}
}
    
@media screen and (max-width: 600px) {     
    
    H2 {width: 90%;padding-left: 10px; padding-right:10px;max-width: 90%}
    .textindent {margin-left: 0px;}
    UL {margin-left: 5px;margin-right: 0px;padding-left: 10px;padding-right: 0px;}
    OL {margin-left: 5px;margin-right: 0px;padding-left: 10px;padding-right: 0px;}
    
    .left-column {display:none}
    .center-column {float:none; width: 90%; max-width: 90%; margin: auto; padding-left: 0px;padding-right: 0px; border: 0px;}
    
    .left-column-intro {min-width: 90vw; max-width: 90vw;margin-left:0px;margin-right:0px;}
    .center-column-intro {min-width: 90vw; max-width: 90vw; margin-left:0px;margin-right:0px;}

    .right-column-product {width: 90%;max-width: 90%;margin: auto;}
    .ratingsbox {width:90%}
    .printouts {display:flex; align-items:center; max-width:500px;margin-left:0px;}
    .leaderboard {display: none}
    .product-selector-box {border-width: 2px;}

    .topicslist-left {width: 100%; float:left}
    .topicslist-right {width: 100%; float:left}
    
    .footer-block {width: 95%; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; margin:auto; clear: both;}
    .footer-split-left {width: 100%; float:none;}
    .footer-split-right {float:none; margin-top:10px; width: 100%}
    
    .help-container {right: 0px; border: 1px solid lightgray}
    #helpheader {visibility: hidden}
    #helpheader-mobile {visibility:visible; right: 10px;}
    
/*move update page*/
    .put-above-for-mobile {width: 100%; float:none}
    .put-under-for-mobile {float:none; margin-top:10px;}

/* partners page*/
    .partners-content {width: 260px; margin:auto;}
    
/*deliver-page cgi*/
    .deliver-header {width: 95%; padding: 4px; border: 0px;}
	
/*order pages*/
    .order-product-block {width: 90%; margin:auto; margin-bottom:15px;}
    .order-item {margin-left: 15px;}

/*scott bottom pic smaller to widen text - for some reason changing width and height doesn't work*/
    #scott {max-width:102px; max-height: 96px;}
}