/************************* GRID 960 RESET *****************************/
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,dialog,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,meter,nav,object,ol,output,p,pre,progress,q,rp,rt,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video,xmp{border:0;font-size:100%;margin:0;padding:0}html,body{height:100%}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}b,strong{font-weight:bold}img{color:transparent;font-size:0;vertical-align:middle;-ms-interpolation-mode:bicubic}li{display:list-item}table{border-collapse:collapse;border-spacing:0}th,td,caption{font-weight:normal;vertical-align:top;text-align:left}svg{overflow:hidden}
/************************* GRID 960 RESET *****************************/
@import url(http://fonts.googleapis.com/css?family=Ubuntu:300&v2);

/* 
    Document   : styles
    Created on : 14-Jul-2011, 9:48:56 PM
    Author     : Darek Magusiak darek@magusiak.com
*/


body {
	font-family: 'Ubuntu', sans-serif;
    color: #e1dfdf;
	text-shadow: #4E4C4C 2px 2px 2px;
    font-size: 15px;
	line-height: 1.5em;
	background-image:url(../images/bg.png);	
    background-color: #292929;
	background-repeat: no-repeat;
	background-position: center center;
    background-attachment: fixed;	
	height: 100%;	
}

*:focus  
{  
    outline: none;  
}  

#spacer { 
	margin-bottom: -245px; 
	width: 1px;           
	height: 45%;          
	float: left;  
}

h2 {	
    color: #868686;
    margin-bottom: 10px;
	font-size: 1.3em;
	font-weight: normal;    	
	line-height: 1.4em;
	text-shadow: #212121 0px 1px 2px;	

}

/***** container *****/
.page {
	position: relative;
	width:960px;
	height: 489px;
	overflow: hidden;
	margin:0 auto;
	clear: left;          	
}

.scroll {
	position: relative;
	width:9600px;
	height: 489px;
}

/***** navigation *****/
ul.navigation {
	width:960px;	
	margin:20px auto;		
	text-align: right;
	border-top:2px dashed #555454;
}

.navigation li {
	display: inline;
	list-style-type: none;
}

.navigation a {
	position: relative;
	font-size:1.1em;
	color: #E6DCDC;
	text-decoration: none;
	margin: 0 10px 0 10px;
	top:15px;
	font-weight: bold;
	text-shadow: #212121 0px 1px 2px;	
}

.navigation a:visited {
	color: #868686;
}

.navigation a:hover {
	color:#FFFFFF;	
}

.navigation a.selected {
	color: #DC0C05;
}


/***** pages *****/
.text {
	position: relative;
	width:960px;
	height: 489px;	
	float: left;
	margin-right: 1200px;
}

.text a {
    color: #868686;
    text-decoration: none;
	text-shadow: #212121 0px 1px 2px;
	border-bottom:1px dashed #868686;
}

.text a:hover {
	color: #E6DCDC;
	border-bottom:1px dashed #E6DCDC;
}

.text ul {
    margin: 0 15px 15px 25px;
}

.text ul li {
    list-style-type: square;
    text-shadow: #4E4C4C 0px 2px 3px;
}

.text ol {
    margin: 0 0 15px -10px;
    *margin: 0 0 15px 35px;
}

.text ol li {
    list-style-type: decimal;;
    text-shadow: #4E4C4C 0px 2px 3px;
}

.text p {
    margin-bottom: 15px;		
}

/* HOMEPAGE
 ***********************************************/

#home {
	background: transparent url(../images/home.png) no-repeat top center;
}

.featured {
    position: absolute;
    z-index: 10;
    top: 102px;
}

.featured img {
	position: relative;
	width:394px;
	height: 191px;
    top: 0;
    margin-left: 26px;
    display: none; 
	background-image:url(../images/ajax-loader.gif);
	background-repeat: no-repeat;
	background-position: center center;	
}

.welcome_txt {
	text-indent: -9999px;
}

.home_txt {
    position: absolute;
    margin: 160px 0 0 497px;
    width: 437px;
}

.available_tag {
    position: absolute;
    width:206px;
    height:186px;
    margin: 255px 0 0 560px;	
    background-image:url(../images/available.png);
    background-repeat:no-repeat;
    background-position: 0px -190px;
}

