﻿.button {
    -webkit-appearance: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    -webkit-background-clip: padding;
    -moz-background-clip: padding;
    background-clip: padding-box;
    background: #DDD url('../images/button.png?1298351022') repeat-x;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, white), color-stop(100%, #DDD));
    background-image: -webkit-linear-gradient(white, #DDD);
    background-image: -moz-linear-gradient(white, #DDD);
    background-image: -o-linear-gradient(white, #DDD);
    background-image: -ms-linear-gradient(white, #DDD);
    background-image: linear-gradient(white, #DDD);
    border: 1px solid;
    border-color: #DDD #BBB #999;
    cursor: pointer;
    color: #333;
    font: bold 12px/1.3 "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
    outline: 0;
    overflow: visible;
    margin: 0;
    padding: 3px 10px;
    text-shadow: white 0 1px 1px;
    vertical-align: top;
    width: auto;
}
.button:focus 
{
    -webkit-box-shadow: #0066ff 0 0 5px 0;
    -moz-box-shadow: #0066ff 0 0 5px 0;
    box-shadow: #0066ff 0 0 5px 0;
    z-index: 1;}
    .button:hover { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(1px, #eeeeee), color-stop(100%, #cccccc));
    background-image: -webkit-linear-gradient(#ffffff, #eeeeee 1px, #cccccc);
    background-image: -moz-linear-gradient(#ffffff, #eeeeee 1px, #cccccc);
    background-image: -o-linear-gradient(#ffffff, #eeeeee 1px, #cccccc);
    background-image: -ms-linear-gradient(#ffffff, #eeeeee 1px, #cccccc);
    background-image: linear-gradient(#ffffff, #eeeeee 1px, #cccccc);
}
.button:active 
{
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(1px, #dddddd), color-stop(100%, #eeeeee));
    background-image: -webkit-linear-gradient(#ffffff, #dddddd 1px, #eeeeee);
    background-image: -moz-linear-gradient(#ffffff, #dddddd 1px, #eeeeee);
    background-image: -o-linear-gradient(#ffffff, #dddddd 1px, #eeeeee);
    background-image: -ms-linear-gradient(#ffffff, #dddddd 1px, #eeeeee);
    background-image: linear-gradient(#ffffff, #dddddd 1px, #eeeeee);
    -webkit-box-shadow: inset rgba(0, 0, 0, 0.25) 0 1px 2px 0;
    -moz-box-shadow: inset rgba(0, 0, 0, 0.25) 0 1px 2px 0;
    box-shadow: inset rgba(0, 0, 0, 0.25) 0 1px 2px 0;
    border-color: #999999 #bbbbbb #dddddd;
}
  

a {text-decoration: none; color:#666;}
a:hover { text-decoration: underline; color:#333;} 
th { font-weight: bold !important; }
label.error { float: none; color: #E00; margin-left: 20px;}
.margin-left { margin-left: 10px }
.float-left { float: left;}
.col1 { width: 120px; }
.col2 { width: 70px; }
.col3 { width: 350px; border: 0px; }
.col4 { width: 200px; }
.important { color: #E00; font-weight: bold; }
.nomargin { margin: 0 !important;}
body{ background: #fafaf2; }
#title a.shield { background: url('../images/shield.png') no-repeat; display:block; text-indent: -9999px; float: left; width: 176px; height: 38px;} 
#title { background: url('../images/header-bg.png') 0 -50px #900; height:60px;padding: 20px 0px 0 0; border-bottom: 5px solid #000;}
#title h1{float:left;width:750px;}
#title h1,
#title h1 a { color: #FFF; padding: 0px; margin: 0px; font-family: "adobe-caslon-pro"; font-weight:400;font-size:36px;}
#title h1 a:hover { color: #f6f6f6; text-decoration: none;}
section#main { padding: 20px 0px; }
h2{font-weight:400;}
table.commute { width: 100%;  }
table.commute tr th { font-weight: bold; }
table.commute tr th, 
table.commute tr td { border: 1px solid #ccc; padding: 10px 15px; }
table.commute tr td label.error { display: block;  }
#user { border-bottom: 2px solid #ccc; padding-bottom: 20px; margin: 20px 0;}
p#whoami { margin: 20px 0 0 0px; font-weight: bold; font-style: italic; }
/*p#whoami { display:none; }*/
footer .year { font-weight: bold; }
footer a.transportation { display: block; float: left; background: url('../images/usc_transportation.png') no-repeat; width: 137px; height: 20px; margin: 0 10px 0 0;}

.form-layout { padding: 0px 0px; margin: 0px; }
.form-layout li { list-style: none; padding:0px; margin: 5px 0px; }
.form-layout label { float: left; width: 90px; font-weight: bold;}
.form-layout label.error { float: none;}
.form-layout input[type="text"] { width: 30%;}
.form-layout p.informative { margin: 5px 0 5px 90px; font-size: 0.9em; font-style:italic; }

.time-tip { color: #EE0000; font-size: 0.9em;}

/* Custom Error Handling */
div.errormessage, div.validation-summary-errors, .success {
    border: 2px solid #DDDDDD;
    margin-bottom: 1em;
    padding: 0.8em;
}
div.errormessage, div.validation-summary-errors {
    background: none repeat scroll 0 0 #FBE3E4;
    border-color: #FBC2C4;
    color: #8A1F11;
}
.success {
    background: none repeat scroll 0 0 #E6EFC2;
    border-color: #C6D880;
    color: #264409;
}
div.errormessage a,  div.validation-summary-errors a { color: #8A1F11; }
div.errormessage ul,  div.validation-summary-errors ul { margin-bottom: 0; }
.success a { color: #264409; }
span.field-validation-error { color: #E00; }
span.field-validation-valid { display: none; }

.sr-only
{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}
/*
.email-template { margin: 10px 0;}
.email-template h4 { font-size: 0.9em; margin: 0; }
.email-template pre { padding: 10px;}


a.back-home { color:#666; text-transform: capitalize; text-decoration: none; font-size: 0.9em; display: block; width: 150px; margin: 10px 0px;}
a.back-home:hover { color: #333;}






ul.admin-menu {margin: 0; padding: 0;}
ul.admin-menu li:first-child { margin-left: 0px; }
ul.admin-menu li { display: inline; float: left; margin: 0; padding: 0; margin-left: 20px;}
ul.admin-menu li a { display: block; width: 150px; height: 150px; line-height:150px; text-decoration:none; font-size: 1.2em; font-weight: bold; text-transform:uppercase; text-align: center; border: 1px solid #999; color: #999;}
ul.admin-menu li a:hover { color: #333; border-color: #333; }
ul.admin-menu li p { text-align: center; margin-top: 10px; color:#999;}

ul.inline-layout,
ul.inline-layout li { margin: 0; padding: 0; list-style: none;}

.noresults { display: none; font-weight: bold;}
table.data { width: 100%; border: 1px solid #ccc;}
table.data td, 
table.data th { border: 1px solid #ccc; padding: 10px; text-transform: capitalize;}
table.data ul,
table.data li { margin: 0; padding: 0; list-style: none; }
table.data a { color: #666; text-decoration:none;}
table.data a:hover { color: #333; text-decoration:underline;}
table.data.config th:first-child { width: 200px; }
table.data tr td.actual { text-transform: none; }

ul.form { margin: 10px 0 0 0}
ul.form,
ul.form li { margin: 0; padding: 0; list-style: none;}
ul.form li {margin-bottom: 10px; }
ul.form li label { font-weight: bold; margin-right: 10px; }
ul.form.dept li label { width: 150px; display: block; float: left; }
ul.form li input[type="text"] { outline: 0;}
ul.form li textarea { outline:0; min-height: 200px; }
ul.form.email { padding: 20px 0; margin: 20px 0 0 0; border-top: 2px solid #666;}
ul.form.email li { margin-bottom: 20px; }
ul.form.email li label { width: 100px; display: block; }
ul.form.email li input[type="text"] { width: 250px;}
section.search { margin: 20px 0; padding: 5px 0px; height: 40px; }
section.search input[type="text"] { margin-left: 10px; width: 400px;}
section.search label { font-weight: bold;}
.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;

    overflow-x: hidden;
}
* html .ui-autocomplete {
    height: 100px;
}

.admin.edit input[type="text"]{ width: 400px; }

.dept-select { padding: 10px 0px;}
.dept-select label { font-weight: bold; margin: 0 10px 0 0; line-height:23px;}
#department-results { display: none; padding: 10px 0px; color: #666;}
#department-results h1 { font-size: 1.3em; margin: 10px 0px; font-family: Tahoma, Arial, Helvetica, Sans-Serif;}
#summary ul,
#department-statistics ul {width: 100%; padding: 10px 0px;}
#summary ul li,
#department-statistics ul li { display: inline; float: left; margin: 0px; padding: 5px 20px; width: 200px; }
#summary ul li:first-child,
#department-statistics ul li:first-child { padding-left: 0}
#summary ul li span,
#department-statistics ul li span  { font-weight: bold; display: block; font-size: 1.1em; }
#summary ul li span.title,
#department-statistics ul li span.title { color: #999; font-size: 1em;}


#email-form { display: none; }
#loader { position: absolute; left: 35%; top:35%; width: 200px; height: 200px; border-radius: 10px; background: rgba(0, 0, 0, 0.5) url('../images/ajax-loader.gif') no-repeat 50% 50% ; }

.time-tip { color: #EE0000; font-size: 0.9em;}
*/

.additional-select {
    min-width: 325px;
}

.additional-table-heading {
   display: none;
}

.js-commuter-question.table-row-hidden,
.js-fuel-type-row.table-row-hidden{
    display: none;
}

.js-vehicle-other {
    display:none;
}

@media screen and (max-width: 450px) {
    #title a.shield 
    {
        float: right;
        margin-top: 10px;
        padding-right: 20px;
    }
	/*
    .container_12{
		width:320px;
	}*/
    .container_12 form  
    {
        padding: 13px;
    }
    #user 
    {
        margin-top: 0;
        padding-bottom: 0;
    }
    #uscid
    {
        width: 65%;
    }
    footer p  
    {
        padding-left: 10px;
    }
    .year  
    {
        font-size: 93%;
    }
    table select  
    {
        width: 175px;
    }       
    input[type="time"] {
        width: 175px;
        
    } 
	.time-instructions{
		display:none;
		
	}

    .additional-select {
        min-width: 200px;

    }

    .additional-table-heading 
    {
        display: inline-block;
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 5px;

    }

    .additional-table,
    .additional-table label {
        font-size: 13px;
    }
}