/*
Theme Name: Transit Lane
Description: transitlane.ca
Version: 1.0
Author: Me!
Author URI: http://www.transitlane.ca/

Theme design & development by yo mama!
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    text-align: left;
}

body {
    background: #f8f8f8 url(img/bg-body.gif) top repeat-x;
    font: 12px Arial, sans-serif;
    color: #606060;
    }

#wrap {
    width: 100%;
    text-align: center;
}

#container {
    width: 900px;
    margin: 0px auto;
}

#header {
    position: relative;
    width: 900px;
    height: 102px;
    background: url(img/header.gif) no-repeat;
}

#logo {
    width: 399px;
    height: 60px;
}

#logo a {
    position: absolute;
    left: 0;
    top: 30px;
    display: block;
    width: 399px;
    height: 60px;
}

#logo span {
    display: none;
}

#phone {
    position: absolute;
    left: 601px; /* 591px */
    top: 50px;
    font: 11px arial, sans-serif;
    font-weight: bold;
    color: #fff;
}

#phone a {
    text-decoration: none;
    color: #f0f0f0;
}

#phone a:hover {
    text-decoration: underline;
}

#feature {
    width: 878px; /* = 900px - 2px border - 20px padding */
    padding: 10px;
    margin: 0 0 13px 0;
    background-color: #fff;
    border: 1px solid #cecece;
}

#home #feature {
}

#sub_page #feature {
    height: 230px; /* 252px - 2px border - 20px padding */
}

#nav {
    width: 880px;
    height: 40px;
    background: url(img/bg-nav.gif) no-repeat;
}

#nav ul {
    list-style: none;
    display: block;
}

#nav ul li {
    display: inline;
}

#nav ul li a {
    height: 40px;
    display: block;
    float: left;
    background: url(img/bg-nav.gif) no-repeat;
    font: 12px arial, sans-serif;
    color: #fefefe;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
}

#nav ul li a span {
    line-height: 40px; /* v-align text trick */
}

#nav ul li a#home {
    width: 46px;
    background-position: 0 0;
}

#nav ul li a#home:hover, #nav ul li#home a.current {
    background-position: 0 -40px;
}

#nav ul li a#about {
    width: 110px;
    background-position: -46px 0;
}

#nav ul li a#about:hover, #nav ul li#about a.current {
    background-position: -46px -40px;
}

#nav ul li a#services {
    width: 129px;
    background-position: -156px 0;
}

#nav ul li a#services:hover, #nav ul li#services a.current {
    background-position: -156px -40px;
}

#nav ul li a#blog {
    width: 110px;
    background-position: -285px 0;
}

#nav ul li a#blog:hover, #nav ul li#blog a.current {
    background-position: -285px -40px;
}

#nav ul li a#contact {
    width: 121px;
    background-position: -395px 0;
}

#nav ul li a#contact:hover, #nav ul li#contact a.current {
    background-position: -395px -40px;
}

#nav ul li a#quote {
    width: 122px;
    background-position: -516px 0;
}

#nav ul li a#quote:hover, #nav ul li#quote a.current {
    background-position: -516px -40px;
}

#nav ul li a#home span {
    display: none;
}

#feature_img {
    width: 880px;
    height: 128px;
    margin: 10px 0;
}

.home #feature_img {
    position: relative;
    height: 388px;
    background: url(img/feature-home.jpg) no-repeat;
}

.home #feature_img span {
    display: none;
}

#feature_img a#b_services {
    position: absolute;
    left: 46px;
    top: 299px;
    width: 161px;
    height: 40px;
    background: url(img/button-services-quote.png) no-repeat;
    background-position: 0 0;
}

#feature_img a#b_services:hover {
    background-position: 0 -40px;
}

#feature_img a#b_quote {
    position: absolute;
    left: 216px;
    top: 299px;
    width: 161px;
    height: 40px;
    background: url(img/button-services-quote.png) no-repeat;
    background-position: -161px 0;
}

#feature_img a#b_quote:hover {
    background-position: -161px -40px;
}

