@media screen {

/* I=======================================================================================I
		Main Stylesheet
		File: css/styles.css
		Date: 18.07.2009
		Autor: Daniel Reinhold
   I=======================================================================================I */

/* Colors
grau  #4F4F4F
blau  #0081D8
nav  #808080
*/   

#footer, #push { height: 18px; overflow: hidden; }


#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -20px;
overflow: hidden;
}

#footer p { padding: 0; color: #999; font-size: 10px;}
.valid { vertical-align: middle; padding: 0 0 0 10px;}


html, body { height: 100%; overflow: auto; background:  url(../images/bg.jpg) repeat;}
a { text-decoration: none; font-size: 13px; color: #333;}
p { padding: 0; margin: 0; color: #333; font-size: 13px; line-height: 19px; -moz-hyphens: auto !Important;
	-o-hyphens: auto !Important;
	-webkit-hyphens: auto !Important;
	-ms-hyphens: auto !Important;
	hyphens: auto !Important; } 

/* ----- top and navigation styles ---*/

#top { border-bottom: 1px solid #4F4F4F; padding-top: 9px; height: 72px; width: 820px; background: url(../images/top_bg.jpg) repeat-x; position: relative; overflow: hidden;}

#logo { float: left; }

/* ----- header styles ---*/
#header { margin-top: 25px; margin-bottom: 25px; overflow: hidden;}


#header h1 { font-size: 38px; color: #4F4F4F; text-transform: uppercase;  margin-bottom: 23px; letter-spacing: -0.04em; font-weight: bold; line-height: 38px; }
#header h1.first { margin-bottom: 0; }
#header h1.second { position: relative; z-index: 100;}

#headline { height: 110px;}
.tagline h2, #tagline h2 { font-size: 26px; color: #0081D8; line-height: 28px; width: auto; }
#tagline h2.snd { margin-bottom: 12px; }


#content { margin-bottom: 75px; }
form, #box1, #box2, #sideNav, #tagline, #content, #mainContent { overflow: hidden; }

.human {display: none;}
#projekte #main1 { margin-bottom: 17px; border-bottom: 1px solid #676767; padding-bottom: 27px;}

#index #box2 { margin-top: 0;}
#index #box1 p, #projekte .box1 p { color: #4D4D4D;}
#index #box2 p, #projekte .box2 p { color: #808080;}
#projekte .nogrey p { color: #4D4D4D;}
#index #box3 p { color: #4D4D4D;}
#index #box3 a { color: #0081D8; }
#index #box3 a#mail { color: #4D4D4D; }
#index #box3 a#mail:hover, #index #box3 a#mail:focus { color: #0081D8; }
#index #box3 a:hover, #index #box3 a:focus { text-decoration: underline;}


/* #######################            index			 ##################################### */



/* #######################            webdesign			 ##################################### */

.pro_box { float: left; padding-right: 12px;}
.pro_box p { padding: 5px 0; font-size: 10px;}
#sub_nav ul li{ padding-left: 40px;}
#webdesign #header h1 { height: 50px;}




.sIFR-replaced { height: 42px;}

/* #######################            webhosting tarife			 ##################################### */

#mainContent a {color: #0081D8; text-decoration: none; } 
#mainContent a:hover, #mainContent a:focus { text-decoration: underline;}

a#pdf { color: #0081D8; font-size: 13px; line-height: 19px;  }
a#pdf:hover { text-decoration: underline;}
#webhostingTarife #box2 { margin-top: 0px; }

.trigger { z-index: 100; }

a#webstandard { 
width: 150px; height: 126px;
background: url(../images/postItStandard.jpg) no-repeat;
display: block;
overflow: hidden;
text-indent: -9999em;
margin-left: 180px;
}

a#webprofi { 
width: 142px; height: 112px;
background: url(../images/postItProfi.jpg) no-repeat;
display: block;
overflow: hidden;
text-indent: -9999em;
}

