/* =============================================================================
   JasonWeaver.name 2012
   Copyright Jason Weaver
   ========================================================================== */

/* Reset */
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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    font-family: 'Open Sans', sans-serif;
    
}

/* Globals */
article, aside, details, 
figcaption, figure, footer, 
header, hgroup, nav, 
section { display: block; }
body {
    margin: 5px 3px 10px 3px;
    background: #fff;     
    font-family: 'Open Sans', sans-serif;
    }

a {
    text-decoration: none; color: #336633;
    }

a:hover {
    text-decoration: underline; color: #660033;
    }

clearfix:after { /* clearfix */
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

p { 
    font-family: 'Open Sans', sans-serif;
    color: #336633;
    font-size: 0.88em;
    margin-bottom: 10px;
}

/* Layout */
.container { 
	width: 100%;
	background: #FFFFF0;
	overflow: hidden;
	position: relative;
	      
-moz-box-shadow: 1px 1px 3px #666;
-webkit-box-shadow: 1px 1px 3px #666;
box-shadow: 1px 1px 3px #666;
filter:progid:DXImageTransform.Microsoft.Shadow(strength=3,color=#666666,direction=135);
	 
}

[role="main"] h1,
[role="complementary"] h1 {
	color: #cc6600;
    font-size: 1.2em;
    font-weight: 700;
	margin: 0.2em 0 0.3em;
  font-family: 'Open Sans', sans-serif;
	line-height: 1;	
}

[role="main"]:before {
	content: " ";
	position: absolute;
	z-index: -1;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
}

[role="complementary"],
[role="main"],
.small-screen [role="navigation"],
.small-screen #header {
	-webkit-transition: .25s all ease-in;
	-moz-transition: .25s all ease-in;
	-o-transition: .25s all ease-in;		
	-ms-transition: .25s all ease-in;
	transition: .25s all ease-in;
}
[role="complementary"],
[role="main"],
[role="navigation"],
#header {		
	width: 90%;
	padding: 4%;
	display: block;	
	position: relative;        	
}

[role="main"] {		
	width: 90.2%; /* webkit browsers act weird with % */
}

#header {
	display: block;
	padding: 2.5em 7% 0.5em 3%;
	overflow: hidden;
}

.js [role="complementary"] {	
	margin-left: -100%;
	width: 70%;	
	float: left;
	padding-bottom: 25em;
	z-index: 2;	
}

.js [role="main"] {
	margin-left: 0;
	background: #FFFFF0;
	float: right;
	z-index: 1;
	position: relative;
}

.js [role="navigation"] {	
	margin: -200px 0 0 0;
	clear: both;
	z-index: 2;
	padding: 1em 5%;			
}

.active-nav [role="navigation"] {	
	margin-top: 0;	
}
	
.active-sidebar [role="complementary"] {	 
	margin-left: 0;      	 
}

.active-sidebar [role="main"]{
	margin-right: -80%;
}

/* Header */
#site-title { 	
	position: relative;
	float: left;
	width: 31%;
	margin-left: 3%;
}
#site-title a { 	
	font-size: 0;
	display: block;
	width: 195px;
	height: 59px;
	color: transparent;
	background: transparent url(../images/Schmuckmacher-Goldschmied.gif) no-repeat left top; 
}
/* Off Canvas/footer Anchor Navigation */
.off-canvas-nav-links ul {
	list-style: none;
}

.menu-button,
.sidebar-button {
	padding: .5em;
	font-size: 0.88em;
	display: block;
	position: absolute;
	background: #CCCC66;
	width: 25%;
	text-align: center;	
	color: #fff;
}

.menu-button {
	top: 0;
	right: 3%;
}

.sidebar-button {
	top: 50px;
	right: 3%;
}	
/* Site Menu */
[role="navigation"] li {
	list-style: none;
	font-size: 1.19em;
    font-weight: 700;
	margin-bottom: .5em;
	width: 100%;	
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box;		
}

[role="navigation"] li a {
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box;		
	display: block;
	padding: .7em 0.2em;
	border-bottom: 1px dotted #009999;
	border-left: solid 5px #cccc66; 	
}

.site-footer {
	overflow: hidden;
	padding: 2% 5% 2% 5%;
	width: 90%;
	clear: both;
	margin: 0 auto;
	border-top: solid 1px #009999;

	background: -moz-linear-gradient(top, rgba(235, 236, 234, 1) 0%, rgba(255, 255, 255, 1) 80%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(235, 236, 234, 1)), color-stop(80%,rgba(255, 255, 255, 1)));
	background: -webkit-linear-gradient(top, rgba(235, 236, 234, 1) 0%,rgba(255, 255, 255, 1) 80%);
	background: linear-gradient(top, rgba(235, 236, 234, 1) 0%,rgba(255, 255, 255, 1) 80%);	
}
.site-footer ul {
	list-style: none;
}
.site-footer a {
  	color: #009999;
}
.site-footer a:hover {
  	color: #660033;
} 
     
.site-footer li a {
	margin: .1em .5em .5em 0;
	
}
.site-footer h5 {
	font-size: 0.88em;
	word-spacing: 13px;
    color: #009999;
    margin-bottom: 0.5em;
}

.site-footer p {
	font-size: 0.75em;
	word-spacing: 10px;
	color: #009999;   	
}

span.footer {     
	word-spacing: 0px;
		}


@media all and (min-width: 600px) {
	#site-title { 	
		font-size: 56px;
		margin-left: 0;	
       	
	}
.container {
		max-width: 1000px;
		margin: 0 auto;
		    
	}
.js .off-canvas-nav-links, .sidebar-button {
		display: none;
	} 				
.js [role="complementary"] {
		width: 28%;	
		margin-left: 0;
		float: left;
		padding: 3%; 
	}
.js [role="main"] {
		width: 63%;
		padding: 3% 3% 3% 0%; 
       	        		
	}
     
[role="main"]:before { 		 			
	}
    		
.js [role="navigation"] {
		width: 63%;	 
		margin: .75em 0 0 3%;	
		padding: 0;
		margin-right: 0;
		clear: both;
		position: absolute;
		top: 1em;		
		left: 31%;
	}
     
.js [role="navigation"] li {
		float: left;
		margin: .5em 0;
		width: 33.3%;				
	}						
}