@import url(https://fonts.googleapis.com/css?family=Maven+Pro);
@import url(https://fonts.googleapis.com/css?family=Ovo);
@import url(https://fonts.googleapis.com/css?family=Rationale);

/********************
*    Author: Fuzzlesoft Development
*    Version: 1.images
*
*
*    History:
*        1.07
*    +Made Phazeball 2 page look like it was made in the last 10 years
*    =Current Project links can be clicked on their images rather than just the text
*        1.06
*    +Added Current Projects page
*    +Added support for Internet Explorer 7+, Firefox and Opera
*        1.05
*    =Changed navbar size and contentwrapper positioning
*        1.images
*    +Updated with the about page - Has not been tested on IE
*        1.03
*    +Where to Find Us columns fixed
*        1.02
*    +Updated with the contact page
*        1.01
*    +Updated to accept IE 7 and up
*        1.00
*    =First Release - Chrome supported
*
*******************/

/*** Resets ***/
* {
    margin: 0;
    padding: 0;
}

/* Global Settings */

body {
    font-family: 'Ovo', serif;

    background: url("../images/BackgroundTile.png");
    background-repeat: repeat;
}

p {
    font-family: 'Ovo', serif;
    text-indent: 1.5em;
}

h2 {
    font-family: 'Rationale', cursive;
}

span {
    color: #644;
}

p a:link {
    color: #000;
    text-decoration: none;
}

p a:visited {
    color: #000;
    text-decoration: none;
}

p a:hover {
    text-decoration: underline;
}

a img {
    border: none;
}

a.content {
    display: block;
}

/* Layout */

.wrap {
    width: 852px;
    margin: 0 auto;
    position: relative;
}

header {
    display: block;
    height: 10em;
}

header h1#logo {
    position: absolute;
    left: -100px;
    top: 15px;
}

header h1#logo a {
    display: block;
    width: 300px;
    height: 300px;
    text-indent: -9999em;
    background: transparent url(../images/Logo.png) no-repeat scroll 0 0;
    z-index: 1000;
    position: relative;
}

.contentwrapper {
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);

    border: 1px solid #555;
    background: #fff;

}

.showcaseImage {
    position: relative;
}

#phazeball2 {
    height: 170px;
}

#phazeball2score {
    height: 100px;
}

#takeoff {
    height: 168px;
}

#code {
    height: 150px;
}

#phazeball2laser {
    height: 135px;
}

.content {
    background: #fff;
    padding: 20px;
}

.content img {
    float: left;
    margin: 20px;
    padding: 5px;

    background: #ebb;
    border: 1px solid #d99;
}

.content.alt {
    border: 1px solid #ebb;
    border-left: 0;
    border-right: 0;
    background: #ffdacc;
}

.content.alt img {
    float: right;
    background: #fff;
}

.footer {
    background: #fff;
    padding: 20px;

    clear: both;
}

.footer.alt {
    border-top: 1px solid #ebb;
    background: #ffdacc;
}

/*** BackgroundPicture Layout - Current Projects Page ***/

a.withImage {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    -webkit-transition: -webkit-box-shadow 0.3s ease;
    -moz-transition: 0.3s ease;
    -o-transition: box-shadow 0.3s ease;

    background-repeat: no-repeat;
}

a.withImage.alt {
    background-position: right;
    background-repeat: no-repeat;
}

a.withImage:hover {
    -webkit-box-shadow: 0 0 50px rgba(255, 255, 255, 0.7) inset;
    -moz-box-shadow: 0 0 50px rgba(255, 255, 255, 0.7) inset;
    box-shadow: 0 0 50px rgba(255, 255, 255, 0.7) inset;
}

a.withImage#deerfoot {
    height: 160px;
    padding-left: 325px;
    background-image: url(../images/BackgroundDeerfoot.png);
}

a.withImage#phazeball {
    height: 85px;
    padding-right: 400px;
    background-image: url(../images/BackgroundPhazeball.png);
}

a.withImage#dirsearch {
    height: 55px;
    padding-right: 350px;
    background-image: url(../images/BackgroundDirsearch.png);
}

/*** FloatPieces Layout - Contact Page ***/

.floatContainer {
    border-bottom: 1px solid #ebb;
    background: #ffe1bc;
}

.leftside {
    width: 549px;
    float: left;

    border-right: 1px solid #ebb;
}

