@font-face {
    font-family: neogrey;
    src: url("fonts/NeogreyRegular.otf");
}

@font-face {
    font-family: neogreyMed;
    src: url("fonts/NeogreyMedium.otf");
}

body {
    /*border-top : 4px solid #F46602;*/
    background: #fffafa url("images/background.jpg") repeat-x;

    font-family: Verdana, sans-serif, Arial;

    line-height: 1.5;

    /* f5f5f5 */
}


img { max-width: 100%; }




/* ********* HEADINGS ********* */



h1 {

}

h2 {
/*defualt*/
    /*display: block;
    font-size: 1.5em;
    margin-top: 0.83em;
    margin-bottom: 0.83em;
    margin-left: 0;
    margin-right: 0;*/
    display: block;
    font-size: 1.5em;
    margin: 5px 0;
    font-weight: bold;
}

h3 {}

h4 {}

h5 {}

h6 {}


/* ********* ELEMENTS ********** */

strong {
    font-weight: bold;
}


/* ********* CLASSES ********** */

.font_neogrey { font-family: neogrey; }
.font_neogreyMed { font-family: neogreyMed; }

.centre { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
.bold { font-weight: bold; }


.orange { color:  #F46602; }
.orangebg { background-color: #F46602; }

.valign { vertical-align: top; }
.valignMiddle { vertical-align: middle; }



/* ********* CORE ********** */
#offline {
    background-color: orangered;
    color: white;
    text-align: center;
}




#nav {
    position: fixed;
    z-index: 99;
    width: 100%;
    height: auto;
    background-color: #F46602;
    margin-bottom: 15px;
}

#brand {
    float: left;
    margin: 10px 10px 10px 20px;
    color: white;
    font-family: neogrey;
    font-size: 22px;
    font-weight:bold;
    text-align: right;
}
#brand a {
    color: white;
}
#brand a:hover {
    color: white;
    text-decoration: none;
}
#brand_phone {
    display: none;
}

/* ****** MENU ***************************************** */

/* MOBILE MENU */
#home_mobileMenu_workaround { display: none; }
#mobileMenu {
    display: none;
}

/* ***** MENU - DROP DOWN LIST ***** */
#menu { /* is a DIV */
    width: 100%;
    margin: 0px auto;
    /*text-align: center;*/
    text-align: right;
    /*background-color: #56CBF4;*/
}

/* Main Menu */
#menu ul {
    /*background-color: #56CBF4;*/
    padding: 0px 10px;
    list-style: none;
    position: relative;
    display: inline-table;
    /*padding: 0;*/
    margin: 0;
}

#menu ul:after {
    content: "";
    clear: both;
    display: block;
}


#menu ul li {
    float: left;
}

/* MENU ITEMS */
#menu ul li a {
    display: block;
    /*padding: 10px 20px;*/
    padding: 10px 30px;
    /*color: #bbbbbb;*/
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
}

#menu ul li:hover {
     /*background-color: #000000;*/
}

#menu ul li:hover a {
    /*color: #666666;*/
    color: #FFFFFF;
}

/* SUB MENU  */
#menu ul ul { /* ul inside a ul -- the dropdown sub menu ... initiall hidden */
    display: none;
    position: absolute;
    top: 100%; /* aligns it right on bottom of the parent UL */
    /*background-color: #F46602;*/
}

#menu ul li:hover > ul {
    display: block;
    padding: 0;
    margin: 0;
}

#menu ul ul li {
    float: none;

    /*border-top: 1px solid #fff;*/
    /*border-bottom: 1px solid #fff;*/
    position: relative;
}


#menu ul ul li a {
    padding: 15px 10px;
    /*width: 150px;*/ /* no width for auto to text */
    color: #FFFFFF; /* no effect .. */
}

#menu ul ul li a:hover {
    /*background: #4b545f;*/
    color: white;
}

/* SUB SUB MENU  */
#menu ul ul ul {
    position: absolute;
    top: 0;
    left: 100%;
}

/* *** MENU END *** */

/* ********* MENU BTN ********** */

.btn-menu {
    color: #fff;
    background-color: #F46602;
    border-color: white;
    margin: 10px;
}

.btn-menu:hover {
    color: #fff;
    /*background-color: #ec971f;*/
    background-color: #000;
    border-color: #fff;
}



#banner {
    text-align: center;
    margin-top: 80px; /* push below nabvar */
    /*margin-bottom: 15px;*/
    margin-bottom: 0;
}
#banner img {
    border-radius: 10px;
}

/* http://stackoverflow.com/questions/10154950/height-of-outer-div-not-expanding-with-inner-div */
#infoboxes {
    width: 100%;
    height: auto;
    margin: 20px 0 20px 0;
    /*background-color: palegreen;*/
}

.infobox {
    width: 250px;
    height:auto;
    margin: 10px auto;
    background-color: white;
    border: thin solid #F46602;
    border-radius: 10px;
}

.infobox_title {
    padding: 10px 0px 10px 0px;
    color: white;
    background-color: #F46602;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.infobox_title h2 {
    text-align: center;
    font-size: 18px;
    font-family: neogreyMed;
}

.infobox_image {
     width: 100%;
     height: 165px;
}
.infobox_image img {
    width:100%;
    height: 165px;
}

.infobox_content {
    width: 250px;
    height: 150px;
    padding: 0px 10px;
    color: #666666;
    text-align: left;
     font-size: 16px;
    overflow: hidden;
}

#pageTitle {
    text-align: center;
    font-size: 32px;
    font-family: neogreyMed;
    color: #F46602;
    margin: 20px 0;
}

