/* reset by eric meyer */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	background: #333 url(/img/back-pattern.png) repeat; /* fallback! */
}




ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}


h1, h1 em, h2, h3, h4 {
	font-family: Georgia, serif;
	font-weight: bold;
	font-style: italic;
	margin: 0;
	padding: 0;
}

h4 {
	font-size: 16px;
}

a {
	cursor: pointer;
}

a:hover {
	text-decoration: none;
}


/* all your base are belong to us */


.wrapper {
	width:960px;
	margin: auto;
	position: relative;
}


#banner {
	height:130px;
}

/
#banner h1 {
	width: 400px;
	height: 100px;
	padding: 0 20px;
	position: absolute;
	top:10px;
}

#banner h1:hover {
}


#banner h1 span {
	display:none;
}

#banner h1 a {
	position: absolute;
	width: 400px;
	height: 100px;
	background: url(/img/fortrabbit-typo.png) no-repeat left bottom;
}

#banner h1 a:hover {
} 


.c {
	clear:both;
	margin: 0 !important;
	padding: 0 !important;
	width: 0 !important;
	height: 0 !important;
}

strong {
	font-weight:bold;
}


/* login demo etc */

#essentials {
	float:right;
	margin-top:37px;
}

.tooltip {
	display:none;
	background:transparent url(/img/90-black.png) repeat;
	text-align: left;
	padding:15px;
	margin: 0;
	max-width: 240px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-moz-box-shadow: 0px 0px 5px rgba(255,255,255,0.6);
	-webkit-box-shadow: 0px 0px 5px rgba(255,255,255,0.6);
	font: 11px Verdana;
	color:#fff;
	z-index:200;
}






/* main navigation */

#topnav {
	display: block;
	position: absolute;
	top: 100px;
	z-index: 99;
	width: 100%;
}

#topnav ul {
	list-style: none;
}

#topnav ul li {
	float: left;
	margin-right: 2px;
	padding: 0px;
	background: #fff url(/img/topnav-back.gif) repeat-x left bottom;
	-webkit-border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;
	-moz-border-radius: 6px 6px 0px 0px;
}

#topnav ul li a {
	color:#000;
	float: left;
	padding: 0 15px;
	margin: 0px;
	text-decoration: none;
	font: bold 12px Verdana, sans-serif;
	line-height: 30px;
	-webkit-border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;
	-moz-border-radius: 6px 6px 0px 0px;
}

#topnav ul li a:hover {
	background: #999 url(/img/topnav-hover.gif) repeat-x left top;
	color: #fff;
	-webkit-border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;
	-moz-border-radius: 6px 6px 0px 0px;
}

#topnav ul li:hover a{
	color: #FFF;
}

#topnav #currentpage {
	background: #fff;
}

#topnav #currentpage:hover a {
	color: #000;
}

#topnav ul li.soon {
	color:#ddd;
	float: left;
	padding: 0 15px;
	text-decoration: none;
	font: bold 12px Verdana, sans-serif;
	line-height: 30px;
}

#topnav ul li sup {
	font-size:8px;
	font-weight: normal;
}

#topnav #facebooklike {
	width:130px;
	float:right;
	padding:3px;
	background-color: #000;
	background-color: rgba(0,0,0, 0.8);
	padding:2px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}



/* main content area */

#content {
	background:#eee url("/img/content-back.png") repeat-x scroll 0 0;
}

.keywords {
	display:none;
}

#content form {
	margin: 9px 0 0 0;
}

#content input, 
#content textarea {
	font: 14px Verdana;
	color: #333;
	border: 1px solid #999;
	padding: 2px 4px;
	width: 100%;
}

#content button {
	padding:3px;
}

#content button:hover {
	cursor: pointer;
}

#content input:hover, 
#content input:focus,
#content textarea:hover, 
#content textarea:focus {
	background-color:#FEFDE2;
	color:#000000;
}

#content label {
	font: 14px Georgia,serif;
	color:#666666;
}





/* intro (general class for the teaser block on top) */


.intro {
	background:#bbb url("/img/content-back-small.png") repeat-x scroll 0 0;
	padding: 30px 0 0 0;
}

