/* Reset
-----------------------------------------------------------------------------------------------*/

html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, samp, small, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
a, ins, del { text-decoration: none; }
table { border-collapse: collapse; border-spacing: 0; }
th, td { vertical-align: top; }
th { text-align: left; }


/* Accessibility Navigation & Hide
-----------------------------------------------------------------------------------------------*/

#accessibility-nav, 
.hide { position: absolute; top: -999em; left: -999em; height: 1px; width: 1px; }


/* Clearfix
-----------------------------------------------------------------------------------------------*/

.clearfix:after,
#header .contact-info:after,
#navigation ul:after,
#content:after,
#content .gallery ul:after,
#footer:after,
#content .clients ul:after,
.wrapper-btm:after  { content: "."; display: block; height: 0; clear: both; visibility: hidden; }


/* Default Styles
-----------------------------------------------------------------------------------------------*/

body { background: #d3b282 url(../images/bg.jpg) center ; color: #333; font: 62.5%/1.3 "Arial", "Helvetica", sans-serif; }
hr { display: none; }
strong { font-weight: bold; }
em { font-style: italic; }
del { text-decoration: line-through; }
th { font-weight: normal; }
address, cite, dfn { font-style: normal; }
li { list-style: none; }
abbr, acronym { border-bottom: 1px dotted #999; cursor: help; }
input, textarea, select { font-family: "Arial", "Helvetica", sans-serif; }
a, a:visited { color: #9a0000; text-decoration: none; }
a:hover, a:active { color: #9a0000; text-decoration: underline; }


/* Container
-----------------------------------------------------------------------------------------------*/

.wrap-top { background: url(../images/bg-wrap-top.png) repeat-x center top; }
.wrap-btm { background: url(../images/bg-wrap-btm.png) repeat-x center bottom; }
.wrap { background: url(../images/bg-top.png) no-repeat center top; }
.container { width: 813px; position: relative; margin: 0 auto; font-size: 1.2em }
#header { height: 274px; width: 813px; position: relative }


/* Header
-----------------------------------------------------------------------------------------------*/

#header .sign-me-up-designs { display: block; width: 322px; height: 104px; text-indent: -9999em; background: url(../images/logo.png) no-repeat; position: relative; top: 62px; left: 30px }
#header .contact-info { display: block; width: 427px; height: 108px; background: url(../images/bg-follow.png) no-repeat; position: absolute; top: 0; right: -13px; padding-top: 16px }
#header .contact-info p,
#header .contact-info ul { float: left; width: 200px; margin-left: 25px }
#header .contact-info ul li { display: inline }
#header .contact-info ul li a { float: left; display: block; width: 57px; margin-right: 6px; background: url(../images/ico-fb.png) no-repeat left top; height: 19px; padding-left: 33px; font-size: 0.93em; padding-top: 5px; color: #9a0000; text-decoration: underline }
#header .contact-info ul li.twitter a { background: url(../images/ico-twitter.png) no-repeat left top }
#header .contact-info ul li.flickr a { background: url(../images/ico-flicker.png) no-repeat left top }
#header .contact-info ul li.yelp a { background: url(../images/ico-yelp.png) no-repeat left top }
#header .contact-info ul li a:hover { text-decoration: none; background-position: left -24px }
#header .contact-info p { width: 119px; padding-left: 33px; color: #9a0000; font-size: 1.6em; margin: 0 }
#header .tagline { color: #411f11; font-size: 1.7em; position: absolute; top: 112px; right: 40px; font-weight: bold }
#header .contact-info2 ul { float: right; width: auto; margin-right: 75px; }
#header .contact-info2 li a { text-indent: -999em; width: 24px !important; padding-left: 0 !important; }

/* Navigation
-----------------------------------------------------------------------------------------------*/

#navigation { width: 813px; height: 66px; background: url(../images/bg-nav.png) no-repeat; position: relative; z-index: 2 }
#navigation ul { padding: 15px 30px }
#navigation ul li { display: inline }
#navigation ul li a { float: left; margin-right: 60px; font-size: 1.5em; color: #fff; text-decoration: none; background: url(../images/bg-star.png) no-repeat left -34px; padding-left: 26px; height: 28px; padding-top: 6px }
#navigation ul li.last a { margin: 0 }
#navigation ul li a:hover,
#navigation ul li.active a { background-position: left top }


/* Drop down
-----------------------------------------------------------------------------------------------*/

.sf-menu ul { position: absolute; top: -999em; width: 10em; }
.sf-menu ul li { width: 100%; }
.sf-menu li:hover { visibility: inherit; }
.sf-menu li { float: left; position: relative; }
.sf-menu a { display: block; position: relative; }
.sf-menu li:hover ul,
.sf-menu li.sfHover ul { left: 0; top: 3em; z-index: 99; }
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul { top: -999em; }
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul { left: 10em; top: 0; }
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul { top: -999em; }
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul { left: 10em; top: 0; }
.sf-menu li ul { background: #29aebd; }
.sf-menu li ul li a { margin: 0 !important; padding: 5px 0 !important; background: none !important; font-size: 14px !important; height: auto !important;  }
#navigation .sf-menu li .active a { text-decoration: underline; }
.sf-menu li ul li a:hover { text-decoration: underline !important }
.sf-menu li ul { padding: 5px 10px !important }
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { outline: 0; }


/* Content
-----------------------------------------------------------------------------------------------*/

#content { width: 753px; background: url(../images/bg-content.png) repeat-x; padding: 30px; margin-top: 2px; position: relative; z-index: 1 }
body.home #content h2,
#content .feature h2,
#content h1 { font-size: 2em; color: #411f11; margin-bottom: 18px }
#content .feature { float: left; width: 292px }
#content .feature img { margin-bottom: 15px }
#content .feature p { line-height: 1.6em; font-weight: bold; color: #2b251f; padding-bottom: 15px }
#content .gallery { float: right; width: 420px }
body.our-work #content .gallery { float: none; width: auto; padding-left: 25px; }
#content .gallery ul li { float: left; width: 91px; height: 91px; background: url(../images/bg-frame_s.png) no-repeat left top; margin: 0 13px 20px 0 }
#content .gallery ul li.alt1 { background-position: -104px top }
#content .gallery ul li.alt2 { background-position: left -112px }
#content .gallery ul li.alt3 { background-position: -104px -112px }
#content .gallery ul li img { margin: 7px 0 0 8px }
#content .gallery a:focus { outline: 0; }
#content .content-inside { width: 420px; float: right; line-height: 1.6em  }
#content .content-inside h2 { font-size: 1.3em; color: #411f11; padding-bottom: 5px }
#content .content-inside p,
#content .content-inside ul { padding-bottom: 15px; list-style-type: disc }
#content .content-inside ul li { list-style: disc; margin-left: 30px }
#content .testimonial ul li { list-style: none; margin: 0 0 15px 0; border-bottom: 1px dotted #411f11 }
#content .contact-form label,
#content .contact-form input,
#content .contact-form textarea { display: block }
#content .contact-form input,
#content .contact-form textarea { margin-bottom: -5px; width: 250px; padding: 3px; border: 1px solid #411f11 }
#content .contact-form textarea { font-size: 1em; width: 350px; height: 100px }
#content .contact-form .submit input { width: auto !important; padding: 5px 10px; background: #411f11; color: #fff; font-weight: bold; border: none; cursor: pointer; }
.map { border: 1px solid #ccc; background: #fff; padding: 7px 7px 4px; margin: 0 auto 35px; width: 690px; }

body.home #content .gallery,
body.home #content .feature { float: none; width: auto; }
body.home #content .feature img { float: right; margin: 0 0 0 25px; }


/* Footer
-----------------------------------------------------------------------------------------------*/

#footer { clear: both; width: 813px; height: 119px; background: url(../images/bg-footer.png) no-repeat }
#footer ul { float: right; padding-top: 55px }
#footer ul li { display: inline; padding-right: 30px }
#footer ul li a { color: #c19d76 }


/* Colorbox
-----------------------------------------------------------------------------------------------*/

#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative; overflow:hidden;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
#cboxWrapper { background: url(../images/bg_popup.png) repeat 0 0; }
#cboxOverlay{background:url(../images/bg_overlay.png) 0 0 repeat;}
#cboxTopLeft, #cboxTopRight, #cboxBottomLeft, #cboxBottomRight{ width:10px; height:10px; }  
#cboxMiddleLeft, #cboxMiddleRight { width:10px;}
#cboxTopCenter, #cboxBottomCenter {height:10px; }
#cboxContent{background:#fff; padding: 10px;}
#cboxLoadedContent{margin-bottom:23px;}
#cboxTitle{ position:absolute; bottom:0px; left:0; text-align:left; width:100%; color:#949494;  }
#cboxTitle h4 {  margin: 0 10px 4px 10px; }
#cboxTitle h4 a { color:#0099CC; font-size: 14px; font-weight: normal; }
#cboxTitle h4 a:hover { color: #fff; }
#cboxTitle p.product { color: #3D3D3D; font-size: 11px; margin: 0 0px 6px 10px;  }
#cboxTitle p.product strong { background: url(../images/bg_copyright.gif) no-repeat right center; padding-right: 4px; margin-right: 4px; }
#cboxTitle p.more { margin: 0 10px; font-size: 11px; text-align: right;  margin-bottom: 40px; }
#cboxTitle p.more span { background: url(../images/bg_copyright.gif) no-repeat right center; padding-right: 10px; margin-right: 6px; }
#cboxTitle p.more span.last { background: transparent; padding-right: 0; margin-right: 0; }
#cboxCurrent{position:absolute; bottom:10px; left:10px; color:#949494;}
#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
#cboxPrevious{position:absolute; bottom:0; left:0px; background:url(images/controls.png) -75px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious.hover{background-position:-75px -25px;}
#cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) -50px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;}
#cboxNext.hover{background-position:-50px -25px;}
#cboxLoadingOverlay{background:url(images/loading_background.png) center center no-repeat;}
#cboxLoadingGraphic{background:url(images/loading.gif) center center no-repeat;}
#cboxClose{position:absolute; bottom:4px; right:10px; background:url(../images/bg_close.gif) no-repeat 0 0; width:21px; height:22px; text-indent:-9999px;}