@charset "utf-8";

/*-- RESET -------------------------------------------------- */ 
/*-- http://meyerweb.com/eric/tools/css/reset/             -- */
/*-- v2.0 | 20110126 -  License: none (public domain)      -- */
/*----------------------------------------------------------- */ 

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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none; }
table {border-collapse: collapse; border-spacing: 0;}


/*-- TYPOGRAPHY -------------------------------------------------- */ 
/*-- Default font settings.                                     -- */
/*-- The font-size percentage is of 16px. (0.75 * 16px = 12px)  -- */
/*---------------------------------------------------------------- */ 
html { font-size:100.01%; }
body {
	/*background: #f1f1f1 url(../images/bg_intro.jpg);
	background-repeat:repeat;*/
	background-color: #151515;
  	font-size: 75%;
  	font-family: Helvetica, "Helvetica Neue", Arial, Helvetica, sans-serif;
	border-top:3px solid #7d0000;
}

/*-- Headings ----------------------------------------------------- */ 

h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #111; }

h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
/*h2 { font-size: 2em; margin-bottom: 0.75em; }*/
h2 { font-size: 32px; line-height: 1; padding-bottom: 0.5em; padding-top:20px; font-family:Georgia, "Times New Roman", Times, serif; width:420px;}
h3 { font-size: 2.2em; line-height: 1.5; margin-bottom:0.5em; margin-bottom:0.5em; font-family:Georgia, "Times New Roman", Times, serif; color:#edece7; text-shadow: 1px 1px 1px #909090;}
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1em; color: #b30b0e;}
h5 { font-size: 1em; font-weight: bold; margin-bottom: 1em;}
h6 { font-size: 1em; font-weight: bold; }

h1 img, h2 img, h3 img,
h4 img, h5 img, h6 img {
  margin: 0;
}

#home h3 {text-shadow:none ;}

header h1 a:hover{cursor:pointer;}

header h1 {
	width:230px;
	height:60px;
	position: absolute;
	top:30px;
	left:0px ;
	background:url(../images/SBO_logo.gif) no-repeat;
	z-index:5;
}

header h1 a:link, header h1 a:visited{
	display:block;
	width:230px;
	height:60px;
	overflow-x: hidden;
	overflow-y: hidden;
	text-indent:-9000px;
}

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

.fadeThis {
		position:relative;
		display:block;
		width:230px;
		height:60px;
	}
	
.fadeThis * {
	  display: none;
	}
	
.fadeThis span.hover {
		position: absolute;
		top: 0;
		left: 0;
		display:block;
		width:230px;
		height:60px;
		background:url(../images/SBO_logo_backlight.png) no-repeat;
		z-index:1;
}

/*-- Text elements ------------------------------------------------ */

p	{ /*margin: 0 0 1.5em;*/ margin-bottom: 1.2em;  font-size: 1.3em; line-height: 1.6em;
font-family: Cambria, Georgia, serif; color: #292929;}
p.footer{font-family:Georgia, "Times New Roman", Times, serif; font-size:0.90em; color:#9c9c9c; text-transform:uppercase;}
/* 
	These can be used to pull an image at the start of a paragraph, so 
	that the text flows around it (usage: <p><img class="left">Text</p>) 
*/

.left	{ float: left !important; }
p .left_around	{ margin: 1.5em 1.5em 1.5em 0; padding: 0; }
.right 	{ float: right !important; }
p .right_around{ margin: 1.5em 0 1.5em 1.5em; padding: 0; }

a:focus, a:hover	{ text-decoration:underline; }
a					{ text-decoration: none; }

blockquote  { margin: 1.5em; color: #666; font-style: italic; }
strong,dfn	{ font-weight: bold; }
em,dfn      { font-style: italic; }
sup, sub    { line-height: 0; }
.text-align-center{text-align:center;}

tr {line-height: 1.6em;}


/*-- Misc classes --------------------------------------------------- */
.red 	{color:#b30b0e;}
.gray	{color:#333;}
.small	{ font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
.large	{ font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
.clear	{clear:both; height:0px;}

/*-- IMAGE -------------------------------------------------- */ 
img.left {float:left; margin: 1.5em 1.5em 1.5em 0em ; padding:0; }
img.right {float:right; margin: 1.5em 0em 1.5em 1.5em ; padding:0;}
img.robot {margin-top:-50px;}
img.my_picture {margin-top:-5px; margin-left:-30px;}

/*-- LIST -------------------------------------------------- */ 
li{background :url(../images/list-style.png) no-repeat; padding-left:15px;}

ul.worklist li{float:left; background:none; display:inline; padding:0; }
ul.worklist li.worklist-info{width:300px; padding-top:60px;}
ul.worklist li.worklist-screenshot{width:600px;}


/*-- LAYOUT -------------------------------------------------- */ 
header, section, footer{width:100%; margin:0; padding:0; }

header	{height:120px; background-color: #292929; background-image:url(../images/background_header.png); 
		background-repeat:repeat; border-bottom:1px solid #fff;/* border-top:1px solid #ccc;*/}
		
section#page_content{min-height: 500px;
   height:auto !important;
   height: 500px;}
section#intro, section#page_content{ background: #f1f1f1 url(../images/bg_intro.jpg);
	background-repeat:repeat; border-top:1px solid #292929;}
section#intro{height:370px; padding-top:20px; border-bottom:1px solid #7d0000; border-top:1px solid #292929; font-size: 95%; }
section#works{ background-color: #7d0000; border-top:1px solid #f1f1f1; border-bottom:1px solid #b5b5b5; }
footer	{height:120px; background-color: #151515; border-top:2px solid #7d0000;}
.wrapper{position:relative; width:900px; margin:0 auto ; padding:30px 0;}

/*--- MAIN NAVIGATION --------------------------------------------- */ 
nav ul{float:right; margin-top:20px;}
nav ul li{float:left; margin-left:40px; background:none;   text-align:right; padding-bottom:5px;}
nav ul li a{font-family:Georgia, "Times New Roman", Times, serif; font-size: 1.5em; /*font-size: 1.3em; - w/HOME */ /*line-height: 1.25;*/ text-transform:uppercase; color:#ccc;}
/*nav ul li a:hover{text-decoration: none;}*/
nav ul li a:hover{border-bottom:2px solid #9a0303; text-decoration: none;}

#about nav ul li#nav_about a, #contact nav ul li#nav_contact a, #works nav ul li#nav_works a{color:#9a0303; font-weight:bold;}
/*#about nav ul li#nav_about:hover, #contact nav ul li#nav_contact:hover, #works nav ul li#nav_works a:hover{border-bottom:none; cursor:default;}*/
#about nav ul li#nav_about a:hover, #contact nav ul li#nav_contact a:hover, #works nav ul li#nav_works a:hover{border-bottom:none; cursor:default;}


/*---SECTIONS OF HOME --------------------------------------------- */ 
#intro p{line-height:2em; font-family:Cambria, Georgia, serif; font-size:1.5em; color:#292929; padding-top:10px; /* padding-left:420px;*/}

#intro img{display:inline;}
#intro .text_colum{width:500px;}

#work_list 		{margin-top:20px; margin-bottom:20px;}
#work_list li	{float:left; width:270px; height:220px; padding:0; margin-left:40px; display:inline; background:url(../images/shadow.png); background-repeat:no-repeat; background-position:-2px 187px; }
#work_list li:first-child{margin-left:0px;}
#work_list li span.client{text-transform:uppercase; font-family:Georgia, "Times New Roman", Times, serif; color:#ccc;}


#work_list li .screen_shot{height:180px; border:1px solid #313131; text-indent:-9000px; }
#work_list li .fadeThis{height:180px; width:272px; text-indent:-9000px; border:1px solid #313131; }

/*#work_list li .screen_shot#first{background:url(../images/work_evdeestetik.jpg) no-repeat;  background-position: 0 -180px;}*/
/*#work_list li .screen_shot#second{background:url(../images/work_aces.jpg) no-repeat;  background-position: 0 -180px;}
#work_list li .screen_shot#third{background:url(../images/work_timberSports2.jpg) no-repeat;  background-position: 0 -180px;}*/

div.screen_shot {position: relative;}
 
img.colored {
	position: absolute;
	left: 0;
	top: 0;
    z-index: 10;
	}
 
img.bw {
	position: absolute;
	left: 0;
	top: 0;
	}

/*--- HEADER -------------------------------------------------- */ 
#branding{
	width:230px;
	height:60px;
	position: absolute;
	top:30px;
	left:0px ;
	background:url(../images/SBO_logo.gif);
}

.column_1{float:left; padding:0px 15px 0px 0px; width: 600px;}
.column_2{float:left; padding:0px 15px 0px 10px; width: 230px;}
.column_2 p {font-size:1.2em; line-height: 1.5em;}


/*-- SECTIONS OF PROJECTS -----------------------------------------------------*/
section.sample_work{clear:both; float:left; background:url(../images/dotted-line.png) no-repeat bottom; padding:0px 0px 10px 0px; margin-bottom:10px;}