@import "http://fonts.googleapis.com/css?family=Lato";

/** Clear fix **/
.clearfix:after {	content: ".";	display: block;	clear: both;	visibility: hidden;	line-height: 0;	height: 0;}
.clearfix {	display: inline-block;}
html[xmlns] .clearfix {	display: block;}
* html .clearfix {	height: 1%;}

* 
{
    margin:0; padding: 0; font-family: Lato, Arial, sans-serif; 
}

a img {border: none;}
a {color: #cc191d;text-decoration: none;}
a:hover {color: #000;}
p {margin: 5px 0;}

body
{
    font-family: Arial, Sans-Serif;
    font-size: 14px;
    color: #747474;
}

.page-width
{
    margin: auto;
    width: 920px;
    padding: 10px;
    position: relative;
}

.left-shadow
{
    position: absolute;
    left: -23px;
    width: 23px;
    height: 750px;
    background: url(../images/container-gradient-left.jpg) top left no-repeat;
}

.right-shadow
{
    position: absolute;
    right: -23px;
    width: 23px;
    height: 750px;
    background: url(../images/container-gradient-right.jpg) top left no-repeat;
}

.logo {float: left;}

.site-header {height: 110px;position: relative;}

.tag-line
{
    float: right;
    font-size: 30px;
    font-weight: bold;
    padding-top: 15px;
    padding-right: 15px;
}

.tag-line .alt {color: #cc191d;}

.site-menu {position: absolute;right: 0px; padding-top: 30px;bottom: 10px;}
.site-menu ul {list-style-type: none;}
.site-menu ul li {float: left;}
.site-menu ul li a {float: left; display: block;padding: 5px 10px;color: #656565;border-radius: 5px;margin: 0 5px;}
.site-menu ul li a:hover, .site-menu ul li a.current {background: #cc191d;color: #FFF; }
.site-menu ul li .subNav {display: none;}

.site-banner {height: 619px;position: relative;overflow: hidden;}
.site-banner .banner-container, .site-banner .site-banner-item {height: 619px;width: 100%;background-repeat: no-repeat;}
.site-banner .site-banner-item h2 {position: absolute; bottom: 200px;left: 20px;color: #FFF;text-shadow: 1px 1px 3px #000;font-size: 30px;font-weight: normal;line-height: 2em;}
.site-banner-content {position: absolute;bottom: 0px; height: 186px;width: 100%;z-index: 99;}
.site-banner-content>ul {list-style-type: none;padding: 2px;}
.site-banner-content>ul>li {float: left;width: 229px; height:168px;background-position: top left;background-repeat: no-repeat; }
.site-banner-content>ul>li .content {display: block; margin: 50px 40px 0px 20px;height: 100px; overflow: hidden;color: #FFF;}
.site-banner-content>ul>li h2 {font-size: 20px;font-weight: normal;}
.site-banner-content>ul>li.people {background-image: url(../images/home-panel-people.png);}
.site-banner-content>ul>li.customers {background-image: url(../images/home-panel-customers.png);}
.site-banner-content>ul>li.service {background-image: url(../images/home-panel-service.png);}
.site-banner-content>ul>li.solutions {background-image: url(../images/home-panel-solutions.png);}

.site-banner-content>ul>li.people.active {background-image: url(../images/home-panel-people-hover.png);}
.site-banner-content>ul>li.customers.active {background-image: url(../images/home-panel-customers-hover.png);}
.site-banner-content>ul>li.service.active {background-image: url(../images/home-panel-service-hover.png);}
.site-banner-content>ul>li.solutions.active {background-image: url(../images/home-panel-solutions-hover.png);}


.site-banner-content>ul>li .content ul {list-style-type: square;padding-left: 15px; color: #DD0;margin-left: 5px;}
.site-banner-content>ul>li .content ul span {color: #FFF;}

.site-content {padding: 20px 20px 5px 20px;}
.site-content h1 {color: #cc191d;font-size: 18px;margin-bottom: 10px;font-weight: normal;}

.site-footer {padding: 10px 0; font-size: 12px;}
.site-footer .footer-left {float: left;}
.site-footer .footer-right {float: right;}

/*** HTML CONTENT ***/

#HTMLContent p
{
    line-height: 1.5em;
}

#HTMLContent ul, #HTMLContent ol
{
    margin-left: 45px;
    margin-top: 15px;
    margin-bottom: 15px;
}

#HTMLContent ul li, #HTMLContent ol li
{
    margin: 3px 0;
}

#HTMLContent blockquote
{
    padding: 5px 10px;
    position: relative;
    margin: 5px 25px;
}

#HTMLContent blockquote:before, #HTMLContent blockquote:after
{
    font-size: 3em;
    position: absolute;
    color: #747474;
}

#HTMLContent blockquote:before {top: 0px;left: -10px; content: '‟';}
#HTMLContent blockquote:after {bottom: 10px;right: -10px; content: '„';}


/*** FORM VALICATION ***/
input[type=text]:focus, select:focus, input[type=password]:focus, textarea:focus, .textbox:focus
{
    background-color: #e1f2fc;
}

.invalid input[type=text], .invalid select, .invalid input[type=password], .invalid textarea
{
    background-color: #f7dede;
}


/* Clear fix for form rows */
.row:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.row {display: inline-block;}
html[xmlns] .row {display: block;}
* html .row {height: 1%;}

.row
{
    margin: 5px 0;
    clear: left;
    width:550px;
}

    .row .form-label
    {
        float: left;
        width: 150px;
        padding-top: 3px;
    }

    .row .form-input
    {
        float: left;
        width: 325px;
    }

    .row .form-info
    {
        float:  left;
        width: 100px;
        height: 24px;
        padding-left:  30px;
    }

    .row .form-info .callout
    {
        display: none;
        position: relative;
        width: 150px;
        padding-left: 6px;
        background: #FFF;
        background: rgba(255,255,255,0.8);
        border: 2px solid #FFF;
        border-color: rgba(255,255,255,0.8);
    }

    .row .form-info .callout .callout-image
    {
        background: url("../images/validation-callout.png") no-repeat scroll 0 3px transparent;
        position: absolute;
        height: 20px;
        left: 0px;
        width: 10px;
        top: 3px;
    }

    .active .form-info .callout {display: block;}
    .row .form-info .validation-message {display: none;}


.active .form-info .help-message
{
    display: block;
    padding: 5px;
    border-bottom: 1px dotted #747474;
    border:  1px solid #051d68;
}

.active.invalid .form-info .validation-message
{
    display: block;
    padding: 5px;
    background: #f7dede;
    border:  1px solid #051d68;
    border-top:  none;
}
    
.invalid .form-info
{
    background: url(../images/invalid.gif) center left no-repeat;    
}

.valid .form-info
{
    background: url(../images/valid.gif) center left no-repeat;    
}

.row.new-group
{
    margin-top: 10px;
}

.row label, label
{
    display: block;
    float: left;
    width: 150px;
    margin-bottom: 3px;
}

.row input[type=text], .row input[type=password], .row select, .dropdownlist, textarea, .textbox
{
    width: 300px;
    padding: 3px 3px;
    margin: 0px 5px;
    border: 1px solid #666;
}

.button.aspNetDisabled
{
	background: #666;
	color: #999;
	text-shadow: none;
}

.inline-button
{
    font-size: 14px;
    padding: 3px 5px;
    margin: 1px;
}

.inline-textbox
{
    margin-right: 0px !IMPORTANT;    
}

.button, input[type=submit]
{
    background: #cc191d url(../images/button-background.png) top left repeat-x;
    border: 1px solid #cc191d;
    border-width: 0px 1px;
    color: #FFFFFF;
    font-size: 14px;
    /*margin: 5px;*/
    padding: 8px 30px 9px;
    text-transform: uppercase;
    border-radius: 5px;
}

.button:hover, input[type=submit]:hover
{
    background: #a12228;
}



.landing-boxes {list-style-type: none;}
.landing-boxes li {float: left;display: block;margin: 6px;box-shadow: 0 0 10px #747474;width: 294px;}
.landing-boxes .info {background: #d0232c url(../images/landing-panel-bkggrad.png) top left repeat-x;padding: 20px;color: #FFF;}
.landing-boxes .info a {color: #FFF;}
.landing-boxes .info h2 {margin: 0;padding: 0;}
.landing-boxes .info p {padding: 10px 0;margin: 0;}
.landing-boxes .info .button {background: #FFF;color: #cc191d;border-radius: 0;font-size: 11px;text-transform: uppercase;font-weight: bold;}


/**** Bus form styles ****/
.busForm .row {
    width: 436px;
}

.busForm .form-label {
    width: 120px;
}

.busForm .row .form-input {
    width: 315px;
}

.busForm .row input[type="text"], .busForm .row input[type="password"], .busForm .row select,
.busForm .row .dropdownlist, .busForm .row textarea, .busForm .row .textbox {
    width: 290px;
}

.bannerOverlay {
    left: 0;
    position: absolute;
    top: 0;
    z-index: 500;
}

.busPage p {margin: 15px 0; text-align:justify;}