.about #feature_img {
    background: url(img/feature-about.jpg) no-repeat;
}

.services #feature_img {
    background: url(img/feature-services.jpg) no-repeat;
}

.contact #feature_img {
    background: url(img/feature-contact.jpg) no-repeat;
}

.quote #feature_img {
    background: url(img/feature-quote.jpg) no-repeat;
}

.blog #feature_img {
    background: url(img/feature-blog.jpg) no-repeat;
}

#ticker {
    position: relative;
    width: 880px;
    height: 40px;
    background: url(img/bg-ticker.gif) no-repeat;
}

#ticker p {
    position: absolute;
    left: 16px;
    top: 13px;
    font-size: 11px;
    color: #606060;
}

#main {
    width: 900px;
    margin-bottom: 30px;
}

#content {
    padding: 40px;
    border: 1px solid #cecece;
    background-color: #fff;
}

#home #content {
    width: 818px; /* 900px - 2px border - 80px padding */
    *width: 900px;
    padding: 40px;
    border: 1px solid #cecece;
    background-color: #fff;
}

#sub_page #content {
    width: 553px; /* 635px - 2px border - 80px padding */
    *width: 635px;
    float: right;
}

#sidebar {
    width: 250px;
    float: left;
    font-size: 11px;
}

.big_box {
    width: 188px; /* 250px - 2px border - 60px padding */
    *width: 250px;
    margin-bottom: 24px;
    padding: 40px 30px;
    background-color: #fff;
    border: 1px solid #cecece;
    font-size: 12px;
    font-weight: bold;
}

.big_box p {
    line-height: 32px;
    background: url(img/bg-big_box-text.gif) no-repeat;
}

.sml_box {
    width: 185px; /* 235px - 10px border - 40px padding */
    *width: 235px;
    margin: 0 0 12px 7px;
    padding: 20px;
    background-color: #fff;
    border: 5px solid #dedede;
}

.sml_box p {
    line-height: 16px;
}

#request_quote {
    width: 225px; /* 235px - 10px border - 70px padding */
    *width: 235px;
    height: 40px; /* 50px - 10px border - 10px padding */
    *height: 50px;
    margin: 0 0 12px 7px;
    background: #fff url(img/bg-quote.gif) left no-repeat;
    border: 5px solid #dedede;
}

a.quote {
    display: block;
    width: 225px;
    height: 40px;
    line-height: 40px;
    text-decoration: none;
    color: #606060;
    font-weight: bold;
}

a.quote span {
    margin-left: 63px;
}

#footer_container {
    width: 100%;
    height: 100px;
    padding-top: 30px;
    background: #f8f8f8 url(img/bg-footer.gif) top repeat-x;
    text-align: center;
    color: #666;
}

#footer {
    width: 900px;
    margin: 0px auto;
    text-align: left;
}

#footer p#copyright {
    float: left;
}

#footer ul {
    float: right;
    list-style: none;
}

#footer ul li {
    display: inline;
    padding-left: 8px;
}

#footer ul li a {
    color: #666;
    text-decoration: none;
}

h1, h2, h3, h4 {
    font-family:  'Gill Sans MT', 'Gill Sans', verdana, arial, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 10px;
}

#content h1, #feature h1 {
    margin-bottom: 41px;
    font-size: 30px;
    line-height: 28px;
}

#content h2 {
    font-size: 20px;
    line-height: 18px;
}

#content h2.post-title {
    margin-bottom: 2px;
}

#content h2 a {
    text-decoration: none;
    color: #606060;
}

#content h2 a:hover {
    text-decoration: underline;
}

#content p.postmetadata {
    font-size: 10px;
    margin-bottom: 10px;
}

#content p, #feature p {
    margin-bottom: 20px;
    line-height: 16px;
}

#sidebar .big_box h3 {
    font-size: 16px;
    line-height: 16px;
    margin-bottom: 45px;
}

#sidebar .sml_box h4 {
    margin-bottom: 20px;
}

.clear {
    clear: both;
}

form {
  margin: 10px auto 0 auto;
  width: 600px;
}

