/* /// FIRST THINGS FIRST /// */

.preload { background-image: url(../images/throbber.gif); display: none; }



/* /// RESET /// */

*	{ margin: 0; padding: 0; }
a:focus	{ outline: none; }
img	{ border: 0; }



/* /// MAIN /// */

body	{ position: relative; margin: 0 auto; font-family: Verdana, Arial, sans-serif; background: url(../images/footer_bg.png) 0 0 #313237; color: #000; }

#header		{ position: relative; top: 0; left: 0; background: url(../images/header.png) no-repeat center -40px #313237; height: 115px; }
#header .logo	{ position: relative; top: 0; left: 0; background: url(../images/header.png) no-repeat center -40px #313237; margin: 0 auto; width: 900px; height: 115px; text-indent: -1000em; }



/* /// MENU /// */

#ribbon		{ position: relative; background: url(../images/ribbon_bg.png) repeat-x 0 0px #313237; height: 115px; }

#ribbon .top	{ position: relative; height: 1px;  top: 19px; background: url(../images/ribbon_top.png) no-repeat center 0; }
#ribbon .menu	{ position: relative; height: 80px; top: 19px; margin: 0 auto; width: 900px; }
#ribbon .bottom	{ position: relative; height: 1px;  top: 19px; background: url(../images/ribbon_bottom.png) no-repeat center 0; }

#ribbon ul,
#ribbon ul li	{ list-style-type: none; }

#ribbon ul	{ margin-left: 10px; }
#ribbon ul li	{ display: inline; float: left; width: 80px; height: 80px; background: #313237; margin-right: 2px; }

#ribbon ul li a		{ display: block; width: 80px; height: 80px; background-position: 0 0; background-repeat: no-repeat; }
#ribbon ul li a span	{ display: block; width: 80px; height: 80px; background-position: 0 0; text-indent: -1000em; }

#ribbon ul li a:hover span	{ background-position: 0 -80px; }
#ribbon ul li a.aktiv span	{ background-position: 0 -80px; cursor: default; }

 #ribbon ul li.gfx a,
 #ribbon ul li.gfx a span	{ background-image: url(../images/menu_gfx.png); }
 #ribbon ul li.logo a,
 #ribbon ul li.logo a span	{ background-image: url(../images/menu_logo.png); }
 #ribbon ul li.layout a,
 #ribbon ul li.layout a span	{ background-image: url(../images/menu_layout.png); }
 #ribbon ul li.web a,
 #ribbon ul li.web a span	{ background-image: url(../images/menu_web.png); }
 #ribbon ul li.photo a,
 #ribbon ul li.photo a span	{ background-image: url(../images/menu_photo.png); }
 #ribbon ul li.indy a,
 #ribbon ul li.indy a span	{ background-image: url(../images/menu_indy.png); }
 #ribbon ul li.about a,
 #ribbon ul li.about a span	{ background-image: url(../images/menu_about.png); }

#ribbon ul li.about	{ margin-left: 179px; }



/* /// FOOTER /// */

#footer		{ position: relative; height: 60px; background: url(../images/footer_topgrad.png) repeat-x left 0; }

#footer .top	{ position: relative; height: 1px; background: url(../images/footer_top.png) no-repeat center 0 #404040; }
#footer .main	{ position: relative; margin: 0 auto; width: 900px; padding-top: 6px; }

 #footer .main span	{ margin-left: 10px; width: 748px; text-align: right; display: block; font: 9px Verdana, sans-serif; color: #555659; }
 #footer .main span a		{ text-decoration: none; color: #67686B; }
 #footer .main span a:hover	{ border-bottom: 1px solid #3F4043; }

 #footer .main span.konami	{ margin-top: 10px; text-align: center; }



/* /// CONTENT /// */

.content_wrap	{ background: #313237; height: 501px; }
#content	{ position: relative; clear: both; margin: 0 auto; width: 900px; top: 30px; background: url(../images/main_bg.png) no-repeat 0 0; }

#content .panel a img		{ background: #555659; padding: 1px; border-bottom: 1px solid #1B1C21; }
#content .panel a:hover img	{ background: #77787B; }

 #content .panel a img.bright		{ background: #66676A; border-bottom: 1px solid #1B1C21; }
 #content .panel a:hover img.bright	{ background: #CCCDD0; }

#content .panel h3		{ position: relative; margin: 10px 0 0 0; padding-bottom: 1px; border-bottom: 1px solid #555659; color: #000; font: normal 13px Trebuchet MS, sans-serif; }
#content .panel h3 span		{ position: absolute; left: 0px; top: -1px; color: #9C9DB0; }

 #content .panel h3:before,
 #content .panel h3 span:before		{ quotes: '“' '”' '“' '”'; content:open-quote; }
 #content .panel h3:after,
 #content .panel h3 span:after		{ quotes: '“' '”' '“' '”'; content:close-quote; }

/*
 #content .panel h3:before,
 #content .panel h3 span:before		{ quotes: '«' '»' '«' '»'; content:open-quote; }
 #content .panel h3:after,
 #content .panel h3 span:after		{ quotes: '«' '»' '«' '»'; content:close-quote; }
*/

#content .panel p		{ margin: 0 0 15px 0; padding: 10px 0 0 0; font-size: 10px; line-height: 1.4em; color: #9c9da4; border-top: 1px solid #212227; } 

 #content .panel p a			{ color: #4ac; text-decoration: none; }
 #content .panel p a:hover		{ border-bottom: 1px solid #125E9A; }



/* /// ABOUT /// */

.table			{ display: table; width: 708px; padding-top: 6px; border-top: 1px solid #212227; }
.table #row		{ display: table-row; }

 .table #row div		{ display: table-cell; font-size: 10px; line-height: 1.3em; padding-right: 10px; }

 .table #row .left		{ text-align: right; }
 .table #row .last		{ padding-top: 6px; font-size: 9px; color: #67686B; }

 .table #row div a		{ color: #4ac; text-decoration: none; }
 .table #row div a:hover	{ border-bottom: 1px solid #125E9A; }

  .table #row .last a		{ color: #808184; }
  .table #row .last a:hover	{ border-bottom: 1px solid #555659; }

 #facts div			{ padding-bottom: 6px; }
 #facts .left			{ color: #707174; font-weight: bold; width: 110px; }
 #facts .right			{ color: #9c9da4; }

 #skills div			{ padding-bottom: 9px; }
 #skills .left			{ color: #9c9da4; width: 370px; }
 #skills .right			{ color: #707174; font-weight: bold; }

form		{ width: 708px; }
form * 		{ display: block; font: 11px Verdana, sans-serif; color: #9c9da4; }

form .left	{ float: left; width: 258px; }
form .right	{ width: 450px; }

label		{ display: none; }

input, textarea		{ margin: 0 0 6px 0; padding: 3px; border: 1px solid #555659; background: #333; }
input			{ width: 244px; }
textarea 		{ width: 442px; height: 120px; }

input:hover, textarea:hover	{ border: 1px solid #626366; }
input:focus, textarea:focus	{ border: 1px solid #626366; background: #37383D; }

input#submit		{ padding: 2px 3px; width: auto; float: right; }
input:hover#submit	{ background: #37383D; }

form sub	{ font-size: 9px; margin: 6px 0 13px 0; color: #67686B; }



/* /// SLIDER by Niall Doherty: http://www.ndoherty.com/coda-slider/ /// */

.csw		{ width: 100%; height: 460px; overflow: hidden; background: #313237; }
.csw .loading	{ margin: 150px 0 400px 350px; text-align: left; }

.stripViewer { /* This is the viewing window */
	position: relative;
	overflow: hidden; 
	left: 11px;
	top: 10px;
	width: 748px; /* Also specified in  .stripViewer .panelContainer .panel  below */
	height: 420px;
}

.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
	position: relative;
	left: 0; top: 0;
	width: 100%;
	list-style-type: none;
	/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
}

.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
	position: relative;
	float:left;
	height: 100%;
	width: 748px; /* Also specified in .stripViewer above */
}

.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
	padding: 20px;
}



/* /// NAV-TREE RIGHT /// */

.stripNav	{ position: absolute; left: 770px; top: 10px; }

.stripNav ul	{ list-style: none; }

.stripNav ul li	{ width: 130px; }

.stripNav ul li a {
	font-size: 10px;
	text-align: left;
	line-height: 30px;
	background: #313237;
	color: #eeeff8;
	text-decoration: none;
	display: block;
	padding: 0 10px;
	border-bottom: 1px solid #555659;
}

.stripNav ul li:last-child a	{ border-bottom: 0px; }

.stripNav ul li a:hover		{ background: #3D3E44; }

.stripNav ul li a.current	{ background: #393A40; cursor: default; }



/* /// KONAMI / hehe ;) /// */

#konami		{ text-align: center; }
#konami img	{ margin-top: 100px; }