/*
	Copyright  Lewis Gerschwitz, December 2013
*/
*
{
    font-family: 'Open Sans', 'Questrial', 'Coda', 'Arial', cursive;
    color: #809ead;
    font-size: 12pt;
    font-weight:normal;
}
body {
    background: url(../img/newbgbanner.jpg);
    background-repeat:repeat-x;
    background-color:#161619;
    background-attachment: fixed;
	margin:0;
}
h1{
	padding: 20px 0px 0px 0px;
	color: #056eb5;
	font-size: 20pt;
	font-weight: bold;
}
h2{
	padding: 10px 0px 0px 0px;
	color: #056eb5;
	font-size: 16pt;
	font-weight: bold;
}
h3{
	padding: 10px 0px 0px 0px;
	font-size: 14pt;
	font-weight: bold;
}
a:link {
    color: #056eb5;
}
a:visited {
    color: #056eb5;
}
a:hover {
    color: #809ead;
}
a:active {
    color: #056eb5;
}
/* Header and Nav
---------------------------------------------------------------------------------- */
header {
	height: 85px;
	
	/*float:left;*/
	padding:15px 0;
	min-width:100%;
	
    border: 0px;
    background-color: #1d1e21;
    color: #809ead;
	padding:10px 0;
    box-shadow:0px 10px 10px black;
    
    position: fixed;
	top:0;
    
    /*min-width: 800px;*/
    z-index: 100000;
}
#logo {
	/*Assumes the logo is 380px wide*/
	width:380px;
	padding-right:420px;
	margin-left:auto;
    margin-right:auto;
}

#nav {
	width: 800px;
    display: block;
    padding: 0px;
    list-style: none;
    font-size: 12pt;
    height: 15px;
	
    margin-top: 0px;
	margin-bottom: 0px;
	margin-left:auto;
    margin-right:auto;
    
	/*position: absolute;*/
	clear: both;
}
#nav li {
	width: 150px;
    float: left;
    list-style: none;
    text-align:center;
    /*width: 20%;
    min-width:100px;
    max-width: 200px;*/
}

/* Content and Footer
---------------------------------------------------------------------------------- */
#content, footer {
	width: 740px;
    border-radius: 5px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 15px;
    text-align:centre;
    background-color: #1d1e21;
    /*252938*/
    padding: 10px 30px;
    min-width: 600px;
    box-shadow:10px 10px 10px black;
}
#content {
    padding-top: 110px;
}
#par {
    width: 85%;
}

 #content {
    min-height: 300px;
}
footer {
    margin-top: 15px;
    margin-bottom: 30px;
    font-size: 10pt;
}
/* Floater
---------------------------------------------------------------------------------- */
#floater {
    background-position: right top;
    /* set the position to fixed so that it stays in place no matter where you scroll */
    position: fixed;
    /* set it all the way to the right and halfway down the page */
	right: -130px;
    top: 150px;
    /* bring it back to the left 40px so that you can see the graphic */
    margin-left: -17%;
    padding-top: 5px;
    /* bring the graphic up half of it's height so that it is pefectly vertically centered */
    /*margin-top: -71px;*/
    z-index: 10000;
}
#floater a {
	position: relative;
    display: block;
    margin-top: 5px;
    border-radius: 10px;
    color: #809ead;
}
#floater a:link {
    text-decoration: none;
    color: #809ead;
	display: block;
	
	-webkit-backface-visibility: hidden;
	
	-webkit-transition: -webkit-transform .2s, -webkit-filter .3s .2s;
    -moz-transition: -webkit-transform .2s, -webkit-filter .3s .2s;
    -o-transition: -webkit-transform .2s, -webkit-filter .3s .2s;
    -ms-transition: -webkit-transform .2s, -webkit-filter .3s .2s;
    transition: -webkit-transform .2s, -webkit-filter .3s .2s;
	
	/*-webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    -o-transition-duration: .3s;
    -ms-transition-duration: .3s;
    transition-duration: .3s;*/
	
    /*transition: right .3s, -webkit-filter .3s .3s;
    -webkit-transition: right .3s, -webkit-filter .3s .1s;*/
    
    filter: brightness(90%)  grayscale(70%);
    -webkit-filter: brightness(0.9) grayscale(.7);
	-moz-filter: brightness(0.9) grayscale(.7);
	-webkit-transform: translateX(0px);
	transform: translateX(0px);
	-moz-transform: translateX(0px);
}
#floater a:hover {
    color: #056eb5;
    filter: brightness(110%) grayscale(0%);
    -webkit-filter: brightness(110%) grayscale(0);
	-moz-filter: brightness(110%) grayscale(0);
	/*right: 110px;*/
	-webkit-transform: translateX(-110px);
	transform: translateX(-110px);
	-moz-transform: translateX(-110px);
}
/* Gallery
---------------------------------------------------------------------------------- */
#gallery {
    padding: 5px;
    margin-left: auto;
    margin-right: auto;
    text-align:center;
    background-color: #101010;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    transition: -webkit-filter .3s;
    -webkit-transition: -webkit-filter .3s;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    /*filter: brightness(90%);
    -webkit-filter: brightness(90%);*/
    -webkit-backface-visibility:hidden;
    /* Chrome, Safari, Opera */
    backface-visibility:hidden;
    transition: height 1s;
    -webkit-transition: height 1s;
}
#gallery img {
    position: relative;
    width: 100%;
    /*max-width: 900px;*/
    margin-left: auto;
    margin-right: auto;
    -webkit-backface-visibility:hidden;
    /* Chrome, Safari, Opera */
    backface-visibility:hidden;
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
}
#gallery h1 {
    text-align: left;
    font-size:16pt;
    font-weight:bold;
    /*left:10px;
    bottom:70px;*/
    padding: 0px 10px;
    -webkit-backface-visibility:hidden;
    /* Chrome, Safari, Opera */
    backface-visibility:hidden;
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
}
#gallery p {
    text-align: left;
    padding: 0px 30px;
    max-width: 85%;
    -webkit-backface-visibility:hidden;
    /* Chrome, Safari, Opera */
    backface-visibility:hidden;
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
}
#gallery_b {
    width: 24px;
    max-width:24px;
    height: 24px;
    margin-left: auto;
    margin-right: auto;
    float: center;
    padding: 3px 2em;
}
/*#gallery:hover {
    filter: brightness(100%);
    -webkit-filter: brightness(100%);
}*/
#gallery_progress {
    position: relative;
    bottom: 5px;
    background-color:#809ead;
    /*width:100%;*/
    height:3px;
    opacity: .75;
    -webkit-backface-visibility:hidden;
    /* Chrome, Safari, Opera */
    backface-visibility:hidden;
    transition-timing-function: linear;
    -webkit-transition-timing-function: linear;
    transition: width .14s;
}
/* Page Elements
---------------------------------------------------------------------------------- */
#rounded_inlay {
    float: left;
    width: 27%;
    padding: 10px;
    margin: 3px;
    margin-bottom: 15px;
    background-color:#1a1b1e;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}