form label {
  width: 170px;
  margin: 6px 0 0 0;
  display:-moz-inline-box; /*for mozilla*/
	display:inline-block; /*for Opera & IE*/
  text-align: left;
  vertical-align: top;
}

form input,
form textarea,
form select { 
	padding: 3px;
	background: #f9f9f9; 
	border: 1px solid #888888; 
	vertical-align: top;
}

form input:hover,
form textarea:hover,
form select:hover	{
	background:#CEDDDF; 
}

form input:focus,
form textarea:focus,
form select:focus	{ 
	background:#F3F8F8; 
}

form textarea,
form input {
	width:250px;
	padding: 5px;
	font: 12px arial, sans-serif;
}

form select {
	width:250px; /* attempt to have equal length */
	padding:5px 0;
}  

form textarea {
    width:360px;
    height:150px;
    overflow:auto;
}

form input.radio {
    width: 10px;
    margin: 8px 0 0 0;
}

form input.checkbox {
    width: 10px;
    margin: 8px 5px 0 0;
}

form span.radio, form span.checkbox {
    padding: 0;
    margin: 6px 5px 0 0;
    display:-moz-inline-box; /*for mozilla*/
	display:inline-block; /*for Opera & IE*/
}

form span.checkbox {
  margin-top: 7px;
}

form input.sendbutton	{ 
	width:180px;  
	padding:5px; 
	margin: 10px 0 0 0;
	border:1px solid #909090!important;
	border-left-color:#ececec!important; 
	border-top-color:#ececec!important;
	background-color: #e5e5e5;
	color: #606060;
	font-size:12px;
	font-weight: bold;
	text-transform: uppercase;
}

/* the div that holds the date picker calendar */
.dpDiv {
	}


/* the table (within the div) that holds the date picker calendar */
.dpTable {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	color: #505050;
	background-color: #eee;
	border: 1px solid #aaa;
	width: 148px;
	}


/* a table row that holds date numbers (either blank or 1-31) */
.dpTR {
	}


/* the top table row that holds the month, year, and forward/backward buttons */
.dpTitleTR {
	}


/* the second table row, that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTR {
	}


/* the bottom table row, that has the "This Month" and "Close" buttons */
.dpTodayButtonTR {
	}


/* a table cell that holds a date number (either blank or 1-31) */
.dpTD {
	border: 1px solid #fff;
	}


/* a table cell that holds a highlighted day (usually either today's date or the current date field value) */
.dpDayHighlightTD {
	background-color: #eee;
	border: 1px solid #656565;
	}


/* the date number table cell that the mouse pointer is currently over (you can use contrasting colors to make it apparent which cell is being hovered over) */
.dpTDHover {
	background-color: #656565;
	border: 1px solid #888888;
	cursor: pointer;
	color: #fff;
	}


/* the table cell that holds the name of the month and the year */
.dpTitleTD {
	}


/* a table cell that holds one of the forward/backward buttons */
.dpButtonTD {
	}


/* the table cell that holds the "This Month" or "Close" button at the bottom */
.dpTodayButtonTD {
	}


/* a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTD {
	background-color: #fff;
	border: 1px solid #fff;
	color: #000;
	}


/* additional style information for the text that indicates the month and year */
.dpTitleText {
	font-size: 12px;
	color: #000;
	font-weight: bold;
	text-align: center;
	}


/* additional style information for the cell that holds a highlighted day (usually either today's date or the current date field value) */ 
.dpDayHighlight {
	color: #000;
	font-weight: bold;
	}


/* the forward/backward buttons at the top */
.dpButton {
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #fff;
	background: #656565;
	font-weight: bold;
	padding: 0px;
        border: 1px solid #333;
	}


/* the "This Month" and "Close" buttons at the bottom */
.dpTodayButton {
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #fff;
	background: #656565;
	font-weight: bold;
        border: 1px solid #333;
        padding: 0 8px 0 8px;
	}
	
.dpTable td, .dpTable th {
  padding: 0px;
  height: inherit;
}