/*
 Screen style    
 Site: HA Design Studio
*/
body { font-size: 75%; padding: 0; }

/* Auto-clearing floats */
#header:after, #footer:after, #home-work:after,
.popup .inner:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }

/* Image replacement */
.ir { font-size: 1em; margin: 0; overflow: hidden; position: relative; }
.ir span { background-repeat: no-repeat; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; }
.ir a { cursor: pointer; display: block; height: 100%; width: 100%; }

/* Wrapper */
#wrapper { width: 950px; }

/* Header */
#header { padding: 38px 0 10px 49px; }
#header h1 { float: left; width: 207px; height: 32px; margin: 79px 243px 0 0; }
#header h1 span { background-image: url(../images/text/logo.gif); }

/* Navigation */
#nav { float: left; width: 5em; }
#nav .accessibility { display: none; }
#nav li { margin-bottom: 0.35em; float: left; }
#nav a { color: #333; text-transform: lowercase; display: block; width: 5em; }
#nav ul { float: left; width: 10em; position: absolute;	left: -999em;	margin-left: 5em;	margin-top: -3.4em; }
#nav ul a { width: 10em; }
#nav li:hover ul, #nav li.hover ul, #nav li.current ul { left: auto;	}
#nav li:hover a, #nav li.hover a { color: #999; }
#nav li:hover li a , #nav li.hover li a { color: #333; }
#nav a:hover, #nav a.current { color: #999 !important; }

/* Content */
#content { float: left; width: 415px; padding: 35px 10px 20px 48px; border-top: 4px solid #030303; margin-right: 25px; }
body.one-column #content { float: none; width: 678px; padding: 18px 0px 20px 48px; }

/* Sidebar */
#sidebar { float: left; width: 227px; padding: 35px 0 20px 0; border-top: 4px solid #767676; line-height: 1.45; }
#sidebar h2 { margin-bottom: 0.6em; }
#sidebar ul { font-size: 0.92em; }

/* Home page */
.home #wrapper { width: auto; }
.home #header { width: 901px; }
.home #content { width: 639px; float: none; padding: 14px 0 0 48px; border: 0; margin: 0; line-height: 1.25; }
.home #footer { width: 901px; }

/* Home work box */
#home-work { background: #000; padding: 30px 0 20px 48px; }
#home-work ul { width: 912px; }
#home-work li { float: left; margin: 0 10px 10px 0; background: #fff; }
#home-work li img { display: block; }

/* Home columns */
.home #content h2 { color: #333; margin-bottom: 0.5em; font-size: 1.33em; }
.home #content h2 a { color: #333; }
.home #content .col1 { float: left; width: 174px; }
.home #content .col2 { float: left; width: 194px; margin-left: 50px; }
.home #content .col3 { float: right; width: 189px; }

/**
 * Work carousel
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */
.jcarousel-container { position: relative; }
.jcarousel-clip { margin: 0; overflow: hidden; padding: 0; position: relative; z-index: 2; }
.jcarousel-list { left: 0; margin: 0; overflow: hidden; padding: 0; position: relative; top: 0; z-index: 1; }
.jcarousel-list li, .jcarousel-item { float: left; list-style: none; width: 227px; }
.jcarousel-next { display: none; z-index: 3; }
.jcarousel-prev { display: none; z-index: 3; }
.jcarousel-container-horizontal { width: 227px; }
.jcarousel-clip-horizontal { width: 227px; }

/* Work list */
#work-carousel .work { float: left; width: 57px; margin: 0 12px 12px 0; }
#work-carousel .work .thumb img { display: block; border: 1px solid #76787B; }
#work-carousel .work .desc { display: none; }
#work-carousel .nav { clear: both; }
#work-carousel .nav a { color: #333; }
#work-carousel .nav a:hover { color: #999; }
#work-carousel .nav .prev { float: left; margin-left: 1px; }
#work-carousel .nav .next { float: right; margin-right: 33px; }

