/*  HTML5 Reset :: style.css
-------------------------------------------------------------------------------*/
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video   
{
    margin: 0;  
    padding: 0; 
    border: 0;  
    outline: 0; 
    font-size: 100%;    
    vertical-align: baseline;   
    background: transparent;
    font-weight: normal;
}

article, aside, figure, footer, header, hgroup, nav, section {display: block;}


/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/*  we use a lot of ULs that aren't bulleted.   
    don't forget to restore the bullets within content. */
ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, 
blockquote:after, 
q:before, 
q:after {content: ''; content: none;}
body
{
    background-color: #ffffff;
    margin-top: auto;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: auto;
}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

input, select {vertical-align: middle; border: medium none; height: 18px;}

pre 
{
    white-space: pre; /* CSS2 */
    white-space: pre-wrap; /* CSS 2.1 */    
    white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */  
    word-wrap: break-word; /* IE */
}
    
input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {
    border: 1px solid #CCC;
    width: 150px;
    padding: 1px;
    color: #E1E1E1;
}
.input-label{
    width: 200px;
}

table {font-size: inherit; font: 100%;}

/* Accessible focus treatment
    people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {outline: none;}

small {font-size: 85%;}

strong, th {font-weight: bold;}

td, td img {vertical-align: top;}

/* Make sure sup and sub don't screw with your line-heights gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,label, 
input[type=button], 
input[type=submit], 
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}

/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover */
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

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

}

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

}

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

}



/* GENERAL */
*
{
    font-family: QuicksandBook;
    font-size: 14px;
    color: #231f20;
    letter-spacing: -1px;
}
html,body
{
    width: 100%;
    height: 100%;
}
.wrapper
{
    width: 1000px;
    height: auto;
    position: relative;
    margin: 0px auto;
}
.nav
{
    position: absolute;
    left: 0px;
    top: 200px;
}
.nav a
{
    display: block;
    font-family: QuicksandBook;
    font-size: 16px;
    color: #231f20;
    text-decoration: none;
}
.nav a:hover
{
    text-decoration: underline;
}
.social
{
    position: absolute;
    right: 0px;
    top: 200px;    
}
.social a
{
    margin: 0px;
    text-decoration: none;
}
.social span
{
    font-size: 18px;
    font-weight: bold;
}
.social .icons
{
    margin-top: 15px;
    text-align: center;
}
.contact
{
    text-align: left;
    padding-left: 50px;
}
.contact input[type="text"], .contact textarea
{
    background: none;
    border: 1px solid #999999;
    font-family: QuicksandBook;
    color: #999999;
    line-height: 100%;
    font-size: 15px;
    padding: 3px 5px 1px 5px;
    width: 250px;
    margin: 10px 0px 10px 0px;
    -webkit-appearance: none;
    outline: none;
    display: block;
    resize: none;
}
.contact textarea
{
    height: 200px;
}
.contact .btn {
    width: 80px;
    height: 25px;
    color: #999999;
    text-decoration: none;
    font-size: 15px;
    line-height: 100%;
    font-family: QuicksandBook;
    font-weight: normal;
    font-style: normal;
    display: block;
    margin: 0px;
    background: no-repeat #F5F5F5;
    border: 1px solid #999999;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    text-transform: uppercase;
    padding: 4px 2px 10px 2px;
}
.contact a
{
    color: #ee0481;
    text-decoration: underline;
}

/* HOMEPAGE */
.homepage-content
{
    padding: 70px 90px 50px 10px;
    width: 700px;
    margin: 0px auto 0px auto;
    text-align: center;
    line-height: 140%;
}
.logo
{
    display: block;
    margin: 0px auto 110px auto;
    width: 500px;
}
.paragraph
{
    text-align: justify;
    margin: 80px 0px 80px 0px;
    width: 580px;
    padding: 0px 50px 0px 50px;
}
.paragraph img
{
    margin-left: -3px;
}
.paragraph span
{
    font-size: 18px;
    font-weight: bold;
}
ul
{
    list-style-type: none;
    text-align: justify;
    margin: 15px 0px 60px 40px;
}
li
{
    background-image: url(images/bullet-point.png);
    background-repeat: no-repeat;
    margin-bottom: 5px;
    padding-left: 17px;
}
.paragraph a
{
    color: #ee0481;
    text-decoration: underline;
}
.left
{
    float: left;
    width: 600px;
    margin-right: 20px;
    text-align: left;
}
.right
{
    float: left;
    width: 380px;
}
.clear
{
    clear: both;
    margin-bottom: 10px;
}
.hr
{
    display: block;
    width: 600px;
    margin-left: 50px;
}

/* message box */
div.notice-message{
    font-family: 'QuicksandBook';
    color: #fff;
    font-size: 20px;
    padding: 5px 10px;
    z-index: 100000;
    text-align: center;

    position: absolute;
    width: auto;
    min-height: 20px;

    background: #000;
    opacity: 0.7;
    -moz-opacity: 0.7;
    filter: alpha(opacity=70);

    border-radius: 7px;
    -o-border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    padding: 20px;
}

@media all and (max-width: 999px) {
    .wrapper {
        width: 100%;
        max-width: 1000px;
    }
    .nav {
        display: none;
    }
    .social {
        top: 16px !important;
        right: 16px; !important;
    }
    .homepage-content {
        padding: 100px 16px 16px;
        width: 100%;
        max-width: 700px;
        box-sizing: border-box;
    }
    .paragraph {
        width: 100%;
        max-width: 600px;
        padding: 0 0;
    }
    .hr {
        width: 100%;
        max-width: 600px;
        margin-left: 0;
    }
    .contact {
        padding-left: 0;
    }
    .left {
        width: 100%;
        max-width: 600px;
    }
}