.teaser {
	padding-bottom: 30px;
}

.teaser img,
.intro img {
	position:absolute;
	right: -60px;
	top: -15px;
}


#content .scrollable div *,
#content .intro div * {
	overflow: hidden;
}

#content .scrollable h2,
#content .intro h2 {
	font-size: 48px;
	line-height: 56px;
	color: #222;
	padding: 0;
	text-align: left; /* reset */
	background-image: none;
}


#content .scrollable h2 {
	padding: 20px 0 0 30px;
}

#content .scrollable p, 
#content .intro p, 
#content .teaser p {
	font-size: 22px;
	text-shadow: 1px 1px 0px rgba(255,255,255,0.9);
	padding: 0 347px 30px 0;
	font: italic bold 22px/30px Georgia, serif;
	color: #333;
}

#content .scrollable p {
	padding: 0 347px 30px 30px;
}

#content p.second,
#content .scrollable p.second, 
#content .intro p.second {
	margin-top: -15px;
}

#content .scrollable p a,
#content .intro p a {
	text-decoration: none;
	color: #000;
}

#content .scrollable p a:hover,
#content .intro p a:hover {
	text-decoration: underline;
}



/* defining styles at once for all cols */

/* cols */

.onecol {
}

.cols,
.onecol,
.twocols, 
.threecols,
.fourcols {
	margin-left: -80px;
	overflow: hidden;
}

.cols div,
.onecol div,
.twocols div, 
.threecols div,
.fourcols div {
	/*
	background: #fff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
	*/
	float:left;
	margin: 50px 0 0 80px;
	line-height:18px;
	padding-bottom: 50px;
}

/* first div */

.twocols div {
	width:440px;
}

.threecols div {
	width:266px;
}

.fourcols div {
	width:180px;
}



#content p {
	color: #000;
	font-family: Verdana, sans-serif;
	font-size: 12px;
	margin: 6px 0 0 0
}

#content p a, 
#content ul li a,
#content ol li a {
	text-decoration: none;
	color: #000;
	white-space: nowrap;
	text-decoration: underline;
}

#content p a:hover,
#content ul li a:hover,
#content ol li a:hover {
	color: #000;
	text-decoration: none;
}

#content p a:visited,
#content ul li a:visited,
#content ol li a:visited {
	color: #000;
}


#content p a[href^="http://"],
#content ul li a[href^="http://"] {
	background: transparent url(/img/http-link.gif) no-repeat scroll right center;
	padding: 0 7px 0 0;
}

p a[rel^="shadowbox"],
li[rel^="shadowbox"] {
	background: transparent url(/img/shadowbox-link.gif) no-repeat scroll right center;
	padding: 0 11px 0 0;
}


#content .blogentry p a[rel^="shadowbox"] {
	background-image: none;
}

#content p.small {
	font-size: 10px;
	margin: 8px 0;
}


#content ul, 
#content ol {
	margin: 5px 0;
}

#content div ul {
	list-style-type: disc;
}

#content div ol {
	list-style-type: decimal;
}

#content li {
	font-family: Verdana, sans-serif;
	font-size: 12px;
	color: #333;
}

#content sup a {
	text-decoration: none;
}

#content h3.sub {
	margin: 18px 0 0 0;
}

#content h2 {
	padding-top:60px;
	font-size: 50px;
	text-align: center;
	text-shadow: 1px 1px 0px rgba(255,255,255,0.5);
}

#content h3 {
	font-size: 20px;
}

#content h3 a {
	text-decoration: none;
	color: #333;
}

#content h1 {
	font-size: 40px;
	padding-top: 40px;
}

#content div p.large {
	font-size: 16px;
	line-height: 22px;
}


.icon p {
	padding-right: 140px;
}

/* HOSTING special thumb classes */

