/* ----------------------------------------------------------------------------------------- 
____________________________________________________________________

"Screen" Style Sheet

@Project - Zahab Stacks
@Description: Zahab website codenamed "Stacks". Ideation in January, Developed in June 2011
@Author: Mustafa Quilon (Zahab)
@Author URI: http://thisiszahab.com - http://mustafaquilon.com
@Version: 1.0 / Stacks
@Copyright: Zahab Studio, a part of Zahab Group.
____________________________________________________________________

----------------------------------------------------------------------------------------- */

/*
=Colours
Doh!!!
*/


/* =reset & basics
----------------------------------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; background: transparent;
}
ol, ul { list-style: none; list-style-image: none; list-style-position: outside; list-style-type: none; }
a img { border: 0; background: none; }
img	{ vertical-align: middle; }ins { text-decoration: none; }
del { text-decoration: line-through; }
/* tables still need 'cellspacing="0"' in the markup */
a img { border: none; }
abbr, acronym { border-bottom-width: 0; }
strong { font-weight: bold; }
em, cite, i { font-style: italic; font-family: Georgia, "Times New Roman", Times, serif; }

/* =visuallyHide / accessibility */
.visuallyHidden { position: absolute; top: -500px; left: 0px; width: 1px; height: 1px; overflow: hidden; }

/* =clearfix (Alsett Modified) */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {display: inline-block;}
/* backslash hack hides from IE Mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* end backslash hack */

