/*
Portfolio CSS for site
by Simon Pollard - Deckchair UK Ltd
http://deckchair.co.uk
*/

body {
    background: #FFF url(../images/index/index_bg.gif) top left repeat-x;
}

h2 {
    width: 600px;
    float: left;
    padding-bottom: 5px;
}

div#portfolio_container
{
    width: 942px;
    margin-top: 20px;
    position: relative;
    padding-bottom: 60px;
}


#portfolio_nav {
    padding: 0;
    width: 942px;
    height: 42px;
    /*border-bottom: 1px solid #d2d2d2;*/
    background: url(../images/portfolio/bg_nav_border.png) bottom left repeat-x;
}

/* PORTFOLIO SUB NAVIGATION */
#portfolio_nav #nav_sections {
    float: right;
    height: 37px;
    margin-bottom: -1px;
    padding-top: 5px;
}

#portfolio_nav #nav_sections a {
    display: block;
    padding-top: 7px;
    height: 30px;
    text-align: center;
    float: left;
    border-left: 1px solid #e0e1e2;
    border-top: 1px solid #d2d2d2;
}

#nav_sections a#portfolio_nav_print {
    border-right: 1px solid #d2d2d2;
}

#nav_sections a#portfolio_nav_websites, #nav_sections a#portfolio_nav_brand, #nav_sections a#portfolio_nav_print {
    width: 90px;
}

/* SUB NAVIGATION CURRENT PAGE STYLING */

#portfolio_nav #nav_sections.web a#portfolio_nav_websites{
    background-color: #f4f8fa;
}

#portfolio_nav #nav_sections.brand a#portfolio_nav_brand{
    background-color: #f4f8fa;
}

#portfolio_nav #nav_sections.print a#portfolio_nav_print{
    background-color: #f4f8fa;
}


/* PORTFOLIO NEXT and PREV buttons */
p#portfolio_nav_prev, p#portfolio_nav_next, a#project_nav_prev, a#project_nav_next
{
    width: 21px;
    height: 65px;
    top: 50px;
}

p#portfolio_nav_prev
{
    display: none;
}


p#portfolio_nav_prev, a#project_nav_prev {
    background: url(../images/portfolio/btn_portfolio_prev.gif) no-repeat top right;
    position: absolute;
    z-index: 1;
    left: -21px;
}

p#portfolio_nav_next, a#project_nav_next {
    background: url(../images/portfolio/btn_portfolio_next.gif) no-repeat top right;
    position: absolute;
    z-index: 1;
    right: -21px;
}

p#portfolio_nav_next:hover, p#portfolio_nav_prev:hover {
    background-position: top left;
}

/* GALLERY WINDOW */

#gallery
{
    width: 940px;
    background-color: #f4f8fa;
    padding: 15px 0 20px 0;
    border-left: solid 1px #d2d2d2;
    border-right: solid 1px #d2d2d2;
    border-bottom: solid 1px #d2d2d2;
    margin: 0 0 30px 0;
    float: left;
}

#gallery_frame, #gallery_strip
{
    margin: 0;
    padding: 0;
}


#gallery_frame {
    width:  940px;
}

#gallery_strip div.project div.gallery_data a{
    margin-left: 10px;
    padding-top: 5px;
    padding-left: 20px;
    width: 156px;
    height: 26px;
    float: left;
    clear: left;
    background: url(../images/portfolio/btn_view.gif) no-repeat top right;
}


#gallery_strip div.project {
    width: 205px;
    height: 430px;
    float: left;
    margin: 0 15px 0 15px;
    text-align: left;
    display: inline;
}

#gallery_strip div.project div.gallery_data{
    height: 220px;
    position: relative;
    top: 200px;
}

#gallery_strip div.project div.gallery_data a{
    position: absolute;
    bottom: 0;
    left: 0px;
}

#gallery_strip div.project h5{
    position: absolute;
    width: 180px;
        top: 60px;
        left: 10px;
margin-bottom: 15px;
}

#gallery_strip div.project ul{
    position: absolute;
    top: 115px;
    left: 0;
    width: 170px;
    height: 100px;
    margin: 0 0 0 25px;
}

#gallery_strip div.project ul li{
    line-height: 20px;
}


#gallery_strip a img {
    float: left;
    margin-bottom: 10px;
}

#gallery_strip span.gallery_name {
    display: block;
    width: 203px;
}

#gallery_strip span.gallery_date {

    display: block;
    width: 203px;
}


/* PROJECT PAGE */


div#gallery ul#img_pages
{
    float: left;
    margin: 0 0 20px 20px;
}

div#gallery ul#img_pages li
{
    list-style-type: none;
    padding: 3px;
    float: left;
    width: 16px;
    height: 13px;
    border: solid 1px #0072BC;
    color: #0072BC;
    background-color: #FFF;
    margin: 0 3px 0 0;
    text-align: center;
}

div#gallery ul#img_pages li.img_selected
{
    color: #898989;
    border-color: #898989;
}

div#gallery ul#img_pages li:hover, p#portfolio_nav_prev, p#portfolio_nav_next, p#project_nav_prev, p#project_nav_next
{
    cursor: pointer;
    cursor: hand;
}

div#project_img_window
{
    width: 610px;
    float: left;
    clear: left;
    margin-left: 20px;
}


div#project_img_window, div#gallery ul#img_pages
{
    display: inline;
}


div#project_img_window img
{
    border: solid 1px #d2d2d2;
    margin: 0;
}

div#project_data
{
    float: right;
    width: 250px;
    padding: 0 20px 20px 0;
}

div#project_data h5,
div#project_data em.date,
div#project_data p,
div#project_data ul,
div#project_data a.url,
div#project_data em.source,
div#project_data em.company,
a.top
{
    width: 250px;
    float: left;
    clear: left;
}

div#project_data em.date,
div#project_data a.url,
div#project_data p,
div#project_data ul
{
    margin-bottom: 20px;
}

div#project_data h5.testimonial, div#project_data h5.tasks
{
    margin-bottom: 20px;
}

div#project_data em.source, div#project_data em.company
{
    margin-bottom: 0;
}


div#project_data ul
{
    list-style: inside;
    line-height: 20px;
}