/* Font */

@font-face {
	font-family: "HelveticaNeue";
	font-style: normal;
	src: local("Helvetica LT 57 Condensed"),
		url('/fonts/helveticaneue-lt-57-condensed.woff') format('woff'),
		url('/fonts/helveticaneue-lt-57-condensed.ttf') format('truetype');
}
@font-face {
	font-family: "Trebuchet";
	src: local('Trebuchet'),
		url('/fonts/trebuchet.eot') format('embedded-opentype'), 
		url('/fonts/trebuchet.woff') format('woff'), 
		url('/fonts/trebuchet.ttf') format('truetype');
}

/* CSS Document */
body {
	margin: 0;
	font-family: "HelveticaNeue", sans-serif;
	background: #d6d6d6;
	font-size: small;
	color: #666666;
	line-height: 2.7ex;
}

.unsichtbar, hr {
	display: none;
}

.right {
	text-align:right;
}
.center {
	text-align:center;
}
.left {
	text-align:left;
}
.green {
	color:#008800;
}
.red {
	color:#880000;
}

#wrap {
	width: 846px;
	margin: 0 auto 0 auto;
}

table {
	border-collapse:collapse;
	background: #f9f9f9;
	color: #666666;
	margin: 0 30px 30px 0;
}

.admin label {
	display: inline-block;
	width:130px;
	margin-top:3px;
	margin-left:0px;
	margin-bottom:3px;
}
.admin table {
	background-color:#ffffff;
	margin:0px;
	width:100%;
}
.admin tr {
	vertical-align:top;
}
.admin tr:nth-child(even) {
	background:#f1f1f1;
}

.admin input[type=radio] {
	margin-left:0px;
	margin-top:0px;
	margin-right:4px;
	margin-bottom:3px;
	vertical-align: middle
}
.admin sup {
	display:block;
	margin-top:-7px;
	margin-bottom:7px;
}

label {
	display: block;
}
input, textarea, select {
	font-family: "Helvetica Neue", sans-serif;
	font-size: small;
	border: 1px solid #999999;
	margin-top: 3px;
	margin-bottom: 3px;
	padding: 2px 4px 2px 4px;
	color: #666666;
	background: white;
}
input:hover, input:focus, textarea:hover, textarea:focus, select:hover, select:focus {
	border-color: #666666;
}

.sub {
	padding-left:20px;
	font-style:italic;
}

tr {
	background: #ffffff;
}
.liste tr:nth-child(even) {
	background: #f1f1f1;
}
th {
	background: #999999;
	color: white;
	padding-left:5px;
	padding-right:5px;
}
td {
	padding-left:5px;
	padding-right:5px;
}
th.icon,
td.icon {
	padding:0;
	margin:0;
}
form td {
	padding:0;
	vertical-align:top;
}

.menu ul, .menu li {
	display:inline;
	list-style: none;
	float:right;
}

.icon a, a.icon {
	text-decoration:none;
}
.icon a:hover, a.icon:hover {
	color: white;
	background: black;
}

/* ______________________________________________________ Top1 */
	
#top1 {
	background: url('/images/bg.gif') top left repeat-y;
	height: 135px;
}

#top1 #top-links {
	float: left;
	width: 423px;
}

#top1 #top-rechts {
	float: right;
	padding: 20px 71px 0 0;
}

#top-rechts a {
	text-decoration: none;
	color: #999999;
	float: left;
	padding-left: 23px;
}
#top-rechts a:hover, #top-rechts a:focus {
	color: #666666;
}
a.top1-link1 {
	display: block;
	height: 30px;
	background: url('/images/top1-schloss.gif') top left no-repeat;
	margin-right: 20px;
}
a.top1-link1:hover, a.top1-link1:focus {
	background: url('/images/top1-schloss-hover.gif') top left no-repeat;
}
a.top1-link2 {
	display: block;
	height: 30px;
	background: url('/images/top1-brief.gif') top left no-repeat;
	margin-right: 20px;
}
a.top1-link2:hover, a.top1-link2:focus {
	background: url('/images/top1-brief-hover.gif') top left no-repeat;
}
a.top1-link3 {
	display: block;
	height: 30px;
	background: url('/images/top1-brief.gif') top left no-repeat;
	margin-right: 20px;
}
a.top1-link3:hover, a.top1-link3:focus {
	background: url('/images/top1-brief-hover.gif') top left no-repeat;
}

#top1 a.logo {
	display: block;
	background: url('/images/logo.gif') top left no-repeat;
	height: 93px;
	width: 290px;
	margin: 30px 0 0 71px;
}

#top1 a.logo:hover, #top1 a.logo:focus {
	background: url('/images/logo-hover.gif') top left no-repeat;
}

#top1 h1 {
	display: none;
}

#top-logout {
	float:right;
	padding:20px 71px 0 0;
	width:350px;
	text-align:right;
}

