/*
Theme Name: Starkers HTML5
Theme URI: http://nathanstaines.com
Description: An HTML5 version of <a href="http://elliotjaystocks.com/starkers/">Starkers</a> by <a href="http://elliotjaystocks.com/">Elliot Jay Stocks</a> which is based on Twenty Ten.
Version: 3.2
Author: Nathan Staines
Author URI: http://nathanstaines.com
Tags: starkers, html5, naked, clean, basic
*/

@import "css/reset.css";
@import "css/layout.css";

*  {margin:0; padding:0}

body {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #383838;
    font: 62.5% "Arial",Verdana,sans-serif;
    margin: 0;
    min-width: 320px;
}
img {
    border-style: none;
    height: auto;
    max-width: 100%;
    vertical-align: top;
}
a {
    color: #333333;
    text-decoration: none;
}
a:hover {
    color: #000000;
    text-decoration: underline;
}

.floatfix {height:1px;font-size: 0;line-height: 0;clear: both;}	



h1 {
	font-size: 1.7em;
	font-family: Verdana, Tahoma, sans-serif;
	color: #1D1D1D;
    font-weight:bold; 
  }
h2 {
	font-size: 0.85em;
	font-family: Verdana, Tahoma, sans-serif;
	color: #1D1D1D;
    font-weight:bold; 
  } 
h1 a{
    display: block;
	color: #950038;
	text-decoration: none;
	overflow: hidden;
    text-indent: -9999px;
    width: 460px;
    height: 80px;
    background:url("images/erlebnis-ruhr-logo.png") no-repeat top left transparent;
}
h1 a:hover{
	color: #04648D;
	text-decoration: underline;
	background-position: 0 -80px;
}  
h2 a {
    vertical-align: baseline;
	font-size: 15px;
	color: #620000; 
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: 1px 1px 0 #ffffff;
  } 
h2 a:hover {
	color: #363636;
    border-bottom: 1px solid #acacac;
  } 


#headerwrap1 {
    margin: auto;
    background: #f2f2f2; /* Old browsers */
    background: -moz-linear-gradient(top,  #f2f2f2 0%, #d6d6d6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f2), color-stop(100%,#d6d6d6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f2f2f2 0%,#d6d6d6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f2f2f2 0%,#d6d6d6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f2f2f2 0%,#d6d6d6 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #f2f2f2 0%,#d6d6d6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#d6d6d6',GradientType=0 ); /* IE6-9 */
    border-bottom: 1px solid #a2a2a2;
    
}
#headerwrap2 {
    margin: auto;
    background: #6d6d6d; /* Old browsers */
    background: -moz-linear-gradient(top,  #6d6d6d 0%, #848484 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6d6d6d), color-stop(100%,#848484)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #6d6d6d 0%,#848484 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #6d6d6d 0%,#848484 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #6d6d6d 0%,#848484 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #6d6d6d 0%,#848484 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d6d6d', endColorstr='#848484',GradientType=0 ); /* IE6-9 */

    
}
#headerfirst {
    margin: auto;
    width: 960px;
    height: 80px;
}
#headerlogo {
    width: 460px;
    height: 80px;
}
#headernavigation {
    margin: auto;
    width: 960px;
    height: 36px;
}

#mainwrap {
    margin: auto;
    background:url("images/main-bgrnd.jpg") repeat-x top left transparent;  
    border-top: 1px solid #ffffff;  
}
#main {
    margin: auto;
    width: 960px;
    padding-top: 20px;
}
#mainleft {
    float: left;
    width: 630px;
}
#mainright {
    float: right;
    width: 300px;
}
#showcasewrap {
    margin: auto;
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(left,  #ffffff 0%, #c6c6c6 50%, #ffffff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(50%,#c6c6c6), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #ffffff 0%,#c6c6c6 50%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #ffffff 0%,#c6c6c6 50%,#ffffff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #ffffff 0%,#c6c6c6 50%,#ffffff 100%); /* IE10+ */
    background: linear-gradient(to right,  #ffffff 0%,#c6c6c6 50%,#ffffff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */

    border-bottom: 1px solid #a2a2a2;
    border-top: 1px solid #a2a2a2;
}
#showcase {
    margin: auto;
    width: 960px;
    height: 280px;
    background: #ffffff; 
    background: url("images/bgrnd-showcase.jpg") no-repeat top left transparent; 
    border-right: 1px solid #a2a2a2;
    border-left: 1px solid #a2a2a2;
}