a#webbusiness { 
width: 151px; height: 119px;
background: url(../images/postItBusiness.jpg) no-repeat;
display: block;
overflow: hidden;
text-indent: -9999em;
}


#webhostingTarife #header .post { padding: 70px 60px 64px 0; float: left; }

/* #######################            lava			 ##################################### */
.dropdown { width: 90px;}
#sub_nav a { width: 90px; display: block; padding: 3px 0 3px 0; line-height: 13px;}
#sub_nav a:hover, #sub_nav a:active, #sub_nav a:focus, #sub_nav li.current a {  color: #0081D8;}

        .lavaLampBottomStyle {
            position: relative;
            height: 80px;
            width: 600px;
            overflow: hidden;
			top: -9px;
			left: 65px;
        }
                .lavaLampBottomStyle li {
                    float: left;
                    list-style: none;
					margin-right: 50px;
                }
                    .lavaLampBottomStyle li.back {
                        border-top: 9px solid #0081D8;
                        height: 30px;
                        z-index: 8;
                        position: absolute;
                    }
                    .lavaLampBottomStyle li a {
						color: #808080; 
						font-family: arial; 
						font-size: 13px; 
						display: block; 
						padding: 50px 4px 18px 4px;  
                        z-index: 10;
                        position: relative;
                        overflow: hidden;
						text-align: center;

                    }   
                        .lavaLampBottomStyle li a:hover, .lavaLampBottomStyle li a:active, .lavaLampBottomStyle li a:focus, .lavaLampBottomStyle li.current a {
                            border: none;
							color: #0081D8;
                        }                     

/* #######################            form styles			 ##################################### */