/* ______________________________________________________ Top2 */


#top2 {
	background: #009ee0 url('/images/bg-top2.gif') top left no-repeat;
	min-height: 200px;
}
#top2 em {
	display: block;
	color: white;
	background: transparent;
	width: 400px;
	padding: 30px 0 50px 71px;
	font-style: normal;
	font-weight: bold;
	font-size: 130%;
	line-height: 3ex;
}

/* ______________________________________________________ Navigation */

#navigation {
	height: 37px;
	margin:0;
	padding:0;
	background: url('/images/bg-navi.gif') top left no-repeat;
}
#navigation ul {
	margin:0 71px 0 71px;
	padding:0;
	list-style: none;
}
#navigation li {
	margin: 0;
	padding:0;
	float: left;
	vertical-align:middle;
}

#navigation li a {
	display: block;
	width: 86px;
	color:#ffffff !important;
	text-align:center;
	text-decoration:none !important;
	font-size:13px;
	line-height:36px;
	font-family: "HelveticaNeueCondensed", sans-serif;
	font-weight:bold;
/*	font-stretch:condensed; */
	text-transform: uppercase;
}
li.nav a:hover, li#nav a:focus, li.nav a.aktiv {
	background: url('/images/navi-hover.png') top left no-repeat;
}
li.border {
	width:1px;
	height: 36px;
	float:left;
	background:#ffffff;
}

/* ______________________________________________________ Inhalt */

#inhalt {
	background: white url('/images/bg.gif') top left repeat-y;
	padding: 20px 0 15px 0;
	float: left;
	width: 846px;
}

h1 {
	clear: both;
	margin: 0 71px 20px 71px;
	font-size: big;
	display: block;
}

h2 {
	clear: both;
	margin: 0 71px 20px 71px;
	padding: 2ex 0 0 0;
	font-size: 100%;
	display: block;
	border-bottom: 1px solid #cccccc;
	text-transform:uppercase;
}

h3 {
	font-size: small;
	margin: 2ex 0 0 0;
	padding: 0;
}

h4 {
	font-size: small;
	margin: 0;
	padding: 0;
}

p {
	margin: 0;
	padding: 0;
}
a {
	color: #666666;
}
a:hover, a:focus {
	color: #333333;
}

/* wenn nur eine spalte existieren soll */
.spalte {
	clear: both;
	padding: 0 71px 0 71px;
}

/* Spalte links */
.spalte1 {
	width: 342px; /* 423 - 71 -20*/
	float: left;
	padding: 0 0 0 71px;
}

/* Spalte rechts */
.spalte2 {
	width: 342px;
	float: right;
	padding: 0 71px 0 0;
}

.spalte ul, .spalte1 ul, .spalte2 ul {
	list-style-image: url('/images/list.gif');
	margin-top: 0;
	padding-left: 2.5ex;
	margin: 0;
}

/* ohne floating */
.clear {
	clear: both;
}

.link {
	margin-bottom: 10px;
	background: white url('/images/bg-angebot-top.gif') top left no-repeat;
	width: 342px;
}
.link-foot {
	clear: both;
	background: white url('/images/bg-angebot-bottom.gif') bottom left no-repeat;
	width: 342px;
	height: 20px; /*20*/
}
.link .inner-wrap {
	padding: 20px 20px 0 20px;
}
.link a {
	text-decoration: none;
}
a.list-pfeil {
	background: url('/images/list-pfeil.gif') center left no-repeat;
	padding: 16px;
}


.angebot {
	margin-bottom: 10px;
	background: white url('/images/bg-angebot-top.gif') top left no-repeat;
	width: 342px;
}
.angebot .inner-wrap {
	padding: 20px;
}

/* Angebot-Bilder */
.angebot h3 {
	width: 300px;
	height: 25px;
	margin:0;
}

#hosting1 h3 {
	background: url('/images/ang-hosting1.gif') bottom left no-repeat;
}
#hosting2 h3 {
	background: url('/images/ang-hosting2.gif') bottom left no-repeat;
}
#domains1 h3 {
	background: url('/images/ang-domains1.gif') bottom left no-repeat;
}
#domains2 h3 {
	background: url('/images/ang-domains2.gif') bottom left no-repeat;
}
#cms1 h3 {
	background: url('/images/ang-cms1.gif') bottom left no-repeat;
}
#cms2 h3 {
	background: url('/images/ang-cms2.gif') bottom left no-repeat;
}
#cms3 h3 {
	background: url('/images/ang-cms3.gif') bottom left no-repeat;
}
#cms4 h3 {
	background: url('/images/ang-cms4.gif') bottom left no-repeat;
}
#server1 h3 {
	background: url('/images/ang-server1.gif') bottom left no-repeat;
}
#server2 h3 {
	background: url('/images/ang-server2.gif') bottom left no-repeat;
}
#server3 h3 {
	background: url('/images/ang-server3.gif') bottom left no-repeat;
}
#streaming1 h3 {
	background: url('/images/ang-streaming1.gif') bottom left no-repeat;
}
#streaming2 h3 {
	background: url('/images/ang-streaming2.gif') bottom left no-repeat;
}