.security { background: url("../img/icon-security.png") right -21px no-repeat;}
.energy { background: url("../img/icon-energy.png") right -16px no-repeat; }
.server { background: url("../img/icon-server.png") right -7px no-repeat; }
.clientprofile { background: url("../img/icon-nerd.png") right -7px no-repeat; }
.service { background: url("../img/icon-telephone.png") right -7px no-repeat; }
.efforts { background: url("../img/icon-palette.png") right -7px no-repeat; }
.cms { background: url("../img/icon-cms.png") right -7px no-repeat; }
.php { background: url("../img/icon-php.png") right -7px no-repeat; }
.domain { background: url("../img/icon-domain.png") right -7px no-repeat; }
.e-mail { background: url("../img/icon-mail.png") right -30px no-repeat;} /* there is another email class! */
.mysql { background: url("../img/icon-mysql.png") right -7px no-repeat; }
.newsletter { background: url("../img/icon-newsletter.png") right -25px no-repeat; }
.relaying { background: url("../img/icon-relaying.png") right -7px no-repeat; }

/* MISH special thumb classes */
.browsers { background: url("../img/icon-browser.png") right -7px no-repeat; }
.help { background: url("../img/icon-help.png") right -7px no-repeat; }
.usability { background: url("../img/icon-arrow.png") right -7px no-repeat; }
.payment { background: url("../img/icon-payment.png") right 9px no-repeat; }
.opensource { background: url("../img/icon-opensource.png") right -7px no-repeat; }
.contract { background: url("../img/icon-contract.png") right -7px no-repeat; }

/* RECHNUNG special thumb classes */
.customers { background: url("../img/icon-customers-2.png") right -7px no-repeat; }
.saas { background: url("../img/icon-saas.png") right -7px no-repeat; }
.pricing { background: url("../img/icon-pricing.png") right -7px no-repeat; }
.din { background: url("../img/icon-din.png") right -7px no-repeat; }
.companies { background: url("../img/icon-companies.png") right -7px no-repeat; }
.letter { background: url("../img/icon-letter.png") right -7px no-repeat; }
.moneytime { background: url("../img/icon-money-time.png") right -7px no-repeat; }



.screencast-thumb {
	float:right;
	position: relative;
	text-decoration: none;
	text-align: center;
	font: 10px Verdana;
	font-weight: bold;
	color: #333;
	display: block;
	margin: 10px 0 0 10px;
	text-align: center;
}

.screencast-thumb.big {
	float: none;
	margin: 5px 0 0 0;
	padding: 0;
}

.screencast-thumb.big img {
	margin:0;
}

.screencast-thumb:hover {
	color: #000;
}

#screenshots {
	display: block;
}

.screencast-thumb img {
	border: 1px solid #666;
	-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
	margin-left:5px;
}

.screencast-thumb:hover img {
	-moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.5);
	border: 1px solid #333;
}


.screencast-thumb .video-play-helper {
	background: url("/img/video-play-overlay.png") no-repeat scroll 0 0;
	width: 70px;
	height: 70px;
	top: 18px;
	left: 43px;
	position:absolute;
	z-index: 200;
}


.screencast-thumb.big .video-play-helper{
	top: 82px;
	left: 186px;
}

.screencast-thumb.big .screenoverlay {
	background: url("/img/screenoverlay.png") no-repeat scroll 0 0;
	top: 1px;
	left: 1px;
	width:440px;
	height: 220px;
	position:absolute;
	z-index: 220;
	margin:0;
}

.screencast-thumb.big .screenoverlay:hover {
	background-image:none;
}


.tour .twocols div {
	width: 438px;
	margin-bottom: 30px;
	margin-top: 0;
}


/* referencelist */

#content div ul.referencelist {
	list-style-type:none;
}

#content div ul.referencelist li {
	margin: 0 0 20px 0;
}

#content div ul.referencelist li span {
	display: block;
}

.referencelist img {
	width: 16px;
	height: 16px;
	padding: 2px;
	background-color: #fff;
	margin: 0 0 -6px -24px;
	-moz-box-shadow: 0 0  3px rgba(0,0,0,0.4);
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.4);
}

#content .highlights ul,
#content ul.highlights {
	list-style-type: none;
	margin-bottom: 30px;
}

#content .highlights li {
	background: url('/img/bullet-questionmark.png') left center no-repeat;
	padding: 2px 2px 2px 22px;
	margin: 6px 0 0 -22px;
}

