/*
Theme Name: Northern-Web-Coders
Theme URI: http://northern-web-coders.de/test/wordpress/
Description: Northern-Web-Coders - HTML5 Theme
Version: 2.6.4
Author: Kai Ackermann | jaman
Author URI: http://www.design-coding.de
Tags: gray, two-columns, flexible-width, translation-ready
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/


*
{
    margin: 0;
    padding: 0;
}

header, nav, section, article, footer
{
    display: block;
}

body
{
    font-family: Arial, Verdana, sans-serif;
    background: #2E2F2F;
    margin: 20px auto;
    width: 80%;
}

/*header, left, right, footer*/
header
{
    width: 100%;
    height: 207px;
    float: left; 
}

header h1#header
{
    margin: 30px 0 0 0;
}

header h1#header a
{
    font-weight: bold;
    font-size: 50px;
    color: #FF9F00;
    text-decoration: none;
}

header h1#header a:hover
{
    color: #fff;
}

header em
{
    float: right;
    color: #fff;
    width: 150px;
    font-size: 11px;
    margin: 48px 0 0 20px
}

section.column-left
{
    float: left;
    width: 50%;
    margin: 0;
}

section.column-right
{
    float: left;
    width: 50%;
    margin: 0;
}

* html section.column-left /* IE6 Column FIX*/
{
    width: 49.575%;
}

section.column-full
{
    float: left;
    width: 100%;
    margin: 0;
}

section.meta
{
    font-size: 11px;
    margin-bottom: 10px;
}

section.meta a
{
    color: #FF9F00
}

section.meta a.post-edit-link
{
    font-weight: bold;
}

footer
{
   color: #fff;
   clear: both;
   font-size: 13px;
   padding: 0 0 20px 0;
   width: 100%;
}

footer span
{
   float: right
}

footer a
{
   color: #FF9F00
}

section.footerbox
{
   float: left;
   width: 23%;
   background: #fff;
   margin: 0 1.3% 1% 10px;
   padding: 15px 0 10px 0;
   -moz-border-radius: 15px;
   border-radius: 15px;
}

.footerbox ul li ul li:first-letter
{
   text-transform:uppercase;
}

section#copy
{
   border-top: 1px solid #DFDFDF;
   float: none;
   margin: 0.5%;
   padding: 0.5%;
   width: 100%;
   clear: both;
}

.footerbox #searchform
{
   margin: 0 6px 10px 6px;
}

.footerbox #searchform label
{
   display: none
}

section.footerbox a
{
    color: #495865;
}

section.footerbox ul ,
section.footerbox div.tagcloud
{
   margin: 0 10px 10px 10px;
}

section.footerbox ul li
{
   font-size: 13px;
   list-style: none
}

section.footerbox ul ul
{
   list-style: circle
}

section.footerbox h4
{
   font-size: 17px;
   color: #495865;
   border-bottom: 1px solid #DFDFDF;
   margin: 0 5px
}

/*content*/
article
{
    font-size: 12px;
    margin: 10px;
    padding: 15px;
    background: #fff;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

article.sticky
{
    background: #F8F8F8;
    border: 8px solid #888888;
    -moz-border-radius: 15px ;
    border-radius: 15px;
}

article:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}

* html .page article
{
    display: inline-block;
    width: 100%;
}

* + html .page article
{
    display: inline-block;
    width: 100%;
}

article p
{
    padding: 0 0 5px 0;
}

article#nopost p
{
    padding:0;
}

article a
{
    color: #ff9f00
}

section.meta
{
    font-size: 11px;
    clear: both;
}

section.meta ul
{
    list-style: none;
    margin: 0 0 15px 0;
}

section.meta ul li
{
    margin-right: 15px
}

section.meta a
{
    color: #FF9F00
}

h1, h2, h3, h4, h5, h6
{
    margin: 15px 0 10px 0;
    clear: both;
}

article h3.storytitle
{
    font-size: 25px;
    line-height: 28px;
    border-bottom: 1px solid #dfdfdf;
    margin: 0 0 5px 0;
    float: none;
}

article h3.storytitle a
{
    font-size: 25px;
    color: #FF9F00;
    text-decoration: none;
}

article h3.storytitle a:hover
{
    color: #2F2F2F;
}

article pre, div.comment-body pre,
article code, div.comment-body code
{
    color: #FF9F00
}

