/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : May 10, 2016, 11:14:17 AM
    Author     : Innovate
*/

/*------------------------------------------------------------*
**  Global
**------------------------------------------------------------*/

@font-face {
		font-family: SangBleu;
		src: url('../fonts/SangBleuBP-Light.otf'); 
		}
@font-face {
		font-family: SangSans;
		src: url('../fonts/SangBleuBPSans-Light.otf'); 
		}
@font-face {
		font-family: SangSansIt;
		src: url('../fonts/SangBleuBPSans-LightItalic.otf'); 
		}

/*------------------------------------------------------------*
**  Global
**------------------------------------------------------------*/
body {
   display: block;
   margin: 8px;
}

div, article {
   display: block;
   /*for dev*/
/*   border: 1px solid #000; */
   /*for dev*/
}

p {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

article p {
   -webkit-margin-before: 0px; 
   -webkit-margin-after: 20px; 
}

h1 { 
   display: block;
   font-size: 2em;
   -webkit-margin-before: 0.67em;
   -webkit-margin-after: 0.67em;
   -webkit-margin-start: 0px;
   -webkit-margin-end: 0px;
   font-weight: bold;
}

h2 {
    display: block;
    font-size: 1.5em;
    -webkit-margin-before: 0.83em;
    -webkit-margin-after: 0.83em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

h3 {
    display: block;
    font-size: 1.17em;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

h4 {
    display: block;
    -webkit-margin-before: 1.33em;
    -webkit-margin-after: 1.33em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

ol {
    display: block;
    list-style-type: decimal;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}

li {
    display: list-item;
    text-align: -webkit-match-parent;
    list-style: decimal; /* Remove to remove list */
}

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: grey;
}

.nav {
   text-align: center;
}

.nav ul li {
   list-style-type: none;
   display: inline;
   margin: 0 10px 2px 10px;
}

a:link, a:visited, a:active {
   cursor: pointer;
   text-decoration: none;
   color: #000;
}

ul {
   margin: 0;
   padding: 0;
   list-style: none;
}

#footnav.nav ul {
   
}      

#secret {
   color: #ffffff;
}

.indent {
   margin: 0 0 0 30px;
}

.centered {
   text-align: center;
}

/*------------------------------------------------------------*
**  PAGE CONTAINER
**------------------------------------------------------------*/

.container {
   margin: 0 auto;
   width: 850px; /*maybe make this scalable?*/
   padding: 0 5px;
   
}

/*------------------------------------------------------------*
**  HEADER
**------------------------------------------------------------*/

.header, .classes, .classinfo {
   margin: 2px auto 10px auto;
/*   border-bottom: .5px solid #000;*/
   padding-bottom: 0px;
   width: 850px;
   font-family: SangBleu, arial;
   text-align: center;
}

tr.classes {
   font-weight: bold;
}

tr.classes td {
   width: 283px;
}

tr.classes td div {
   margin: auto;
   border-bottom: 2px solid #000;
   width: 50%;
   height: 25%;
}

tr.classes td div h4 {
   margin: 1.33em 0 .33em 0;
}

.classinfo td {
   width: 283px;
}

.logo {
   font-family: SangBleu, arial;
   color: #000;
   text-transform: uppercase;
   letter-spacing: .2em;
   text-align: center;
   position: relative;
   top: 30px;
   margin: auto auto 40px auto;
   margin-left: auto;
   margin-right: auto;
}

.logo a:link, .logo a:visited, .logo a:hover, .logo a:active {
   cursor: pointer;
   color: #000;
}

#mainnav.nav ul {
   margin: 20px;
   border-bottom: 1px solid #000;
   padding: 10px;
}

#mainnav ul li {
   padding: 0 10px 2px 10px;
}

#mainnav li a {
/*   text-transform:lowercase;*/
   text-decoration: none;
   color: #000;
}

select, input[type="color"][list] {
    background-color: rgb(248, 248, 248);
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(166, 166, 166);
}

select:not(:-internal-list-box) {
    overflow: visible !important;
}

select {
    -webkit-appearance: menulist;
    box-sizing: border-box;
    align-items: center;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    white-space: pre;
    -webkit-rtl-ordering: logical;
    color: black;
    background-color: white;
    cursor: default;
    border-width: 1px;
    border-style: solid;
    border-color: initial;
}

keygen, select {
    border-radius: 5px;
}

input, textarea, keygen, select, button {
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0em 0em 0em 0em;
    font: 11px BlinkMacSystemFont;
}

input, textarea, keygen, select, button, meter, progress {
    -webkit-writing-mode: horizontal-tb;
}

/*------------------------------------------------------------*
**  CONTENT
**------------------------------------------------------------*/
#content {
   margin: 10px auto 50px auto;
/*   font-family: SangBleu, arial;*/
   font-family: Veranda;
}

ol p {
   margin: auto auto auto -13px;
}

/*------------------------------------------------------------*
**  SIDEBAR
**------------------------------------------------------------*/
#sidebar {
   margin-top: 1.45em; /*hack fix*/
}

div#sidebar {
   padding: 10px;
   float: left;
   width: 200px;
}

#sidebar div img, article img {
   border: 1px solid #000000;
   border-radius: 10px;
   box-shadow: 0 3px 3px 0;
}


div#maincontent {
   padding: 10px;
   text-align: justify;
/*   width: auto;*/
   overflow-x: hidden;
   min-height: 633px;
   min-width: 604px;
}
/*div#maincontent p {
   margin-bottom: 1em;
}*/

article {
   min-height: 348.56px;
}

/*------------------------------------------------------------*
**  FOOTER
**------------------------------------------------------------*/

#footer {
   text-align: center;
   font-family: SangBleu, arial;
}

/*------------------------------------------------------------*
**  Different browser widths
**------------------------------------------------------------*/

@media only screen and (max-width: 5000px) {

   .nav select { display: none; }
}


@media only screen and (max-width: 625px) {
   .nav select { display: inline-block; } /*make this prettier*/
   .nav ul { display: none; }
}






/*------------------------------------------------------------*
**  GALLERY PAGE
**------------------------------------------------------------*/

/*------------------------------------------------------------*
**  CONTENT AKA WRAPPER
**------------------------------------------------------------*/


/*------------------------------------------------------------*
**  PHILOSOPHY
**------------------------------------------------------------*/