/* 
  ------------------------------------------------
 Main CSS for Whole Grain Design site
  ------------------------------------------------
*/

body { font-family: "Open Sans Condensed", Optima, Helvetica, Arial, sans-serif; color: #182045; margin: 0px; padding: 0px; font-size: 1em; padding-bottom: 4em; background-color: #ecf0f1; }
img { vertical-align: bottom; }
.masthead { text-align: left; background-color: #2c3e50; position: relative; z-index: 10; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 45px; }
.content-wrapper { margin: 2em 1.25em 0em 1.25em; overflow: hidden; }
.columns-wrapper { overflow: hidden; background-color: #bdc3c7; position: relative; max-width: 1260px; margin: 0px auto 20px; }
.menu-top-wrapper { max-width: 1260px; margin: auto; }
.full-width { max-width: 1260px; margin: auto; padding: 0px 48px; }
.morebottomspace{margin-bottom: 20px;}
#logothumbs { line-height: 4.5em; margin: 2em auto; max-width: 821px; }
#webthumbs { line-height: 4.5em; margin: 2em auto; max-width: 867px; }
#printthumbs { line-height: 4.5em; margin: 2em auto; max-width: 830px; }
#logothumbs img, #webthumbs img, #printthumbs img { border: 1px solid #999999; margin: 5px; }
#graph { padding: 5px; max-width: 821 px; width: 80%; margin: 0px auto 2em; }
.attrib{color: #27ae60; text-align:center !important;}
.lede{ color: #000000; font-weight: bold; }
.floatLeftflush{ float: left; margin-right: 1em; margin-top: 1em; }
.nobackground{ background: transparent !important; }


/*Columns Structure*/
.column-1, .column-2, .column-3 { float: left; width: 32.5%; }
.column-2 { margin-left: 1.25%; margin-right: 1.25%; }
.column-1 .content, .column-2 .content, .column-3 .content, .full-width .content { padding: 20px 24px; }
.content p, .full-width p { line-height: 1.65; }
.full-width p { color: #333; }

/*Bargraph Structure*/
.bargraph { list-style: none; padding-top: 20px; max-width: 750px; width: 80%; margin: 0px auto; padding-left: 0px; }
ul.bargraph li { height: 35px; color: white; text-align: left; font-weight: bolder; font-size: .9em; line-height: 2.25em; padding: 0px; margin-bottom: 5px; list-style-position: inside; list-style-image: none; list-style-type: none; }
.barlabel { margin-left: 0.2em; }
.axislabelleft { float: left; color: #666; }
.axislabelright { float: right; color: #666; }
ul.bargraph li.reddeep { background: #c0392b; width: 100%; }
ul.bargraph li.redlight { background: #e74c3c; width: 98%; }
ul.bargraph li.orangedeep { background: #d35400; width: 95%; }
ul.bargraph li.orange { background: #e67e22; width: 95%; }
ul.bargraph li.greendeep { background: #27ae60; width: 95%; }
ul.bargraph li.green { background: #2ecc71; width: 95%; }
ul.bargraph li.tealdeep { background: #16a085; width: 75%; }
ul.bargraph li.teal { background: #1abc9c; width: 40%; }
ul.bargraph li.bluedeep { background: #2980b9; width: 30%; }
ul.bargraph li.blue { background: #3498db; width: 20%; }
ul.bargraph li.xaxis { height: 35px; width: 100%; border-top: thin dashed #666; border-bottom: thin dashed #666; }

/*Heading styles*/
h1, h2, h3, h4 { margin: 30px 0px 0px 0px; font-family: "Playball", Optima, Helvetica, Arial, sans-serif; font-weight: normal; color: #213780; }
h1 { font-size: 1.5em; }
h2 { font-size: 1.35em; }
h3 { font-size: 1.25em; }
h4 { font-size: 1.1em; }

/*A utility rule assigned to the first heading to remove top margins.*/
.content h1:first-child, .content h2:first-child, .content h3:first-child, .content h4:first-child { margin-top: 0px; }

/*Make Image Scalable - Assign this class to any image to make it scale with the browser window size*/
img.scalable { height: auto !important; width: auto !important; max-width: 100%; border-radius: 5px; }
.fancy { border: 1px solid rgba(255,255,255,.2); box-shadow: 0px 0px 30px rgba(0,0,0,.65); }
.sidebar ul, .sidebar ol, .sidebar2 ul, .sidebar2 ol { margin: 0 0 0 .5em; padding: 0 0 0 .5em; line-height: normal; }
.sidebar li, .sidebar2 li { margin-bottom: 4px; }

/*Ordinary Link Styles*/
.content a { }
.content a:hover, .content a:focus { color: #000; border-bottom-style: solid; }
.footer a { color: #8C8C8C; }
.footer a:hover, .footer a:focus { color: #FFF; }
.masthead img{border-style:none;}

/*The DIVs that contains the horizontal menu bar at the top of page.*/
.menu-top-wrapper .p7DMM01 { background-color: transparent; border: none; box-shadow: none; }
.top-navigation { font-family: "Playball", Optima, Helvetica, Arial, sans-serif; font-weight: normal; background-color: #34495e; position: relative; z-index: 9; }
.top-navigation:after { content: "\0020"; font-size: 0px; display: inline; overflow: hidden; line-height: 0; clear: both; }
.logo { margin-left: 10px; }

/*The Footer*/
.footer { background-color: #34495e; padding: 0em 1em;  font-size: 0.8em; color: #8C8C8C; text-align: center; clear: both; position: fixed; z-index: 999; top: auto; bottom: 0px; width: 100%; }
.footer p.copyright { text-transform: uppercase; margin: 0px; }

/* form */
form {  /* set width in form, not fieldset (still takes up more room w/ fieldset width */ font-size:100%; margin:auto; padding: 0; min-width: 200px; max-width: 700px; width: 90%;  }
form fieldset { border-color: #999; border-width: 1px; border-style: solid; padding: 10px; /* padding in fieldset support spotty in IE */ margin: 0 0 1.25em; }
form fieldset legend { font-size:1.4em; /* bump up legend font size, not too large or it'll overwrite border on left *//* be careful with padding, it'll shift the nice offset on top of border  */ color: #666; }
form label { display: block;  /* block float the labels to left column, set a width */ float: left; clear:left; width: 50%; padding: 0; margin: 5px 25% 0;; /* set top margin same as form input - textarea etc. elements */ text-align: left; color:#666; font-size:1em; }
form input, form textarea, form select { /* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */ width:50%; float:left; clear:left;     /* set width of form elements to auto-size, otherwise watch for wrap on resize */ margin:0 25% 5px; border: 1px solid #666; }
form input#reset { margin-left:0px; /* set margin-left back to zero on reset button (set above) */ }
textarea { display:inline; overflow: auto; }
form p.small { /* instructions/comments left margin set to align w/ right column inputs */ padding: 10px 15% 30px; font-size: .9em; color: #FF0000; }
/*form .required { font-weight:bold; } /* uses class instead of div, more efficient */
#contactus label.error { color: red; vertical-align: top; text-align: right; padding-bottom: 10px; width: 80%; height:5px; margin-top: 0px; margin-bottom: 0px; }
#contactus div.error { color: red; vertical-align: top; text-align: left; padding-bottom: 10px; width: 50%;  margin-top: 0px; margin-bottom: 0px; font-size:.85em; margin-left:25%; }
.req { display: none; visibility: hidden; }
.selected { font-weight: bold; }
.boldleadred { color: #FF0000; font-weight: bold; text-transform: uppercase; font-size: 120%; text-decoration: underline; }
.boldleadblue { color: #097cb0; font-weight: bold; text-transform: uppercase; font-size: 120%; text-decoration: underline; }

/*1 Column for Narrow Browser Windows and Smartphones in both orientations*/
@media only screen and (min-width: 0em) and (max-width: 55em) {
body { padding-bottom: 0px; }
.masthead { padding-left: 10px; }
.footer { position: static; width: auto; padding:.5em; }
.content-wrapper { margin: 0px; border: none; }
.columns-wrapper{margin: 0px 0px 20px 0px !important; border:none;}
.columns-wrapper hr {margin: 0px;}
.column-1, .column-2, .column-3 { width: auto !important; float: none !important; margin: 0px !important; }
.full-width { padding-left: 0px; padding-right: 0px; }
.full-width p, h1, h2 { padding: 0px 15px; border: none; height: auto !important; max-height: 888678px; line-height: 1.65; }
.wider{margin:0px -15px !important;}
.column-1 .content, .column-2 .content, .column-3 .content { padding: 20px 15px; border: none; height: auto !important; max-height: 888678px; }
.p7DMM01 ul a, .p7DMM01 ul a:hover, .p7DMM01 ul a:focus, .p7DMM01 ul a.open { border-bottom: 1px solid !important; border-color: #89AEC9 !important; }
.p7DMM01 ul li:last-child a { border-bottom: none !important; }
.headshot{margin: 10px 0px 0px 14px;}
.floatLeftflush{float: left; margin-right: 1em; margin-top: 1em; margin-left:1em;}
hr{margin: 0 1em;}

/*Medium windows - reduce padding content padding*/
@media only screen and (min-width: 55.0625em) and (max-width: 80em) {
.column-1 .content, .column-2 .content, .column-3 .content { padding: 20px 20px; }
.content-wrapper {margin-left: 10px; margin-right: 10px;}
.masthead {padding-left: 10px;}
.headshot{margin: 10px 0px 0px 14px;}
.floatLeftflush{float: left; margin-right: 1em; margin-top: 1em; margin-left:1em;}

}