@charset "UTF8";
/* ---------------------------------------------------------------------------------
General Stuff: 

	1) Name a Section by an appropriate name and or the extensions name
	2) avoid the !important flag. 
	3) Only if a rule applies to the global structure - make it global, 
	   otherwise stick to the context.
	4) Avoid CSS Hacks.
	5) Use the appropriate Stylesheet for the individual Browser(Engine)
	6) In somecases the IE6 needs a 8bit PNG. Check the PSD for correct background matting.
	7) DO NOT JUST ADD YOUR DEFINITION - DOUBLE CHECK IF A RULE ALREADY EXISTS!
	8) Allways test at least the latest Browser Generations with more than 5% MarketShare
	   !IMPORTANT: If you don't test the rule in other browsers - add a note like this:
	   @TODO: Tested only on Firefox, IE8. 
	9) Check in your latest version into our SVN.
   10) If you need a special something for a special Browser - remember to add the secion name!
   11) Always test with firebugs "Network" if all background images gets loaded. 
   12) use #HEX values only for colors. 
   13) Write shorthand style,... ie:
       Wrong:
	   		background-image: url(#);
			background-color: #fff;
			background-position: left top
			background-repeat: no-repeat;
		Right:
		 	background: #fff url(#) 0 0 no-repeat;
   14) Avoid folowing selectors, because it takes the client to long to render:
       Wrong:
	   		div p .className div div span a.mylink {}
	   Right: 
	   		a.mylink {}
	   Or if you really need it in a special context:
	        .mySpecialContext a.mylink {}		
	   otherwise:
	   		.mySpecialCOntext a {}

PS: If you don't check in your changes into the SVN - your changes will be lost on the next update.
--------------------------------------------------------------------------------- */
/* debug structure: */
/*
 * { outline: 2px dotted red }
 * * { outline: 2px dotted green }
 * * * { outline: 2px dotted orange }
 * * * * { outline: 2px dotted blue }
 * * * * * { outline: 1px solid red }
 * * * * * * { outline: 1px solid green }
 * * * * * * * { outline: 1px solid orange }
 * * * * * * * * { outline: 1px solid blue }
*/
/* -- global reset ------------------------------------------------------------- */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, 
input, textarea, p, blockquote, th, td { 
	margin: 0;
	padding: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
table, td, th { 
	vertical-align: top; 
}
fieldset,img { 
	border:0;
}
address, caption, cite, code, dfn, em, strong, th, var {
	font: normal 100;
	text-align: left;
}
ol, ul {
	list-style: none;
}
caption, th, textarea {
	text-align: left;
}
h1, h2, h3, h4, h5, h6 {
	font: 800 100%;
}
q:before,q:after {
	content: '';
}
abbr, acronym, a img { 
	border: 0;
}
body, textarea {
	font: 13px "Trebuchet MS", Arial, Tahoma, sans-serif;
}
button {
	cursor: pointer
}
/* -- floats + clearing -------------------------------------------------------- */

.floatLeft { float: left }
.floatRight { float: right }
.centered {	margin: 0 auto 0 auto }
.clear { clear: both }
.clearfix:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden
}
.clearfix { display: inline-block }
/* Hides from IE-mac \*/
* html .clearfix { height: 1% }
.clearfix { display: block }
/* End hide from IE-mac */

/* -- global styles 2nd level -------------------------------------------------- */


