/* 
    Document   : main
    Created on : 18-Nov-2012, 09:49:57
    Author     : Joey
    Description:
        Purpose of the stylesheet follows.
*/

html, body { margin: 0; padding: 0; font-family: verdana, geneva,  sans-serif; }

#header { width: 100%; position: relative; }

#logo {
    position: absolute;
    width: 240px;
    height: 200px;
    left:0;
    background: url(/images/logo-sml-text.png) no-repeat 0 0;
    margin-left: 2px;
    z-index: 999999;
}

.thankyou {
    width: 80%;
    margin: 20px auto;
    background-color: #3086C4;
    color: #fff;
    padding: 20px;
}

.pip #logo { background: url(/images/logo-sml-textpink.png) no-repeat 0 0; }
.fire #logo { background: url(/images/logo-sml-textred.png) no-repeat 0 0; }

#call-us-text { width: 480px; margin-top: 0; height: 40px; background: url(/images/call-us.png) no-repeat; float: right; }
#call-us-btn { width: 220px; margin-top: 0; height: 40px; background: url(/images/call-us.png) no-repeat; background-position: -480px 0; float: right; margin-right: -5px;
}
#call-us-btn:hover { background-position: -480px -43px;}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (-moz-min-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (min-device-pixel-ratio: 2) {
    #logo { background: url(/images/logo-sml-text@2x.png) no-repeat 0 0; background-size: 240px 200px; }
    .pip #logo { background: url(/images/logo-sml-textpink@2x.png) no-repeat 0 0; }
    .fire #logo { background: url(/images/logo-sml-textred@2x.png) no-repeat 0 0; }
    #call-us-text { background-image: url(/images/call-us@2x.png); background-repeat: no-repeat; background-size: 700px 80px;}
    #call-us-btn { background-image: url(/images/call-us@2x.png); background-repeat: no-repeat; background-size: 700px 80px;}
}

#topbar { width: 100%; position: absolute; top: 0; left: 0; height: 36px; background: url(/images/top-buttons.png) repeat-x -9px 0; box-shadow: 1px 0 7px #666 }
.fire #topbar { background: url(/images/lowlightbgred.png);}
.pip #topbar { background: url(/images/lowlightbgpink.png);}

#lowlight { width: 100%; height: 300px; background: #3086C4 url(/images/lowlightbg.png) repeat-x; position: absolute; top: 670px; }
#lowlightred { width: 100%; height: 300px; background: #d20000 url(/images/lowlightbgred.png) repeat-x; position: absolute; top: 725px; }
#lowlightpink { width: 100%; height: 300px; background: #fc7bbe url(/images/lowlightbgpink.png) repeat-x; position: absolute; top: 725px; }

