@charset "UTF-8";
/* CSS Document */
/* main.css, CSS document for portfolio site. 
 * Used by index.html, portfolio2.html, about.html, blog.html, instagram.html, and expertise.html. 
 * 2015-04-06  Scott Robert Dawson  
 * No longer based on presentation-interface javascript for CWD4300 or colorbox jQuery plugin.
 */
/* Image URLs are relative to directory in which this CSS file is stored. */

/* Main background styling */

body {
    
    background-image: url("../images/left_background.png"), url("../images/right_background.png");
    background-position: top left, top right;
    background-repeat: no-repeat, no-repeat;
    background-color: #FFFFFF;
}

.container {
    position: relative;
    min-height: 600px;
    background-color: #FFFFFF;
    border-left: solid black 1px;
    border-right: solid black 1px;
    border-bottom: solid black 1px;
}

#portfolio_container {
    position: relative;
    min-height: 600px;
    background-color: #FFFFFF;
}

#content_area {
    background-color: #FFFFFF;
} 
/* --------------------------------------------------------------------------- */
/* Styles positioning and styling the banner text in the "logo_and_title" div
 *
 */

#logo_and_title {
    height: 7em;
    position: relative;
    background-color: #FFFFFF;
}

#banner_text {
    position: absolute;
    top: -20px;
    left: 10px;
    color: #FF9900;
    font-size: 6em;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
}

#site_title_text {
    position: absolute;
    top: 12px;
    left: 30px;
    color: #DDDDDD;
    font-size: 5em;
    font-family: 'BebasNeue', sans-serif;
}

#page_title_text {
    position: absolute;
    bottom: -25px;
    right: 30px;
    font-size: 5em;
    font-family: 'BebasNeue', sans-serif;
    color: #333333;
}
/* On main page only */

#site_title_text.index_page {
    color: #333333;
}

#page_title_text.index_page {
    color: #DDDDDD;
    opacity: 0.5;
    z-index: 0;
}
/* Media query for smallish screens */

@media screen and (max-width: 768px) {
    #logo_and_title {
        height: 5em;
        position: relative;
    }
    #banner_text {
        position: absolute;
        top: -15px;
        left: 5px;
        font-size: 4.5em;
        font-family: 'Arial', sans-serif;
        font-weight: bold;
    }
    #site_title_text {
        position: absolute;
        top: 10px;
        left: 20px;
        font-size: 3.5em;
        font-family: 'BebasNeue', sans-serif;
    }
    #page_title_text {
        position: absolute;
        bottom: -18px;
        right: 20px;
        font-size: 3.5em;
        font-family: 'BebasNeue', sans-serif;
    }
}
/* Media query for the smallest screens */

@media screen and (max-width: 480px) {
    #logo_and_title {
        height: 4em;
        position: relative;
    }
    #banner_text {
        position: absolute;
        top: -15px;
        left: 5px;
        font-size: 4em;
        font-family: 'Arial', sans-serif;
        font-weight: bold;
    }
    #site_title_text {
        position: absolute;
        top: 10px;
        left: 20px;
        font-size: 2.5em;
        font-family: 'BebasNeue', sans-serif;
    }
    #page_title_text {
        position: absolute;
        bottom: -12px;
        right: 20px;
        font-size: 2.5em;
        font-family: 'BebasNeue', sans-serif;
    }
}
/* --------------------------------------------------------------------------- */
/* Styles affecting the main menu bar and navigation. Includes the dropdown menu. */

.nav a {
    font-size: 1.5em;
}

.main_menu {
    background-color: #DDDDDD;
}
/* --------------------------------------------------------------------------- */
/* Styles affecting content on all pages. */

/* unvisited link */

a:link {
    color: #000000;
}
.content_area a,
#main_content a {
    text-decoration: underline;
}
/* visited link */

a:visited {
    color: #444444;
}
/* mouse over link */

a:hover {
    color: #BBBBBB;
}
/* selected link */

a:active {
    color: #BBBBBB;
}




/* The Connect With Me! div */

#connect_splash_title {
    font-family: 'BebasNeue', sans-serif;
    font-size: 2.5em;
}
/* The Get Resume splash */