/* Startseite */
#start-hosting h3 {
	background: url('/images/start-hosting.gif') bottom left no-repeat;
}
#start-domains h3 {
	background: url('/images/start-domains.gif') bottom left no-repeat;
}
#start-cms h3 {
	background: url('/images/start-cms.gif') bottom left no-repeat;
}
#start-server h3 {
	background: url('/images/start-server.gif') bottom left no-repeat;
}
#start-streaming h3 {
	background: url('/images/start-streaming.gif') bottom left no-repeat;
}
#start-projekte h3 {
	background: url('/images/start-projekte.gif') bottom left no-repeat;
}

.angebot p {
	margin: 10px 0 0 0;
	padding: 0;
}
.angebot .preis {
	padding: 0;
	margin-top: 2ex;
	float: left;
	color: #999999;
}
.angebot .preis b {
	font-size: 150%;
	font-weight: normal;
	padding-left: 2ex;
	color: #666666;
}
.angebot a.bestellen {
	display: block;
	float: right;
	width: 109px;
	height: 29px;
	margin: 2ex 0 0 0;
	background: url('/images/bestellen.gif') bottom right no-repeat;
}
.angebot a.bestellen:hover, .angebot a.bestellen:focus {
	background: url('/images/bestellen-hover.gif') bottom right no-repeat;	
}

.angebot a.mehr-infos {
	display: block;
	float: right;
	width: 109px;
	height: 29px;
	margin: 2ex 0 0 0;
	background: url('/images/mehr-infos.gif') bottom right no-repeat;
}
.angebot a.mehr-infos:hover, .angebot a.mehr-infos:focus {
	background: url('/images/mehr-infos-hover.gif') bottom right no-repeat;	
}


.angebot-foot {
	clear: both;
	background: white url('/images/bg-angebot-bottom.gif') bottom left no-repeat;
	width: 342px;
	height: 20px;
}

.optional {
	clear: both;
	margin: 5ex 0 0 0;
	padding: 1ex 0 0 0;
	color: #999999;
}

/* ______________________________________________________ Projekte */

img.sehsinn {
	margin: 10px 10px 0 0;
	border: none;
}

.ref {
clear: both;
margin-bottom: 10px;
}

.ref a img {
display: block;
float: right;
margin-right: 30px;
width: 200px;
height: 200px;
border: 1px solid white;
}

.ref a:hover img, .ref a:focus {
border: 1px solid #cccccc;
}

.ref h4 {
margin: 0 0 1ex 0;
padding: 10px 0 0 0;
}

.ref h5 {
margin: 0 0 0 0;
padding: 0;
font-weight: normal;
font-size: small;
}

/* ______________________________________________________ Projekte */

.contact label {
	width: 110px;
	float: left;
}

.contact input, .contact textarea {
	width: 200px;
}

/* ______________________________________________________ Foot */


#foot {
	clear: both;
	background: #aaaaaa url('/images/footer-top.gif') top left no-repeat;
	min-height: 35px; /*für opera*/
	float: left;
	width: 846px;
}
#foot-bottom {
	clear: both;
	background: url('/images/footer-bottom.gif') top left no-repeat;
	height:45px;
	width: 846px;
	margin-bottom: 20px;
}

#foot-links {
	width: 332px; /* 423 - 71 -20*/
	float: left;
	padding: 15px 0 0 71px;	
	color: #e8e8e8;
}
#foot-links a {
	color: #e8e8e8;
	text-decoration: none;
}
#foot-links a:hover, #foot-links a:focus {
	color: white;
	background: transparent;
}

#foot-rechts {
	width: 332px; /* 423 - 71 -20 = 332*/
	float: right;
}

#foot-rechts form {
	text-align: right;
	margin: 10px 68px 0 0;
}

#foot-rechts form input {
	width: 121px;
	height: 21px;
	background: url('/images/suchebox.gif') center right no-repeat;
	padding: 4px 0 0 30px;
	color: #999999;
	border: none;
}
#foot-rechts form input:focus {
	color: #666666;
}

.error {
	color:#ff0000;
}

/* ---- Spezialitäten ---- */
td.gauge {
	width:202px;
	position: relative;
}
.gauge-bg {
	position:absolute;
	top:0px;
	left:0px;
	height:100%;
	margin:0px;
}
.gauge-text {
	position:absolute;
	top:0px;
	left:0px;
	width:200px;
	text-align:center;
	border:#999999 1px solid;
}