@import url(https://fonts.googleapis.com/css?family=Istok+Web);
* {
    box-sizing: border-box;
    font-family: Istok Web, sans-serif;
}
body {
	background: #000040;
	background: #000428; /* fallback for old browsers */
	background: -webkit-linear-gradient(to top, #000428 , #004e92); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to top, #000428 , #004e92); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	background-size: cover;
	background-attachment: fixed;
    background: #404040;
    font-weight: 100;
}
div#container {
    position: relative;
    width: 1000px;
    margin: auto;
}
div#header {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}
div#header figure.logo {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url('../img/site-header.jpg');
    background-repeat: no-repeat;
    background-position:50% 50%;
    background-size:cover;
}
div#header figure.logo img {
	position: absolute;
	left: 0;
}
div#header figure.logo h1, div#header figure.logo h2 {
	margin-left: 200px;
	color: orange;
	text-shadow: 2px 2px 5px black;
	font-style: italic;
}
div#header figure.logo h1 {
	padding-top: 0px;
    padding-bottom: 0;
    line-height: 1.2em;
}
div#header figure.logo h2 {
	padding-top: 0;
	font-size: 1.2em;
}
div#header figure#header-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

div#content {
    position: relative;
    margin-top: 3em;
}
div.content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 500px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);

    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #d3d3d3 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffffff 0%,#d3d3d3 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffffff 0%,#d3d3d3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d3d3d3',GradientType=0 ); /* IE6-9 */    
    
    /* background-color: #fff; */
    /* background-image:
    linear-gradient(90deg, transparent 69px, #abced4 69px, #abced4 71px, transparent 71px),
    linear-gradient(#eee .1em, transparent .1em);
    background-size: 100% 1.5em; */
    pointer-events: none;
    padding: 2em 5em;
    line-height: 1.64em;
}
div.content#index {
    transform: rotate(0.75deg);
    z-index: 5;
}
div.content#about {
    transform: rotate(0deg);
    z-index: 4;
}
div.content#agenda {
    transform: rotate(0.5deg);
    z-index: 1;
}
div.content#community {
    transform: rotate(-0.5deg);
    z-index: 2;
}
div.content#dcs {
    transform: rotate(-1deg);
    z-index: 3;
}
div.content[data-active="true"] {
    z-index: 6 !important;
}
div.content:before {
    position: absolute;
    top: -1.9em;
    height: 2em;
    line-height: 2em;
    background: white;
    content: attr(data-title);
    padding: 0 10px;
    pointer-events: auto;
}
div.content * {
    pointer-events: auto;
}
div.content#about:before {
    left: 80px;
}
div.content#agenda:before {
    left: 170px;
}
div.content#community:before {
    left: 250px;
}
div.content#dcs:before {
    left: 355px;
}
div.content#index:before {
    left: 10px;
}
.clearfix::after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
}
table {
    position: relative;
    width: 100%;
    border-collapse: collapse;
}
table td, table th {
    border: 1px solid #c0c0c0;
}
table th {
    background: #ddd;
}
table td {
    padding-left: 1em;
}