/* CSS Document */
/*
Description: School List Page style sheet for Homefacts.com
Version: 1.0
Author: Drew Cain
*/


/* MAIN SECTIONS: ALL */
#content a { text-decoration: underline; }
#content a:hover { text-decoration: none; }
#content h1 {margin-bottom: 0px; width: 700px; float: left;}

.unemployment {background: url("../images/v2/sprite_icons.png") no-repeat scroll 0px -1800px transparent; height: 32px;}
.unemployment h1 {padding-left: 33px; height: 28px; line-height: 28px; font-size:17px;}
.unemployment_articles ul {margin:0px;}
.unemployment_articles ul li { background: url("../images/v2/sprite_icons.png") no-repeat scroll 0 -1800px transparent;
    min-height: 30px;
    padding: 3px 0 3px 33px;
    }
.unemployment_articles ul li a { color:#000000; text-decoration:underline;}

.middle-right-content {background:none; width:280px;}
.unemployment-compare {float:left; width:280px; border: 1px solid #C9C9C9; margin-bottom: 20px;} 
#sidebar_right_v2 .unemployment-compare {width:295px; background-color: #FFFFFF; margin-top:15px; margin-bottom:0px;} 

.unemployment-compare h2 { font-size: 16px; background: url("../images/v2/sprite_icons.png") no-repeat scroll 0px -1800px transparent; padding: 3px 0 3px 38px; margin:10px 0 0 5px; height: 28px; line-height: 28px;} 
.unemployment-compare fieldset {position:relative; padding: 3px 20px;}
.unemployment-compare ul {    float: left; margin: 0; padding: 2px 0; width: 210px;}
.unemployment-compare ul li {float:left; width: 205px; padding: 3px 0px;}
.unemployment-compare ul li.pad10 {padding-top: 10px;}
.unemployment-compare .compare_button{
	float:left;
	width:218px;
	height:33px;
	font-size:16px;
	color:#ffffff;
	line-height:18px;
	border: 1px solid #C9C9C9;
	padding:1px 5px 3px 5px;
	background-color:#5E5E5E; 
	cursor:pointer;
	font-weight:bold
}

.middle-right-content #school_grades_selector { width: 270px; clear: both; margin-top: 10px; margin-left:0px; }
.middle-right-content .grade_buttons { float: left; width: 270px; margin-bottom: 3px; }
.middle-right-content .grade_result { margin-bottom: 20px; }


#sidebar_right_v2 #school_grades_selector { width: 270px; clear: both; margin-top: 10px; margin-left:0px; }
#sidebar_right_v2 .grade_buttons { float: left; width: 270px; margin-bottom: 3px; }
#sidebar_right_v2 .grade_result { margin-bottom: 20px; }

/* SCHOOLS LIST PAGE STYLES */
.school_3col { height: 30px; }
.school_3col.odd { background: #f6f6f6; }
.school_3col1, .school_3col2, .school_3col3 { height: 30px; float: left; line-height: 30px; overflow: hidden; }
.school_3col1.top, .school_3col2.top, .school_3col3.top { background-image: none; font-size: 16px; }
.school_3col1 { width: 320px; background: transparent url(../images/sprite_all_links.png) 0 -70px no-repeat; text-indent: 30px; }
.school_3col2, .school_3col3 { width: 90px; text-align: center; }

/* SCHOOLS DETAILS PAGE STYLES */
.school_2col { margin: 20px 0; }
.school_2col1, .school_2col2 { width: 250px; float: left; }
#school_grades_lg { margin: 10px 0 30px; }
.school_grades_quad { float: left; width: 124px; font-size: 16px; text-align: center; font-weight: 600; border-right: 1px solid #DFDFDF; border-bottom: 1px solid #dfdfdf; }
.school_grades_quad img { display: block; margin: 5px auto; }
.school_grades_quad.noborder { border-bottom: 1px solid #dfdfdf; border-right: none; }
#school_grades_selector, #school_year_selector { width: 500px; clear: both; margin-top: 10px; margin-left:0px; }
#school_grades_selector span, #school_year_selector span { font-size: 18px; font-weight: normal; line-height: 27px; }

.year_buttons { float: right; width: 325px; }
.year_buttons ul { margin: 0; }
.year_buttons ul li { display: inline-block; float: left; width: 50px; height: 25px; background: #5e5e5e; text-align: center; line-height: 28px; margin: 0 3px 3px 0; }
.year_buttons ul li:hover, .year_buttons ul li.current { background: #3366aa; }
.year_buttons ul li a { color: #ffffff; line-height: 25px; text-decoration: none !important; }

/* school graph styles */
.school_graph { margin: 20px auto 10px; }
.school_graph h2 { font-size: 18px; color: #5e5e5e; }

/* .expander_content tweaks */
.expander_content.main { }
.expander_content.main p.regular { font-size: 12px; color: #5e5e5e}
.expander_content.main h2 { font-size: 18px; color: #5e5e5e}
.expander_content.main p.tiny { font-size: 10px; color: #AAAAAA; margin: 0; }

.grade_buttons { float: right; width: 500px; margin-bottom: 20px; }
.grade_buttons ul { margin: 0; }
.grade_buttons ul li { display: inline-block; float: left; width: 50px; height: 25px; background: #5e5e5e; text-align: center; line-height: 28px; margin: 0 3px 3px 0; }
.grade_buttons ul li:hover, .grade_buttons ul li.current { background: #3366aa; }
.grade_buttons ul li a { color: #ffffff; line-height: 25px; text-decoration: none !important; }

/* SWEET TABS */
.schools_tabs { background: url(../images/sweet_tab_bg.jpg) bottom repeat-x; width: 100%; }
.schools_tabs ul { margin:0; }
.schools_tabs li { float:left; margin:0; padding: 0 0 0 8px; }
.schools_tabs a { float:left; display:block; padding: 0 20px; text-decoration:none; font-size: 18px; height: 40px; text-align: center; text-transform: uppercase; text-decoration: none !important; line-height: 16px; }
.schools_tabs a span.small { font-size: 12px; }
.schools_tabs a:hover { color: #313131; }
.schools_tabs .current { background:url(../images/sweet_tab_left.jpg) bottom left no-repeat; }
.schools_tabs .current a { padding: 0 26px 0 20px; }
.schools_tabs .current a { background:url(../images/sweet_tab_right.jpg) bottom right no-repeat; color: #313131; }


#loading_compareState1, #loading_compareState2 {
    margin-left: 35px;
    margin-top: 25px;
    position: absolute;
}

#livesearch_compareState1, #livesearch_compareState2 {
    background: none repeat scroll 0 0 #E5E9ED;
    border: 3px solid #C2CBD3;
    padding: 5px 15px 10px;
    position: absolute;
    z-index: 1003;
    margin-top: 23px;
}

h1.Unemployment {background: url("../images/v2/sprite_icons.png") no-repeat scroll 0 -1795px; text-indent: 35px; height: 40px; line-height: 40px;}


.unemployment_2col { height: 24px; }
.unemployment_2col.odd { background: #f6f6f6; }
.unemployment_2col1, .unemployment_2col2 { height: 24px; float: left; line-height: 24px; overflow: hidden; }
.unemployment_2col1.top, .unemployment_2col2.top{ background-image: none; font-size: 16px; }
.unemployment_2col1 { width: 230px; text-indent: 5px; }
.unemployment_2col2 {     margin-right: 5px;
    text-align: right;
    width: 50px; }
.unemployment_2col1.top { text-indent: 10px; }

.select_year select {border: 1px solid #C9C9C9;
    float: left;
    font-size: 12px;

    padding: 2px 5px;
    width: 70px;}
    
#year_tite
{
    margin-left: 15px;
     font-size: 14px;
     font-weight: bold;
     line-height: 24px;
}

.unemployment_year
{
   /* margin-top: 5px;*/
}

.select_year
{
    padding-top: 2px;
}

.unemployment_year strong
{
    font-size: 13px;
}

.unemploymentcomparetool
{
    width: 460px; margin-left: 10px; margin-right: 10px;
}


.unemploymentcomparetool .col1
{
    width: 175px; float: left;
    
}

.unemploymentcomparetool .col1 select, .unemploymentcomparetool .col2 select{ border: 1px solid #C9C9C9;
    float: left;
    font-size: 14px;
    padding: 2px 5px;
    width: 60px;}

    .unemploymentcomparetool .col1 span, .unemploymentcomparetool .col2 span{ 
        
        font-size: 14px;
        font-weight: bold;
    }

.unemploymentcomparetool .col1 input, .unemploymentcomparetool .col2 input{ border: 1px solid #C9C9C9;
    float: left;
    font-size: 14px;
    padding: 2px 5px;
    width: 170px;}
 .unemploymentcomparetool .vs
 {
     float: left;
    font-size: 16px;
    font-weight: bold;
    line-height: 30px;
    text-align: center;
    width: 69px;
 }   

.unemploymentcomparetool .col2
{
   float: left;
   
}

.current_unemployment
{
     font-size: 15px;
    font-weight: bold;
    margin-top: 10px;
    text-align: center;
    color: #FF0000;
}

.unemployment_table td
{
    font-size: 11px;
    padding-top: 0px;
}


.unemployment_city_table td
{
     font-size: 14px;
    padding-top: 2px;
}

.unemployment_year
{
   /* margin-top: 2px;*/
}

.homepage_graph
{
    min-height:430px !important;
}

.autoheight{height:auto !important; min-height: 40px; line-height: 40px !important;}
/* Responsive styles */
@media(max-width: 700px) {
    .content_box{margin-top: 0px; border-width: 1px 0px;}

.content_box .box_content { margin: 0px; padding: 5px 3%;}
    #content h1{
        width: 90% !important;
display: inline-block;
line-height: 17px;
padding-left: 35px;
text-indent: inherit;
padding-top:5px;
    }
    

    #heat_map{
        max-width: 300px!important;
        max-height: 300px !important;
    }

    .grid_6
    {
        width:100% !important;
    }
    .grid_3
    {
        width:100% !important;
    }
    .grid_3_2
    {
        width:100% !important;
    }
    .grid_2
    {
        width:100% !important;
    }
    /*
    
    .unemploymentcomparetool .col1
    {
        width: 145px;
    }
    
    .unemploymentcomparetool .col1 input, .unemploymentcomparetool .col2 input
    {
        width: 130px;
        font-size: 13px;
    }
    
    .unemploymentcomparetool .vs
    {
        font-size: 15px;
        width: 30px;
    }
    */
    
    .unemploymentcomparetool
    {
        width:185px;
        margin:0 auto;
    }
    .unemploymentcomparetool .vs
    {
        width:175px;
        margin:0 auto;
    }
    
    .unemploymentcomparetool .col2
    {
        clear:both;
    }
    
    .expander_content.main ul li, .expander_lg_content ul.expander_lg_states li{
            padding-left: 5px !important;
    }
}

@media(max-width: 330px) {
    #content h1
    {
        width: 265px !important;
        float: left;
        padding-left: 35px;
        font-size: 17px;
        font-weight: bold;
        line-height: 20px;
        display: inline-block;
        text-indent:0px;
    }
    
    #heat_map{
    max-width: 300px!important;
    max-height: 300px !important;
    }
    
    
    
    .select_year select
    {
        width:65px;
        margin-right:15px;
    }
    
    #year_tite
    {
        margin-left:0px;
        font-size:12px;
        line-height:12px;
    }
    
    .unemployment_city_table td
    {
        vertical-align:top;
        font-size:12px;
    }
    
    .unemployment_year strong
    {
        font-size:12px;
    }
}

/* iPads (portrait) ----------- */
@media (min-width : 768px)
  and (max-width : 1024px)
  and (orientation:portrait){
/* Styles */
#heat_map{
    max-width: 350px!important;
    max-height: 350px !important;
}
/*
.unemploymentcomparetool .col1
{
    width:125px;
}

.unemploymentcomparetool .vs
{
    width:69px;
}

.unemploymentcomparetool .col1 input, .unemploymentcomparetool .col2 input
{
    width:120px;
    font-size:13px;
}
*/
#divCompareCity_State1_unemployment
{
    width:125px!important;
     font-size:13px !important;
}
#divCompareCity_State2_unemployment
{
    width:125px!important;
     font-size:13px !important;
}

.heatmap_container, .homepage_graph
    {
        min-height:425px !important;
    }
    .state_heatmap_container
    {
        min-height:450px !important;
    }
    
    #year_tite
    {
        margin-left:0px;
        font-size:12px;
        line-height:22px;
    }
    
    .unemployment_city_table td
    {
        vertical-align:top;
        font-size:12px;
    }
    
    .unemployment_year strong
    {
        font-size:12px;
    }
    
    .select_year select
    {
        width:65px;
        margin-right:15px;
    }
    
    #content h1
    {
        width:60% !important;
    }
    .content_box .box_header{height:auto!important;}
    
    #unemployment_graph
    {
        height:305px !important;
    }
    
    .expander_lg_content ul.expander_lg_states li {
        max-width: 200px;
    } 
    
    .unemploymentcomparetool .col1 {
    width: 155px;
    float: left;
    }  
    
    .unemploymentcomparetool .col1 input, .unemploymentcomparetool .col2 input {
    border: 1px solid #C9C9C9;
    float: left;
    font-size: 14px;
    padding: 2px 5px;
    width: 140px;
    }
    
    .unemploymentcomparetool .vs {
float: left;
font-size: 16px;
font-weight: bold;
line-height: 30px;
text-align: center;
width: 30px;
}
    
  }
  
@media only screen 
and (min-device-width : 435px) 
and (max-device-width : 773px){ /* STYLES GO HERE */
    #content h1 {
        width: 90% !important;
        display: inline-block;
        line-height: 40px;
        padding-left: 35px;
        text-indent: inherit;
    }
}