label { width: 65px; display: block; float: left; font-size: 13px; color: #333; }
* label { margin-bottom: 15px;}
input { width: 265px; background: #E6E6E6; border: none; float: right; line-height: 22px; padding: 4px; font-family: Arial, Helvetica, sans-serif; font-size: 13px;}
* input { margin-bottom: 10px; }
textarea { width: 265px; background: #E6E6E6; padding: 4px; border: none; float: right; font-family: Arial, Helvetica, sans-serif; font-size: 13px;}

textarea:hover, textarea:focus, input:hover, input:focus, input:active { background: #D6D6D6;}

input#submit { background: #fff; color:#0081D8; float: right; width: 63px; cursor: pointer; float: right; }
* input#submit { width: 80px; } /* ie  */

input#submit:hover { text-decoration: underline;}
.rowElem { margin-bottom: 4px; overflow: hidden; min-height: 25px;}

#kont { margin-top: 38px; border-top: 1px solid #676767; padding-top: 26px;}
form { margin-top: 3px;}
.check { margin-left: 65px;}
.success p {color: green;}
.fail p {color: red;}



/* #######################            slider styles			 ##################################### */


.clear { clear: both;} 

.tagline  h2{ text-align: center; float: left; display: block; overflow: hidden; margin-bottom: 12px;} 

		.tagline p { text-align: center; float: right; display: block; line-height: 30px; } 
		.tagline a{ color: #0081D8; font-size: 16px; font-weight: normal; }
		.tagline a:hover { color: #4F4F4F;}
		
		p#cross-links { border-bottom: 1px solid #ccc; padding: 25px }
		
/*
		noscript p, noscript ol { color: #a00; font-size: 13px; line-height: 1.4em; text-align: left }
		noscript a { color: #a00; text-decoration: underline }
		noscript ol { margin-left: 25px; }
*/		
		a:focus { outline:none }
		
		img { border: 0 }
		
		
		.stripViewer .panelContainer .panel ul {
			text-align: left;
			margin: 0 15px 0 30px;
		}
		
		.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
			margin: 6px 0 20px 0;
			position: relative;
			width: 100%;
		}

		/* These 2 lines specify style applied while slider is loading */
		.csw {width: 100%; height: 460px; background: #fff; overflow: scroll}
		.csw .loading {margin: 200px 0 300px 0; text-align: center}

		.stripViewer { /* This is the viewing window */
			position: relative;
			overflow: hidden; 
			margin: auto;
			width: 820px; /* Also specified in  .stripViewer .panelContainer .panel  below */
			height: 570px;
			clear: both;
			background: #fff;
		}
		
		.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 */
			float:left;
			height: 100%;
			position: relative;
			width: 820px; /* Also specified in  .stripViewer  above */
		}
		
		.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
		}
		
		.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
			display: none;
		}
		
		.stripNav ul { /* The auto-generated set of links */
			list-style: none;

		}
		
		.stripNav ul li {
			float: left;
			margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */
		}
		
		.stripNav a { /* The nav links */
			font-size: 10px;
			font-weight: bold;
			text-align: center;
			line-height: 10px;
			background: #fff;
			color: #000;
			text-decoration: none;
			display: block;
			padding: 2px 3px;

		}
		
		
		.stripNav li a:hover, .stripNav li a:focus {
			color: 	#333;	}
		
		.stripNav li a.current {
			background: #0081D8;
			color: #fff;
		}
		
		.stripNavL, .stripNavR { /* The left and right arrows */
			position: absolute;
			top: 280px;
			z-index: 100;
			display: none;

		}
		
		.stripNavL a, .stripNavR a {
			display: block;
			height: 40px;
			width: 40px;
		}
		
		.stripNavL {
			height: 40px;
			width: 40px;
			right: 30px;;
		}
		
		.stripNavR {
			right: 0;
		}
		
		.stripNavL {
			background: url("images/arrow-left.gif") no-repeat center;
		}
		
		.stripNavR {
			background: url("images/arrow-right.gif") no-repeat center;
		}


#projekte #sideNav { position: absolute; top: 276px; left: 0px; z-index: 100; background: #fff; width: 120px; height: 270px; padding-top: 20px;}
#projekte #content { margin-top: 14px;}
#projekte .main1 { margin-bottom: 17px; border-bottom: 1px solid #676767; padding-bottom: 27px;}

.wrapper img { margin: 5px 0 25px 0;}
.box3 p { color: #969696;}




/* #####################   impressum ############## */

#impressum h3, #agb h3, #datenschutz h3 { font-family: Arial, Helvetica, sans-serif;  color: #4F4F4F; font-size: 16px; line-height: 1.2em; margin: 16px 0 6px 0; }
#impressum #mainContent ul { list-style: square; margin-left: 10px;}
#impressum #mainContent li {  list-style: square; padding: 0; margin-left: 10px; color: #333; font-size: 13px; line-height: 19px;}



/* #####################   kundenbereich  ############## */

#kundenbereich small { font-weight: bold; font-size: 12px; margin-right: 10px;color: #333;}
#twitter li { margin: 5px; padding: 2px; padding-left: 0; margin-left: 0; color: #666; font-size: 12px; } 
#twitter li:hover { background: #ccc;}
#kundenbereich h2.snd { font-size: 26px; color: #0081D8; line-height: 30px; width: auto; margin: 20px 0 ;}
#kundenbereich h3.snd { font-size: 22px; color: #0081D8; line-height: 28px; width: auto; margin: 20px 0 8px 0 ;}
#kundenbereich p.icq { width: 150px; height: 25px; line-height: 25px; float: left;}
#kundenbereich #icq img { margin-left: 20px; float: left;}
#kundenbereich #icq  li { overflow: hidden; }


#kundenbereich #box1 a { padding: 0; margin: 0; color: #333; font-size: 13px; line-height: 25px;}
#kundenbereich #box1 a:hover, #kundenbereich #box1 a:focus { color: #0081D8; text-decoration: underline;}
#kundenbereich #box2 a { color: #333;}
#kundenbereich #box2 a:hover, #kundenbereich #box2 a:focus { color: #0081D8; text-decoration: underline;}

#kundenbereich #box1 img { margin-right: 5px;}
#twitter { border-top: 1px solid #676767; padding-top: 15px; border-bottom: 1px solid #676767; padding-bottom: 15px;}




} /* Ende @media - nicht l�schen */