/*fonts
proximanova, sans-serif;
istokweb, serif;
lucida_console;
*/

/* Table of Contents
1^ Site-wide General Styles
2^ Tablet/Phone Responsive Grid Styles
3^ Header/Navigation Styles
4^ Footer Styles
5^ Sidebar Styles
6^ General Content Styles (Text/Images)
7^ Home Page Styles
8^ Form Styles
9^ Admin Styles
10^ Medium Desktop Styles
11^ Medium Desktop Responsive Grid/Column Definitions
12^ Large Desktop Styles
*/

@font-face {
    font-family: 'proximanova';
    src: url('../fonts/proximanova.eot');
    src: url('../fonts/proximanova.eot?#iefix') format('embedded-opentype'),
    url('../fonts/proximanova.woff') format('woff'),
    url('../fonts/proximanova.ttf') format('truetype'),
    url('../fonts/proximanova.svg#proximanova') format('svg');
}

@font-face {
    font-family: 'istokweb';
    src: url('../fonts/istokweb.eot');
    src: url('../fonts/istokweb.eot?#iefix') format('embedded-opentype'),
    url('../fonts/istokweb.woff') format('woff'),
    url('../fonts/istokweb.ttf') format('truetype'),
    url('../fonts/istokweb.svg#istokweb') format('svg');
}
@font-face {
    font-family: 'lucida_console';
    src: url('../fonts/lucon.eot');
    src: url('../fonts/lucon.eot?#iefix') format('embedded-opentype'),
    url('../fonts/lucon.woff') format('woff'),
    url('../fonts/lucon.ttf') format('truetype'),
    url('../fonts/lucon.svg#lucida_consoleregular') format('svg');
}

/* Small Phone Styles */
@media all and (max-width: 445px) {
    #feature-item-1,
    #feature-item-2,
	#project-feature-1,
	#project-feature-2	{
        float: none;
        width: 98.947% !important;
    }
    #feature-item-1,
	#project-feature-1{
        margin-bottom:20px !important;
    }

    #copyright {
        float:left;
        margin-right:5%;
    }
    #footer_nav a {
        margin-left:2%;
    }
}

/* Tablet/Large Phone Styles */

/* 1^ Site-wide General Styles */

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, menu, table, section, summary {
    display: block;
}
[hidden] {
    display: none;
}
* {margin: 0;
    padding: 0;
    border: none;
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
html { height:100%;
}
a.button {
	display:inline-block;
}
body {text-align:center;
    width:100%;
    height:100%;
    background-color:#e5e5e5;
    font-size:100%;
    font-family:'istokweb', sans-serif;
    line-height:1.5em;
}
.page-container {
    margin: 0px auto -80px auto;
    text-align:left;
    min-height: 100%;
    position: relative;
    background: #fff;
    overflow:hidden;
}
a {
    text-decoration:none;
    color:#006;
}
a:hover,
a:active { color:#f00;
}
ul {
    list-style:none;
}
article ul {
    list-style: url(../images/bullet.png);
    list-style-position:inside;
}

article {
	margin-bottom:20px;
}
article p {
	margin-bottom: 10px;
}

h1,
h2,
h3,
h4,
h5,
h6,
th {
    font-family:'proximanova', sans-serif;
    font-weight:normal;
}

.main-headline {
    line-height:1.25em;
    border-bottom:1px solid #000;
    margin-bottom:10px;
}
pre {
    overflow: auto;
    line-height: 1.25em;
	margin-bottom: 20px;
}

img {
    max-width: 100%;
    width: auto;
    height: auto;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}
.left {
    float:left;
}
.right {
    float:right;
}
.align-left {
    float:left;
    margin-right:2.1%; /* 20px/950px */
}
.align-right {
    float:right;
    margin-left:2.1%; /* 20px/950px */
}

.selected {
    color:#f00;
}
.sm-dev { /* class assigned to elements not to display on small devices */
	display:none;
}

.none {
	display:none;
}

/* 2^ Mobile Responsive Grid/Column Definitions */
.grid-container {
    margin: 0px auto;
    padding: 0 0 0 1.05%; /* 10px/950px */
    background: #fff;
	width:auto;
}
.gridrow {
    clear: both;
}

/* Looks for a child element that starts with "col" 
 * be careful of a conflict with this when naming custom elements */
.gridrow  :last-child[class^="col"],
.last { 
	margin: 0 0 20px 0 !important;
}

.col1, 
.col2, 
.col3, 
.col4, 
.col5, 
.col6, 
.col7, 
.col8, 
.col9, 
.col10, 
.col11{
	float: none;
	width: 98.947%; /* 940px/950px */
	margin: 0 2.1% 0 0; /* 20px/950px */
}
.col12 { width: 98.947%; margin: 0; } /* 940px/950px */
.col-full {width:100%; margin:0; clear:both;} /* Spans entire page width */

/* 3^ Header/Navigation Styles */

header {
    position: relative;
	min-height:60px;
}
header a { color:#000;
}
#banner-logo {
    float:left;
	margin: 0;
}