:link, :visited { color: #5aaf32; text-decoration: underline; } 
:link:hover, :visited:hover { color: #5aaf32 }
:link:focus, :visited:focus { color: #5aaf32 }
:link:active, :visited:active { color: #5aaf32 }

h1, h2, h3, h4, h5, h6, h1 a {
	color: #0A321E;
	font-weight: 800;
}
/* -- something ... -------------------------------------------------------------*/
.rounded {
	/* 
		rounded borders are currently only supported by: gecko and webkit 
		even ie8 and opera 10 beta doesn't support this css3 property
		opera has a SVG workaround but complains bout security - so this ain't an option.
	*/
	-moz-border-radius: 3px; 
	-webkit-border-radius: 3px;
}
.rounded-top {
	-moz-border-radius-topleft: 3px; 
	-moz-border-radius-topright: 3px; 
	-webkit-border-radius-topleft: 3px;
	-webkit-border-radius-topright: 3px;
}
.rounded-bottom {
	-moz-border-radius-bottomleft: 3px; 
	-moz-border-radius-bottomright: 3px; 
	-webkit-border-radius-bottomleft: 3px;
	-webkit-border-radius-bottomright: 3px;
}
.hidden {
	display: none;
}
.small {
	font-size: 10px;
}
.small .icon-more {
	background-position: 0 -395px;
	padding-left: 16px;
}
.trans {
	filter:alpha(opacity=60);  
	-moz-opacity: 0.6;  
	-khtml-opacity: 0.6;  
	opacity: 0.6;
}
/* -- grid ---------------------------------------------------------------------- */
.wrapper {
	width: 810px;
	margin-left: 20px;
}
.icon {
	background: transparent url(http://hwcdn.net/t8b7j2b6/cds/imgages/sprite-icons.png) left top no-repeat;
}
#header {
	height: 120px;
	margin-top: 20px;
	margin-bottom: 20px;
}
#content {}
.maincontent {
	padding: 0;
}

#footer-wrapper {
	height: 303px;
	margin-left:-3px;
	margin-bottom: -303px;
	padding-bottom: 20px
}

#footer {
	background: #0a321e;
	height: 285px;
}
#rightcol {
	width: 225px;
	float: right;
	margin-right: 6px;
}
#articlecol {
	width: 520px;
	float: left;
}
#video {
	width:510px;
	background: #fff;
	padding: 2px;
	margin-bottom: 15px;
}
#noscript {
	width:510px;
	background: #ee0000;
	color:#fff;
	padding: 2px;
	margin-bottom: 15px;
}
#noscript a {
	font-weight: 800;
	color:#fff
}
#noscript ol {
	list-style: circle;
}
#noscript ol li {
	list-style-position: inside
}
/* -- elements grid ------------------------------------------------------------- */

/* @#leftcol: */
.berlin { height:265px; width:340px; }
.hamburg { height:400px; width:340px; }

/* @#midcol && #rightcol: */
.bornholm { height:130px; width:225px; }
.hannover { height:265px; width:225px; }

.berlin, 
.hamburg,
.bornholm, 
.hannover { margin-bottom: 5px; }

/* @#articlecol: */
.article-item { padding: 10px 15px 15px 15px; }
.article-toolbar { 
	height: 30px;
	margin: 0 15px 0 15px;
}
.articleinner {
	background: #f1f3f0;
	margin: 1px;
	padding: 1px;
}

/* -- basic color schemes ------------------------------------------------------- */
/* -- white */

