/* RESET */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { font-size: 1em; font-weight: normal; font-style: normal; }

a { cursor: pointer; }

/* CLEARFIX */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */


body { margin: 12px 0; font-family: Arial, Helvetica, sans-serif; }

#wrapper { width: 956px; position: relative; margin-left: -478px; left: 50%; background: #ba0304 url(../images/layout/backgroundMain.gif) repeat-y; }
#wrapper .top { background: url(../images/layout/topMain.gif) no-repeat top; }
#wrapper .bottom { background: url(../images/layout/bottomMain.gif) no-repeat bottom; }
#wrapper .inner { padding: 9px; }

/* HEADER BAR */
#header { background: #cccccc url(../images/layout/backgroundHeader.gif) repeat-x; }
#header img.logo { float: left; }
#header h2 { width: 350px; height: 94px; font-size: .3em; position: relative; float: left; }
#header h2 span { width: 100%; height: 100%; position: absolute; background: url(../images/layout/strapLine.gif) no-repeat; }

#header #cta { float: right; width: 178px; margin-right: 8px; }
#header #cta .reqAppointment { width: 178px; height: 34px; font-size: .3em; position: relative; margin-top: 24px; }
#header #cta .reqAppointment a:link span,
#header #cta .reqAppointment a:visited span { width: 100%; height: 100%; position: absolute; background: url(../images/buttons/requestAppointmentHeader.gif) right no-repeat; }
#header #cta .reqAppointment a:hover span { background: url(../images/buttons/requestAppointmentHeader.gif) left no-repeat; }

#header #cta .phoneNumber { width: 178px; height: 20px; font-size: .3em; position: relative; float: right; }
#header #cta .phoneNumber span { width: 100%; height: 100%; position: absolute; background: url(../images/layout/phoneNumber.gif) no-repeat; }


/* GLOBAL NAV */
ul#globalNav { border-top: #FFFFFF 2px solid; background: #131212 url(../images/layout/backgroundGlobalNav.gif) repeat-x; overflow: hidden; height: 28px; clear: both; }
ul#globalNav li { float: left; padding: 2px 20px; background: url(../images/layout/spacerGlobalNav.gif) no-repeat left; }
ul#globalNav #home { background: none; }
ul#globalNav li a:link,
ul#globalNav li a:visited { color: #fff; font-size: .8em; text-decoration: none; }
ul#globalNav li a:hover { color: #aaaaaa; }

#home ul#globalNav li#home a,
#about ul#globalNav li#about a,
#service ul#globalNav li#service a,
#caseStudy ul#globalNav li#caseStudy a,
#requestAppointment ul#globalNav li#requestAppointment a,
#contact ul#globalNav li#contact a { text-decoration: underline; }

#home ul#globalNav li#home a:hover,
#about ul#globalNav li#about a:hover,
#service ul#globalNav li#service a:hover,
#caseStudy ul#globalNav li#caseStudy a:hover,
#requestAppointment ul#globalNav li#requestAppointment a:hover,
#contact ul#globalNav li#contact a:hover { color: #fff; text-decoration: underline; }

#content { background: #FFFFFF url(../images/layout/backgroundContent.gif) top repeat-y; border-top: #ba0304 8px solid; overflow: hidden; }

#leftCol { width: 572px; float: left; min-height:415px;}

#rightCol { width: 360px; float: right; min-height:415px; }


/* CLIENT REEL */
#clientReel { clear: both; border-top: #ba0304 8px solid; }
#clientReel div { background: #c2c2c2 url(../images/layout/backgroundClients.gif) repeat-x; }
#clientReel h1 { background: #333333; color: #fff; font-size: .9em; padding: 4px; }
#clientReel img { display: inline; padding: 0 26px; border: none; }



/* FOOTER */
#footer { text-align: center; color: #fff; font-size: .7em; background: url(../images/layout/bottomMain.gif) bottom no-repeat; padding: 4px 8px 24px 8px; }
#footer a:link,
#footer a:visited { color: #fff; text-decoration: underline; }
#footer a:hover { text-decoration: none; }
#footer p { margin-top: 4px; }





/* HOME PAGE */

/* LEFT COL */
#leftCol .panel,
#leftCol .content { background-color: #fff; padding: 8px; position: relative; margin: 0px; }
#home #leftCol .panel h1 { color: #ba0304; font-size: 1.1em; }
#home #leftCol p { font-size: .8em; }

#home #leftCol #cta { float: right; width: 178px; position: relative; margin-top: 8px;}
#home #leftCol #cta .reqAppointment { width: 178px; height: 34px; font-size: .3em; position: relative; }
#home #leftCol #cta .reqAppointment a:link span,
#home #leftCol #cta .reqAppointment a:visited span { width: 100%; height: 100%; position: absolute; background: url(../images/buttons/requestAppointmentPanel.gif) right no-repeat; }
#home #leftCol #cta .reqAppointment a:hover span { background: url(../images/buttons/requestAppointmentPanel.gif) left no-repeat; }
#home #leftCol #cta p { text-align: center; width: inherit; font-weight: bold; margin-bottom: 4px; }


