/* 
  sorenstoen.com v4 stylesheet 
  created 21 july 2010
  updated 09 august 2010
  created by www.souldesigngroup.com
  copyright soren stoen 	
*/

* {
	margin:0px;
	padding:0px;
	outline:none;
}

html {height:100%;}

body {
	width:100%;
	background:#FFF;
	font-family:Helvitica, verdana, sans-serif;
	font-size:10px;
	line-height:1.4em;
	letter-spacing:1.4px;
	color:#333;
	margin:0;
	border:none;
}

p {margin-bottom:20px;}

h1 {
	font-size:24px;
	line-height:36px;
}

h2 {
	font-size:18px;
	font-weight:normal;
}

h3 {
	font-size:14px;
	color:#EEE;
}

a:link {font-style:italic; color:#666;}
a:visited {text-decoration:none; color:#666;}
a:hover { color:#FFCCCC; background:#CCFFFF;}
a:active {font-style:italic; color:#FFCCCC; background:#CCFFFF;}

.clear {clear:both;}
.clear-right {clear:right;}
.clear-left {clear:left;}

img {border:none;}

.bg-img-right {float:right; text-indent:-9999px;}
.bg-img-left {float:left; text-indent:-9999px;}

.sml {font-size:10px;}
.sml-caps {font-size:10px; font-variant:small-caps;}

.center {text-align:center;}

ul {}
li {margin:5px 0 0 12px; list-style:url(img/list-arrow-999.gif); font-size:9px;}


/********************************************************* LAYOUT */
#container {
	width:1020px;
	margin:100px auto 20px auto;
	padding:0 10px;
}

#welcome {padding:0 0 20px 0;}


/********************************************************* HEADER */
#header {
	width:100%;
}

#logo {
	width:110px;
	height:110px;
	background:url(img/ss-fe.jpg) no-repeat top left;
}

#header-info {
	float:left;
	margin:-55px 0 0 780px;
}

#header-info-tag {
	float:right;
	text-align:center;
	border-left:10px solid #FFF;
	margin:55px 0 0 0;
}

#header a {font-style:normal; color:#333;}
#header a:hover {font-style:normal; color:#FFCCCC;}
		
		
/********************************************************* CONTENT-INFO */
#content-info {
	width:100%;
	padding:110px 0 0 0;
	clear:both;
	text-align:justify;
}

#welcome {
	width:100%;
	margin:0 20px 0 0;
	border-bottom:1px solid #EEE;
	float:left;
}

#welcome img {width:370px; float:right; margin-left:20px;}
		

/********************************************************* SELECT */
#select {
	margin:0 0 20px 0;
	padding:20px 0 4px 0;
	border-bottom:1px solid #EEE;
}

#about-button {
	width:110px;
	height:50px;
	text-align:center;
	color:#FFF;
	margin:0 20px 0 0;
	padding:16px 0 0 0;
	background:url(img/button-bg-110.gif) no-repeat top left;
	float:left;
}

#work-button {
	width:110px;
	height:50px;
	text-align:center;
	color:#FFF;
	margin:0 20px 0 0;
	padding:16px 0 0 0;
	background:url(img/button-bg-110.gif) no-repeat top left;
	float:left;
}

#pics-button {
	width:110px;
	height:50px;
	text-align:center;
	color:#FFF;
	margin:0 20px 0 0;
	padding:16px 0 0 0;
	background:url(img/button-bg-110.gif) no-repeat top left;
	float:left;
}

a:hover#about-button {background:url(img/button-bg-110-on.gif) no-repeat top left; color:#FFCCCC;}
a:hover#work-button {background:url(img/button-bg-110-on.gif) no-repeat top left; color:#FFCCCC;}
a:hover#pics-button {background:url(img/button-bg-110-on.gif) no-repeat top left; color:#FFCCCC;}

.active {background:url(img/button-bg-110-close.gif) no-repeat top left;}
a:hover.active {background:url(img/button-bg-110-on-close.gif) no-repeat top left; color:#FFCCCC;}


/********************************************************* ABOOT */
#about {
	display:none;
	margin-bottom:20px;
	padding:0 0 20px 0;
	border-bottom:1px solid #EEE;
}

#about a {font-style:normal; color:#333;}
#about a:hover {font-style:normal; color:#FFCCCC;}

#personal {
	width:240px;
	margin:0 20px 0 0;
	text-align:left;
	float:left;
}

#practiced {
	width:240px;
	margin:0 20px 0 0;
	text-align:left;
	float:left;
}

#click-click {
	width:240px;
	margin:0 20px 0 0;
	text-align:left;
	float:left;
}

#skillz {
	width:240px;
	margin:0;
	text-align:left;
	float:left;
}

	
/********************************************************* WORK */
#work {
	display:none; 
	margin-bottom:20px;
	padding:0 0 0 0;
	border-bottom:1px solid #EEE;
}

.work-item {
	width:240px;
	margin-right:20px;
	float:left;
	color:#AAA;
}

.work-item img {margin-bottom:5px;}

.work-item p {font-size:10px; }

.work-item a:hover {background:none;}


/********************************************************* PICS */
#pics {
	display:none; 
	margin-bottom:20px;
	padding:0 0 0 0;
	border-bottom:1px solid #EEE;
}

.pic-item {
	width:240px;
	height:150px;
	margin:0 20px 20px 0;
	overflow:hidden;
	float:left;
}


/********************************************************* GRID */
#grid {
	position:absolute;
	top:0;
	width:1040px;
	height:100%;
	margin:0 auto;
	display:none;	
}

#grid-button {
	position:absolute;
	top:5px;
	left:50%;
	margin:0 0 0 485px;
}

#grid-button-on {
	position:absolute;
	top:5px;
	margin-left:-1020px;
}


/********************************************************* SITEMETER */

#sitemeter-position {
	float:left;
	text-align:-3000px;
	margin-left:-3000px;
}


/********************************************************* LIGHTBOX */
#lightbox{
	background-color:#FFF;
	border:1px solid #111;
	padding:40px; 
	color:#666;
}

#lightboxDetails{
	font-size:0.9em;
	padding-top:0.4em;
}
	
#lightboxCaption{float:left; margin-left:3px;}
#keyboardMsg{position:absolute; right:0; margin:-30px 50px 0 0; font-variant:small-caps; color:#666; letter-spacing:5px; font-weight:bold; background-color:#EEE; padding:0 0 1px 5px; font-style:normal;}
#closeButton{top:5px; right:5px;}

#lightbox img{border:1px solid #F5F5F5; clear:both;} 
#overlay img{border:none;}

#overlay{background:url(img/lightbox-overlay.gif) center repeat;}

* html #overlay {
	background-color:#FFF;
	background-color:transparent;
	background-image:url(blank.gif);
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/lightbox-overlay.gif", sizingMethod="scale");
}