article pre:hover, div.comment-body pre:hover,
article code:hover, div.comment-body code:hover
{
    background: #afafaf;
    color: #fff
}

article ul,
article ol,
article dl,
div.comment-body ul,
div.comment-body ol,
div.comment-body dl
{
    margin: 10px 25px;
    clear: both;
}

article ul a,
article ol a,
article dl a,
div.comment-body ul a,
div.comment-body ol a,
div.comment-body dl a
{
    color: #464646
}

article dl dt
{
    font-weight: bold;
}

article dl dd
{
    margin: 0 0 10px 10px;
}

table
{
    border: 1px solid #D3D3D3;
    background: #FAFAFA;
}

table tr td
{
    border: 1px solid #DDDDDD;
    background: #fff;
    padding: 5px;
    font-size: 11px;
}

table tr td a
{
    text-decoration: none;
}

article object
{
    display: block;
    clear: both;
    float: left
}

article blockquote
{
    border-top: 1px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
    padding: 1em 1em 0.9em 1em;
    margin: 1.5em;
}

/*pagenav*/
section#pagenav
{
    clear: both;
    margin: 10px;
    color: #FF9F00;
}

section#pagenav a
{
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    color: #FF9F00;
}

section#pagenav a:hover
{
    color: #FAFAFA;
}

/*gallery*/
.gallery {
   margin: 0 auto 18px;
}
.gallery .gallery-item {
    float: left;
    margin-top: 0;
    text-align: center;
    width: 33%;
}
.gallery-columns-2 .gallery-item {
    width: 50%;
}
.gallery-columns-4 .gallery-item {
    width: 25%;
}

.gallery-columns-2 .attachment-medium {
    max-width: 92%;
    height: auto;
}
.gallery-columns-4 .attachment-thumbnail {
    max-width: 84%;
    height: auto;
}
.gallery .gallery-caption {
    color: #888;
    font-size: 12px;
    margin: 0 0 12px;
}
.gallery dl {
    margin: 0 0 10px 0;
    clear: none;
}

#content .attachment img {
    display: block;
    margin: 0 auto;
}

/*images*/
img{
    max-width: 100%;
    width: auto;
    height: auto;
    padding: 2px;
    margin: 2px;
    border:0;
}

.alignleft,
img.alignleft {
	float: left;
	margin-right: 24px;
	margin-bottom: 12px;
	margin-top: 12px;
	}

.alignright,
img.alignright {
	float: right;
	margin-left: 24px;
	margin-bottom: 12px;
	margin-top: 12px;
	}

.aligncenter,
img.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 12px;
	margin-top: 12px;
	}

.alignnone {

	display: block;
	margin-bottom: 12px;
	margin-right: 24px;
	}

.wp-caption
{
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 8px;
    text-align: center;
}

