// SCSS variables
$colorMain: rgb(160, 160, 160);
$colorText: rgb(25, 25, 25);
$colorBlank: rgb(255, 255, 255);
$colorPage: rgb(255, 255, 255);
$borderThickness: 3px;
$menuPaddingX: 0px; 
$menuPaddingY: 1px;
$menuItemWidth: 84px;
$menuLetterSpacing: 2px;

// Text selection
::-moz-selection { background: #b3d4fc; text-shadow: none; }
::selection { background: #b3d4fc; text-shadow: none; }

// Horizontal ruler
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 2px solid #ccc;
    margin: 0;
    margin-top: 25px;
    margin-bottom: -5px;
}

// Initializr stuff
img { vertical-align: middle; }
fieldset { border: 0; margin: 0; padding: 0; }
textarea { resize: vertical; }
.wrapper { width: 90%; margin: 0 5%; }
.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: $colorBlank;
    padding: 0.2em 0;
}

// Container backgrounds and borders
.mainMenu { border-bottom: $borderThickness solid $colorMain; margin-bottom: 35px; }
.footer-container, .main aside { border-top: $borderThickness solid $colorMain; }
.header-container, .footer-container, .mainMenu, .main aside { background: $colorBlank; }
.headerLogos { max-width: 100%; max-height: 100%; } 
.asidePhoto { float: right; width:49%; }
.asideText { float: left; width: 49%;}
.asidePhoto img { max-width: 100%; max-height: 100%; }
.entryText img { max-width: 100%; max-height: 100%; }

// Font stuff
h1, h2, h3, h4, h5, h6 { font-weight: normal; letter-spacing: 0.14em; line-height: 0.8em; }
body { 
    background-color: $colorPage;
    color: $colorText;
    font: 16px/26px Helvetica, Helvetica Neue, Arial; 
    line-height: 1.35em;
}

// Article
article {
    header, footer { color: $colorMain; }
    h1 { font-size: 2.3em; }
}

// Main title
.title { color: $colorMain; font-weight: normal; }
.ie7 .title { padding-top: 20px; }

// Entries (generated by C++ and JSON)
section { padding: 5px 0; }
.entryTitle { margin-bottom: -10px; }
.entryText { text-align: justify; }


// Blog entry classes
.blogDate { 
    float: right; 
    font-style: italic; 
    font-size: 60%; 
    font-weight: normal;
    letter-spacing: 3px;
    margin-top: 3px;
}

// Main menu
nav {
	ul { margin: 0; padding: 0; }
    li { background-color: $colorMain; }
	a {
		display: block;
		padding: $menuPaddingY $menuPaddingX;
        margin-bottom: 3px;

		text-align: center;
		text-decoration: none;
        font-size: 0.9em;

		color: $colorBlank;
        letter-spacing: $menuLetterSpacing;
	}	
}

// Main (stuff after the header)
.main { 
	padding: 0px 0; 
    article { margin-top: -20px; }
	aside { 
        color: $colorMain; 
        padding: 0px 2%; 
        margin-bottom: 25px; 
        text-align: right; 
        padding: 0 15px;
        padding-bottom: 15px;
        -webkit-box-shadow: 0 1px 5px #aaa;
        -moz-box-shadow: 0 1px 5px #aaa;
        box-shadow: 0 1px 5px #aaa;
        p { margin: 0; } 
    }
    .noBorderAside {
        color: $colorMain; 
        margin-bottom: 25px; 
        text-align: right; 
        padding-bottom: 15px;
        p { margin: 0; } 
    }
}

// Footer
.footer-container footer {
    text-align: center; 
    background-color: $colorBlank;
    color: $colorMain; 
    padding: 1.6% 0; 
    letter-spacing: 4px;
}

// Media <480
@media only screen and (max-width: 480px) {
    .headerLogos {
        img { max-width: 100%; max-height: 100%; height:auto; }
        margin-top: 20px;
        margin-bottom: -10px;
        overflow: hidden;
        text-align: center;
    }
    .headerLogoMain { float: center; img { width: 25%; height: 25%; } }
    .headerTextHeading { float: center; margin-top: 15px; }
    .mainMenu{ padding-top: 30px; }
}

// Media >480
@media only screen and (min-width: 480px) {
    .headerLogos {
        margin-top: 20px;
        margin-bottom: -10px;
        overflow: hidden;
    }
    .headerLogoMain { float: left; }
    .headerTextHeading {
        float: left;
        padding-left: 10px;
        margin-top: 5px;
    }
    .mainMenu{ padding-top: 10px; }
    nav {
		a {
			text-align: center;
			float: center;
            width: $menuItemWidth;
			padding: $menuPaddingY $menuPaddingX;
			margin-bottom: 0;
		}			
		ul { 
			margin: 0;
			padding: 0;
			list-style-type: none;
			text-align: right;
			
			li { display: inline-block; padding: 0 3px; }
		}
    }
	.title { float: center; text-align: center; }
    .oldie nav a { margin: 0 0.7%; }
}

//Media <768
@media only screen and (max-width: 768px) {
   .main aside { text-align: center; }
}

// Media >768
@media only screen and (min-width: 768px) {
    .main { 
        article { width: 64%; float: right; }
        aside { float: left; width: 100%; text-align: right; } 
        .asideWrapper { width: 29%; float: left; margin: 0; padding: 0; }
    }
    .footer-container { margin-top: 15px; }
}



// Media >1140
@media only screen and (min-width: 1140px) {
    .wrapper { width: 1026px; margin: 0 auto; }
}

// Entry menu
.entryMenu { 
    a {
        text-align: center;
        width: 100%;
        margin-bottom: 0;
        letter-spacing: 0px;
        font-size: 0.8em;
    }           
    ul { 
        width:100%;white-space: nowrap;
        overflow-x: scroll;
        @media only screen and (min-width: 600px) { overflow-x: hidden; } 
        height:40px;
        float: left; margin: 0; padding: 0;
        list-style-type: none;
        text-align: left;
        li { text-align: center; display: inline-block; padding: 0 6px; }
    }

    margin-top: -17px; 
    padding-bottom: 35px; 
    width: 100%; 
    border-top: 2px solid $colorMain; 
}

// Social icons
.socialIcon {
    display: inline-block;
    background-color: $colorMain;
    margin-top: 5px;
}
.socialIconGray {
    background-color: $colorBlank;
    position: absolute;
    margin-top: -45px;
    opacity: 0;
}

// JQuery calls
.fixedMainMenu { position: fixed; top: 0; width: 100%; background-color: $colorBlank; }

// Book
.bookWrapper { padding-top: 20px; width: 100%; height: 100%; background-color: #000; }
.bookPage {  
    width: 100%;
    height: 100%; 
    margin-right:20px;
    text-align: center;
    left: 50%;
    right: 50%;
    img { padding-bottom: 30px; width: 80%; height: auto; }
}