.showcasepost {
    float: left;
    margin: 20px 13px 20px 13px;
    border: 1px solid #a2a2a2;
    width: 290px;
    height: 240px;
    overflow: hidden;
    position: relative;
    -webkit-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 0px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 0px 5px rgba(50, 50, 50, 0.75);    
}

.showcasepost:hover {
    border: 1px solid #620000;

}

.showcasetitel {
    bottom: 15px;
    left: 15px;
    position: absolute;
    
}
.showcasetitel a {
    color: #ffffff;
    text-transform: uppercase;
    font-size: 1.6em;
    text-shadow: 1px 1px 0 #000000;
    background:url("images/textbgrnd.png") repeat top left transparent;	
}
.showcasetitel a:hover {

}

.post {
    margin-top: 5px;
    padding: 20px 0 20px 0;
    border-bottom: 1px solid #c2c2c2;
    border-top: 1px solid #ffffff;
    font-size: 1.4em;
    line-height: 1.5em;
    text-align: justify;
    text-shadow: 1px 1px 0 #ffffff;
    background:url("images/border-top.png") no-repeat top left transparent;	    
}



.looppost {
    padding: 20px 0 20px 0;
    border-bottom: 1px solid #c2c2c2;
    border-top: 1px solid #ffffff;
    background:url("images/border-top.png") no-repeat top left transparent;	

}
.firstpost {
    padding: 20px 0 20px 0;
    border-bottom: 1px solid #c2c2c2;

    
}

.postthumbnailBAK {
    box-shadow: 0 0 5px #000000;
    display: inline;
    float: left;
    margin: 3px 0 20px;
    position: relative;
}
.postthumbnail {
    border: 1px solid #3e3e3e;
    display: inline;
    float: left;
    margin: 3px 0 20px;
    position: relative;
}
.postedon {
    font-size: 10px;
    padding-bottom: 10px;
}




.postcontent {
    display: inline;
    float: right;
    padding-bottom: 5px;
    width: 410px;
    font-size: 1.3em;
    line-height: 1.5em;
    text-align: justify;
    text-shadow: 1px 1px 0 #ffffff;
}

.articlefooter {
    font-size: 1em;    
}

.addthis_toolbox {
    margin-top: 20px;
}


#slider {
    margin: auto;
    height: 260px;
    border-bottom: 1px solid #d2d3d4;
    background: #f6f6f6;
}
#sliderwrap {
    background:url("gfx/shadow.png") no-repeat transparent;	
    margin: auto;
    width: 980px;
    height: 260px;
}


/* ###########################################################################################
                                           SIDEBAR
   ########################################################################################### */


#searchform {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 5px;
}


#s {
    background: #eaeaea; /* Old browsers */
    background: -moz-linear-gradient(top,  #eaeaea 0%, #fcfcfc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eaeaea), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #eaeaea 0%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #eaeaea 0%,#fcfcfc 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #eaeaea 0%,#fcfcfc 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #eaeaea 0%,#fcfcfc 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */
    border: 1px solid #c0c0c0;
    border-radius: 5px 5px 5px 5px;
    color: #3c3c3c;
    float: left;
    font: 1.2em/1em Arial,Helvetica,Geneva,sans-serif;
    margin: 0 10px 0 0;
    padding: 5px;
    text-shadow: 1px 1px 0 #ffffff;
    width: 190px;
}
#s:focus {
    border: 1px solid #620000;
}

