/* -------------------------------------------------------------- 
   RESET - Starting with a clean slate for browsers
-------------------------------------------------------------- */

html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub {vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}legend{color:#000;}

/* -------------------------------------------------------------- 
   TYPOGRAPHY
-------------------------------------------------------------- */

body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,input,textarea { font-family: "Century Gothic", Futura, AppleGothic, "Lucida Console", sans-serif; font-size: 12px;}
em,i { font-style: italic;}

/* -------------------------------------------------------------- 
   TABS - Starting point for turning lists into tabs.
-------------------------------------------------------------- */

ul.tabs { margin: 0; padding: 0; }
ul.tabs li ul { float: left; }
ul.tabs li { float: left; list-style: none; margin: 0; padding: 0; }
ul.tabs li a { float: left; display: block; }

/* Clearing floats without extra markup  */
ul.tabs { display: inline-block; }
ul.tabs:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html ul.tabs { height: 1%; }
ul.tabs, ul.tabs li ul { display: block; }

/* -------------------------------------------------------------- 
   WRAPPER - Clearing floats without extra markup.
-------------------------------------------------------------- */

.wrapper { display: inline-block; }
.wrapper:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html .wrapper { height: 1%; }
.wrapper { display: block; }

/* -------------------------------------------------------------- 
   SITE - Site specific styling
-------------------------------------------------------------- */

html { background: #e4d8ba; color: #0e2937;}
strong, b { font-weight: bold;}
em, i { font-style: italic;}
#site { position: relative; top: 50px; width: 805px; margin: 0 auto; padding-bottom: 50px;}
#header { position: relative; top: 0; left: -6px; padding-left: 6px; background: url(../images/header-shadow.png) no-repeat; height: 186px; width: 531px; z-index: 3;}
#headerColor { height: 186px; width: 525px; background: #F56E4A;}
#logo { position: absolute; height: 105px; left: 318px; top: 37px; z-index: 5;}

#menu { position: absolute; top: 146px; left: 26px; width: 556px; border-bottom: 2px solid #b15310; text-transform: uppercase; padding: 4px 0; z-index: 5;}
#menu li { padding: 2px 0; display: block; text-align: left;}
#menu li.home { text-align: right; padding-left: 76px;}
#menu li a { font-size: 14px; color: #f6ba94; text-decoration: none;}
#menu li a.selected { color: #ffffff;}
#menu li.home a { color: #fac59e; font-weight: bold;}
#menu li.home a.selected { color: #a64b00;}

#menuAbout, #menuAbout a { width: 76px;}
#menuServices, #menuServices a { width: 94px;}
#menuSamples, #menuSamples a { width: 155px;}
#menuBlog, #menuBlog a { width: 72px;}
#menuContact, #menuContact a { width: 84px;}
#menuHome, #menuHome a { width: 68px;}

#submenu { width: 531px; position: relative; top: 0; left: -6px; background: url(../images/side-shadow.png) repeat-y; padding-left: 6px; z-index: 3; text-transform: uppercase;}
#submenuColor { width: 525px; background: #F56E4A; padding-bottom: 12px;}
#submenu ul { width: 370px; margin: 0 auto;}
#submenu ul.twoitems { width: 220px; margin: 0 auto;}
#submenu li { padding: 0 18px;}
#submenu li a { font-size: 14px; color: #f6ba94; text-decoration: none;}
#submenu li a.selected { color: #ffffff;}

#primary { width: 531px; position: relative; top: 0; left: -6px; background: url(../images/side-shadow.png) repeat-y; padding-left: 6px; z-index: 3;}
#primary div.homeImage { background: #F56E4A; width: 525px; padding-top: 21px; height: 343px; position: relative;}
#primary div.homeImage span.caption { display: block; position: absolute; top: 346px; left: 5px; color: #636363; font-size: 10px; font-weight: bold;}

#content { width: 481px; padding: 22px; background: #ffffff; line-height: 1.833em;}
#content h1 { font-size: 28px; line-height: 34px; margin-bottom: 10px; }
#content h2 { font-size: 22px; line-height: 34px; margin-bottom: 10px; }
#content h3 { font-size: 16px; line-height: 22px; font-weight: bold;}
#content h4 { font-size: 14px; line-height: 22px; }
#content h5 { font-size: 14px; line-height: 22px; }
#content h6 { font-size: 14px; line-height: 22px; }
#content p { margin-bottom: 1.833em;}
#content p.embedded {margin-bottom:0.5em;}
#content ul, #content ol { margin-top: 1em; margin-left: 12px; margin-bottom: 1.833em;}
#content ul.embedded {margin-top:0; margin-bottom:0.5em;}
#content ul { list-style-type: disc;}
#content ol { list-style-type: decimal;}
#content ul li { margin-left: 12px; line-height: 1.833em; list-style-type: disc;}
#content ul.plain { list-style-type: none; margin-left: 0;}
#content ul.plain li {margin-left: 0px; list-style-type: none; margin-bottom: 0.833em;}
#content ul.plain li p {margin-bottom: 0;}
#content img { margin: 0; padding: 0;}
#content a { color: #6fa2b6; text-decoration: none;}
#content a:hover { text-decoration: underline; }
#content dl dt { font-weight: bold; }
#content dl dd { padding-left: 10px; }
#content abbr, acronym { text-decoration: underline; }
#content blockquote { margin: 20px 0; padding-left: 10px; }
#content dfn { font-style: italic; font-weight: bold; }
#content pre, code { margin: 0; white-space: pre; }
#content pre, code, tt { font: 10px monospace; line-height: 22px; } 
#content tt { display: block; margin: 22px 0; line-height: 22px; }

#subTitle { background: #F56E4A; width: 525px; margin-top: -3px; padding: 16px 0; font-size: 15px; font-weight: bold; text-align: center; text-transform: lowercase; color: #ffffff; letter-spacing: 8px;}


#bottomShadow { position: relative; left: -6px; height: 15px; width: 538px; background: url(../images/bottom-shadow.png) no-repeat; z-index: 3;}

#secondary { width: 278px; position: absolute; top: 9px; left: 525px; background: #ffffff; padding-top: 177px; height: 373px;}
#secondary.photo { text-align: center;}

#secondary p { font-size: 12px; padding: 0 14px; line-height: 1.833em; width: 230px;}
#secondary p.homepage { padding-top: 21px;}
#secondary p.samples { padding-top: 32px;}
#secondary div.samples { padding-top: 32px;}

#secondary ul { margin-top: 1em; margin-left: 24px;}
#secondary ul li { margin-left: 12px; list-style: disc; line-height: 1.833em;}

#secondary ul#socialServices li { list-style: none; clear: left; padding: 6px 0;}
#secondary ul#socialServices li a { color: #6fa2b6; text-decoration: none;}
#secondary ul#socialServices li a img { display: block; float: left;}
#secondary ul#socialServices li a span.imageText{ display: block; float: left; padding: 2px 0 0 2px;}

#footer { color: #9d9476; font-size: 11px; position: absolute; top: 566px; left: 533px;}
#footer p { font-size: 11px;}
#footer a { color: #9d9476; text-decoration: none;}

div.portfolioItem {width: 503px; padding: 0 0 2px 22px; margin: 0 0 8px -22px; position: relative; border-bottom: 1px solid #e9aa97;}
div.portfolioImage { float: left; width: 200px;}
div.portfolioText { float: left; width: 261px; padding: 0 10px;}
div.portfolioLink { position: absolute; top: 130px; left: 222px; background: #e4d8ba;}
#content div.portfolioLink a { padding: 0 5px 0 20px; color: #a64b00;}

div.testimonial {padding: .8em; margin-bottom: 1em; border: 2px solid #ddd; font-style: italic; background: #bbd4df; color: #000; border-color: #666;}
div.testimonial2 {padding: .8em; margin-bottom: 1em; border: 2px solid #ddd; font-style: italic; background: #e4d8ba; color: #000; border-color: #666;}
div.service {width: 503px; padding: 0 0 2px 22px; margin: 0 0 8px -22px; position: relative; border-bottom: 1px solid #e9aa97;}
div.ratesWrapper {width: 503px; padding: 0 0 2px 11px; margin: 0 0 8px -22px; position: relative; border-bottom: 1px solid #e9aa97;}