.white { background-color: #fff }
.white h1, .white h1 a,
.white h2, .white h2 a,
.white h3, .white h3 a {
	color: #0a321e
}
.white h1 a:hover,
.white h2 a:hover,
.white h3 a:hover {
	color: #5aaf32
}
/* -- icon more link ------------------------------------------------------------ */
a.icon-more:hover {
	text-decoration: none;
}
.sprite {
	background-image: url(http://hwcdn.net/images/sprite.png);
	background-color: transparent;
}

/* -- icons --------------------------------------------------------------------- */
.icon {
	background-image: url(http://hwcdn.net/images/sprite-icons.png);
	background-repeat: no-repeat;
	background-color: transparent;
}
.icon-default 	{ background-position: 0 0 }
.icon-blogger 	{ background-position: 0 -40px }
.icon-facebook 	{ background-position: 0 -80px }
.icon-flickr 	{ background-position: 0 -120px }
.icon-meika 	{ background-position: 0 -160px }
.icon-myspace 	{ background-position: 0 -200px }
.icon-studivz 	{ background-position: 0 -240px }
.icon-twitter 	{ background-position: 0 -280px }
.icon-wordpress { background-position: 0 -320px }
.icon-youtube 	{ background-position: 0 -360px }
.icon-more 		{ background-position: 0 -400px; text-transform: uppercase; }
.icon-more-wht 	{ background-position: 0 -440px }
.icon-back 		{ background-position: 0 -480px }
.icon-next 		{ background-position: 0 -520px }
.icon-flag 		{ background-position: 0 -560px }
.icon-comment 	{ background-position: 0 -600px }
.icon-mail 		{ background-position: 0 -640px }
.icon-cc 		{ background-position: 0 -680px }
.icon-rss 		{ background-position: 0 -720px }

/* -- Marker aka Spitzmarke ----------------------------------------------------- */

span.marker {
	padding: 2px 4px 2px 4px;
	height: 14px;
	font-size: 10px;
	color: #fff;
	text-transform: uppercase;
	line-height: 19px;
}
.question .marker{
	background: #f09632;
	border-bottom: 1px solid #f1f3f0;
	border-right: 1px solid #f1f3f0;
}
.answer .marker, .std {
	background: #288c1e;
	border-bottom: 1px solid #c6dc93;
	border-right: 1px solid #c6dc93;
}

/* -- footer -------------------------------------------------------------------- */
#footer {
	position: relative
}
#footer ul {
	margin-left: 20px;
	padding-top: 16px;
}
#footer ul li {
	float: left;
}
#footer ul li a {
	color: #5aaf32;
	font-family: Arial, Tahoma, sans-serif;
	font-size: 12px;
	font-weight: 800;
	text-decoration: none;
	text-transform: uppercase;
}
#footer ul li ul {
	padding-top: 5px;
	margin: 0 21px 0 0;
}
#footer ul li ul li {
	float: none;
	padding-right: 10px;
	border-bottom:1px solid #264E19;
}
#footer ul li ul li a {
	color: #fff;
	font-family: "Trebuchet MS", Arial, Tahoma, sans-serif;
	font-size: 12px;
	font-weight: 100;
	text-transform: none;
	display: block;
}
#footer ul li ul li a:visited { text-decoration: none }
#footer ul li ul li a:hover { text-decoration: underline }
#footer-footnote {
	position: absolute;
	left: 20px;
	bottom: 20px;
}
#footer-footnote .icon {
	padding-left: 30px;
	padding-bottom: 2px;
	text-indent: -2000px;
	display: inline-block;
} 
#footer-footnote .icon-rss {
	background-position: 0 -718px;
} 


.question, .answer {
	/* max height stuff */
	max-height:150px;
	height:auto !important;
	height:150px;
	/* other stuff */
	overflow: auto;
	width: 490px;
	position: relative;
	padding: 15px;
	font-family: "Trebuchet MS", Candara, Arial, sans-serif; 
	font-size: 12px;
}
.question p, .answer p {
	padding-top: 25px;
}
.qa-marker, .qa-datetime {
	position: absolute;
}
.qa-datetime {
	font-size: 11px;
}
.question .qa-marker, .answer .qa-marker  {
	left:15px;
	top:15px;
}
.question .qa-datetime, .answer .qa-datetime  {
	right:15px;
	top:15px;
	color: #666666;
}
.question {
	background: #fff;
}
.answer {
	background: #d7e6af;
	margin-bottom: 15px;
	border-bottom: 1px solid #b5b5b5;
}
/* pager */
.qa-pager {
	position: relative;
	height: 22px;
	background-position: 145px -150px;
	margin-top: 15px;
	margin-bottom: 15px;
}
.prev_page, .next_page {
	position: absolute;
	display: block;
	width: 130px;
	height: 21px;
	text-indent: -2000px;
}
.prev_page {
	background-image: url(http://hwcdn.net/images/sprite.png);
	background-position: 0 -50px;
	left:0;
	top:0;
}
.next_page {
	background-image: url(http://hwcdn.net/images/sprite.png);
	background-position: 0 -100px;
	right:0;
	top:0;
}
.pagination {
	padding-left: 160px;
}
.pagination a:link, .pagination a:visited {
	text-decoration: none;
	color: #0a321e
}
.pagination a:hover, .pagination a:active {
	text-decoration: underline;
	color: #5aaf32
}
.current {
	color: #5aaf32;
	text-decoration: underline;
}

h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 800;
	text-transform: uppercase;
	padding-bottom: 15px;
}
iframe {
	width: 510px;
	height: 320px;
	overflow: hidden;
    border:none
}
.col-2 .floatLeft {
	width: 250px;
} 
.col-2 .floatRight {
	width: 200px;
}
.col-2 .floatLeft .input {
	width: 240px;
	height: 20px;
	border: 0;
	background-position: 0 -350px;
	padding-top: 5px;
	padding-left: 5px;
}
.col-2 .floatLeft .select {
	width: 245px;
	height: 25px;
	border: 0;
	background-position: 0 -350px;
}
/* -- form ---------------------------------------------------------------------- */
#qform {
	padding: 5px;
	margin-bottom: 15px;
	position: relative;
	overflow: hidden;
}
#loading {
	position: absolute;
	background: white;
	left:0;
	top:0;
	height: 500px;
	width: 530px;
	z-index: 1000;
}
#loading img {
	width: 64px;
	display: block;
	height: 64px;
	margin: 90px auto 0 auto
}
#qform p {
	padding-bottom: 10px;
}
.qform-wrapper {
	overflow:hidden;
	width: 500px;
	height: 230px;
	position: relative;
}
.qform-list {
	width: 30000px;
	position: absolute;
}
.qform-item {
	width: 500px;
	height: 230px;
	float: left;
}
.qform-item-large {
	width: 500px;
	height: 330px;
	float: left;
}