.wp-caption.alignnone
{
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft
{
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright
{
    margin: 5px 0 20px 20px;
}

.wp-caption img
{
    border: 0 none;
    height: auto;
    margin:0;
    padding:0;
    width: auto;
}

.wp-caption p.wp-caption-text
{
    font-size:11px;
    line-height:17px;
    margin:0;
    padding:0 4px 5px;
}

img.wp-smiley
{
    border: 0;
    margin: 0;
    padding: 0;
    background: none;
}

/* comments*/
h3#comments-title
{
    font-size: 18px;
    margin: 10px;
    float: none;
    color: #fff;
}

h3#reply-title
{
    margin: 0;
}

div.comment-author img.photo
{
   float: left;
   margin: 2px 10px 10px 2px;
}

div#comments
{
    font-size: 12px;
    margin: 0 10px;
}

div#comments a
{
    color: #4E4E4E
}

ol.commentlist li.comment, ol.commentlist li.pingback, ol.commentlist li.trackback
{
    -moz-border-radius: 15px;
    border-radius: 15px;
    padding: 15px;
    list-style: none;
}

ol.commentlist li.comment div ol, ol.commentlist li.comment div ul
{
    margin-left: 20px;
}

div.reply
{
    font-weight: bold;
}

.even
{
	background: #FFFFFF;
	border: 1px solid #DDDDDD;
    margin-bottom: 10px;
    padding: 10px 10px  10px 10px;
}

.odd
{
	background: #DDDDDD;
	border: 1px solid #DDDDDD;
    margin-bottom: 10px;
    padding: 10px 10px  10px 10px;
}

#respond
{
    -moz-border-radius: 15px;
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 10px;
    background: #fff;
}

#respond input
{
    display: block;
    margin-bottom: 10px;
}

div#comments div.navigation
{
    margin: 15px 0;
    color: #fff;
    font-weight: bold;
}

div#comments div.navigation a
{
    color: #fff;
}

div#comments p.nopassword
{
    font-weight: bold;
    margin: 0 0 5px 0;
    color: #fff;
}

p.form-allowed-tags
{
    color: #2F2F2F;
    font-weight: bold;
    margin: 10px 0;
}
.commentlink
{
    clear: both;
}

.commentlink span
{
    display: block;
    margin: 10px 0;
}

.bypostauthor
{
    background: #ff9f00
}

p.form-allowed-tags
{
    margin: 10px 0;
    font-weight: bold
}

p.form-allowed-tags code
{
    margin: 10px 0;
    font-weight: normal
}

/* ping backs */
.pingback, .trackback {
	border: 1px solid #ccc;
	padding: 10px 10px 0px 10px;
	margin: 0 0 20px 0;
	position: relative;
	min-height: 80px;
	background: #F0F0F0;
	font-size: 12px;
	color: #666;
}

.pingback a, .trackback a {
	color: #2F2F2F;
	text-decoration: none;
}

.pingback a:hover, .trackback a:hover {
	color: #FF9F00;
}

div.reply {
    padding-bottom: 10px;
    clear: both;
}

a.comment-reply-link {
    font-size: 12px;
    font-weight: bold;
}

/* comment form */
#respond {
    clear: both;
}

#commentform p {
    clear: both;
}

#commentform p input, #commentform p textarea {
    display: block;
    margin-bottom: 5px;
}

p.form-allowed-tags {
    font-weight: bold;
    clear: both;
    padding-top: 20px;

}

form#commentform label, form#commentform span.requiyellow
{
   font-weight: bold;
   font-size: 12px;
}


/*** ESSENTIAL STYLES ***/
nav
{
    display: block;
    float: left;
    margin: 0 auto 20px auto;
    width: 100%;
    font-size: 12px;
    font-weight: bold;
    border-bottom: 1px solid #fff
}

div.menu ul,
ul.menu
{
    list-style: none;
}

div.menu ul ul,
ul.menu ul
{
	position: absolute;
	top: -999em;
	width: 130px;
}

div.menu ul ul li,
ul.menu ul li
{
	width:	100%;
}

div.menu ul li:hover,
ul.menu li:hover
{
	visibility:	inherit; /* fixes IE7 'sticky bug' */
}

div.menu ul li,
ul.menu li
{
	float: left;
    margin-right: 3px;
	position: relative;
	list-style: none;
}

.menu a
{
	display: block;
	position: relative;
}

div.menu ul li:hover ul,
div.menu ul li.sfHover ul,
ul.menu li:hover ul,
ul.menu li.sfHover ul
{
	left: 0;
	top: 33px; /* match top ul list item height */
	z-index: 99;
}

div.menu ul li:hover li ul,
div.menu ul li.sfHover li ul,
ul.menu li:hover li ul,
ul.menu li.sfHover li ul
{
	top: -999em;
}

div.menu ul li li:hover ul,
div.menu ul li li.sfHover ul,
ul.menu li li:hover ul,
ul.menu li li.sfHover ul
{
	left: 130px; /* match ul width */
	top: 0;
}

div.menu ul li li:hover li ul,
div.menu ul li li.sfHover li ul,
ul.menu li li:hover li ul,
ul.menu li li.sfHover li ul {
	top: -999em;
}

div.menu ul li li li:hover ul,
div.menu ul li li li.sfHover ul,
ul.menu li li li:hover ul,
ul.menu li li li.sfHover ul {
	left: 130px; /* match ul width */
	top: 0;
}

/*** DEMO SKIN ***/
nav ul
{
    width: 100%;
    float: left;
}

nav ul li
{
    float: left;
}

nav ul li a
{
    color: #fff;
    background: transparent;
    padding: 9px 12px;
    text-decoration: none;
	-moz-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
}

nav ul li a:hover,
nav ul li.sfHover a,
nav ul li:hover a
{
    color: #464646;
    background: #fff; 
}