header p {
    font-style:italic;
    line-height:2em;
}

nav#topnav {
	display:none;
	width: 100%;
	float:left;
	margin-right:1.05%; /* 10px/950px */
}


#topnav a { color:#006;
    transition: color 30ms ease-in 10ms;
}
#topnav a:hover {
    color:#f00;
}
#topnav ul li {
    list-style-type:none;
	width: 100%;
    float:none;
    display:block;
    position: relative;
	border-bottom:1px solid #d5d5d5;
}
nav#topnav ul li a	{
	line-height:3em;
	padding-left:2%;
	display:block;
	transition: background-color 130ms ease-in 50ms;
}
nav#topnav a:hover {
	background-color:#eee;
}
nav#topnav ul li:last-child {
	border-bottom:none;
}
nav#topnav li.has-submenu ul {
	margin:0;
}
nav#topnav li.has-submenu > a:after {
	content: '+';
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	font-size: 1.5em;
	padding: 0px 2.5%;
}
nav#topnav li.has-submenu  > a.active:after {
	content: "-";
}
#topnav ul.sub-menu {
    display:none;
}
#topnav ul.sub-menu li {
    float:none;
	padding-left:2.1%;
}
div#menu_bar {
    border-bottom:1px solid #d5d5d5;
	background:#fff;
	position:fixed;
	top:0;
	z-index:1000;
	margin-bottom:20px;
}

.menu-title:before {
    content: "Menu";
    float:right;
    margin-right: 45px;
}
.menu-title {
    display:block !important;
    line-height:3em;
    position:relative;
    width: 98.947%; /* 940px/950px */
    float: right;
    cursor:pointer;
    overflow: hidden;
	clear:both;
    background: url("../images/hamburger.png") no-repeat 98.947% 50%; /* fallback for older browsers*/
    background: linear-gradient(transparent, transparent),url("../images/hamburger.svg") no-repeat 98.947% 50%;
}


/* 4^ Footer Styles */

footer {
    border-top:1px solid #d5d5d5;
    margin: 0px auto 0px auto;
    position:relative;
    text-align:left;
    overflow:hidden;
    height:79px;
    clear:both;
    background-color:#fff;
}

#footer-group {
    display:block;
    margin:20px;
}
#footerpush { height:80px;
    clear:both;
}
#copyright {
    float:left;
    margin-right:16%;
}
#footer_nav a {
    margin-left:10%;
    font-size: .875em;
}
/* 5^ Sidebar Styles */

.infobar h2,
.infobar p:not(:last-of-type) {
    margin-bottom:10px;
}

aside.infobar {
    margin-bottom:20px;
}
aside.infobar nav {
    margin-bottom:10px;
}
aside.infobar nav a {
    display:block;
    clear:both;
    padding:12px 2.1%;
    border-bottom:1px solid #d5d5d5;
    transition: background-color 130ms ease-in 50ms;
}
aside.infobar nav a:hover {
    background-color:#eee;
}

/* 6^ General Content Styles */

