/* CSS Dokument
Jan Becker IT
www.JanBecker-IT.de
Start: 25.08.2010
*/

/* Farbschema
--------------------------------------------------------------------------------------- */

/*
Farbton (Headlines): #666666 | #99999
Farbton (Text): #666666
*/

/* Reset
--------------------------------------------------------------------------------------- */
* {
	padding: 0;
	margin: 0;
	border: 0;
}
/* Globals und Typo 
--------------------------------------------------------------------------------------- */

html {
/* Wahlweise Grid-Hintergrund
Rasterhintergrund, der die Breite bis 100 Pixel und eine Höhe bis 950 Pixel anzeigt. Die Breite von 960 Pixel ist markiert. Der Hintergrund ist transparent, muss also nicht nur mit #fff verwendet werden. Es wird eine Schriftgröße von 75% oder 12px festgelegt.
	background: #fff url(bilder/grid.png) top left no-repeat;
*/	
	background: #fff;
}

body {
/* Wahlweise Linienhintergrund
Linienhintergrund abgestimmt auf eine Schriftgröße von 12px.	
	background: transparent url(bilder/line-height.gif) top left;
	*/	
	background: #fff;
	font-size: 75%;
	text-align: center;
	font: 1em/1.5em Verdana, Arial, sans-serif;
	color: #666666;	
}

html>body {
	font-size: 12px;
}

a:link 
{
    font: 1em/1.5em Verdana, Arial, sans-serif;
	color: #333;
	text-decoration: none;
}

a:active 
{
    font: 1em/1.5em Verdana, Arial, sans-serif;
	color: #333;
	text-decoration: none;
}    

a:hover 
{
    font: 1em/1.5em Verdana, Arial, sans-serif;
    color: #333;
	text-decoration: none;
}

a:visited
{
    font: 1em/1.5em Verdana, Arial, sans-serif;
	color: #333;
	text-decoration: none;
}

.clear {
	clear: both;
}

img {
	border: none;
}

/* Macht die gepunktete Linie um geklickte Links unsichtbar
--------------------------------------------------------------------------------------- */
a:focus {
    outline: none;
}


/* Vertikaler Rhythmus basierend auf 12px Basisgröße für den Fließtext
--------------------------------------------------------------------------------------- */
p {
	font: 1em/1.5em Verdana, Arial, sans-serif;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	color: #666666;
}

h1 {
	font: 1.67em/0.9em Verdana, Arial, sans-serif;
	margin-top: 0.9em;
	margin-bottom: 0.9em;
	color: #666666;
}

h1 span 
{
    color: #999;
}

h2 {
	font: 1.5em/1em Verdana, Arial, sans-serif;
	margin-top: 1em;
	margin-bottom: 1em;
	color: #666666;
}

h3 {
	font: 1.33em/1.13em Verdana, Arial, sans-serif;
	margin-top: 1.13em;
	margin-bottom: 1.13em;
	color: #666666;
}

h4 {
	font: 1.17em/1.29em Verdana, Arial, sans-serif;
	margin-top: 1.29em;
	margin-bottom: 1.29em;
	color: #666666;
}

/* Tabellen
--------------------------------------------------------------------------------------- */
table tr td {
	vertical-align: top;
}

/* Listen
--------------------------------------------------------------------------------------- */
#content ul {
	margin-left: 20px;
	margin-bottom: 20px;
	font: 1em/1.5em Verdana, Arial, sans-serif;
	color: #666666;
}

#content ul li 
{
    margin: 5px 0;
}

#content ul.blue 
{
    list-style-image: url(../img/listitem_blue.png);
}

#content ul.green
{
    list-style-image: url(../img/listitem_green.png);
}

td p {
	margin-top: 0;
}


/* Navigation
--------------------------------------------------------------------------------------- */
#navigation 
{
    height: 80px;
	list-style: none;
	margin-left: 5px;
	float: right;
	border-right: 1px solid #cecece;	
}

#navigation li {
	height: 44.5px;
	width: 83px;
	text-align: center;
	font: 1em/1em Verdana, Arial, sans-serif;
	color: #666666;
	float: left;
	border-left: 1px solid #cecece;
	padding-top: 35.5px;
}

#navigation li.active 
{
    font-weight: bold;
    color: #999999;
    background: url(../img/act_navitem.png) no-repeat center bottom;
}

#navigation li:hover
{
    background: url(../img/hover_navitem.png) no-repeat center bottom;
}