nav ul ul li a
{
    color: #464646;
    background: #fff;
	-moz-border-radius: 0;
    border-radius: 0;
}

nav ul ul li a:hover
{
    color: #464646;
    background: #EBEBEB;  
}

nav ul li.current_page_item > a,
nav ul li.current-menu-ancestor > a,
nav ul li.current-menu-item > a,
nav ul li.current_page_ancestor > a
{
	color: #fff;
    background: #ff9f00;  
}

/*** arrows **/
div.menu ul a.sf-with-ul,
ul.menu a.sf-with-ul {
	padding-right: 	2.25em;
	min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
	position:		absolute;
	display:		block;
	right:			.75em;
	top:			1.05em; /* IE6 only */
	width:			9px;
	height:			13px;
	text-indent: 	-999em;
	overflow:		hidden;
	background:		url('images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
	top:			.8em;
	background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
	background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
div.menu ul ul .sf-sub-indicator,
ul.menu ul .sf-sub-indicator
{ background-position:  -10px 0; }

div.menu ul ul a > .sf-sub-indicator ,
ul.menu ul a > .sf-sub-indicator
{ background-position:  -10px 0; }


/* apply hovers to modern browsers */
div.menu ul ul a:focus > .sf-sub-indicator,
div.menu ul ul a:hover > .sf-sub-indicator,
div.menu ul ul a:active > .sf-sub-indicator,
div.menu ul ul li:hover > a > .sf-sub-indicator,
div.menu ul ul li.sfHover > a > .sf-sub-indicator,

ul.menu ul a:focus > .sf-sub-indicator,
ul.menu ul a:hover > .sf-sub-indicator,
ul.menu ul a:active > .sf-sub-indicator,
ul.menu ul li:hover > a > .sf-sub-indicator,
ul.menu ul li.sfHover > a > .sf-sub-indicator
{
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
	background:	url('images/shadow.png') no-repeat bottom right;
	padding: 0 8px 9px 0;
	-moz-border-radius-bottomleft: 17px;
	-moz-border-radius-topright: 17px;
	-webkit-border-top-right-radius: 17px;
	-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
	background: transparent;
}



@media screen and (max-width: 840px) {
body
{
    width: 95%;
}

img, .wp-caption {
    max-width: 80%;
}

.wp-caption img {
    max-width: 100%;
}

section.footerbox
{
   float: none;
   width: 97.3%;
   margin: 10px auto;
}
section#copy
{
   width: 98%;
}
}

@media screen and (max-width: 480px) {
header
{
    height:97px;
}

header h1#header
{
    margin: 10px;
}

header h1#header a
{
    font-size: 33px;
}

header em
{
    margin: 0 0 20px 20px;
}

nav
{
   width: 96%;
   clear: both;
   margin: 0 2%;
}

article,
article.sticky
{
	padding: 15px;
}

img, .wp-caption {
    max-width: 50%;
}

nav ul li a,
article,
article.sticky,
div#respond,
ol.commentlist li.comment,
ol.commentlist li.pingback,
ol.commentlist li.trackback,
section.footerbox
{
    -moz-border-radius: 0;
    border-radius: 0;
}

section.column-left,
section.column-right
{
    width: 99%;
    margin: 0.5%;
}

article h3.storytitle
{
    font-size: 19px;
    line-height: 22px;
}

article h3.storytitle a
{
    font-size: 19px;
}

#respond input, #respond textarea
{
    width: 100%;
}


section.footerbox
{
   width: 94.4%;
}


}

@media screen and (max-width: 320px) {

body
{
    margin: 5px auto;
}

header h1#header a
{
    font-size: 25px;
}
section.footerbox
{
   width: 91.9%;
}
}

@media screen and (max-width: 240px) {
body
{
    margin: 0 auto;
}

header h1#header a
{
    font-size: 18px;
}

section.footerbox
{
   width: 89.9%;
}

.footerbox #searchform input
{
   width: 100%
}
}

@media screen and (max-width: 220px) {
header
{
    margin-bottom: 30px
}

section.footerbox
{
   width: 88.8%;
}
}

@media screen and (max-width: 176px) {
section.footerbox
{
   width: 86.3%;
}
}

.footerbox ul li ul li {
   text-transform:lowercase;
}