.lowlight-content>div { width: 32%; float: left; padding: 6px;}
.lowlight-content>div>div { width: 291px; height: 160px; margin: 3px 14px; background-image: url(/images/indexlowlight.jpg); background-position: 0 0; background-size: 291px 480px; border: 1px solid #fff; }
.lowlight-content>div>p, .lowlight-content>div li  { width: 291px; margin: 5px 14px; color: #fff; font-size: 12px; line-height: 20px;}
.lowlight-content>div a { color: #fff; font-size: 12px; }

h1 { line-height: 18px; }

h2.white { font-family: sansumi, sans-serif; font-size: 20px; font-weight: normal; color: #fff; padding: 15px 0 3px; text-align: center;}
h2.blue { font-family: sansumi, sans-serif; font-size: 20px; font-weight: normal; color: #010171; text-align: left; }
h2.red, .fire h2.blue { font-family: sansumi, sans-serif; font-size: 20px; font-weight: normal; color: #d20000; text-align: left; }
h2.pink, .pip h2.blue { font-family: sansumi, sans-serif; font-size: 20px; font-weight: normal; color: #fc7bbe; text-align: left; }

h3 { font-size: 13px; color: #333; margin-top: 0; padding-top: 0;}
form h2 { font-size: 15px; color: #333; margin-top: 0; padding-top: 0; }
.content, .content li { font-size: 14px; list-style: square; line-height: 20px;}
.pushleft { padding-left: 20px; }

.gallery-img { display: block; width: 160px; height: 120px; float: left; margin: 5px 0 10px 28px; border: 1px solid #fff; }

.oneeighty { width: 180px !important; }

.side-gallery-img { display: block; width: 160px; height: 120px; float: left; margin:0 10px 20px; border: 1px solid #ccc; }


.two-col { width: 48%; margin: 1px; float: left;}
.three-col { width: 33%; margin: 1px; float: left;}
.three-col img { border: 1px solid #aaa; border-radius: 5px; margin-top: 15px; }

.three-col .side-gallery-img img { border: 0; border-radius: 0; margin-top: 0; }
.access { font-size: 11px; color: #aaa; margin: 6px 0;}
.access a { display: block; margin: 2px; text-decoration: none; color: #aaa;}
.access a:hover { color: #666; }
#accessibility { border-top: 1px solid #aaa; margin-top: 10px;}
#accessibility #copy { border-bottom: 1px solid #aaa; height: 26px; line-height: 26px; font-size: 11px; color: #666;}
#accessibility #copyright { display: block; float: right; text-align: right; font-size: 11px;}
#accessibility #copyright a { color: #666; text-decoration: none; }
#accessibility #copyright a:hover { color: #aaa; }
#accessibility #copyleft { display: block; float: left; text-align: left; font-size: 11px;}

#contact-form { clear:both; width: 100%; padding: 40px 0 0; margin:0; }

a { border: 0; text-decoration: none;}
a>img { border: 0; }

.pushright { padding-left: 20px; float: right; }

#contactEmail { font-size: 18px; }

/* -- nav menu -- */

@media only screen and (min-device-width: 768px) {

    #topbar .nav { display: none; }
    #wrapper { width: 980px; margin: auto; min-height: 100%;}

    #nav { position: absolute; right: 0; top: 0; }
    #nav-content{height:36px; background-repeat:no-repeat; background-position:center top; text-align: right;}
    #nav-wrap{text-align: right;margin-top:0; margin-left: 100px;}
    #nav{margin:0;padding:0;list-style:none;font-weight:normal;font-size:13px}
    #nav>li { font-family: sansumi, sans-serif; font-weight: normal; background: url(/images/top-buttons.png) repeat-x; height: 45px; border-radius: 0 0 5px 5px; margin-left: 5px; box-shadow: 2px 2px 6px #666; line-height: 35px; text-shadow: 1px 1px 2px #666;}
    #nav li{float:left;display:block;position:relative;z-index:10500}
    #nav li>a{display:block;height: 25px; line-height: 25px; padding: 0 20px; text-decoration:none;text-align:center;color:#fff;}
    #nav>li>a{height: 45px; line-height: 45px;}
    /*#nav>li>a:hover{background-color: #efefef;}*/
    #nav>li>ul{position:absolute;left:0;display:none;margin:0;padding:0;list-style:none}
    #nav>li:hover>ul{display:block; z-index: 99999;}
    #nav>li>ul>li{width:180px;float:left;border-top:1px solid transparent;background-color: #3086C4; background-color: rgba(48,134,196,0.9); z-index: 99999;}
    #nav>li>ul>li>ul{display:none;width:130px;position:absolute;left:140px;top:0}
    #nav>li>ul>li>ul.wide{width:240px}
    #nav>li>ul>li>ul li{background-color:rgba(130,130,130,0.9);margin-left:1px;display:block;width:130px;margin-bottom:1px}
    #nav>li>ul>li>ul li:hover{background-color:rgba(1,1,120,0.9)}
    #nav>li>ul>li>ul li:hover a{color:#fff}
    #nav>li>ul>li>ul.wide li{width:240px}
    #nav>li>ul>li:hover>ul{display:block}
    #nav>li>ul>li:hover{background-color:rgba(1,1,120,0.9)}
    #nav>li>ul>li:hover>a{color:#fff}
    #nav ul a{display:block;padding:5px 5px 5px 5px;color:#fff;text-align:center}
    #nav ul a:hover{text-decoration:none}

    #nav>li#nav-vehicles-btn>ul { left: -39px;}
    #nav>li#nav-services-btn>ul { left: -37px;}

    #nav>li#nav-vehicles-btn>ul>li:hover{ background-color: rgba(255, 62, 62, 0.9); }
    #nav>li#nav-services-btn>ul>li:hover{ background-color: rgba(240, 126, 169, 0.9); }

    #nav>li#nav-home-btn { background-position: 0 -45px; }
    #nav>li#nav-vehicles-btn { background-position: 0 -90px; }
    #nav>li#nav-services-btn { background-position: 0 -135px; }
    #nav>li#nav-gallery-btn { background-position: 0 -225px; }
    #nav>li#nav-news-btn { background-position: 0 -180px; }
    #nav>li#nav-contact-btn { background-position: 0 -270px; }

    #nav>li#nav-home-btn:hover { background-position: 0 -360px; }
    #nav>li#nav-vehicles-btn:hover { background-position: 0 -405px; }
    #nav>li#nav-services-btn:hover { background-position: 0 -450px; }
    #nav>li#nav-gallery-btn:hover { background-position: 0 -540px; }
    #nav>li#nav-news-btn:hover { background-position: 0 -495px; }
    #nav>li#nav-contact-btn:hover { background-position: 0 -585px; }

    #slideshow { width: 978px; border: 1px solid #ccc; height: 523px; margin-top: 90px; position: relative; border-radius: 0 5px 0 5px;}

    #slideshow>img {
        position:absolute;
        top:0;
        left:0;
        z-index:8;
        opacity:0.0;
        border-radius: 0 5px 0 5px;
    }

    #slideshow>img.active {
        z-index:10;
        opacity:1.0;
    }

    #slideshow>img.last-active {
        z-index:9;
    }


    #slideshow>div#info { width: 242px; float: right; margin-top: 10px; margin-right: 10px; position: relative; z-index: 30;}
    #slideshow>div#info>a { display: block; width: 242px; height: 74px; position: absolute; background: url(/images/banners/cta-buttons.png); }
    #slideshow>div#info>a#rcol-heading { background-position: -1210px 0; top: 0; background-size: 1452px 148px;}
    #slideshow>div#info>a#funbulance { background-position: 0 0; top: 84px; background-size: 1452px 148px;}
    #slideshow>div#info>a#funbulance:hover { background-position: 0 -74px; background-size: 1452px 148px;}
    #slideshow>div#info>a#cars { background-position: -242px 0; top: 168px; background-size: 1452px 148px;}
    #slideshow>div#info>a#cars:hover { background-position: -242px -74px; background-size: 1452px 148px;}
    #slideshow>div#info>a#limos { background-position: -484px 0; top: 252px; background-size: 1452px 148px;}
    #slideshow>div#info>a#limos:hover { background-position: -484px -74px; background-size: 1452px 148px;}
    #slideshow>div#info>a#pink { background-position: -726px 0; top: 336px; background-size: 1452px 148px;}
    #slideshow>div#info>a#pink:hover { background-position: -726px -74px; background-size: 1452px 148px;}
    #slideshow>div#info>a#fengine { background-position: -968px 0; top: 420px; background-size: 1452px 148px;}
    #slideshow>div#info>a#fengine:hover { background-position: -968px -74px; background-size: 1452px 148px;}

    #accessibility #copyleft, #accessibility #copyright { width: 400px; }
}

/* slideshow ------------------------------------------------*/










/* ---- loading hammersmith font ---- */

@font-face {
    font-family: 'sansumi';

    src: url('/fonts/Sansumi-Bold-webfont.svg') format('svg'),
         url('/fonts/Sansumi-Bold-webfont.eot') format('embedded-opentype'),
         url('/fonts/Sansumi-Bold-webfont.woff') format('woff'),
         url('/fonts/Sansumi-Bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sansumi';

    src: url('/fonts/Sansumi-ExtraBold-webfont.svg') format('svg'),
         url('/fonts/Sansumi-ExtraBold-webfont.eot') format('embedded-opentype'),
         url('/fonts/Sansumi-ExtraBold-webfont.woff') format('woff'),
         url('/fonts/Sansumi-ExtraBold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/* --- placeholder --- */
/*
 CSS to style the placeholder text.
 Separate rule for Firefox.
 Cannot stack with WebKit's.
 */
input.placeholder_text,
textarea.placeholder_text {
    color: #777;
}

::-webkit-input-placeholder {
    color: #777;
}

label.control-label { width: 140px; }

a[name=contact] { text-decoration: none; }

#headline { width: 760px; text-align: center; margin-top: 20px; float: right; color: #333; font-size: 13px; }

.sixtytwo { float: left; width: 62%; }

.fivesixty { width: 560px; float: left;}

.gallery #mainTitle { margin-top: 70px; }

#callbackImgContact { width: 900px; height: 40px; margin: auto; display: block; }

.minusthirtyleft { margin-left: -30px; }

#callBackImageContactPage, #callbackimg { width: 449px !important; float: right; margin-right: 80px; margin-bottom: -35px;   height: 40px !important; display: block; }


@media only screen and (max-device-width: 767px) {
    .index h1 { position: absolute; top: 140px; width: 80%; margin:auto; display: block; }
    h3 { line-height: 20px; }
    #wrapper { width: 100%; margin: 0; padding: 0}

    #slideshow { width: 100%; margin-top: 200px; position: relative; border-radius: 0 5px 0 5px; border: 0;}

    #slideshow>img {
        position:absolute;
        width: 100%;
        top:0;
        left:0;
        z-index:8;
        opacity:0.0;
    }

    #slideshow>img:last-of-type { position: relative; }


    #slideshow>img.active {
        z-index:10;
        opacity:1.0;
    }

    #slideshow>img.last-active {
        z-index:9;
    }

    #slideshow #info { display: none; }

    #header { position: absolute; top:0;}

    h2, h2.blue, h2.pink, h2.white { width: 94%; font-size: 16px; margin: 5px 10px; text-align:center; }

    h2.white { color: #010171; }
    .fire h2.white { color: #d20000; }
    .pip h2.white { color: #fc7bbe; }

    h3 { width: 90%; margin:auto;}

    #logo, .pip #logo, .fire #logo { display: block; background: url(/images/logo-sml-text-noborder.png) no-repeat top center; background-size: 148px 120px; width: 100%; height: 120px; position: absolute; top: 40px; z-index: auto;}

    #headline { width: 90%; margin: auto; padding: 0 5%;}

    .index #headline { margin: 18px auto 0;}

    #nav-content {
        display: none;
    }

    #topbar.nav { display: block; }

    .pushleft { padding-left:0;}
    .pushleft p, .pushleft ul { padding:0; margin: 10px auto; width: 90%; }
    .pushleft li { list-style-position: inside;}

    .pushright { margin: auto; float: none; padding-left:0; width: 80%;}

     fieldset { width: 98% !important; margin:0 !important; padding:0 !important;}
     section { display: inline-block; width: 90% !important; margin:0 !important; padding:0 !important;}
     section * { max-width: 98%; }



    .lowlight-content { width: 100%; padding: 0; margin: 0; }
    .lowlight-content>div { width: 100%; float: left; clear: both; padding: 0; margin: 0; }
    .three-col, .two-col { width: 100%; margin: auto; float: left; padding: 0;}
    .three-col img { border:0; margin: 5px auto !important; padding: 0; border-radius: 0;}
    .lowlight-content>div * { color: #333; padding: 0; margin: auto; }

    .lowlight-content div div { margin:auto; background-image: url(/images/indexlowlight.jpg); background-position: 0 0; background-size: 291px 480px; }
    .lowlight-content div p, .lowlight-content>div li  { width: 90%; height: auto; padding: 0; margin: auto; color: #333; font-size: 12px; line-height: 20px;}
    .lowlight-content a { color: #666 !important;}

    #headerContactLinks { display: none; }

    #lowlight, #lowlightpink, #lowlightred { display: none; }

    #accessibility { display: none; }
    #accessibility #copyright, #accessibility #copyleft { width: 50%; }



    side-gallery-img { margin: auto !important; width: 90% !important; display: block;}
    .gallery-img { width: 49%; padding: 3px;}

    .oneeighty { width: 100% !important; margin: 0; padding: 0;}
    .oneeighty a  { width: 49%; border: 0; margin:0 auto; display: block; padding: 2px; float: left; }
    .oneeighty img { width: 100%; border: 0;}

    form { width: 90% !important; display: block; padding: 5px !important;}
    input[class*=span], select { width: 100% !important; padding: 2px !important; margin: 3px 0 3px 8px !important; display: block; float: left; }

    .sixtytwo { float: left; width: 100%; }

    .fivesixty { width: 90%; padding: 5px;}

    .gallery #mainTitle { margin-top: 20px; }
    .gallery #headline { margin-top: 166px; }

    #contactEmail { font-size: 14px; }

    .contactPage table { width: 90%; margin: auto; }

    #callbackImgContact { display: none; }

    .minusthirtyleft { margin: auto; width: 90%; }

    .contactPage .row { margin-left:0 !important; }

    #callbackImageContactPage, .mobHide,  #callbackimg { display: none; }
}