.img-med {
    max-width:293px;
}
.img-sm {
    max-width:215px;
}
.img-xs {
    max-width:136px;
}

/* 7^ Home Page Styles */


.feature {
    position:relative;
    z-index:10;
    margin:10px 0px;
}
.feature:hover {
    color:#006;
}
.feature img {
    z-index:20;
    transition: opacity 500ms ease-out 10ms;
    -moz-transition: opacity 500ms ease-out 10ms;
    -webkit-transition: opacity 500ms ease-out 10ms;
    -ms-transition: opacity 500ms ease-out 10ms;
}
.feature img:hover{
    opacity:0;
}

.lbl-feature {
    position:absolute;
    top:40%;
    z-index:-10;
    height:100%;
    width:100%;
    text-align:center;
}
.lbl-feature h4 {
    font-family:'lucida_console';
}
.lbl-feature p {
    max-width:100%;
}

/* 8^ Form Styles */


input,
select,
textarea {
    border: 1px solid #ddd;
}
textarea {
    width:100%;
}
a.button,
button,
input[type="submit"],
[type="file"] {
    margin:20px 2.1% 0px 0px;
    padding:1% 4%;
    cursor:pointer;
    background-color:#bbb;
    color:#006;
    font-size: 1em;
}
a.button:hover,
button:hover,
input[type="submit"]:hover {
    color:#f00;
    background-color:#ddd;
}
.textbox { width:100%;
    margin-bottom:5px;
    display:block;
}
input.textbox {
    padding: 1% 0px;
}

.required:after {
    content: " *";
    color: #f00;
}
/* 9^ Admin Styles */
table.tbl-admin {
    border: 1px solid #bbb;
    border-collapse:collapse;
}

.tbl-admin th:first-child,
.tbl-admin td:first-child {
    padding: 0px 10px;
    width:1%;
    white-space: nowrap;
}

.tbl-admin .button {
    font-size: .75em;
}
.tbl-admin tr:nth-of-type(odd) {
    background-color:#ddd;
}

.tbl-admin img {
    padding: 1%;
}

.form-admin label,
.form-admin input:not([type="submit"]),
.form-admin select {
    width:100%;
    margin-bottom:5px;
    display:block;
    padding: 1% 0px;
}

.form-admin input[type="checkbox"] {
    width: 2%;
}

fieldset.radio-group input[type="radio"] {
    display:inline-block;
    width:10%;
}

.alert,
.form-errors {
    border: 5px solid #e5e5e5;
    padding: 1%;
}

.form-errors {
    color: #f00;
    list-style: disc inside;
}

.alert-success {
    background-color: #BAEEBA;
}

.alert-danger {
    background-color: #ff9895;
}

#feature-item-1,
#feature-item-2,
#project-feature-1,
#project-feature-2	{
	width: 48.421%;
	float:left;
}

@media all and (max-width: 768px) {
	
	div#feature-item-2,
	div#project-feature-2{
		margin: 0;
	}
}   

/*  10^ Medium Desktop Styles */

@media all and (min-width:768px){
	.page-container,
	footer{
		max-width: 960px;
	}
	div#menu_bar {
		position:relative;
	}
	nav#topnav {
		display:block;
		width:auto;
		float:right;
	}
	nav#topnav ul li a {
		line-height:1.5em;
	}
	nav#topnav a:hover {
		background-color:#fff;
	}
	#banner-logo {
		margin: 20px 0px 0px 1.05%; /* 10px/950px */
	}
	nav#topnav ul li {
		width:auto;
		float:left;
		border:none;
		margin-left:25px;
	}
	
	nav#topnav li.has-submenu > a:after {
		display:none;
	}
	
	nav#topnav ul.sub-menu {
		display:none;  
	}
	.menu-title { /* toggle div for responsive nav */
		display:none !important;
	}
	
	.sm-dev { /* class assigned to elements not to display on small devices */
		display:block;
	}
	
	.none {
		display:block;
	}
	#feature-item-1,
	#feature-item-2 {
		width: 31.578%;
	}
	#feature-item-2 {
		margin-right:2.1%;
	}
}