/* =text-selection */
::selection { color: #000; background-color: #fff; text-shadow: none; }
::-moz-selection { color: #000; background-color: #fff; text-shadow: none; } /* mozilla */

/* =defaults
----------------------------------------------------------------------------------------- */
a { color: #fff; text-decoration: none; cursor: crosshair; border-bottom: 1px dotted #ccc; border-bottom: 1px dotted rgba(255, 255, 255, 0.7); }
a:hover, a:focus { color: #fff; color: rgba(255, 255, 255, 0.7); text-decoration: none; border-bottom: 0 none;}
.ui-dialog a { color: #000; text-decoration: none; cursor: crosshair; border-bottom: 1px dotted #666; border-bottom: 1px dotted rgba(0, 0, 0, 0.6); }
.ui-dialog a:hover, .ui-dialog a:focus { color: #000; color: rgba(0, 0, 0, 0.6); text-decoration: none; border-bottom: 0 none;}
a img { margin-left: auto; margin-right: auto; }

a.button { display: block; margin: 16px 0; padding: 8px 5px; border-bottom: 0 none; background-color: #ddd; background-color: rgba(0, 0, 0, 0.05); text-transform: uppercase;  }

strong { font-weight: bold; }
sup { text-transform: lowercase; font-size: smaller; vertical-align: super; }
small { font-size: smaller; }
.floatRight { float: right; }
.floatLeft { float: left; }

/* classes, defaults ----------------------------------------------- */
.half_width, .one_half { width:48.5%; }
.one_half_contact { width:46.5%; }
.one_third { width:31.11%; }
.two_third { width:65.8%; }
.one_fourth { width:22.4%; }
.one_fifth { width:17.2%; }
.three_fourth { width:74.5%; }
.four_fifth { width:79.5%; }
.two_fifth { width:37.7%; }
.three_fifth { width:58.5%; }
.one_sixth { width:13.8%; }
.one_half, .half_width, .one_third, .two_third, .one_fourth, .one_fifth, .four_fifth, .one_sixth, .two_fifth, .three_fifth, .three_fourth { float:left; position:relative; display:inline; margin-right:3%; overflow: hidden; }
.last { margin-right:0 !important; overflow: hidden; }

p, #logo { cursor: default; }

/* =typography */
h2 { font-weight: normal; font-size: 1.286em; line-height: 1.2em; margin: 12px 0; padding-bottom: 4px; border-bottom: 4px solid #ddd; border-bottom: 2px solid rgba(0, 0, 0, 0.05); text-transform: uppercase; }
h3 { font-weight: normal; font-size: 1.143em; line-height: 1.375em; margin: 4px 0 16px; background-color: #ddd; background-color: rgba(0, 0, 0, 0.05); }
p { margin: 0 0 12px; }

ol { padding: 0 0 0 22px; margin: 0 0 12px; }
ol li { padding-bottom: 4px; list-style: outside decimal; }

.separator { width: 100%; height: 1px; margin-bottom: 12px; border-bottom: 1px dotted #aeaeae; border-bottom: 1px dotted rgba(0, 0, 0, 0.4); }

/* =layout / divisions
----------------------------------------------------------------------------------------- */
html, body { height: 100%; }
body { overflow: hidden; margin: 0; color: #fff; background: none; letter-spacing: -0.025em; }

#outerWrapper { overflow: hidden; width: 100%; background: url(../images/layout/glow.png) top center no-repeat; min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -40px; }

/* =logo */
#logo { overflow: hidden; width: 960px; margin: 38px auto 48px; padding: 0; font-weight: normal; font-size: 1.429em; line-height: 2.6em; color: #fff; color: rgba(255, 255, 255, 0.8); text-transform: lowercase; }
#logo strong { font-weight: normal; font-size: 2em; line-height: 1.3em; letter-spacing: -0.05em; }

/* =navMain */
#navMain { overflow: hidden; clear: both; width: 960px; height: 22px; margin: 0 auto 20px; padding: 0; text-transform: lowercase; }
#navMain li #homeLink { font: 1.286em/0.889em Arial, Helvetica, sans-serif; letter-spacing: normal; }
#navMain li { position: relative; margin: 0 12px; padding: 0; display: inline; float: left; z-index: 5; }
#navMain li a { color: #fff; color: rgba(255, 255, 255, 0.6); border-bottom: 0 none; }
#navMain li a:hover, #navMain li a:focus { color: #fff; color: rgba(255, 255, 255, 0.85); }
#navMain li.selected a { color: #fff; }
#navMain li.backLava { border-bottom: 2px solid #fff; }

/* =quote */
#quotes { width: 800px; margin: 125px auto 0; padding: 0 160px 0 0; background: transparent; color: #fff; font-weight: normal; font-size: 2.143em; line-height: 1.400em; }
.quote { width: 800px; }
.quote cite { display: block; font-size: 0.5em; margin: 20px 0 0; background: transparent; color: #fff; color: rgba(255, 255, 255, 0.6); }
.quote cite a { color: #fff; color: rgba(255, 255, 255, 0.6); }
.quote cite a:hover, #quote cite a:focus { color: #fff; color: rgba(255, 255, 255, 1); }

/* =scrollbar */
.content { width: 872px; padding: 0; background: none transparent; }
.content .viewport { width: 852px; height: 575px; overflow: hidden; position: relative; }
.content .overview { list-style: none; position: absolute; left: 0; top: 0; width: 852px; }
.content .thumb .end, .content .thumb { background-color: #999; }
.content .scrollbar { position: relative; float: right; width: 5px; }
.content .track { background-color: #ddd; height: 100%; width: 5px; position: relative; padding: 0; }
.content .thumb { height: 20px; width: 5px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
.content .thumb .end { overflow: hidden; height: 5px; width: 5px; }
.content .disable{ display: none; }

.stacks { }
.loading { display: block; width: 43px; height: 11px; margin: 0 auto 550px; }

/* =about section */
.highlight { font-size: 2em; line-height: 1.5em; margin: 12px 0 24px; }
h3.question { font-weight: normal; background: none; margin-bottom: 8px; text-transform: uppercase; border-bottom: 1px dotted #aaa; border-bottom:rgb(0,0,0,0.7); }
p.answer { margin-bottom: 20px; }

/* =work section */
#filter { width: auto; float: left; color: #000; margin: 16px auto 16px; font-variant: small-caps; }

/* =portfolioLink */
#portfolioLink { overflow: hidden; float: left; width: 650px; height: 22px; margin: 16px auto 20px; padding: 0; text-transform: lowercase; }
#portfolioLink li { position: relative; margin: 0 12px; padding: 0; display: inline; float: left; z-index: 5; }
#portfolioLink li a { color: #555; color: rgba(0, 0, 0, 0.6); border-bottom: 0 none; }
#portfolioLink li a:hover, #portfolioLink li a:focus { color: #000; }
#portfolioLink li.selected a { color: #000; }
#portfolioLink li.backLava { border-bottom: 2px solid #000; }

#work .overview { }
.work { overflow: hidden; clear: both; }
.work li { position: relative; overflow: hidden; display: block; float: left; width: 264px; height: 144px; margin: 0 8px 18px 0; padding: 0 6px; }
.work li h3 { display: none; position: absolute; width: 260px; margin: 0; padding: 0; bottom: 20px; left: 8px; text-align: center; font-weight: normal; font-size: 1em; line-height: 1.714em; text-transform: lowercase; color: #fff; background: 0 none; clear: both; }
.work li a { display: block; float: left; width: 264px; height: 144px; border: 0 none; background: url(../images/layout/underlay-bg.png) no-repeat center center #000; }
.work li img { display: block; width: 260px; height: 140px; border: 2px solid #fff; }

.portfolioDescription { margin-top: 10px; }
.slideshow { margin: 10px 0 0 10px; width: 560px; height: 560px;  }
.slideshow img { width: 540px; height: 540px; border: 1px solid #fff; -webkit-box-shadow: 0px 0px 10px 1px #d2d2d2; -moz-box-shadow: 0px 0px 10px 1px #d2d2d2; box-shadow: 0px 0px 10px 1px #d2d2d2; }
.testimonial { padding-top: 10px; border-top: 1px dotted #000; border-top: 1px dotted rgba(0, 0, 0, 0.4); color: #666; color: rgb(0, 0, 0, 0.65);  }
.testimonial p { margin: 0; padding: 0 0 16px 10px; border-left: 4px solid #ccc; border-left: 4px solid rgba(0, 0, 0, 0.15); font-size: 1.167em; line-height: 1.32em; }
.testimonial cite { display: block; margin: 0 0 10px; padding: 0 0 0 10px; border-left: 4px solid #ccc; border-left: 4px solid rgba(0, 0, 0, 0.15); font-style: normal; }

/* =contact */
#map { width: 410px; height: 250px; }

/* =form
----------------------------------------------------------------------------------------- */
form { padding: 0; margin: 0; }
fieldset { clear: both; }

form .field, form .buttons { padding-bottom: 10px; }
form .field { padding-left: 180px; }

form .field label { display: inline; float: left; width: 160px; margin-left: -180px; }
label, button, input.submit { cursor: pointer; }

input.submit { background-color: #000; border: 1px solid #fff; color: #fff; text-transform: uppercase; margin-left: 160px; }
input.reset { margin-left: 10px; }
input.submit:hover { background-color: #333; color: #fff; }
.contactForm { overflow: hidden; }
.contactForm p { clear: both; width: 375px; margin: 0 10px 16px 0; padding: 0 0 7px; }
.contactForm label { display: block; float: left; width: 160px; }

input.text_input, textarea { width: 210px; background: transparent; border: 0 none; border-bottom: 1px dotted #555; border-bottom: 1px dotted rgba(0, 0, 0, 0.65); color: #000; }
input.text_input:focus, input.password:focus, textarea:focus, select:focus { border-bottom: 1px solid #000; }

.ajaxresponse { color: #6d9100; }
.ajaxresponse p { color: #333; }
.error input.text_input, .error textarea { border-color: #f00; }
.valid input.text_input, .valid textarea { border-color: #00b604; }


/* =footer */
#footerSpacer{ height: 40px; }
#footer { position: relative; width: 960px; height: 20px; margin: 0 auto; padding: 10px 0; color: #fff; color: rgba(255, 255, 255, 0.2); }
#footer a { color: #fff; color: rgba(255, 255, 255, 0.2); border-color: #fff; border-color: rgba(255, 255, 255, 0.2); }
#footer:hover, #footer:focus { color: #fff; color: rgba(255, 255, 255, 0.4); }
#footer:hover a, #footer:focus a { color: #fff; color: rgba(255, 255, 255, 0.6); border-color: #fff border-color: rgba(255, 255, 255, 0.6); }
#footer a:hover, #footer a:focus { color: #fff; color: rgba(255, 255, 255, 0.8); }

#lookingBack { position: absolute; right: 0; top: 10px; width: 150px; height: 20px; }
#versions { position: absolute; right: 0; top: -62px; width: 150px; height: 70px; }
#footer .arrowHidden, #footer .arrowVisible { font: 12px/20px Arial, Helvetica, sans-serif; }
.visible .arrowHidden { display: none; }
.hidden .arrowHidden { display: inline; }
.hidden .arrowVisible { display: none; }
.visible .arrowVisible { display: inline; }