#home #leftCol blockquote { width: 572px; height: 329px; border-top: #ba0304 8px solid; font-size: .8em; position: relative; background: #990000 url(../images/home.jpg) no-repeat bottom left; }
#home #leftCol blockquote a span {  width: 100%; height: 100%; position: absolute; background: #990000 url(../images/home.jpg) no-repeat bottom left; }


/* ALL PAGES */

.highlight { color: #ba0304; }

#leftCol a:link,
#leftCol a:visited,
#rightCol a:link,
#rightCol a:visited { color: #ba0304; text-decoration: none; }

#leftCol a:hover,
#rightCol a:hover { text-decoration: underline; }

/* LEFT COL */

#leftCol .content h1 { color: #ba0304; font-size: 1.3em; padding: 20px 0px 10px 0px;}
#leftCol .content p { font-size: .8em; margin: 8px 0px; }

#leftCol .content img { float: right; padding: 8px 0px 8px 8px;   }

#leftCol .content p.first { font-size: .8em; }
#leftCol .content p.cta { font-size: .8em; color: #ba0304; }

#leftCol .content blockquote { font-size: .8em; color: #ba0304; padding-top: 8px; }
#leftCol .content blockquote span.credit {  color: #333; font-weight:bold;}

#leftCol .content ul li { background: url(../images/layout/bulletRed.gif) left no-repeat; padding-left: 10px; font-size: .8em; line-height: 1.4em; }
#leftCol .content h2 { font-size: .9em; color: #ba0304; padding-top: 8px; }


/* RIGHT COL */
#rightCol h1 { background: #333333; color: #fff; font-size: .9em; padding: 4px; border-bottom: #ba0304 2px solid; }
#rightCol ul#menu li { background-color: #fff; border-bottom: #ba0304 2px solid; padding: 8px; }
#rightCol ul#menu li.selected { background: #e7bf8b url(../images/layout/backgroundMenuSelected.gif) top repeat-x; }
#rightCol ul#menu li a { text-decoration: none; color: #ba0304; background: url(../images/buttons/arrowBallR.gif) left top no-repeat; padding: 4px 4px 4px 28px; }
#rightCol ul#menu li.selected a { background: url(../images/buttons/arrowBallD.gif) left top no-repeat; padding: 4px 4px 4px 28px; }
#rightCol ul#menu li div { display: block; overflow: hidden; }

#rightCol img { float: left; margin: 8px 8px 0px 0px; border: #ba0304 1px solid; }
#rightCol ul#menu li p { float:right; width: 244px; font-size: .7em; padding-top: 8px; }

#rightCol ul#menu li div a,
#rightCol ul#menu li.selected div a { background: none; padding: 0; }

#rightCol blockquote { font-size: .7em; color: #ba0304; padding-top: 8px; width: 244px; }
#rightCol blockquote span.credit { color: #333;  }

#rightCol h2 { font-size: .8em; padding: 8px; background: #fff; }

#rightCol ul.movieList { margin: 8px 0; }
#rightCol ul.movieList li { background: url(../images/layout/bulletRed.gif) left no-repeat; margin-left: 8px; padding-left: 10px; font-size: .8em; line-height: 1.4em;}

#cta { width: 200px; margin-top: 8px;}
#cta .reqAppointment { width: 178px; height: 34px; font-size: .7em; position: relative; }
#cta .reqAppointment a:link span,
#cta .reqAppointment a:visited span { width: 100%; height: 100%; position: absolute; background: url(../images/buttons/requestAppointmentPanel.gif) right no-repeat; }
#cta .reqAppointment a:hover span { background: url(../images/buttons/requestAppointmentPanel.gif) left no-repeat; }
#cta p { width: inherit; font-weight: bold; margin-bottom: 4px; }

#rightCol ul { margin-bottom: 10px;  }
#rightCol ul.links li { background: url(../images/layout/bulletRed.gif) left no-repeat; padding-left: 10px; font-size: .8em; line-height: 1.4em; margin-left: 10px; }
#rightCol h2 { font-size: .8em; color: #000; padding-top: 8px; }


/* REQUEST APPOINTMENT FORM */

#requestAppointment #leftCol form { padding: 16px 0px; }

#requestAppointment #leftCol form label,
#requestAppointment #leftCol form input { display: block; width: 300px; float: left; margin-bottom: 10px; font-size: .9em; }

#requestAppointment #leftCol form label { text-align: right; width: 100px; padding-right: 10px; padding-top: 4px; }

#requestAppointment #leftCol form br { clear: left; }

#requestAppointment #leftCol form input#submit { width: auto; }
#requestAppointment #leftCol form input#title { width: 50px; }
#requestAppointment #leftCol form input#tel { width: 150px; }