#get_resume_splash {
    position: absolute;
    right: 100px;
    top: 100px;
    height: 200px;
    width: 200px;
    z-index: 10;
    -ms-transform: rotate(-10deg);
    /* IE 9 */
    
    -webkit-transform: rotate(-10deg);
    /* Chrome, Safari, Opera */
    
    transform: rotate(-10deg);
    background-image: url("../images/splash4.svg");
}

#get_resume_splash a {
    position: relative;
}
/* Media query for medium-sized screens */

@media screen and (max-width: 991px) {
    #get_resume_splash {
        right: 75px;
        top: 100px;
        height: 150px;
        width: 150px;
    }
}
/* Media query for smallish screens */

@media screen and (max-width: 768px) {
    #get_resume_splash {
        right: 75px;
        top: 75px;
        height: 100px;
        width: 100px;
    }
}
/* Media query for the smallest screens */

@media screen and (max-width: 480px) {
    #get_resume_splash {
        right: 75px;
        top: 60px;
        height: 75px;
        width: 75px;
    }
}
/* Heading text */

h1 {
    font-size: 2.5em;
    font-family: 'BebasNeue', sans-serif;
    color: #222222;
    left: 60px;
}

h2 {
    font-size: 2em;
    font-family: 'BebasNeue', sans-serif;
    color: #222222;
    left: 40px;
}

h2 .headline_red {
    font-size: 1.5em;
    font-family: 'BebasNeue', sans-serif;
    color: #FF0000;
}
/* body text */

p,
span {
    font-size: 1em;
    font-family: 'Arial', sans-serif;
    color: #222222;
}

span.skills {
    font-size: 1em;
    font-family: 'Arial', sans-serif;
    font-variant: small-caps;
    color: #9e6161;
}

span.tools {
    font-size: 1em;
    font-family: 'Arial', sans-serif;
    font-variant: small-caps;
    color: #689e61;
}

/* --------------------------------------------------------------------------- */
/* Styles for the index page content. 
 * See index.css.
 */


/* --------------------------------------------------------------------------- */
/* Styles for the blog page.
 *
 */


/* --------------------------------------------------------------------------- */
/* Styles for the expertise/services page.
 *
 */

 /* Heading text */

.services h1 {
    font-size: 2.5em;
    font-family: 'BebasNeue', sans-serif;
    color: #222222;
    left: 40px;
}

.services h2 {
    font-size: 2em;
    font-family: 'BebasNeue', sans-serif;
    color: #222222;
    left: 40px;
}

.services h3 {
    font-size: 1.75em;
    font-family: 'BebasNeue', sans-serif;
    color: #222222;
    left: 40px;
}

.services li {
    text-indent: 20px;
    list-style-type: none;

}

/* --------------------------------------------------------------------------- */
/* Styles for the animation compare page.
 * See animcompare.css.
 */


/* --------------------------------------------------------------------------- */
/* Style for the portfolio page: squares and their content.
  *
  */

#portfolio_container {
    background-color: #FFFFFF;
} 


#portfolio_container img {
    border: 1px solid black;
} 

iframe {
    background-color: #FFFFFF;
}

/* --------------------------------------------------------------------------- */
/* Style for the instagram page: the small images...
  *
  */

#instafeed img {
    margin: 10px;
    border: 1px solid black;

}

/* --------------------------------------------------------------------------- */
/* Styles for the About page. */

#about_resume {
    padding: 20px;
    border: 1px solid #DC8427;
}

#about_resume h1 {
    color: #DC8427;
}
/* --------------------------------------------------------------------------- */
/* Footer styling. */

#footer_area {
    background-color: #EEEEEE;
}
/* --------------------------------------------------------------------------- */
/* Bebas Neue, font for headings and titles. */

@font-face {
    font-family: 'BebasNeue';
    src: url('../fonts/BebasNeue-webfont.eot');
    src: url('../fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/BebasNeue-webfont.woff') format('woff'), url('../fonts/BebasNeue-webfont.ttf') format('truetype'), url('../fonts/BebasNeue-webfont.svg#BebasNeue') format('svg');
    font-weight: normal;
    font-style: normal;
}