/* 11^ Medium Desktop Responsive Grid/Column Definitions */
@media all and (min-width:768px) and (max-width:1199px){
	
	.col1, 
	.col2, 
	.col3, 
	.col4, 
	.col5, 
	.col6, 
	.col7, 
	.col8, 
	.col9, 
	.col10, 
	.col11, 
	.col12,
	.col-full {
		float: left;
	}
	
	.col12,
	.col-full {
		margin: 0;
	}
	
	.col1 { width: 6.315%; } /* 60px/950px */
	.col2 { width: 14.736%; } /* 140px/950px */
	.col3 { width: 23.157%; } /* 220px/950px */
	.col4 { width: 31.578%; } /* 300px/950px */
	.col5 { width: 40%; } /* 380px/950px */
	.col6 { width: 48.421%; } /* 460px/950px */
	.col7 { width: 56.842%; } /* 540px/950px */
	.col8 { width: 65.263%; } /* 620px/950px */
	.col9 { width: 73.684%; } /* 700px/950px */
	.col10 { width: 82.105%; } /* 780px/950px */
	.col11 { width: 90.526%; } /* 860px/950px */	
	
}


/* 12^ Large Desktop Styles */
@media all and (min-width:1200px){
	.page-container,
	footer{
		max-width: 1200px;
	}
	
	/* increase margins and padding */
	.align-left {
		margin-right:2.5%; /* 30px/1200px */
	}
	.align-right {
		margin-left:2.5%; /* 30px/1200px */
	}

	div#menu_bar,
	article,
	pre,
	aside.infobar {
		margin-bottom:30px;
	}
	
	a.button,
	button,
	input[type="submit"],
	[type="file"] {
		margin:30px 2.5% 0px 0px;
	}
	.main-headline,
	.infobar h2,
	.infobar p:not(:last-of-type),
	aside.infobar nav {
		margin-bottom: 15px;
	}
	aside.infobar nav a {
		padding:15px 2.5%;
	}
	.feature {
		margin:15px 0px;
	}
	.tbl-admin th:first-child,
	.tbl-admin td:first-child {
		padding: 0px 15px;
	}
	.tbl-admin img,
	.alert,
	.form-errors {
		padding: 1.25%;
	}
	
	.form-admin label,
	.form-admin input:not([type="submit"]),
	.form-admin select {
		padding: 1.25% 0px;
	}
	/* Responsive Grid/Column Definitions */
	
	.grid-container {
		padding: 0 0 0 1.25%; /* 15px/1200px */
	}
	
	.gridrow  :last-child[class^="col"],
	.last {
		margin: 0 0 30px 0 !important;
	}
	
	.col1, 
	.col2, 
	.col3, 
	.col4, 
	.col5, 
	.col6, 
	.col7, 
	.col8, 
	.col9, 
	.col10, 
	.col11, 
	.col12,
	.col-full {
		float: left;
		margin: 0 2.5% 0 0; /* 30px/1200px */
	}
	
	.col1 { width: 5.907%; } /* 70px/1200px */
	.col2 { width: 14.345%; } /* 170px/1200px */
	.col3 { width: 22.784%; } /* 270px/1200px */
	.col4 { width: 31.22%; } /* 370px/1200px */
	.col5 { width: 39.662%; } /* 470px/1200px */
	.col6 { width: 48.101%; } /* 570px/1200px */
	.col7 { width: 56.54%; } /* 670px/1200px */
	.col8 { width: 64.978%; } /* 770px/1200px */
	.col9 { width: 73.417%; } /* 870px/1200px */
	.col10 { width: 81.856%; } /* 970px/1200px */
	.col11 { width: 90.295%; } /* 1070px/1200px */
	.col12 { width: 98.734%; margin: 0; } /* 1170px/1200px */
	
	#feature-item-1,
	#feature-item-2	{
		width: 31.22%;
	}
	#feature-item-1,
	#feature-item-2,
	#project-feature-1,
	#project-feature-2{
		float:left;
		margin: 0 2.5% 0 0;
	}
}