/*
	HTML5 Reset :: style.css
	----------------------------------------------------------
	We have learned much from/been inspired by/taken code where offered from:
	
	Eric Meyer					:: http://ericmeyer.com
	HTML5 Doctor				:: http://html5doctor.com
	and the HTML5 Boilerplate	:: http://html5boilerplate.com
	
-------------------------------------------------------------------------------*/

/* Let's default this puppy out
-------------------------------------------------------------------------------*/

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}									

article, aside, figure, footer, header, hgroup, nav, section {display: block;}

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {max-width: 100%;}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted. 
	don't forget to restore the bullets within content. */
ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, 
blockquote:after, 
q:before, 
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

input, select {vertical-align: middle;}

pre {
	white-space: pre; /* CSS2 */
	white-space: pre-wrap; /* CSS 2.1 */
	white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
	word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font: 100%;}
 
/* Accessible focus treatment
	people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {outline: none;}

small {font-size: 85%;}

strong, th {font-weight: bold;}

td, td img {vertical-align: top;} 

/* Make sure sup and sub don't screw with your line-heights
	gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label, 
input[type=button], 
input[type=submit], 
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}
 
/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover */
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }  



/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/

/* ===================
    Fonts
   =================== */

@font-face {
    font-family: 'CartoGothicStdBook';
    src: url('../fonts/CartoGothicStd-Book-webfont.eot');
    src: url('../fonts/CartoGothicStd-Book-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/CartoGothicStd-Book-webfont.woff') format('woff'),
         url('../fonts/CartoGothicStd-Book-webfont.ttf') format('truetype'),
         url('../fonts/CartoGothicStd-Book-webfont.svg#CartoGothicStdBook') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'CartoGothicStdItalic';
    src: url('../fonts/CartoGothicStd-Italic-webfont.eot');
    src: url('../fonts/CartoGothicStd-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/CartoGothicStd-Italic-webfont.woff') format('woff'),
         url('../fonts/CartoGothicStd-Italic-webfont.ttf') format('truetype'),
         url('../fonts/CartoGothicStd-Italic-webfont.svg#CartoGothicStdItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'CartoGothicStdBold';
    src: url('../fonts/CartoGothicStd-Bold-webfont.eot');
    src: url('../fonts/CartoGothicStd-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/CartoGothicStd-Bold-webfont.woff') format('woff'),
         url('../fonts/CartoGothicStd-Bold-webfont.ttf') format('truetype'),
         url('../fonts/CartoGothicStd-Bold-webfont.svg#CartoGothicStdBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'CartoGothicStdBoldItalic';
    src: url('../fonts/CartoGothicStd-BoldItalic-webfont.eot');
    src: url('../fonts/CartoGothicStd-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/CartoGothicStd-BoldItalic-webfont.woff') format('woff'),
         url('../fonts/CartoGothicStd-BoldItalic-webfont.ttf') format('truetype'),
         url('../fonts/CartoGothicStd-BoldItalic-webfont.svg#CartoGothicStdBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Museo300';
    src: url('../fonts/Museo300-Regular-webfont.eot');
    src: url('../fonts/Museo300-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Museo300-Regular-webfont.woff') format('woff'),
         url('../fonts/Museo300-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Museo300-Regular-webfont.svg#Museo300') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Museo500';
    src: url('../fonts/Museo500-Regular-webfont.eot');
    src: url('../fonts/Museo500-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Museo500-Regular-webfont.woff') format('woff'),
         url('../fonts/Museo500-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Museo500-Regular-webfont.svg#Museo500') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Museo700';
    src: url('../fonts/Museo700-Regular-webfont.eot');
    src: url('../fonts/Museo700-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Museo700-Regular-webfont.woff') format('woff'),
         url('../fonts/Museo700-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Museo700-Regular-webfont.svg#Museo700') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* new Linux- and Windows-friendly sans-serif font stack: http://mky.be/fontstack */
/*body {font: 13px Helmet, Freesans, sans-serif;}*/
body {font: 13px CartoGothicStdBook, Freesans, sans-serif;}

/* using local fonts? make sure to read up on Paul Irish's 
	Bulletproof @font-face syntax: http://mky.be/font-face/bulletproof/ */

/* we like off-black for text */
body, select, input, textarea {color: #333;}

a {color: #335f8a;}
a:visited {color: #203C57;}
a:hover {color: #E2950E;}


/* Custom text-selection colors (remove any text shadows: twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: #fcd700; color: #fff; text-shadow: none;} 

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #fcd700;} 

ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}



/* ===================
    Shared
   =================== */

#main-container
{
    width:1000px;
    margin-right:auto;
    margin-left:auto;
    padding:15px 0 40px 0;
    min-height:650px;
}

h1
{
    font-size:1.6em;
    font-family:Museo500, Verdana, Sans Serif;
    font-weight:normal;
    /*color:#FEBC2E;*/
    color:#E2950E;
}

h2
{
    font-size:1.3em;
    font-weight:normal;
    font-family: CartoGothicStdBold, Freesans, sans-serif;
    letter-spacing:.5px;
}
h3
{
    font-size:1.1em;
    font-weight:normal;
    font-family: CartoGothicStdBold, Freesans, sans-serif;
}

.form-error
{
    color:Red;
    display:none;
}

/* ===================
    Header
   =================== */
   
header#tophead-wrap
{
    background: url('/content/img/bgblue.png');
}

#tophead 
{
    padding:15px 0;
}
#usaschoolinfo-com-logo
{
    float:left;
    width:50%;
}
#usaschoolinfo-com-logo img
{
    width:350px;
}

#tophead form
{
    float:left;
    padding-top:10px;
    width:50%;
}
    #tophead form input
    {
        width:200px;
        padding:5px;
    }
    
    #tophead form select
    {
        padding:5px;
    }
    #tophead form button
    {
        vertical-align:middle;
        padding:6px;
        font-weight:bold;
    }


#topnav-wrap
{
    width:100%;
    background-color:#203C57;
    border-bottom:solid 4px #e5e5e5;
}

#tophead,
#topnav-wrap ul
{
    width:1000px;
    margin-left:auto;
    margin-right:auto;
}

#topnav-wrap li 
{
    float:left;
    width:auto;
    
}
#topnav-wrap li a
{
    display:block;
    padding:10px;
    margin-right:5px;
    color:#e3e3e3;
    text-decoration:none;
    font-size:14px;
    font-weight:bold;
    letter-spacing:1px;
}
#topnav-wrap li a:hover,
#topnav-wrap li a.selected
{
    background-color:#e5e5e5;
	color:#203C57;
}

#topnav-wrap .social
{
    float:left;
    margin: 9px 0 0 115px;
}
/* ===================
    Footer
   =================== */
#footer-main
{
    background: url('/content/img/bgblue.png');
    min-height:65px;
    padding:10px 0;
}
#footer-main p
{
    margin-left:auto;
    margin-right:auto;
    width:1000px;
    color:#e3e3e3;
    text-align:center;
    padding:5px 0;
}
#footer-main a
{
    color:#e3e3e3;
}

/* ===================
    Breadcrumb
   =================== */
   
    ul#breadcrumb
    {
        width:1000px;
        margin-bottom:15px;
    }
    ul#breadcrumb li
    {
        float:left;
        padding-right:7px;
    }
/* ===================
    HP
   =================== */
   
#hp-search
{
    width:620px;
    background-color:#f6f6f6;
    border-top:solid 4px #E6E9EB;
    border-bottom:solid 2px #E6E9EB;
    padding:15px;
    margin-top:15px;
}

#hp-search h3
{
    padding-bottom:10px;
}

#search-by-name,
#search-by-grade-level,
#search-by-school-type
{
    padding:10px 0;
}


#search-by-grade-level td,
#search-by-school-type td
{
    width:150px;
}
#search-by-grade-level .grade-level,
#search-by-school-type .school-type
{
    /*font-weight:bold;*/
}

#search-by-name input[type=text]
{
    width:430px;
    padding:5px;
}
#search-by-name select
{
    width:100px;
    padding:5px;
}
#search-by-name button
{
    line-height:2em;
    vertical-align:middle;
    font-weight:bold;
}
#hp-lists section
{
    padding-top:15px;
}

#hp-lists table
{
    margin: 15px 0 0 15px;
}

#hp-lists table td
{
    width:212px;
    vertical-align:middle;
    padding: 3px 0;
}

#hp-sideimage img
{
    border:solid 1px #ccc;
}

#sidebar
{
    float:right;
    width:300px;
    margin: 15px 15px 0 0;
}
#sidebar h3
{
    margin-top:15px;
}
#sidebar table
{
    margin-top:15px;
    width:100%;
}

#sidebar table td
{
    width:50%;
    vertical-align:middle;
    padding:3px 0;
}

/* ===================
    List Pages
   =================== */
   
.search-filter 
{
    background-color:#f6f6f6;
    border-top:solid 4px #E6E9EB;
    border-bottom:solid 2px #E6E9EB;
    padding:10px 10px 15px 10px;
    width:650px;
    margin-top:15px;
}
    .search-filter h3
    {
        padding-top:15px;
    }
    .search-filter nav
    {
        padding:10px 5px 0 5px;
    }
    .search-filter nav a
    {
        padding-right:15px;
    }
    .search-filter input
    {
        width:430px;
        padding:5px;
    }
    .search-filter select
    {
        width:100px;
        padding:5px;
    }
    .search-filter button
    {
        line-height:2em;
        vertical-align:middle;
        font-weight:bold;
    }
    
.loc-list-wrap
{
    padding-bottom:15px;
    width:650px;
}
    .loc-list-wrap h3
    {
        padding-top:15px;
    }
    .loc-list-wrap hr
    {
        margin:0;
    }
    .loc-list-wrap article
    {
        float:left;
        width:640px;
        border-top:solid 1px #eee;
        padding-bottom:15px;
        border-left:solid 10px #fff;
    }
    .loc-list-wrap article:hover
    {
        /*background-color:#f5f5f5;*/
        border-left:solid 10px #f5f5f5;
    }
        .loc-list-wrap article h3
        {
            font-size:1.2em;
        }
    .loc-list-wrap .first-letter-wrap
    {
        font-weight:bold;
        padding-top:20px;
        border-bottom: solid 1px #eee;
        float:left;
        width:100%;
    }
    .loc-list-wrap .first-letter-wrap .first-letter
    {
        float:left;
        width:50%;
        font-size:1.3em;
        
    }
    .loc-list-wrap .first-letter-wrap .totop
    {
        float:right;
        width:48%;
        text-align:right;
        padding-right:2%;
    }
    .loc-list-wrap header
    {
        float:left;
        width:490px;
        vertical-align:top;
        padding-left:5px;
    }
    .loc-list-wrap .rating-wrap
    {
        float:left;
        width:145px; 
        text-align:center;
        padding-top:15px;
    }
    
    
.loc-table
{
    margin-top:15px;
    width:100%;
}
    .loc-table td
    {
        width:33%;
        vertical-align:middle;
        padding:3px 0;
    }

.ad-mid-wrap
{
    padding:10px 0;
}

    .ad-mid-wrap .ad
    {
        text-align:center;
    }

.totop-wrap
{
    text-align:right;
}

/* ===================
    Single School 
   =================== */
.school-header
{
    background-color:#f6f6f6;
    border-top:solid 4px #E6E9EB;
    border-bottom:solid 2px #E6E9EB;
    padding:10px 10px 15px 10px;
    width:650px;
    margin-top:15px;
}
    .school-header table
    {
        width:100%;
        text-align:left;
        margin-top:10px;
    }
    .school-header th
    {
        vertical-align:bottom;
        padding-bottom:5px;
        text-align:left;
    }
    .school-header td
    {
        
        vertical-align:middle;
        line-height:18px;
        padding-top:5px;
    }
    .school-header td.rating
    {
        line-height:25px;
    }
    .school-header th.stratio
    {
        text-align:center;
        border:solid 1px #ddd;
        border-bottom:none;
        padding:5px;
    }
    .school-header td.stratio
    {
        width:12%;
        font-size:1.5em;
        font-weight:bold;
        text-align:center;
        border:solid 1px #ddd;
        border-top:none;
    }
    .school-header td.viewedon
    {
        text-align:center;
    }

.school-nav
{
    padding-top:10px;
    padding-left:10px;
    width:660px;
    border-bottom:solid 4px #E6E9EB;
    float:left;
    margin:10px 0 15px 0;
}
    .school-nav a
    {
        float:left;
        font-weight:bold;
        border:solid 1px #E6E9EB;
        padding:10px 10px;
        margin-right:5px;
        background-color:#fff;
    }
    .school-nav a.selected
    {
        background-color: #E6E9EB;
        
        text-decoration:none;
        
    }
.school-info-wrap
{
    width:650px;
}
    .school-info-wrap section
    {
        margin-top:15px;
    }
    .school-info-wrap h3
    {
        font-size:1.2em;
    }
    .school-info-wrap table
    {
        margin-top:15px;
        width:auto;
        margin-left:auto;
        margin-right:auto;
        border:solid 1px #E6E9EB;
    }
    .school-info-wrap th
    {
        text-align:center;
        font-size:1.1em;
        padding:3px 65px;
        border-bottom:solid 1px #E6E9EB;
    }
    .school-info-wrap td
    {
        padding:3px 65px;
        text-align:center;
        line-height:24px;
    }
    .school-info-wrap .summary-table th,
    .school-info-wrap .summary-table td
    {
        text-align:left;
    }
    
    .school-info-wrap #map-wrap
    {
        width:95%;
        height:400px;
        margin-left:auto;
        margin-right:auto;
    }
    .school-info-wrap #directions
    {
        width:90%;
        margin-left:auto;
        margin-right:auto;
        background-color:#f6f6f6;
        padding:10px 0 10px 5%;
        
    }
        .school-info-wrap #startAddr
        {
            width:350px;
        }
        .school-info-wrap #directions button
        {
            vertical-align:middle;
            margin-left:15px;
        }
        
    .school-info-wrap .chart-wrap
    {
        width:100%;
        height:25%;
        padding:15px;
    }
    .school-info-wrap .chart
    {
        width: 75%; 
        height: 25%;
        margin-left:auto;
        margin-right:auto;
    }
    
    #review-school .show-review-wrap
    {
        font-weight:bold;
        text-align:center;
        padding:15px 0;
        font-size:1.2em;
        float:left;
        width:100%;
    }
    
    #review-school .show-review-form
    {
        padding:15px;
        background-color:#E2950E;
        border:solid 1px #ddd;
        border-radius:5px;
        color:White;
        text-decoration:none;
        display:inline-block;
    }
    
    #review-school form
    {
        display:none;
        width:650px;
        border-top:solid 2px #eee;
        border-bottom: solid 2px #eee;
        padding:10px 0 15px 15px;
        float:left;
        margin:15px 0;
    }
        #review-school form div
        {
            float:left;
            width:auto;
        }
        
        #review-school .form-thanks
        {
            display:none;
        }
    #recaptcha-wrap td
    {
        padding:0;
    }
    #review-school .rate-school-wrap
    {
        width:100%;
        float:left;
        line-height:24px;
    }
        #review-school .rate-school-wrap div
        {
            float:left;
            padding-right:15px;
        }
    
    #review-school textarea
    {
        width:435px;
        height:100px;
    }
    #review-school .author-wrap
    {
        padding-bottom:15px;
    }
        #review-school .author-wrap input
        {
            width:300px;
        }
    #review-school .submit-wrap
    {
        width:475px;
        padding: 15px 0 0 175px;
    }
    
.school-closed
{
    font-style: italic;
    border: solid 1px #ccc;
    float: left;
    width: 670px;
    padding: 10px 0;
    margin: 10px 0 15px 0;
    background-color: #f9f9f9;
    text-align: center;
}

#review-list
{
    padding-bottom:15px;
}
    #review-list li
    {
        padding:10px 0 0 0;
    }
    #review-list .rating-info
    {
        padding:10px 0;
    }
    
.misc-page
{
    padding-bottom: 15px;
    width: 650px;
}
    .misc-page h2
    {
        margin-top:15px;
    }
    .misc-page p
    {
        padding-top:15px;
    }
    .misc-page form
    {
        padding:15px 0 0 15px;
    }
    .misc-page textarea
    {
        width:435px;
        height:150px;
        margin:15px 0;
    }
    .misc-page button
    {
        margin:15px 0 0 185px;
        padding:5px;
    }
    .misc-page .error
    {
        color:Red;
    }

/* Print styles!
-------------------------------------------------------------------------------*/
@media print {



}


/* Media queries!
-------------------------------------------------------------------------------*/

/* Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {
	
		
}

@media all and (orientation: portrait) {
	
}

@media all and (orientation: landscape) {
	
}