@Charset 'UTF-8';

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,900);

/* content */

#container {
    margin-top:150px;
    margin-bottom:50px;
    margin-left:100px;
    margin-right:100px;
}          

/* header */

#header, #footer {
    position:relative;
    width: 100%;
    height: 3em;
    line-height: 3em;
    font-size: 18pt;
    font-family: 'Source Sans Pro', sans-serif;
}

#header {
    z-index: 10000;
    left: 0;
    top: 0;   
    background: white;
    box-shadow: 0 0 0.15em 0 rgba(0,0,0,0.25);
    background: white;
    font-weight: 300;
    color: #39454b;
    letter-spacing: 0.5px;
    overflow-x:hidden;
    overflow-y:hidden;
}

h1#logo {
    font-weight: 900;
    color: inherit;
    font-size: 18pt;
    margin:0;
}

h1#logo a {
    color: inherit;
    text-decoration: none;
}

#logo {
    position: absolute;
    left: 1em;
    top: 0;
    height: 3em;
    line-height: 3em;
    letter-spacing: -1px;
}

#logo a {
    font-size: 1.25em;
}

#nav {
    position: absolute;
    right: 0.5em;
    top: 0;
    height: 3em;
    line-height: 3em;
}

#nav ul {
    margin: 0;
padding:0;
}

#nav ul li {
    display: inline-block;
    margin-left: 0.5em;
    font-size: 0.9em;
}

#nav ul li a {
    display: block;
    color: inherit;
    text-decoration: none;
    height: 3em;
    line-height: 3em;
    padding: 0 0.5em 0 0.5em;
    outline: 0;
}

#nav ul li a:hover {
    color: purple;
}

#nav ul li a:active {
    color: purple;
}

/* footer */

#footer {
    bottom:0;
    margin: 0;
    background: #39454b;
    color: #C0C0C0;
}

#footer p { margin:0; }

#footer ul { padding:0; }

#footer a {
    color: #C0C0C0;
}

ul.icons {
    cursor: default;
}

ul.icons li {
    display: inline-block;
    margin: 0 0 0 0.5em;
}

ul.icons li:first-child {
    margin-left: 0;
}

#footer .icons {
    position: absolute;
    left: 1em;
    height:3em;
    line-height:3em;
    margin: 0;
}

#footer .icons li {
    font-size: 1.25em;
    margin: 0;
}

#footer .icons li a {
    padding: 0.5em;
}

#footer .icons li a {
    text-decoration:none;
}

#footer .icons li a:links {
    color: #98c593;
}

#footer .icons a {
    -moz-transition: all 0.2s ease-in-out, color 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out, color 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out, color 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out, color 0.2s ease-in-out;
    transition: all 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* this section sets the colors for when you hover over the social icons */
#footer .icons li:hover a.fa-twitter        { color: #2DAAE4; }
#footer .icons li:hover a.fa-bitbucket      { color: #205081; }
#footer .icons li:hover a.fa-gittip         { color: #614C3E; }
#footer .icons li:hover a.fa-github         { color: #000000; }
#footer .icons li:hover a.fa-linkedin       { color: #4875B4; }

#footer .copy {
    position: absolute;
    right: 2em;
    top: 0;
    height:3em;
    line-height:3em;
    margin: 0;
    font-size: 0.9em;
}

ul.copy {
    cursor: default;
}

ul.copy li {
    display: inline-block;
    line-height: 1em;
    border-left: solid 1px rgba(145,146,147,0.25);
    padding: 0 0 0 0.5em;
    margin: 0 0 0 0.5em;
}

ul.copy li:first-child {
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
}

#footer .copy li {
    font-size: 0.9em;
}

@media only screen and (max-width: 480px) {
    #container {margin: 0 10px; }

    #header, #footer {
        height: 5em;
        line-height: 2.5em;
	overflow:hidden;
    }
    
    #logo, #nav {
	text-align:center;
	position:relative;
        left: 0;
        top: 0;
    }
    
    #logo a {
        font-size: 1em;
    }
    
    #footer .copy, #footer .icons {
	position:relative;
	text-align:center;
	left:0;
	top:0;
	height: 2.5em;
	line-height: 2.5em;
    }
}

@media only screen and (max-width : 650px) and (min-width : 481px) {

    #container { margin: 0 50px; }

    #footer {
        height: 5em;
        line-height: 2.5em;
	overflow:hidden;
    }
    
    #footer .copy, #footer .icons {
	position:relative;
	text-align:center;
	left:0;
	top:0;
	height: 2.5em;
	line-height: 2.5em;
    }
}