/**********************************************************************************************


***********************************************************************************************

	1. BASE
			1.1 Reset
			1.2 Accessibility Navigation & Hide
			1.3 Clearfix
			1.4 Default Styles

	2. LAYOUT
			2.1 Structure
			2.2 Header
			2.3 Navigation
			2.4 Content
			2.5 Sidebar
			2.6 Footer

***********************************************************************************************/


/* 1. BASE
-----------------------------------------------------------------------------------------------
===============================================================================================*/


/* 1.1 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; }

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

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


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

.clearfix:after,
div.skill-client-trust ul:after,
div.works ol.works-tab:after,
div.works .works-content ol li ul:after,
div.works .works-content:after,
div.skill-client-trust ul.social:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }


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

body { background: #151719 url(../images/bg-body.png); color: #b3b3b3; font: 62.5%/1.3 "Arial", "Helvetica", sans-serif; text-align: center; }
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 { color: #858570; text-decoration: none; }
a:hover { color: #fff }


/* 2. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/


/* 2.1 Structure
-----------------------------------------------------------------------------------------------*/

.container { width: 958px; position: relative; margin: 0 auto; text-align: left; font-size: 1.2em; background: url(../images/bg-container.png) no-repeat center top; padding-top: 27px; line-height: 18px }
#header { height: 116px; width: 958px; position: relative; background: url(../images/line.png) no-repeat center bottom }
#content strong.indext,
#header .logo strong.indext,
#header .contact strong.indext { left: -9999em; display: block; position: absolute }

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

#header .logo,
#header .logo span,
#header .contact,
#header .contact span { display: block; overflow: hidden; width: 290px; height: 56px; position: absolute; top: 18px }
#header .logo span,
#header .contact span { background: url('../images/logo.png') no-repeat; position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100% }

#header .contact { right: 0; width: 252px; height: 50px }
#header .contact span { background: url(../images/bg-contact.png) no-repeat }

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

/* hi there */
div.hi-there { background: url(../images/line.png) no-repeat center bottom }
div.hi-there .hi-there-content { background: url(../images/pic-works2.png) no-repeat right top; height: 295px; position: relative; padding-top: 28px }
div.hi-there h1 { margin-bottom: 25px }
div.hi-there h1,
div.hi-there h1 span { display: block; overflow: hidden; position: relative; width: 303px; height: 109px; }
div.hi-there h1 span { position: absolute; left: 0; top: 0; background: url(../images/bg-hi_there.png) no-repeat }
div.hi-there .hi-there-text { width: 320px }

/* skill client trust */
div.skill-client-trust { padding: 34px 0 20px; background: url(../images/line.png) no-repeat center bottom }
div.skill-client-trust ul li { float: left; width: 300px; margin-right: 20px }
div.skill-client-trust ul li.trust { margin: 0 }
div.skill-client-trust ul li h2 { margin-bottom: 10px }
div.skill-client-trust ul li h2,
div.skill-client-trust ul li h2 span { display: block; overflow: hidden; position: relative; width: 298px; height: 88px }
div.skill-client-trust ul li h2 span { position: absolute; left: 0; top: 0 }
div.skill-client-trust ul li.skill h2 span { background: url(../images/bg-skills.png) no-repeat }
div.skill-client-trust ul li.client h2 span { background: url(../images/bg-clients.png) no-repeat }
div.skill-client-trust ul li.trust h2 span { background: url(../images/bg-trust.png) no-repeat }
div.skill-client-trust ul li p { padding-bottom: 15px }
div.skill-client-trust ul.social li { display: inline; float: none; margin: 0; width: auto }
div.skill-client-trust ul.social li a,
div.skill-client-trust ul.social li a span { position: relative; display: block; width: 16px; height: 29px; overflow: hidden }
div.skill-client-trust ul.social li a { float: left; margin-right: 8px }
div.skill-client-trust ul.social li a span { position: absolute; left: 0; top: 0; background: url(../images/bg-social.png) no-repeat }
div.skill-client-trust ul.social li.fb a span { background-position: -24px 0 }
div.skill-client-trust ul.social li.twitter a span { background-position: -48px 0 }
div.skill-client-trust ul.social li.linkedin a span { background-position: -72px 0 }
div.skill-client-trust ul.social li.delicious a span { background-position: -98px 0 }
div.skill-client-trust ul.social li.flickr a span { background-position: -123px 0 }
div.skill-client-trust ul.social li.youtube a span { background-position: -148px 0 }

/* works */
div.works { padding: 30px 0 10px }
div.works h2 { margin-bottom: 20px }
div.works h2,
div.works h2 span { position: relative; overflow: hidden; display: block; width: 771px; height: 56px }
div.works h2 span { position: absolute; left: 0; top: 0; background: url(../images/bg-works.png) no-repeat }
div.works p { padding-bottom: 15px }

div.works ol.works-tab { height: 27px; margin-top: 5px; position: relative; z-index: 11 }
div.works ol.works-tab li { display: inline }
div.works ol.works-tab li a { display: block; height: 22px; overflow: hidden; text-align: center; width: 93px; background: url(../images/bg-tab.png) no-repeat left top; float: left; margin-left: 2px; padding-top: 5px; outline: none }
div.works ol.works-tab li a:hover,
div.works ol.works-tab li.active a { background-position: left -27px; color: #fff; text-decoration: none }

div.works .works-content { padding-top: 25px; border-top: 1px solid #434343; position: relative; top: -1px; z-index: 10 }
div.works .works-content ol li { display: none }
div.works .works-content ol li ul { overflow: hidden }
div.works .works-content ol li.active,
div.works .works-content ol li ul li { display: block !important; }
div.works .works-content ol li ul li { width: 220px; float: left; margin: 0 20px 18px 0 }
div.works .works-content ol li ul li.last { margin-right: 0 }
div.works .works-content ol li ul li a img { border: 3px solid #b9baba }
div.works .works-content ol li ul li a:hover img { border: 3px solid #fff }


/* 2.6 Footer
-----------------------------------------------------------------------------------------------*/
#footer { text-align: center; padding: 30px 0; background: url(../images/line.png) no-repeat center top; }
#footer a { font-weight: bold }