#question_text {
	height: 100px;
	width: 500px;
	background-position: 0 -400px;
	border:0;
	padding: 5px;
}
#qform select {
	width: 200px;
}
#qform .next {
	background-position: 0 -250px;
	width: 121px;
	height: 21px;
	border:0;
	text-indent: -2000px;
}
#qform input[type=submit] {
	background-position: 0 -300px;
}
#fake-form {
	background-position: 0 -550px;
	height: 60px;
	padding-left: 5px;
	padding-top: 5px;
}
#question_email {
	background-position: 0 -350px;
	border:0;
	padding:5px;
	width: 240px;
}
.formError {
	color: #ee0000;
}
#success a.icon-more {
	background-position: 0 -395px;
	padding-left: 16px;	
}
/* -- end of form stuff, even the fake ones ;) ---------------------------------- */
#filter {
	margin-bottom: 15px;
	position: relative;
	height: 50px;
}
#filter-headline {
	position: absolute;
	width: 200px;
	left:15px;
	top: 15px;
}
#filter-headline h4 {
	text-transform: uppercase;
	font-weight: 800;
	color: #5aaf32
}
#filter-choose {
	position: absolute;
	width: 200px;
	left:215px;
	top: 15px;
}
#filter-submit {
	position: absolute;
	width: 121px;
	right:15px;
	top: 15px;
}
#refresh {
	background-position: 0 -200px;
	border:0;
	height: 21px;
	width: 121px;
	text-indent: -2000px;
}
#box-flashCounter {
	margin-top: 5px;
	margin-bottom: 5px;
}
#box-whats-next {
	background: #e6e6d0;
	padding: 15px;
	margin-bottom: 5px;
}
#box-whats-next ul {
	margin-top: 10px;
}
#box-whats-next li {
	border-bottom: 1px solid #bfbfbf;
	padding-bottom: 5px;
	padding-top: 10px;
}
#box-whats-next img {
	float: left;
}
#box-whats-next h4 {
	padding-bottom: 5px;
	text-transform: uppercase;
	font-weight: 800;
	color: #0a321e
}
#box-whats-next h4, #box-whats-next p {
	margin-left: 60px;
}
#box-whats-next p {
	font-size: 12px;
}
#category {
  width: 150px;
}

.tab{
  background: none repeat scroll 0 0 #5AAF32;
  margin-left: 5px;
  padding: 5px;
  text-align: center;
  width: 100px;
  float:left
}

.tab.active{
  background: none repeat scroll 0 0 #F09632;
  margin-left: 5px;
  padding: 5px;
  text-align: center;
  font-weight: bold;
  width: 100px;  
  color: #fff
}

.spacer_bottom{
border-bottom:1px solid #B5B5B5;
margin-bottom:15px}