/* main structure */
html{background:#eee;}
#header,
#navigation,
#footer{
	background:#fff;
	padding:0 10px;
}
#header > .inner,
#navigation > .inner,
#footer > .inner,
#maincontainer > .inner{
	max-width:960px;
	margin:0 auto;
}
#header,
#footer,
#maincontainer{
	min-width:320px;
}

/* header */
#header > .inner{
	padding:20px 0;
	min-height:100px;
}
#header .maintitle,
#header .pagetitle{
	display:block;
	font-weight:bold;
	vertical-align: middle;
}
#header .maintitle {
	font-size: 24px;
	text-decoration:none;
	margin:0 auto;
	background:url('') no-repeat scroll 50% / auto 100% transparent;
	max-height:100%;
}
#header .pagetitle {
	font-size:18px;
	text-align:center;
	margin:20px 0 0 0;
}
@media screen and (max-width:600px){
	#header.small {
	    position:  fixed;
	    top: 0;
	    left:  0;
	    width:  100%;
	    height: 48px;
	    padding-left: 50px;
	}
	#header.small > .inner {
	    padding: 10px 0;
	    height: 100%;
	}
	#header.small .maintitle {
	    margin: 0;
	    display:  inline-block;
	    vertical-align: middle;
	}
	#header.small .pagetitle {
	    margin: 0;
	    display:  inline-block;
	    vertical-align: middle;
	    height:  100%;
	    float:  right;
	    padding-top: 4px;
	}
}
@media screen and (min-width:600px){
	#header .maintitle{
		display:inline-block;
		vertical-align:middle;
	}
	#header .pagetitle{
		float:right;
		margin:20px 0;
	}
}

/* navigation */
#navigation {
    position:fixed;
    top:0;
    left:0;
    color:#2e2e2e;
    z-index:1;
}
#navigation .navicon {
    font-size: 2em;
    cursor: pointer;
    padding:10px 0;
    color:inherit;
    z-index:1;
    position:relative;
}
#navigation .inner {
    display: block;
    position: absolute;
    top: 48px;
    left:-200px;
    background: #2e2e2e;
    padding: 10px;
    width: 200px;
    margin:0 auto;
    z-index:1;
    transition:left 0.25s ease-out;
}
#navigation .inner li + li {margin-top: 10px;}
#navigation .inner li a{
	color:#fff;
	font-size:16px;
	display:block;
	padding:5px;
	text-decoration:none;
}
#navigation .inner li a{cursor:pointer;}
#navigation .inner > li{
	position:relative;
	vertical-align:top;
	display:block;
}
#navigation .inner > li > a:not([href])::after{
	content:"\f107";
	font-family:'Font Awesome Solid';
	float:right;
	margin-left: 10px;
}
#navigation .inner > li > a:hover{
	background:#fff;
	color:#2e2e2e;
}
#navigation .inner li ul{
	padding:10px;
	display:none;
	background:#fff;
}
#navigation .inner li ul li a:hover{
	background:#2e2e2e;
	color:#fff;
}
#navigation.open{
	background:#2e2e2e;
	color:#fff;
}
#navigation.open .inner{left:0;}
#navigation .inner li.open{background:#fff;}
#navigation .inner li.open ul{
	display:block;
}
#navigation .inner li.open a{color:#2e2e2e;}
#navigation .inner li.open > a:not([href])::after{content:"\f106";}
#navigation > .overlay {
    display: none;
    position: fixed;
    top: 0;
    left:  0;
    width:  100%;
    height:  100%;
    background: rgba(0,0,0,0.2);
    z-index:0;
}

#navigation.open > .overlay {display:  block;}

@media screen and (min-width:600px){
	#navigation{
		position:static;
		padding:0 10px;
		background:#2e2e2e;
	}
	#navigation .navicon{display:none;}
	#navigation .inner{
		position:static;
		width:auto;
		padding:0;
	}
	#navigation .inner > li{display:inline-block;}
	#navigation .inner li + li{margin-top:0;}
	#navigation .inner > li > a{
		height:50px;
		padding:14px 20px 0;
	}
	#navigation .inner li ul {
	    position: absolute;
	    left:  0;
	    top: 50px;
	    width:  200px;
	    padding: 10px;
	}
	#navigation.open > .overlay{display:none;}
}