/* Bilder und verlinkte Bilder ohne Rahmen 
--------------------------------------------------------------------------------------- */
img {
	border: none;
}

a img {
	border: 0;
}

#logo 
{
    float: left;
    margin-top: 20px;
}

#monitor 
{
    margin-top: 20px;
}

#button_references {
	position: absolute;
	top: 10px;
	right: 0;
}

#rightContent img
{
    border: 1px solid #999;
}

img.portfolio_medium 
{
    margin: 20px;
    border: 1px solid #cecece;
}

/* Schatten
--------------------------------------------------------------------------------------- */
#cont_shadow_top {
	width: 810px;
	height: 10px;
	background: transparent url(../images/content_shadow_top.png) no-repeat;
}

#cont_shadow_bottom {
	width: 810px;
	height: 10px;
	background: transparent url(../images/content_shadow_btm.png) no-repeat;
}

/* Links- bzw. Rechtsausrichtung für Elemente
--------------------------------------------------------------------------------------- */
.links {
	float: left;
	margin: 0 0.5em 0.5em 0;
}

.rechts {
	float: right;
	margin: 0 0 0.5em 0.5em;
}



/* Layoutelemente
Verwenden Sie overflow: hidden; um nötige Foats aufzulösen.
--------------------------------------------------------------------------------------- */
.wrapper 
{
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    position: relative;
    overflow: hidden;
}

#header 
{
    height: 80px;
    width: 100%;
    background: url(../img/head_bg.png) repeat-x
}

#navigation {
    height: 80px;
}

.spot 
{
    height: 200px;
    width: 100%;
}

#home 
{
    background: url(../img/spot_bg_blue.png) repeat-x;
}

#references
{
    background: url(../img/spot_bg_green.png) repeat-x;
}

#contact
{
    background: url(../img/spot_bg_orange.png) repeat-x;
}

#imprint
{
    background: url(../img/spot_bg_violet.png) repeat-x;
}


#content {
    clear: both;
    width: 800px;
    margin: 20px auto;
    text-align: left;
    overflow: hidden;    
}

#leftContent {
	width: 360px;
	float: left;
	display: inline;
}

#rightContent {
	width: 310px;
	height: 347px;
	padding: 0 20px 10px 20px;
	float: right;
	display: inline;
	background: url(../img/bg_cont_box_startseite.png) no-repeat;
}

#rightContent table td 
{
    vertical-align: middle;
    padding: 5px;
}

#footer {
	width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;	
	color: #666666;
	font: 0.8em/1.2em Verdana, Arial, sans-serif;
	margin-top: 1.29em;
	margin-bottom: 1.29em;
}

#footer div
{
    margin-right: 200px;
}

#copyright 
{   
    display: block;
    text-align: center;
}

/*-----SLIDER-----------*/
.portfolioImage 
{
    float: left;
    display: inline;
    width: 600px;
    height: 200px;
}

.portfolioText 
{
    width: 200px;
    display: inline;
    margin-right: 30px;
}

.portfolioText p 
{
    color: #fff;
}

#slider
{
    width: 800px;
}	
#slider ul, #slider li{
	margin:0;
	padding:0;
	list-style:none;
	}
#slider li{ 
	width:800px;
	height:200px;
	overflow:hidden; 
	}	
#prevBtn, #nextBtn{ 
	display:block;
	width:30px;
	height:77px;
	position:absolute;
	left:0px;
	top:71px;
	}	
#nextBtn{ 
	left:830px;
	}														
#prevBtn a, #nextBtn a{  
	display:block;
	width:30px;
	height:77px;
	background:url(../img/prev.png) no-repeat 0 0;	
	}	
#nextBtn a{ 
	background:url(../img/next.png) no-repeat 0 0;	
	}
	
/*---KONTAKTFORMULAR ---*/
#input_name, #input_email, #txtarea_mailtext, #anfrage_grund {
	padding: 10px;
	background-color: #ccc;
	border: #999 1px solid;
	}
	
#input_name, #input_email {
	width: 400px;
}

#txtarea_mailtext {
	width: 400px;
	height: 150px;
	overflow: auto;
}

#button_send {
	background:url(../img/btn_send.png) no-repeat; 
	cursor:pointer; 
	width: 100px; 
	height: 40px; 
	border: none; 
}

#button_reset {
	background:url(../img/btn_reset.png) no-repeat; 
	cursor:pointer; 
	width: 100px; 
	height: 40px; 
	border: none; 
}