#searchform #searchsubmit {
    background: #eaeaea; /* Old browsers */
    background: -moz-linear-gradient(top,  #eaeaea 0%, #fcfcfc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eaeaea), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #eaeaea 0%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #eaeaea 0%,#fcfcfc 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #eaeaea 0%,#fcfcfc 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #eaeaea 0%,#fcfcfc 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */

    border: 1px solid #c0c0c0;
    border-radius: 5px 5px 5px 5px;
    color: #3c3c3c;
    cursor: pointer;
    font: bold 1.2em/1em Arial,Helvetica,Geneva,sans-serif;
    padding: 4px;
    width: 78px;
}
#searchform #searchsubmit:hover, #searchform #searchsubmit:focus {
background: #eaeaea; /* Old browsers */
background: -moz-linear-gradient(top,  #eaeaea 0%, #e0e0e0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eaeaea), color-stop(100%,#e0e0e0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #eaeaea 0%,#e0e0e0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #eaeaea 0%,#e0e0e0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #eaeaea 0%,#e0e0e0 100%); /* IE10+ */
background: linear-gradient(to bottom,  #eaeaea 0%,#e0e0e0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */

    border: 1px solid #c0c0c0;
    color: #000000;
    text-shadow: 0 1px 1px #FFFFFF;
}


#sidebar {
    padding: 5px 0 10px 20px;
    background:url("images/border-left.png") repeat-y transparent;	
    min-height: 660px;	
}

.primwidget {
    padding: 5px 0 30px 0;
}

#sidebar h3 {
    font-size: 1.6em;
    color: #620000;
    font-weight: bold;

}

.cat-item {
    padding: 5px 0 5px 0;
}
.cat-item a {
    font-size: 1.3em;
}
.menu-item {
    padding: 5px 0 5px 0;
}
.menu-item a {
    font-size: 1.3em;
}

/* ###########################################################################################
                                           MEGA MENU 
   ########################################################################################### */
   
   
/* Reset code to remove theme inherent styling */
.dcjq-mega-menu ul.menu ul, .dcjq-mega-menu ul.menu li {
list-style: none;
padding: 0;
margin: 0;
}
.dcjq-mega-menu ul.menu ul {
display: none; /* Hides non-mega links */
}
.dcjq-mega-menu ul.menu .sub ul {
display: block; /* overrides above hide */
}
 
/* Main menu styles */
.dcjq-mega-menu ul.menu {
width: 100%;
height: 38px;
position: relative; /* Important - required for positioning of mega menu */
}
.dcjq-mega-menu ul.menu li {
float: left;
}
.dcjq-mega-menu ul.menu li a {
    float: left;
    display: block;
    background:url("images/nav-border.jpg") no-repeat right top transparent;    
    text-decoration: none;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: bold;
    padding: 10px 48px 8px 5px;
    text-shadow: 1px 1px 1px #000;
}
.dcjq-mega-menu ul.menu li.mega-hover a, .dcjq-mega-menu ul.menu li a:hover {
    color: #620000;
    text-shadow: 0 0 0 #000;
}
 
/* Arrow tag for parent links */
.dcjq-mega-menu ul.menu li a.dc-mega {

}
.dcjq-mega-menu ul.menu li a .dc-mega-icon {

}
.dcjq-mega-menu ul.menu li.mega-hover a .dc-mega-icon {

}
 
/* Mega Menu Styling */
/* Mega Drop Down Container */
.dcjq-mega-menu ul.menu li .sub-container {
position: absolute; /* Required */
margin-left: -3px;
}
.dcjq-mega-menu ul.menu li .sub {
background: #ffffff;
	padding: 5px;
}
.dcjq-mega-menu ul.menu li .sub-container.mega .sub {
padding: 5px;
}
.dcjq-mega-menu ul.menu li .sub .row { /* Clear the sub-menu floats */
width: 100%;
overflow: hidden;
clear: both;
}
.dcjq-mega-menu ul.menu li .sub li {
float: none;
font-size: 1em;
}
/* Sub-menu Headers */
.dcjq-mega-menu ul.menu li .sub li.mega-hdr { /* Sub-menu headers - i.e. 2nd level navigation */
float: left; /* Float the sub-menus and give them a fixed width to from the mega menu rows */
width: 260px;
margin: 0 10px 20px 10px;
border: 1px solid #ccc;
}
.dcjq-mega-menu ul.menu li .sub a { /* Clear the styles from the top-level links and set the font styles */
background: none;
border: none;
text-shadow: none;
color: #111;
padding: 7px 10px;
display: block;
float: none;
text-decoration: none;
font-size: 0.9em;
}
.dcjq-mega-menu ul.menu li .sub li.mega-hdr a.mega-hdr-a {
padding: 7px 10px;
margin-bottom: 5px;
border-bottom: 1px solid #ccc;
text-transform: uppercase;
color: #000;
background: #EAEAEA url(images/bg_hdr.png) repeat-x center center;
}
.dcjq-mega-menu ul.menu li .sub li.mega-hdr a.mega-hdr-a:hover {
color: #000;
text-shadow: none;
}
 