#content .highlights li:hover {
	cursor: pointer;
	color: #000;
	background-color: #fff;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}




/* address, navigation */

#footer {
	padding: 10px 0;
	font-size: 10px;
	color: #444;
	text-shadow: 1px 1px 0px rgba(255,255,255,0.5);
	background: url(/img/footerback.png) repeat-x 0 0;
	/* this does not work in ff3.5: */
	/* background: url(/static/images/response-shadow.png) repeat-x 0 -3px, url(/static/images/transparent-white-back.png) repeat; */
}

#footer a {
	color: #444;
	text-decoration: none;
}

#footer a:hover {
	color: #000;
}

#footer .threecols div{
	line-height: 16px;
	margin-top:10px;
	margin-bottom:10px;
}

#footer * {
	display:block;
	font-family: Verdana;
	font-size:10px;
}

#footer .wrapper {
	/*
	background-image: url(/img/footer-rabbit.gif);
	background-repeat: no-repeat;
	background-position: 0px 12px;
	*/
}

#footer address {
	font-style: normal;
}

#footer address .fn,
#footer address .region,
#footer address .country-name,
#footer address .url {
	display:none;
}

#footer address .locality,
#footer address .postal-code {
	display: inline;
}

#footer ul li a span{
	font-size:10px;
	color:#666;
	display: inline;
}

#footer ul li a{
	text-decoration: none;
	display:inline;
	padding: 1px 3px;
	margin: 0 2px 0 0;
}

#footer ul li a:hover,
#footer ul li#currentpage a {
	background-color: #fff;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}

#footer a[rel^="shadowbox"] {
	background: transparent url(/img/shadowbox-link.gif) no-repeat scroll right center;
	padding-right: 12px;
}

/* newsticker */

.newsticker {
	padding: 20px 0;
}

.newsticker *{
	color: #666;
	text-decoration: none;
	font: 12px Verdana, sans-serif;
}

.newsticker #blogout a{
	color: #000;
}

.newsticker #blogout a span{
	padding-left: 5px;
	color: #666;
	font-size: 10px;
}

.newsticker #blogout a:hover span {
	color: #000;
}

.newsticker .blogtitle {
	float:left;
}

/* shorthand cheating font: font-style font-variant font-weight font-size/line-height font-family; */


.subnav {
	margin: 40px 0 10px 0;
}

.subnav a{
	margin: 0 2px;
	background: url(../img/ctabuttonback.png) repeat-x center center; 
	padding: 4px 10px 4px 10px !important;
	border: 1px solid #aaa;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	text-decoration: none;
	color: #333;
	font-family: Verdana, sans-serif;
	font-size: 12px;
	text-shadow: #fff 1px 1px 0px;
	-moz-box-shadow: 1px 1px 0 #fff;
	-webkit-box-shadow: 1px 1px 0 #fff;
}

.subnav a:hover {
	background-color: #ddd;
}

.subnav a.submit {
	background-color: #CF0;
	border: 1px solid #9C0;
}
.subnav .submit:hover {
	background-color: #9C0;
}

/* ZURB buttons */


.ctabutton,
.ctabutton:visited {
	background: #333 url(/img/ctabuttonback.png) repeat-x center center; 
	display: inline-block; 
	padding: 8px 10px; 
	color: #fff !important;
	line-height: 12px;
	text-decoration: none  !important;
	font-style: normal !important;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	-moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
	-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
	text-shadow: -1px -1px 0px rgba(0,0,0,0.4);
	border: 1px solid rgba(0,0,0,0.4);
	cursor: pointer;
	-webkit-transition: all 0.2s ease-out;
	font-size: 12px; 
	font-weight: bold;
	font-family: Verdana;
}

.ctabutton:focus {
	outline:none; /* does THIS work? */
	-moz-outline-style: none; /* get rid of firefox focus dotted line */
	border: 1px solid black;
	background-color:#000;
	-moz-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
	-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}

.ctabutton:disabled {
	opacity: 0.3;
}

