goodCSS.css

/*
	Colour-scheme: 
	https://coolors.co/11151c-212d40-364156-7d4e57-d66853
        
	List of common webfonts:
	http://www.w3schools.com/cssref/css_websafe_fonts.asp

        Tutorial on importing fonts into webpage:
        http://www.webdesignerdepot.com/2013/01/how-to-use-any-font-you-like-with-css3/

        Tutorial on creating a navbar	
	http://www.w3schools.com/css/css_navbar.asp 

        Rotating Images in CSS:
        http://stackoverflow.com/questions/20061774/rotate-an-image-in-image-source-in-html
        user: VLS

        Gradients in CSS:
        http://www.w3schools.com/css/css3_gradients.asp
        https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
*/

body {
    width: 100em;
    height: 100em;
    color: black;
    background: #11151c;
    margin: 0;
    padding: 0;
}

ul {
    list-style-type: none;    
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 10pt;
}

div {
    color: #d66853;
    height: auto;
}

p {
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 10pt;
    padding-left: 10pt;
}

a {
    color: #d66853;
}

.title {
    font-size: 25pt;
    padding-left: 1em;
    font-family: "Arial Black", Gadget, sans-serif;
    color:  #d66853;
}

.subTitle {
    font-size: 15pt;
    text-align: left;
    font-family: "Arial Black", Gadget, sans-serif;
    color:  #d66853;
}

.subTitle a {
    padding-top: 5pt;
    color:  #d66853;
}

.headshot {
    position: absolute;
    left: 0pt;
    top: 0pt;
    z-index: -1;
    width: 245pt;
    float:left;
    border-right: 5pt solid #364156;
}

.footer {
    position: absolute;
    width: 100%;
    text-align:right;
    background-color: #364156;
    color: #d66853;
    font-size: 10pt;
    font-family: "Arial Black", Gadget, sans-serif;
    color: #d66853;
    background: #364156;
    padding: 5pt;
    border: 3pt solid #212d40;
}

.boilerplate {
    width: 200pt;
    height: 200pt;
    background: #212d40;
    border: solid 5pt #364156;
    color: #d66853;
    margin-top: 10%;
    margin-left: 50%;
}

.columnContainer {
    margin-top: 35pt;
    margin-left: 250pt;
    width: 100em;
    height: 750pt;
    background: #364156;
    background: -moz-linear-gradient(left, #364156, #364156 50%, #11151c);
    background: -webkit-linear-gradient(left, #364156 , #11151c);
    background: linear-gradient(90deg,#364156, #364156 50%, #11151c);
}

.topSection {
    width: 100%;
    border-bottom: 5pt solid #11151c;
    border-right: none;
}

.leftColumn {
    float:left;
    height: 45%;
    width: 33%;
    text-align:left;
}

.rightColumn {
    float:right;
    height: 45%;
    width: 33%;
    padding-right:25%;
}

.topSection {
    height: auto;
    float:none;
}

.NavBar ul {
    color: #d66853;
    background: #212d40;
    border-bottom: 5pt solid #364156;
    font-family: "Arial Black", Gadget, sans-serif;
    margin: 0;
    width: 100%;
    display: inline;
    position: fixed;
    top: 0;
}

.NavBar li {
	float: left;
	border-right: 1pt solid #364156;
}

.NavBar li a {
        height: 20pt;
	display: block;
	color: #7d4e57;
	text-align: center;
	padding: 7pt;
}

.NavBar li:last-child {
	border-right: none;
}

.NavBar a:hover {
    color: #d66853;
}

.NavBar a.active {
    background-color: #364156;
    color: #d66853;
}