.available_tag:hover {
    background-position: 0px 1px;

}

.available_tag a {
    width:206px;
    height:186px;
    display:block;
	border: none !important;
}

/* ABOUT
 ***********************************************/

#about {
	background: transparent url(../images/about.png) no-repeat 0px 20px;
}

.about-scroll {
	position: absolute;
	right:0px;
	top:55px;
	width:20px;
	height: 420px;	
	background-image:url(../images/bg_about.png);
	background-repeat: no-repeat;	
	background-position: center center;	
}


/* SCROLLBAR CSS
 **********************************************/

.scroll_content {
	margin-top:70px;
	outline:none; 
	height: 390px;
	padding:10px 0 10px 0;
}

.scroll_content h2,
.scroll_content p {
	width:98%;
}

.jspContainer
{
	overflow: hidden;
	position: relative;
}

.jspPane
{
	position: absolute;
}

.jspVerticalBar
{
	position: absolute;	
	right: 7px;
	height: 90%;
}


.jspVerticalBar *
{
	margin: 0;
	padding: 0;
}

.jspCap
{
	display: none;
}

.jspCap
{
	float: left;
}

.jspTrack
{
	width: 6px;
	height: 60%;	
	background: none repeat scroll 0 0 #525050;
	position: relative;
}

.jspDrag
{
	background: none repeat scroll 0 0 #222222;
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
}

.jspHorizontalBar .jspDrag
{
	float: left;
	height: 80%;
	padding:20px 5px 20px 5px;
}

.jspArrow
{
	background: #50506d;
	text-indent: -20000px;
	display: block;
	cursor: pointer;
}

.jspArrow.jspDisabled
{
	cursor: default;
	background: #80808d;
}

.jspVerticalBar .jspArrow
{
	height: 16px;
}



.jspVerticalBar .jspArrow:focus
{
	outline: none;
}

.jspCorner
{
	background: #eeeef4;
	float: left;
	height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
	margin: 0 -3px 0 0;
}

/* CONTACT
 ***********************************************/
#contact {
	background: transparent url(../images/contact.png) no-repeat 8px 20px;	
}

.contact_txt {
    position: absolute;
    z-index: 10;
    margin: 30px 0 0 8px;
}

.contact_form {
    position: absolute;
    z-index: 20;
    width: 600px;
    height: 430px;
    margin: 80px 0 0 8px;
}

.form_row {
    position: relative;
}

label {
    font-weight: bold;
    display: block;
    width: 160px;
    float: left;
    margin-top: 5px;
}

input[type="text"],
textarea {
    border: 1px solid #868686;
    color:#DCD9D9;	
	padding: 5px;
	background:none;	
    margin-bottom: 3px;
    width: 400px;	
	font-family: 'Ubuntu', sans-serif;
}

textarea {
	height: 130px;
	overflow:auto;
}

input[type="submit"] {
	font-family: 'Ubuntu', sans-serif;
	margin-left:20px;
	background: #868686;
	border: 1px solid #888;
	border-bottom-left-radius: 3px 3px;
	border-bottom-right-radius: 3px 3px;
	border-top-left-radius: 3px 3px;
	border-top-right-radius: 3px 3px;
	color: #DCD9D9;
	text-shadow: #212121 0px 1px 2px;	
	padding: 4px 15px 4px 15px;
	font-weight: bold;
	cursor: pointer;
	cursor: hand;
}

input[type="submit"]:hover {
	background: #979696;
	border: 1px solid #888;	
	margin-left:20px;	
}


input.captcha_field {    
    width: 90px;
}

#output {
    padding-bottom:10px;
}

#output strong {
    display: block;
    color: #DCD9D9;
    margin-top:10px;
    margin-bottom: 0px;
    font-size:1.4em;
}

#output span {
    display: block;
    color: #DCD9D9;
    font-size:1.1em;
}

.contact_info {
    position: absolute;
    z-index: 10;
    width: 370px;
    height: 330px;
	left:670px;
	top:80px;
	color: #939393;
}

.contact_info a {
	border-bottom: none !important;
}

.success {
    font-size:1.3em;
}

.error {
    color:red;
}

/*
 * Style used by the label output mode.
 * Applied to the error labels that get positioned after an input.
 */