#main {
    clear: both;
    width: 100%;
    min-height: 400px;
    margin: 20px 0 20px 0;
    padding: 10px;
}

#main_content li {
    list-style-image: url('images/tick.gif');
}

#callus {
    font-size: 28px;
    color: #F46602;
}

#callus a {
    text-decoration: none;
    color: #F46602;
}

#callus a:hover {
    color: #32558D;
}

.tick {
    list-style-image: url('images/tick.gif');
    line-height: 20px;
}

#manufacturers {
    width: 100%;
    height: auto;
    text-align: center;
    background-color: white;
    margin-bottom: 5px;
}


#googlemaps {
    text-align: center;
}


#footer {
    width: 100%;
    min-height: 60px;
    line-height: 50px;
    background-color: #091E40;
    color: yellow;
}

#footer a {
    text-decoration: none;
    color: yellow;
}

#footer a:hover {
    color: white;
    text-decoration: underline;
}



/* ******** SPECIALS ******** */

#specials {
    margin: 10px 0;
    text-align:  center;	
}
#specials img { border: 5px solid #EB813A; }




/* --- REVIEWS -- */
#reviews_form {
    width: 50%;
    float: left;

}
#reviews_text {
    width: 50%;
    float: left;
    text-align: center;

}

.reviews {
    width:90%;
    height: auto;
    margin: 0px auto;
    border: thin solid #F46602;
    border-radius: 10px;
    margin-bottom: 5px;
    padding:5px;
}

.reviews_title {

    border-bottom: thin dashed blue;
}

#rating {
    background-color: white;
    width:120px;
    height:30px;
    padding: 8px;
    border-radius: 10px;
}

#pending_reviews{
    margin-top:10px;
    border: thin solid red;
    padding:0px 10px 10px 10px;
}


.pagingControls {

    margin-top:10px;
    border: thin solid teal;
    padding: 10px;

}

.pagingControls a {
    padding:10px;
}


#specials {
    margin: 10px 0;
    text-align:  center;
}


/* HR Tag Styles -----------*/
/* Gradient transparent - color - transparent */
hr.style-two { border: 0; height:5px; background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); }
/* Glyph, by Harry Roberts */
hr.style-eight { margin:15px; adding: 0; border: none; border-top: medium double #333; color: #333; text-align: center; } hr.style-eight:after { content: "§"; display: inline-block; position: relative; top: -0.7em; font-size: 1.5em; padding: 0 0.25em; background: #EAEAEA; }
/* END -------------------*/


#tableReviews {
    color: white;
    background-color: #F46602;
    border: thick solid #000000;
    border-radius: 10px;
    width:400px;
    /*margin: 0px auto;*/
    padding:15px;
    margin-right:15px;

    /*
    #385887
    #F98435
    #F37F32
    #35568C
    */
}

#tableReviews input,#tableReviews textarea  { color: black; }

#tableReviews td {
    padding:5px;

}



#tablePhotoGallery td {
    padding:5px;
    text-align: center;
}

table {

    }
table.center {
    margin-left:auto;
    margin-right:auto;


}
/* http://www.granneman.com/webdev/coding/css/centertables/ */

table td {
    vertical-align: top;
}


#tableAutoElectricsPage td {

    vertical-align: top;

}








/* FACEBOOK LIKE */


.fblike {
    width: 100%;
    text-align: right;
    padding-bottom: 5px;
}


.fb-link_bot {
    padding-top: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}




/*
.fb-like-container {
    position: relative;
    padding: 0;
    padding-top: 55px;
}
.fb-like {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}
*/

/* ********* BOOTSTRAP OVERRIDES  ********* */

.container { padding: 0; }
.container-fluid { padding: 0; }


.btn-default {
    margin: 10px;
    padding: 10px;
    background-color: #F46602;
    color: white;
    font-size: 16px;
    font-weight: bold;
    border-radius:0;
    border: none;
}

.btn-default:hover {
    background-color: #F46602;
    color: white;
    opacity: 0.5;

}



/* ********** TESTING ********* */
/*.container { background-color: yellow; }*/
/*.container-fluid { background-color: lime; }*/
/*.col-md-2 { background-color: green; }*/
/*.col-md-10 { background-color: brown; }*/
/*.col-md-3 { background-color: lime; }*/
/*.col-md-4 { background-color: green; }*/
/*.col-md-9 { background-color: brown; }*/

.yellow { background-color: yellow; }
.lime { background-color: lime; }



/* ****************************************************** */
/* To The Top ------------------------------------------ */
.cd-top {
    display: inline-block;
    height: 40px;
    width: 40px;
    position: fixed;
    bottom: 40px;
    right: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    /* image replacement properties */
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background: rgba(0,0,0, 0.8) url(images/cd-top-arrow.svg) no-repeat center 50%;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity .3s 0s, visibility 0s .3s;
    -moz-transition: opacity .3s 0s, visibility 0s .3s;
    transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
    -webkit-transition: opacity .3s 0s, visibility 0s 0s;
    -moz-transition: opacity .3s 0s, visibility 0s 0s;
    transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
    /* the button becomes visible */
    visibility: visible;
    opacity: 1;
}
.cd-top.cd-fade-out {
    /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
    opacity: .5;
}
.no-touch .cd-top:hover {
    background-color: #000000;
    opacity: 1;
}
@media only screen and (min-width: 768px) {
    .cd-top {
        right: 20px;
        bottom: 20px;
    }
}
@media only screen and (min-width: 1024px) {
    .cd-top {
        height: 60px;
        width: 60px;
        right: 30px;
        bottom: 30px;
    }
}
/* END To The Top -------------------------------- */