.ctabutton:hover 									{ background-color: #000 !important;; color: #fff !important;; }
.ctabutton:active 									{ margin-top: 1px; }
.large.ctabutton, .large.ctabutton:visited 			{ font-size: 16px !important;; padding: 18px 32px !important;; }

.small.ctabutton,
.small.ctabutton:visited { 
	font-size: 10px;
	padding: 2px 4px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
	-webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
}

.ultralight, .ultralight:visited {
background-color: #fff !important; /* fallback*/ 
background-color: rgba(255,255,255,0.7) !important;
color:#666 !important;
text-shadow: 1px 1px 0px #fff;
}

.ultralight.ctabutton:hover							{ background-color: #ddd !important; color: #333 !important;}


.light.ctabutton, .light.ctabutton:visited			{ background-color: #aaa !important;; }
.light.ctabutton:hover								{ background-color: #999 !important; }
.green.ctabutton, .green.ctabutton:visited			{ background-color: #66cc00 !important;; color: #fff !important;}
.green.ctabutton:hover								{ background-color: #339900 !important;; }
.blue.ctabutton, .blue.ctabutton:visited			{ background-color: #2daebf !important;; }
.blue.ctabutton:hover								{ background-color: #007d9a !important;; }
.red.ctabutton, .red.ctabutton:visited				{ background-color: #ff3300; color: #fff !important;;}
.red.ctabutton:hover								{ background-color: #990000; }
.magenta.ctabutton, .magenta.ctabutton:visited		{ background-color: #a9014b; }
.magenta.ctabutton:hover							{ background-color: #630030; }
.orange.ctabutton, .orange.ctabutton:visited		{ background-color: #ff5c00; }
.orange.ctabutton:hover								{ background-color: #d45500; }
.yellow.ctabutton, .yellow.ctabutton:visited		{ background-color: #ffb515; }
.yellow.ctabutton:hover								{ background-color: #fc9200; }


.ctabutton.highlight {
	/* add some fancy webkit animation here! */
}


.ctabutton span {
	display: block;
	font-size: 10px;
	font-weight: normal;
	margin: 2px 0 0 0;
}

/* message boxes */

.infobox {
	padding: 10px;
	background-color: #fff;
}

#content .infobox h1 {
	font-size:34px;
	padding-top: 0;
	margin-top: -30px; /* remove for IE7 */
	text-shadow: -3px 1px 0 #fff, -3px -2px 0 #fff, -3px 3px 0 #fff, -3px 0 0 #fff, -3px -3px 0 #fff, 0 -3px 0 #fff, 3px -3px 0 #fff
}

.alertbox h2, 
.infobox h2 {
	padding:0;
}


#content .infobox p{
	color: #333;
	font-size:12px;
	line-height: 18px;
	margin: 15px 0;
}

.price_info {
	text-align:center;
}


/* Hosting calculator */

#examples {
	margin: 0px 0 0 70px;
	font-family: verdana, sans-serif;
	font-weight: bold;
}

#examples p {
	margin: 1px 0 0 0;
	display: block;
	font-size: 10px;
	text-shadow: 1px 1px 0 #FFFFFF;
	color: #555;
	width: 100%;
	padding-left:20px;
	float: none;
}

#examples div {
	margin: 0;
	padding: 0;
	float:none;
}

#examples div a {
	display: block;
	width: 418px;
	padding: 3px 3px 3px 20px;
	margin: 0 0 2px 0;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	text-shadow: 1px 1px 0 #fff;
	color: #444;
	font-size: 12px;
	line-height: 14px;
	text-decoration: none;
	background: url("../img/hosting-examples-arrow.png") no-repeat left center;
	-webkit-transition: all 0.1s;
}

#examples div a:hover,
#examples div a:focus,
#examples div a:active,
#examples div a.active {
	margin-left: -20px;
	color: #000;
}

#examples div a span {
	display: block;
	font-weight: normal;
	font-size: 10px;
}



/* Hosting CalcTable */

#hostingcalculator {
	margin:0;
	float:left;
	width: 445px;
	/*
	padding: 2px;
	border: 2px solid #fff;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	*/
}

table {
	table-layout: fixed;
}

table tr .select {
	width: 280px;
}

table tr .select select {
	width: 250px;
	border: 1px solid #ccc;
	padding:1px;
	font-size:12px;
}

table tr .select select:hover {
	border: 1px solid #aaa;
}


table th,
table td {
	font-family: Verdana, sans-serif;
	padding: 1px 4px;
}

table td {
	line-height: 16px;
	font-size: 12px;
	position: relative;
}

table th.numbers,
table td.numbers {
	text-align: right;
	width: 60px;
}

table tr .price_net {
	color:#999;
	font-size: 12px;
}

table th {
	color:#555555;
	font-size:10px;
	font-weight:bold;
	text-shadow:1px 1px 0 #FFFFFF;
}

table td.info,
table th.info {
	width: 10px;
}

table td.info {
	background: url("/img/bullet-questionmark.png") no-repeat center center transparent;
}


table tfoot td{
	font-weight:bold;
}

.minus,
.plus {
	width: 12px;
	height: 16px;
	margin: 0 1px;
	position: absolute;
}

.minus {
	left: 286px;
	background: url("/img/sprite-minus.png") no-repeat -3px 1px transparent;
}

.plus {
	left: 273px;
	background: url("/img/sprite-plus.png") no-repeat -3px 1px transparent;
}

.minus:hover,
.plus:hover {
	background-position: -3px -17px;
}

.webpackage_base_title {
	padding:1px 4px;
	background-color:#fff;
	display:block;
	width:240px;
	border: 1px solid #ccc;
}


a.livechat {
	padding-left: 30px !important;
	background: url(../img/fugue-icons/balloons.png) no-repeat 8px 8px, #333 url(../img/ctabuttonback.png) repeat-x center center;
}

#content p.small {
	margin:10px 0 0 0;
	font-size: 10px;
	line-height: 16px;
	color: #666;
}


/* normale tabs mit ul li */

.tabnav {
	background: url(../img/tabnav-back.png) no-repeat left top;
	display: block;
	height: 90px;
	margin-left:-100px;
	padding-left:100px;
}

#content .tabnav ul {
	list-style-type: none;
	position: relative;
	top: 18px;
}

.tabnav ul li {
	float: left;
	line-height: 25px;
	font: 12px;
	color: #888;
	padding-top: 14px;
	background-image: none;
	
}

/* für die nicht aktiven steps */

.tabnav ul li span {
	display: block;
	padding-left: 20px;
}

#content .tabnav ul li a {
	text-decoration:none;
	font-weight:bold;
	float: left;
	display: block;
	font-size: 12px;
	height: 25px;
	line-height: 25px;
	margin: 0px;
	padding: 0 10px;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	border-right: 1px solid #aaa;
	border-right: 1px solid rgba(0,0,0,0.2);
	text-decoration: none;
	background: #eee url(../img/tab-gradient.png) repeat-x left bottom;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	text-shadow: 1px 1px 0px #fff;
	-webkit-transition: all 0.1s ease-out;
}

#content .tabnav ul li a:hover {
	padding-bottom: 5px;
	margin-top: -5px;
	text-decoration: none;
	-webkit-transition: all 0.1s ease-out;
	-moz-transition: all 0.1s ease-out;
}

#content .tabnav ul li a.active {
	background-color: #fff;
	background-image: none;
	/* background: rgba(255,255,255,0.4) url(/static/images/tab-back-active.png) repeat-x bottom left !important;*/
}

.tabnav .active,
.tabnav .active:hover {
}

/* tabnav sonderfälle */

.tabnav .active, 
.tabnav a.active:hover {
	background-image: none;
}



/* pricetable */


.pricetable {
	margin-bottom:50px;
}

.pricetable table {
	table-layout: fixed;
	width: 100%;
	margin-bottom:10px;
}


.pricetabletable th, 
.pricetable table td {
	padding: 5px;
	overflow: hidden;
	font-size: 12px;
	border-left: 1px solid #ccc;
}


.pricetable table .large{
	width: 300px;
}

.pricetable table .medium{
	width: 200px;
}

.pricetable table .small{
	width: 90px;
}

.pricetable table .xsmall{
	width: 60px;
}

.pricetable table .xxsmall{
	width: 20px;
}

.pricetable table td.info {
	background: url('/img/bullet-questionmark.png') left center no-repeat;
	padding-left: 18px;
}

.pricetable table td.info:hover {
	background-color: #fff;
}


/* @numbers */
/*  für nummern in listen, rechts  */



.pricetable .numbers {
	text-align: right;
}

.pricetable .numbers tr td span{
	display: inline;
}

.pricetable .numbers tr.sum td{
	background-color: #fff;
	font-weight: bold;
}

.pricetable table th {
	color: #333;
	font-size: 12px;
	padding: 6px;
	font-weight: bold;
	text-shadow: 1px 1px 0px #fff;
	border-bottom: 1px solid #ccc;
	/* background-color: #fdfdfd; */
}

.pricetable table th.first {
	color: #888;
}


.pricetable table th a {
	color: #000;
	text-decoration: none;
}

.pricetable table th a:hover{
	text-decoration: underline;
}


.pricetable table td {
	white-space: nowrap;
}

.pricetable table td.first {
	border-left: none;
	color: #555;
}

.pricetable table td span {
	font-size: 10px;
}

.pricetable table td span a{
	color: #666;
}

.pricetable table.small * {
	font-size: 10px;
}

.pricetable table.small td,
.pricetable table.small th {
	padding: 3px;
}


/* mind the gap horizontal ruler */

hr {
	border: 0;
	border-top: 1px solid #bbb;
	border-bottom: 1px solid #fff;
	margin: 30px 0;
	/*background: url(/static/images/hr_back.png) no-repeat center;*/
}


/* defintion lists */

dl {
	margin: 20px 0 10px 0;
}

dt,
dt label{
	color: #666;
	font-size: 14px;
	font-family: Georgia, serif;
	line-height: 20px;
	text-shadow: 1px 1px 0px #fff;
}

dt a {
	font-size:12px;
	font-weight: bold;
}

dt span a{
	color: #666;
	margin-right:8px;
	font-size: 10px;
	text-decoration: none;
}


dd {
	font-size: 12px; /* or maybe 10px, when why where? */
	margin-bottom: 10px;
}

input[type=text],
input[type=password], 
input[type=date] {
	padding: 3px 0 3px 3px;
	font-size: 12px;
	background: #fff url(../img/inputback.png) no-repeat 0px 0px;
}

input[type=text],
input[type=password],
input[type=date],
textarea {
	-moz-box-shadow: 1px 1px 0px #fff;
	-webkit-box-shadow: 1px 1px 0px #fff;
	background-color: #fcfcfc;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box; /* this CSS3 trick helps me to get an aligned box when i set it to have 100% width */
}

input[type=text].required,
input[type=password].required,
input[type=date].required,
textarea.required {
	border: 1px solid #333;
}

input[type=text].required:hover,
input[type=password].required:hover,
input[type=date].required:hover,
textarea.required:hover,
input[type=text].required:focus,
input[type=password].required:focus,
input[type=date].required:focus,
textarea.required:focus {
	color: #000;
	border: 1px solid #000;
	background-color: #ffffcc;
}

.form_info {
	font-size: 10px;
	line-height: 12px;
	display: block;
	color: #888;
	font-family: verdana;
}

.onecol .columlayout {
	margin: 20px 0 0 0;
	padding: 0;
	-moz-column-count: 3;
	-moz-column-gap: 40px;
	-webkit-column-count: 3;
	-webkit-column-gap: 40px;
}

#content .onecol .columlayout p {
	margin: 0 0 18px 0;
}


/* feedbackbutton */


 
#feedbackbutton {
	color:#fff;
	position: fixed;
	top: 40px;
	left: -25px;
	z-index: 10000px;
	font-family: Verdana;
	background-color:#000;
	background-color:rgba(0,0,0,0.7);
	font-size: 12px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-moz-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	padding:10px;
}

#feedbackbutton:hover {
	left: -20px;
}