.content#skills {
    background: #ffe6d4;
    border-bottom: 1px solid #ebb;
}

.content#contactInfo {
    background: #ffdacc;
}

.rightside {
    background: #ffe1bc;
    width: 300px;
    float: right;
}

.content#aboutMe {
    background: #ffe9c6;
    border-bottom: 1px solid #efc18c;
    padding: 15px;
}

.content#pubMed {
    background: #ffe1bc;
    padding: 21px;
}

/*** Product Pages ***/

.scroll {
    border: none;
    background: transparent;
    width: 300px;
    height: 100px;
    margin: 0;
    outline: none;
    float: left;
}

.outerScroll {
    box-shadow: inset 2px 2px 10px #000;
    border: 1px solid #999;
    margin: 10px;
    float: left;
}

a.content {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

a.content ul {
    list-style-type: none;
}

a.content ul li {
    display: block;
    float: left;
    margin: 10px 30px 0 30px;


    font-size: 14px;
    font-weight: lighter;
}

a.content.oldVer {
    padding: 5px;
    background-color: #ffece5;
}

a.content.oldVer.alt {
    background-color: #ffc6b2;
}

a.content.oldVer h2 {
    font-weight: lighter;
}

/* Navigation */

nav {
    position: absolute;
    top: 65px;
    right: 0;
}

nav ul {
    list-style: none;
    margin: 0;
}

nav ul li {
    display: block;
    float: left;
}

nav ul li a {
    display: block;
    float: left;
    text-decoration: none;
    padding: 0 25px;
    color: #fdd;
    height: 50px;
    font: normal 17px/50px Georgia, Times, serif;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    background: #9a5f5b;
    border-top: 1px solid #6a2f2b;
    border-bottom: 1px solid #6a2f2b;
}

nav ul li a:hover {
    background-color: #8a4f4b;
    color: #fff;
    text-decoration: none;
}

nav ul li.current_page_item a {
    background-color: #7a3f3b;
    color: #fff;
    text-decoration: none;
}

nav ul li:first-child a {
    -moz-border-radius-bottomleft: 50px;
    -moz-border-radius-topleft: 10px;
    -webkit-border-bottom-left-radius: 50px;
    -webkit-border-top-left-radius: 10px;
    border-bottom-left-radius: 50px;
    border-top-left-radius: 10px;

    border-left: 1px solid #6a2f2b;
}

#navBarLastChild a {
    -moz-border-radius-bottomright: 50px;
    -moz-border-radius-topright: 10px;
    -webkit-border-bottom-right-radius: 50px;
    -webkit-border-top-right-radius: 10px;
    border-bottom-right-radius: 50px;
    border-top-right-radius: 10px;

    border-right: 1px solid #6a2f2b;
}

/* Glow Columns */


.column {
    padding: 15px;
    float: left;
    margin-top: 5px;
    -webkit-transition: background 0.3s ease,
    -webkit-box-shadow 0.3s ease;
    -moz-transition: 0.3s ease;
    -o-transition: background 0.3s ease,
    box-shadow 0.3s ease;
}

#pubLocations .column {
    width: 29%;
}

#pubMed .column {
    margin-left: 1em;
    width: 32px;
}

.column h3 {
    font-family: 'Maven Pro', cursive;

    height: 32px;
    text-indent: 40px;
    background: no-repeat;
}

.column.allLink {
    border: 1px solid transparent;
}

.column.allLink a {
    font-family: 'Ovo', serif;

    color: #000;
    text-decoration: none;
    cursor: pointer;

}

.column.allLink:hover {
    background: #fff;
    -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);

    border: 1px solid #da8;
}

.column#tumblr h3 {
    background-image: url(../images/LogoTumblr.png);
}

.column#kongregate h3 {
    background-image: url(../images/LogoKongregate.png);
}

.column#twitter h3 {
    background-image: url(../images/LogoTwitter.png);
}

.column p {
    padding: 10px;
    text-indent: 0;
}


/* Random stuff that makes me happy! */

.slogan {
    font-family: 'Maven Pro', cursive;
    font-size: 170%;
    line-height: 1.7em;
    color: #977;
    text-align: center;
}

.content.nopage p {
    margin-left: 150px;
}

.floatLeft {
    float: left;
}

.floatRight {
    float: right;
}

.clear {
    clear: both;
    font-size: 0;
}