#rounded_large {
    float: center;
    min-width: 70%;
    padding: 10px 40px;
    margin: 3px;
    margin-bottom: 15px;
    background-color:#1a1b1e;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    min-height: 120px
}
nli {
    text-align: center;
    float: left;
    width: 27%;
    padding: 5px;
    margin: 3px;
    background-color:#1a1b1e;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}
td {
    vertical-align: top;
}
#clear_float {
    clear:both;
}

#p_border, #p_border_link {
    margin: 10px;
    border: solid .3em #809ead;
    transition: -webkit-filter .5s;
    -webkit-transition: -webkit-filter .5s;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}
#p_border_link {
    margin: 5px;
    filter: brightness(60%);
    -webkit-filter: brightness(60%);
}
#p_border_link:hover {
    margin: 5px;
    /*-webkit-filter: grayscale(100%);
	-webkit-filter: blur(2px);  */
    filter: brightness(100%);
    -webkit-filter: brightness(100%);
    border: solid .3em #056eb5;
}
a.top-link {
    /* these styles will apply to ALL links unless overridden*/
    display: block;
    color: #809ead;
    padding: 5px;
    margin: 5px;
    background-color: #1d1e21;
    transition: -webkit-filter .5s;
    -webkit-transition: -webkit-filter .5s;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}
.top-link:link {
    /* styles for normal, unvisited links can be set here */
    /* these styles will override the defaults set for .top-link above */
    text-decoration: none;
}
.top-link:visited {
    /* styles for links once visited can be changed here */
    /* these styles will override the defaults set for .top-link above */
    text-decoration: none;
}
.top-link:hover {
    /* styles for top links when a user hovers over it can be changed here */
    text-decoration: none;
    border-bottom: solid .3em #809ead;
    filter: brightness(125%);
    -webkit-filter: brightness(125%);
}
.top-link:active {
    /* Styles for when the link is being clicked can be changed here */
    color: #056eb5;
    border-bottom: solid .3em #056eb5;
}
.top-link.selected:link, .top-link.selected:visited {
    /* Sets the style of a link that has been selected (ie. has a class of selected)
	   for example (note the additional class "selected"):
		<a class="top-link selected" href="content.htm">Content Page</a>
	*/
    color: #056eb5;
    border-bottom: solid .3em #056eb5;
}
.hidden {
    display: none;
}
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #809ead;
    margin: 1em 0;
    padding: 0;
}

/* Slideshow
---------------------------------------------------------------------------------- */

#slideshow{
	background-color:#161619; /*#F5F5F5;*/
	/*border:1px solid #FFFFFF;*/
	height:360px;
	/*min-height:340px;*/
	margin:0px auto 0;
	position:relative;
	width:640px;
	/*min-width:600px;
	width: 80%;*/
	
	/*-moz-box-shadow:0 0 22px #111;
	-webkit-box-shadow:0 0 22px #111;
	box-shadow:0 0 22px #111;*/
}

#slideshow ul{
	height:340px;
	left:5px;
	list-style:none outside none;
	overflow:hidden;
	position:absolute;
	top:5px;
	width:620px;
	
	padding:5px;
	margin: 0px;
}

#slideshow li{
	position:absolute;
	display:none;
	z-index:10;
}

#slideshow li:first-child{
	display:block;
	z-index:1000;
}

#slideshow .slideActive{
	z-index:1000;
}

#slideshow canvas{
	display:none;
	position:absolute;
	z-index:100;
}

#slideshow .arrow{
	height:86px;
	width:60px;
	position:absolute;
	background:url('../img/arrows.png') no-repeat;
	top:50%;
	margin-top:-43px;
	cursor:pointer;
	z-index:5000;
}

#slideshow .previous{ background-position:left top;left:0;}
#slideshow .previous:hover{ background-position:left bottom;}

#slideshow .next{ background-position:right top;right:0;}
#slideshow .next:hover{ background-position:right bottom;}