/* footer */
#footer {
    bottom: 0;
    position: fixed;
    width: 100%;
    border-top:1px solid #2e2e2e;
}

/* general stuff */
.hide{display:none !important;}
.blk{display:block;}
img.blk{
	margin-left:auto;
	margin-right:auto;
	width:100%;
}
.rgt{float:right;}
.lft{float:left;}
.cta {
    background: #2e2e2e;
    color: #fff;
    padding: 5px 15px 6px;
    text-decoration: none;
    display:inline-block;
    cursor:pointer;
}
.cta:hover {background: #777;}
.cta.blk{display:block;}
.cta.disabled {
    background: #777;
    cursor: text;
    opacity: 0.7;
}
.widget.breathe > .inner > *{
	margin-bottom:15px;
	line-height:1.5em;
}
.bordered,
.widget.bordered > .inner{
	border:1px solid #000;
}
.bordered.thick,
.widget.bordered.thick > .inner{
	border-width: 5px;
}
.bordered.red,
.widget.bordered.red > .inner{
	border-color:#ff0000;
}
.widget.bordered{border:none;}

/* buttons */
.btn{
	background: #2e2e2e;
	color:#eee;
	text-align:center;
	text-decoration:none;
	border:1px solid #2e2e2e;
	cursor:pointer;
}
.btn:hover,
.btn:focus,
.btn:active{
	background:#eee;
	color:#2e2e2e;
}
.btn[disabled] {
    background: #ddd;
    color: #aaa;
    border-color: #ccc;
}
.btn.nostyle{
	background:none;
	color:inherit;
	border: none;
}

/* layouts */
.column{
	display:inline-block;
	vertical-align:top;
	width:100%;
}
.column + .column{margin-top:20px;}

@media screen and (min-width:600px){
	.column + .column{
		/*margin-left:1%;*/
		margin-top:0;
	}
	.column + .column.rgt,
	.column.rgt + .column,
	.column + .column.lft,
	.column.lft + .column{
		margin-left:0;
	}
	
	.w5{width:4%;}
	.w10{width:9%;}
	.w15{width:14%;}
	.w20{width:19%;}
	.w25{width:24%;}
	.w30{width:29%;}
	.w33{width:32%;}
	.w35{width:34%;}
	.w40{width:39%;}
	.w45{width:44%;}
	.w50{width:49%;}
	.w55{width:54%;}
	.w60{width:59%;}
	.w65{width:64%;}
	.w66{width:65%;}
	.w70{width:69%;}
	.w75{width:74%;}
	.w80{width:79%;}
	.w85{width:84%;}
	.w90{width:89%;}
	.w95{width:94%;}
	.w100{width:100%;}
}


/* main container */
#maincontainer > .inner {
    padding-bottom: 43px;
    padding-top: 20px;
}
#maincontainer > .inner > .row{
	padding:0 10px;
	max-width:960px;
	margin:0 auto;
}
#maincontainer > .inner > .row.fullwidth {
    padding-left: 0;
    padding-right: 0;
    max-width:none;
}
#maincontainer > .inner > .row.fullwidth .widget.bordered > .inner {
    border-left: none;
    border-right: none;
    padding-left: 0;
    padding-right: 0;
}
#maincontainer > .inner > .row + .row,
#maincontainer > .inner > .row > .column + .column,
#maincontainer > .inner > .row > .column > .widget + .widget{
	margin-top:20px;
}
#maincontainer > .inner > .row > .column{width:100%;}
.widget > .inner{padding:5px;}

@media screen and (min-width:600px){
	.widget > .inner{padding:5px;}
	#maincontainer > .inner > .row > .column + .column{margin-top:0;}
	
	#maincontainer > .inner > .row > .column.w50{width:49%;}
	#maincontainer > .inner > .row > .column.w33{width:32%;}
	#maincontainer > .inner > .row > .column.w66{width:66%;}
	#maincontainer > .inner > .row > .column.w25{width:24%;}
	#maincontainer > .inner > .row > .column.w75{width:74%;}
	#maincontainer > .inner > .row > .column.w100{width:100%;}
	
	
}

/* headers */
.title{
	font-size:20px;
	font-weight:bold;
}