label.error {
    position: absolute;
    top:-5px;
    z-index: 99;
    right:-340px;
    color:#fff;
    font-weight: normal;
    width: 300px;
    text-align: right;
    background-image:url('../images/arrow.gif');
    background-position: 0px -135px;
    background-repeat:no-repeat;
    padding:3px 20px 6px 18px;
    -moz-border-radius:4px;
    -webkit-border-radius: 4px;
}

/* PORTFOLIO
 ***********************************************/
#portfolio {
	background: transparent url(../images/portfolio.png) no-repeat 8px 30px;	
}

#portfolio a {
	border-bottom:none !important;
}



.slideshow_nav {
    position: absolute;
    z-index: 10;
}

.slideshow_nav li {
	list-style-type: none !important;
}

.prev_nav {
    position: absolute;
    z-index: 10;
	top:260px;
	left:30px;
}

.next_nav {
    position: absolute;
    z-index: 10;
	top:260px;
	left:885px;
}

.bg_portfolio {
    position: absolute;
    z-index: 10;
    width: 817px;
    height: 358px;
    background: transparent url(../images/bg_portfolio.png) no-repeat top center;
    top: 110px;
	left: 70px;
    padding-top: 8px;
}

div.work_gallery {
    position: relative;
    z-index: 10;
    width: 743px;
    height: 307px;
    overflow: hidden;
    margin: 0 0 0 12px;
}

div.work_gallery img {
    width: 743px;
    height: 307px;
	
}

.work_info {
    position: absolute;
    z-index: 20;
    width: 250px;
    height: 307px;
    overflow: hidden;
    background: #fff;
    left: 530px;
}

.work_info div {
    padding: 10px 20px 10px 20px;
}

.work_info h1 {
    font-size: 1.3em;
    color: #A91806;
    margin-bottom: 10px;
	text-shadow:none;
}

.work_info h2 {
    font-size: 1em;
    color: #222222;	
    margin-top: 10px;
	margin-bottom:0;
	text-shadow:none;	
}

.work_info p {
    font-size: 0.9em;
    color: #444444;
    margin-bottom: 5px;
	text-shadow:none;
	line-height: 1.4em;
}

.work_info img {
    margin-top: 20px;
}


.ie6 {
    margin: 0 auto 0 auto;
    margin-top:200px;    
    width: 564px;
    height: 401px;
    background: url(../images/ie6.png) no-repeat top center;
}

.modern_browsers {
    margin: 250px 10px 0 23px;
    position: relative;

}


/*
    ColorBox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#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;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}

/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;}
#colorbox{}
    #cboxTopLeft{width:14px; height:14px; background:url(../images/controls.png) no-repeat 0 0;}
    #cboxTopCenter{height:14px; background:url(../images/border.png) repeat-x top left;}
    #cboxTopRight{width:14px; height:14px; background:url(../images/controls.png) no-repeat -36px 0;}
    #cboxBottomLeft{width:14px; height:43px; background:url(../images/controls.png) no-repeat 0 -32px;}
    #cboxBottomCenter{height:43px; background:url(../images/border.png) repeat-x bottom left;}
    #cboxBottomRight{width:14px; height:43px; background:url(../images/controls.png) no-repeat -36px -32px;}
    #cboxMiddleLeft{width:14px; background:url(../images/controls.png) repeat-y -175px 0;}
    #cboxMiddleRight{width:14px; background:url(../images/controls.png) repeat-y -211px 0;}
    #cboxContent{background:#fff; overflow:visible;}
        #cboxLoadedContent{margin-bottom:5px;}
        #cboxLoadingOverlay{background:url(../images/loading_background.png) no-repeat center center;}
        #cboxLoadingGraphic{background:url(../images/loading.gif) no-repeat center center;}
        #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;text-shadow:none}
        #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
        
        #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(../images/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
        #cboxPrevious{left:0px; background-position: -51px -25px;}
        #cboxPrevious.hover{background-position:-51px 0px;}
        #cboxNext{left:27px; background-position:-75px -25px;}
        #cboxNext.hover{background-position:-75px 0px;}
        #cboxClose{right:0; background-position:-100px -25px;}
        #cboxClose.hover{background-position:-100px 0px;}
        
        .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
        .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
        .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
        .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}