/* 
    Document   : styles
    Created on : Jul 7, 2011, 3:22:28 PM
    Author     : reneelung
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

* {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

.clear {
    clear: both;
}

body {
    background-image: url(images/body-bg.png);
    background-color: #007C84;
    background-repeat: repeat-x;
    background-position: top;
}

.header {
    height: 150px;
    width: 100%;
    margin: 0px auto;
    top: 0px;
    position: fixed;
    z-index: 1000;
    background-image: url(images/header-bg.png);
    background-position: 18px;
    background-repeat: repeat-x;
}

.header .inner {

    background-position: center;
}

.navigation {
    width: 100px;
    height: 150px;
    padding: 10px;
    float: right;
    margin-right: 200px;
/*    margin-top: -105px;*/
    text-align: center;
    padding-bottom: 9px;
    padding-left: 10px;
    padding-right: 10px;
    background-image: url(images/navigation-bg.png);
    background-position: bottom center;
}


.navigation ul li {
    list-style-type: none;
    display: inline-block;
    margin: 0px 15px;
    font-size: 13px;
    text-transform: uppercase;
    padding: 5px 0px;
}

.navigation ul li a {
    color: #EEE;
}

.main .inner {
    width: 940px;
    margin: 0px auto;
    padding: 0px 30px;
    background-image: url(images/main-bg-paper-2.png);
    background-repeat: repeat-y;
    min-height: 1000px;
}

.main .inner .content {
    width: 880px;
    padding: 0px 20px;
    padding-top: 200px;
    margin: 0px auto;
    background-image: url(images/content-bg.png);
    background-repeat: no-repeat;
    background-position: top center;
    min-height: 1000px;
}

.main .inner .content .intro {
    height: 1000px;
}

.main .inner .content .intro .heart {
    width: 400px;
    height: 385px;
    float: left;
    background-image: url(images/heart-bg.png);
    background-repeat: no-repeat;
    position:relative
}

div.heart-single {
    height: 340px;
    width: 340px;
    position: relative;
    top: 50%;
    left: 50%;
    margin-left:-170px;
    margin-top: -170px;
}

div.heart-single img {
    position: relative;
    top: 50%;
    left: 50%;
    margin-left: -170px;
    margin-top: -170px;
}

.main .inner .content .intro .intro-text {
    float: right;
    width: 480px;
    height: 385px;
}

.main .inner .content .intro .intro-text .top {
    width: 480px;
    height: 231px;
    background-image: url(images/intro-text-top.png);
}

.main .inner .content .intro .intro-text .bottom {
    width: 480px;
    height:155px;
    background-image: url(images/intro-text-bottom.png);
}

.main .inner .content .intro .intro-text .bottom .brain {
    height: 86px;
    width: 115px;
    background-image: url(images/brain.png);
    position: relative;
    margin-left: 45px;
    top:17px;
}

/* Text Styles */

h1, h2, h3, h4, a, p, span, small, strong, table, input, textarea, #colorbox {
    font-family: 'Arvo', 'Courier New', 'Lucida Sans', 'Lucida Grande', Arial, sans-serif;
    color: #666;
}

p {
    font-size: 12px;
    line-height: 150%;
}

a {
    text-decoration: none;
}

a:hover {
    color: #D4145A;
}

/* Section Styles */

.section {
    width: 840px;
    padding: 80px 20px 20px 20px;
    min-height: 1000px;
    background-repeat: no-repeat;
    background-position: top;
    padding-bottom: 300px;
}

.section.work {
    background-image: url(images/work-bg.png);  
}

.section.latest {
    background-image: url(images/latest-bg.png);
}

.section.about {
    background-image: url(images/about-bg.png);  
}

.section.contact {
    background-image: url(images/contact-bg.png);
}

/* Work */

div.viewport-wrapper {
    width: 800px;
    height: 400px;
    margin: 0px auto;
}

div.viewport-wrapper .prev, div.viewport-wrapper .next {
    height: 300px;
    width: 50px;
    float: left;
    background-position: center;
    background-repeat: no-repeat;
}

div.viewport-wrapper .prev {
    top: 0px;
    background: url(images/viewport-prev.png);
    cursor: pointer;
}

div.viewport-wrapper .next {
    top: 50px;
    background: url(images/viewport-next.png);
    cursor: pointer;
}

div.viewport-wrapper .viewport {
    height: 350px;
    width: 700px;
    overflow: hidden;
    float: left;

}

div.viewport ul {
    width: 8000px;
    height: 290px;
}

div.viewport ul li {
    list-style-type: none;
    width: 620px;
    float: left;
    height: 290px;
    margin: 0px;
    padding: 30px;
    padding-right: 40px;
}

div.thumbnail-wrapper ul li {
    display: inline-block;
    margin: 0px;
    padding: 0px;
}

div.thumbnail {
    width: 222px;
    height: 90px;
    padding: 10px;
    margin: 10px;
    background: white;
    -moz-box-shadow: #666 0px 0px 10px;
    -webkit-box-shadow: #666 0px 0px 10px;
    float: left;
    cursor: pointer;
    overflow: hidden;
}

div.thumbnail:hover {
    -moz-box-shadow: #AAA 0px 0px 15px;
    -webkit-box-shadow: #AAD 0px 0px 15px;

}

div.viewport ul li div.item {
    width: 620px;
    height: 290px;
}

div.viewport ul li div.item div.description {
    width: 275px;
    float: right;
    height: 290px;
}

div.viewport ul li div.item div.screen {
    width: 310px;
    height: 220px;
    padding-bottom: 17px;
    padding-right: 17px;
    background: url(images/item-screen-bg.png);
    float: left;
}

div.viewport ul li h2 {
    color: #5F9928;
}

/* Contact Form */

div.section.contact > div {
    margin-top: 20px;
}

div.contact-form {
    float: left;
    width: 200px;
    padding: 20px;
    padding-left: 60px;
}

div.contact-form input, div.contact-form textarea {
    padding: 10px;
    background: #EEE;
    -webkit-box-shadow: white 5px 5px 0px;
    -moz-box-shadow: white 5px 5px 0px;
    width: 200px;
    margin: 10px 0px;
}

div.contact-form input[type=submit] {
    background: #F6AB3B;
    color: white;
    cursor: pointer;
}

div.contact-form input[type=submit]:hover {
    background: #3EABC5;
}

div.contact-image {
    float: right;
    height: 330px;
    width: 475px;
    padding-right: 20px;
    background-image: url(images/contact-image.png);
    background-repeat: no-repeat;
    background-position: top left;
}

div.contact-image:hover {
    background-image: url(images/contact-image-ovr.png);
}

/* Latest  */

div.section.latest div.thumbnail-wrapper {
    margin-top: 20px;
}

/* About */

div#dont-forget {
    width: 800px;
    height: 395px;
}

div#dont-forget div.about-me-info {
    float: left;
    width: 625px;
}

div#dont-forget div.about-me-resume {
    float: left;
    width: 175px;
    height: 395px;
    background-image: url(images/about-me-resume.png);
    background-repeat: no-repeat;
    cursor: pointer;
}

div#dont-forget div.about-me-resume:hover {
    background-image: url(images/about-me-resume-over.png);
}