/*
	TobyBrancher.net 2007
*/

*{margin: 0px; padding: 0px; border: none 0px #fff;}

html, body{
	color:				#525252;
	background:			#ededed;
	font: 				0.8em verdana;
	height:				100%;}
h1 {
	display:			block;
	font:				normal 2em arial;
	cursor:				pointer;
	margin:				0px 0px 14px 0px;}
h2 {
	display:			block;
	font:				normal 1.6em arial;
	cursor:				pointer;
	margin:				0px 0px 14px 0px;}
h3 {
	color:				#9e9e9e;
	font:				normal 0.9em verdana;
	margin:				0px 0px 4px 0px;}
h4 {
	font:				bold 1.1em verdana;
	margin:				0px 0px 10px 0px;}

a {color: #1c82c1; text-decoration: none; font-weight: normal;}
h1 a:hover, h2 a:hover {color: #1c82c1;}
p {line-height: 14px;}
.light_grey {color: #9e9e9e;}
.lighter_grey {color: #ddd;}
.strike {text-decoration: line-through;}
#css_light {color: #ddd; cursor: default;}
#css_dark {cursor: pointer;}

.left {float: left;} .right {float: right; text-align: right;}
.clear {float: none; clear: both;}
.hide {visibility: hidden;}
.heading {cursor: pointer;}
.seperator {
	width:				540px;
	height:				1px;
	background:			url(../img/site/line_1px.gif) no-repeat;
	margin: 			0px 0px 14px 60px;}


/* Position & Page */

#position {
	height:				100%;}
#page {
	width: 				600px;
	height:				100%;}
#top_seperator {
	width:				540px;
	height:				3px;
	background:			url(../img/site/line_3px.gif) no-repeat;
	margin:				0px 0px 40px 60px;}
#header {
	padding:			0px 0px 0px 58px;
	background:			url(../img/site/labels/h01.png) no-repeat;}
#header img#logo {
	width:				162px;
	height:				28px;
	margin: 			0px 0px 20px 2px;}

#header #random {
	position: 			relative;
	overflow:			hidden;
	width:				543px;
	height:				141px;
	margin:				0px 0px 23px 0px;}
#header #random img {
	width:				543px;}
#header #img_wrap {
	float:				left;
	position:			relative;
	overflow:			hidden;}
#header #img_comments {
	float:				left;
	width:				135px;
	height:				141px;
	margin:				0px 0px 0px 20px;}
#header #img_comments a.details {
	line-height:		30px;}
#header #img_nav {
	overflow:			auto;
	width:				135px;
	height:				84px;
	margin:				0px 0px 0px 0px;}
#header #img_nav ul {
	width:				105px;}
#header #img_nav ul li a {color: #666;}
#header #img_nav ul li a:visited {color: #999;}
#header #img_nav ul li a:hover {color: #1c82c1;}
#header #overlay {
	overflow: 			hidden; 
	position: absolute; top: 0; left: 0;
	width:				543px;
	height:				141px;
	background: 		url(../img/photos/mask-light.png) no-repeat;
	cursor:				pointer;}
#header #overlay.light {
	background: 		url(../img/photos/mask-light.png) no-repeat;}
#header #overlay.dark {
	background: 		url(../img/photos/mask-dark.png) no-repeat;}

/* Sections */

.toggle {
	display: 			block;
	width:				520px;
	color:				#666666;
	cursor:				pointer;
	padding:			0px 0px 0px 20px;}
h1 .toggle {background:	url(../img/site/buttons/plus.png) no-repeat;}
h2 .toggle {background:	url(../img/site/buttons/small_plus.png) no-repeat;}
.hover {color: #1c82c1;}
h1 .selected {/*color: #1c82c1;*/ background: url(../img/site/buttons/minus.png) no-repeat;}
h2 .selected {/*color: #333333;*/ background: url(../img/site/buttons/small_minus.png) no-repeat;}
.section {padding: 0px 0px 0px 60px;}
.section_content, .project_content {
	margin:				0px 0px 0px 0px;
	padding:			0px 0px 0px 4px;}
	
#news { width: 540px; height: auto;
	background:	url(../img/site/labels/s01.png) no-repeat;}
#projects {	width: 540px; height: auto;
	background:	url(../img/site/labels/s02.png) no-repeat;}
#contact { width: 540px; height: auto;
	background:	url(../img/site/labels/s03.png) no-repeat;}
#footer {
	width: 				540px; 
	color:				#9e9e9e;
	padding:			40px 0px 10px 60px;
	background:			url(../img/site/labels/s04.png) no-repeat;}


/* news */

.news_item {margin: 0px 0px 22px 00px;}


/* Projects */

#projects p {margin: 0px 0px 14px 0px;}
#projects p.intro_text {margin: 0px 0px 20px 0px;}
.project_content .left {
	width:				260px;
	margin:				14px 0px 18px 0px;}
#projects .left p {margin: 0px 0px 0px 0px;}


/* Contact */

#contact form {margin: 14px 0px 18px 0px;}
#contact form .txt {
	width:				248px;
	height:				20px;
	border:				solid 1px #fff;
	margin:				4px 0px 7px 0px;}
#contact form #message {
	width:				250px;
	height:				110px;
	border:				solid 1px #fff;
	margin:				4px 0px 0px 0px;}
#contact form #submit {margin: 10px 22px 10px 0px;}
#contact form .left {
	width:				250px;
	margin:				0px 14px 0px 0px;}
	
/* Popup */

.popup {
	padding:			30px 20px;}
.popup p {margin: 0px 0px 10px 0px;}