/* Work detail */
.work-detail { padding-top: 30px; }
.work-detail .img { margin: 0 0 20px 0; height: 331px; }
.work-detail .img img { display: block; border: 0px solid #BEC0C3; }
.work-detail .desc { width: 325px; }
.work-detail h2 { font-size: 1.66em; margin-bottom: 0.15em; }
.work-detail p { margin: 0.25em 0 0 0; line-height: 1.33; }

/* Praise page */
blockquote { margin-top: -3px; line-height: 1.25; }
blockquote .author { margin-bottom: 1.75em; }
blockquote .author a { color: #444; }
.testimonials p { margin-bottom: 0.5em; line-height: 1.25; }
.testimonials label { font-size: 0.92em; text-transform: lowercase; }
.testimonials input, .testimonials textarea { border: 1px solid #ccc; width: 225px; }
.testimonials textarea { height: 68px; }
.testimonials .submit { text-align: right; margin-top: 0.75em; }
.testimonials .submit input { border: none; width: auto; }

/* Contact page */
.contact { margin-top: 1.75em; line-height: 1.33; }
.contact p { margin-bottom: 0.75em; }
.contact label { text-transform: lowercase; }
.contact input { border: 1px solid #ccc; width: 205px; }
.contact textarea { border: 1px solid #ccc; width: 264px; height: 80px; }
.contact .question { margin-top: 1.75em; } 
.contact .submit { margin-left: 190px; }
.contact .submit input { border: none; width: auto; }

.vcard p { font-size: 0.92em; margin-bottom: 0.75em; }
.vcard table { font-size: 0.92em; }
.vcard th { padding-right: 9px; }

/* casestudies page */
.left-side { float: left; width: 400px; }
.right-side { float: right; width: 230px; padding-top: 42px; }
.case p  { font-size: 0.98em; }
.case p span {color: #999; padding: 0 7px; }
.case .case-widget { width: 100%; margin: 0 auto; }
.case .case-widget .btn-visit { text-align: right; }
.case .case-widget .btn-visit a{ font-size: 0.92em; padding-right: 12px; background: url(../images/buttons/btn-arrow.jpg) no-repeat right center;  }

.popup { display: none; position: absolute; top:80px; left: 50%; width: 828px; margin-left: -520px; background: url(../images/bg/overlay-m.png) repeat-y 0 0; z-index: 9999;  }
.popup .inner { padding: 18px 18px 22px 18px; }
.popup span.t, .popup span.b{ width: 828px; position: absolute; overflow: hidden; display: block; }
.popup span.t { background: url(../images/bg/overlay-t.png) no-repeat 0 0; top:-26px; height: 26px;  }
.popup span.b { background: url(../images/bg/overlay-b.png) no-repeat 0 0; bottom: -28px; height: 28px; }
.popup .before, .popup .after { float: left; padding-left: 28px; }
.popup h3 { font-size: 1.5em; font-weight: normal; }
.popup .close { background: url(../images/buttons/btn-close.png) no-repeat 0 0; width: 38px; height: 38px; display: block; overflow: hidden; position: absolute; top:-34px; right:-4px; cursor: pointer; }

.left-side p { font-size: 0.98em; }
.left-side .view a { margin-right: 8px; }

.right-side blockquote p { font-size: 1.083em; color: #777777; font-family: Georgia, Arial, sans-serif; font-style: italic; line-height: 19px; }
.right-side blockquote cite { font-style: normal; font-size: 0.83em; }


/* Footer */
#footer { clear: both; color: #333; font-size: 0.83em; padding: 68px 0 20px 49px; }
#footer p { float: left; }
#footer a { color: #333; }
#footer a:hover, #footer a.email { color: #999; }
#footer li { float: left; padding-left: 5px; margin-left: 4px; background: url(../images/bg/footer-sep.gif) 0 60% no-repeat; }
#footer li.first { padding: 0; background: none; }



/* blog */
body.blog #header h1 { width: 252px; height: 57px; margin-top: 54px; margin-right: 197px; }
body.blog #header h1 span { background: url(../images/blog/blog.gif) no-repeat 0 0; }
body.blog #content .post { border-bottom: 1px solid #ccc; padding-bottom: 20px; margin-bottom: 18px; }
body.blog #content .post h2 { margin-bottom: 0; }
body.blog #content .post span.pub-time { font-size: 0.83em;  }
body.blog #content .post .entry { }
body.blog #content .post .entry p { margin: 8px 0 12px 0; }
body.blog #content .post a { color: #019ED3;   }
body.blog #content .post .cat { padding-top: 6px; }
body.blog #content .post .cat, body.blog #content .post .tags { font-size: 0.83em; }
body.blog #content .post .tags span.tag { margin-right: 6px; }
body.blog #content .post .tags a.add-comment { margin-left: 6px; }
body.blog #content .navigation a{ color: #019ED3; font-size: 0.92em; }

body.blog #sidebar h2 {}
body.blog #searchform { margin-bottom: 20px; }
body.blog #searchform input#s { border: 1px solid #ccc; float: left; display: inline; margin-top: 2px; margin-right: 4px; padding: 2px 3px; width: 140px; }
body.blog #searchform .btn-search input { border: 0; background: url(../images/buttons/btn-search.jpg) no-repeat 0 0; width: 74px; height: 24px;  }

body.blog #sidebar .section { border-top: 1px solid #ccc; margin: 13px 0 6px 0; padding: 10px 0 0 0; }
body.blog #sidebar .section h3 { margin-bottom: 8px; }
body.blog #sidebar .section li { margin: 3px 0 2px 0; }

body.blog #sidebar .tags li { float: left; margin: 0 3px 0 0; position: relative;  }
body.blog #sidebar .tags li.size1 { font-size: 1em; }
body.blog #sidebar .tags li.size2 { font-size: 0.82em; }
body.blog #sidebar .tags li.size3 { font-size: 0.93em; }
body.blog #sidebar .tags li.size4 { font-size: 1.02em; }
body.blog #sidebar .tags li.size5 { font-size: 1.04em; }
body.blog #sidebar .tags li.size6 { font-size: 1.06em; }
body.blog #sidebar .tags li.size7 { font-size: 1.08em; }
body.blog #sidebar .tags li.size8 { font-size: 1.1em; }
body.blog #sidebar .tags li.size9 { font-size: 1.15em; }