/* Style the 3rd level links */
.dcjq-mega-menu ul.menu li .sub li ul li {
margin-right: 90px;
}
.dcjq-mega-menu ul.menu .sub li.mega-hdr li a {
color: #444;
font-weight: normal;
padding: 3px 0 3px 25px;
}
.dcjq-mega-menu ul.menu .sub li.mega-hdr li a:hover {
color: #990000;
}



/* -------------------                                       Styling for items with only 2 levels */
.dcjq-mega-menu ul.menu li .sub-container.non-mega .sub {
margin-top: 0;
padding: 10px;
border-left: 1px solid #8c8c8c;
border-right: 1px solid #8c8c8c;
border-bottom: 1px solid #8c8c8c;
-webkit-box-shadow: 2px 2px 3px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    2px 2px 3px rgba(50, 50, 50, 0.75);
box-shadow:         2px 2px 3px rgba(50, 50, 50, 0.75);
}
.dcjq-mega-menu ul.menu li .sub-container.non-mega li {
 /* Set the drop down width */
 border-bottom: 1px dashed #d1d1d1;
}
.dcjq-mega-menu ul.menu li .sub-container.non-mega li a {
display: block;
padding: 2px 25px 2px 5px;
text-transform: none;
font-size: 12px;
}
.dcjq-mega-menu ul.menu li .sub-container.non-mega li a:hover {
color: #990000;
}


/* ###########################################################################################
                                           MCOMMENTS 
   ########################################################################################### */

#respond {
    border-top: 4px solid #ff6c00;
    margin-top: 40px;
    padding: 30px;
    font-size: 12px;
    line-height: 16px;
}
#respond h3 {
    float: left;
}
#respond p {
    margin-bottom: 5px;
}
#respond_title {
    margin-bottom: 20px;
}
.cancel-comment-reply {
    float: left;
    margin-left: 140px;
}
#respond #author, #email, #url, textarea {
    border: 1px solid #899DA0;
    margin-bottom: 10px;
    padding: 3px;
}
#respond textarea {
    width: 98%;
}

.commentlist {
	list-style: none;  
	margin-top: 50px;
}
 
 
.commentlist ul {
	list-style: none;
}
 
.comment-body {
	background-color: #F4F4F4;
	-moz-border-radius: 6px;        /* Funktioniert logischerweise nur im Firefox und Webkit-Browsern(Safari, Chrome) */
	-webkit-border-radius: 6px;
	margin-bottom: 20px;
	padding: 15px;
	margin-left: 70px;
	position: relative; /* sorgt dafür, dass das Gravatar-Bild sich bei position:absolute relativ zu seinem comment-body verhält. */
}
 
.comment-body p {
	margin: 5px 0 35px 0;
}
 
.comment-meta {
	display: none; /* Datum des Kommentars ausblenden */
}
 
.bypostauthor .comment-body {
	/* Kommetare des Autors z.B. farblich hervorheben */
}
 
.children {
	margin-left: 70px; /* Anworten werden 70px eingerügt */
}
 
.vcard img {
	background-image: url(img/comments_bg.jpg); /* Grafik mit dem kleinen Pfeil */
	background-repeat: no-repeat; 
	background-position: 60px 15px; /* Pfeil rechts neben der Grafik positionieren */
	padding-right: 50px; /* Platz nach rechts für die Hintergrundgrafik schaffen und Abstand zur Box schaffen */
	position: absolute; /* Gravatar aus dem comments-body herauslösen.. */
	left: -70px; /* und links neben ihm positionieren */
	top: 0;
}

#comments-title {
    font-size: 12px;
    margin-bottom: 10px;
}
.comment {
    padding: 20px;
    margin: 10px;
    background: #f2f2f2;
    font-size: 12px;
    text-shadow: 1px 1px 0 #ffffff;
}


/* ###########################################################################################
                                           FOOTER
   ########################################################################################### */

#footerwrap {
    margin: auto;
    margin-top: 40px;
    background:url("images/main-bgrnd.jpg") repeat-x top left transparent;  
    border-top: 1px solid #ffffff;  
}

#footer {
    margin: auto;
    text-align: center;
    width: 960px;
}