﻿
    /*  
        JEANS DAY JOB 
        www.jeansdayjob.co.uk
        
        /// STYLES
        = Default Styles
        = Custom styles
        = Intro Box
        = Feature Box
        = Welcome Box
        = FindMe Box
        = Services
        = News
        = Recent Work
        = Contact Me
    */
    
    /* =Default Styles
    -----------------------------------------*/
    a { text-decoration:none; color:#999;}
    a:hover {text-decoration:underline;}
    a img {text-decoration:none;}
    img {border:0}
    body { background:#4D2D1E url('../img/bg_wallpaper.jpg') repeat; font-size:90%; font-family:'lucida sans',arial Arial;}
    body #wrap {width:728px; margin:0px auto;}
    body .panel {float:left; width:728px;}
    .clr {clear:both}
    .clrsml {clear:both; height:1px; line-height:1px;}
    .floatLeft {float:left}
    .floatRight {float:right}
    h1 { font-family:Georgia; color:#444; font-weight:normal; font-size:170%; margin:5px 0px 5px 0px;}
    h2 { font-family:Georgia; color:#444; font-weight:normal; font-size:130%; margin:5px 0px 5px 0px;}
    h3 { font-family:'lucida sans',arial; color:#444; font-weight:bold; font-size:80%; margin:5px 0px 2px 0px; text-transform:uppercase}
    .tabholder {position:relative; width:728px;}
    
    /* = Custom styles
    -----------------------------------------*/
    .rightlabel{float:right; background:#FFF url('../img/bg_right_label.jpg') no-repeat top right; height:65px; width:222px; margin-bottom:0px; }    
    .rightlabel span {padding-left:37px; font-family:Georgia; color:#392115; font-size:130%; padding-top:23px; float:left;}
    
    .leftlabel{float:left; background:#FFF url('../img/bg_left_label.jpg') no-repeat top right; height:47px; width:236px; margin-bottom:0px; }    
    .leftlabel span {padding-left:70px; font-family:Georgia; color:#392115; font-size:130%; padding-top:10px; float:left;}
    
    a.getquotebtn {width:90px; height:90px; background:transparent url('../img/getquote.jpg') no-repeat scroll 0 0;  float:left;}
    a.getquotebtn:hover { background-image: url('../img/getquote.jpg'); background-position: -90px 0px;}
    
    .box {width:683px; float:left; display:inline; margin-left:25px; margin-top:5px; background:transparent url('../img/bg_boxbody.jpg') repeat-y;}
    .box .boxtop {width:683px; height:25px; background:transparent url('../img/bg_boxtop.jpg') no-repeat; float:left;}
    .box .boxbot {width:683px; height:25px; background:transparent url('../img/bg_boxbot.jpg') no-repeat; float:left;}
    .box img {width:650px; height:375px; margin-left:14px;}
    .box .content {width:650px; margin-left:20px; float:left; margin-top:10px;}
    .box .content .leftcontent {width:430px; float:left; background:transparent url('../img/dotted_divider.jpg') no-repeat; background-position:405px 7px;}
    .box .content .rightcontent {width:205px; float:left;}    
    .box .content span {color:#999; font-family:'lucida sans',arial; font-size:80%; line-height:150%;}
    
    a.tabportfolio {width:34px; height:85px; background: transparent url('../img/tab_portfolio.jpg') no-repeat;}
    a.tabportfolio:hover { background-image: url('../img/tab_portfolio.jpg'); background-position: -34px 0px;}
    
    a.tababout {width:39px; height:78px; background: url('../img/tab_about.jpg') no-repeat;}    
    a.tababout:hover { background-image: url('../img/tab_about.jpg'); background-position: -39px 0px;}
    
    a.tabcontact {width:39px; height:87px; background: url('../img/tab_contact.jpg') no-repeat;} 
    a.tabcontact:hover { background-image: url('../img/tab_contact.jpg'); background-position: -39px 0px;}
    
    a.backto {width:40px; height:100px; background: url('../img/tab_backto.jpg') no-repeat;} 
    a.backto:hover { background-image: url('../img/tab_backto.jpg'); background-position: -40px 0px;}    
    
     .portfoliomarker {width:40px; height:87px; background: url('../img/portfolio_marker.jpg') no-repeat;}
     .aboutmarker {width:40px; height:87px; background: url('../img/about_marker.jpg') no-repeat;}
     .contactmarker{width:30px; height:87px; background: url('../img/contact_marker.jpg') no-repeat;}    
        
    /* = Intro Box
    -----------------------------------------*/
    #intro {width:728px; height:389px; margin-top:55px; background: #9EB4A2 url('../img/bg_intro.jpg') no-repeat; position:relative;}
    #intro #speech {display:inline; font-family:Georgia, 'Trebuchet MS'; color:#333; margin-right:68px; margin-top:10px; width:200px; text-align:center;}
    #intro #speech .title {font-size:110%; margin-bottom:4px; color:#333; }
    #intro #speech .titlebottom {font-size:75%;}
    #intro #cornersign {height:120px;  width:210px; background: url('../img/bg_cornersign.jpg'); position:absolute; left:-42px; top:-44px;} 
    #intro .tabportfolio {position:absolute; left:728px; top:60px;}
    #intro .tababout {position:absolute; left:728px; top:145px;}
    #intro .tabcontact {position:absolute; left:728px; top:207px;}    
    
    /* = Feature Box
    -----------------------------------------*/
    #feature {width:728px; height:304px; background: #9EB4A2 url('../img/bg_feature.jpg') no-repeat;}
    #feature .panelItem {height:215px;left:0;position:absolute;top:0;width:587px;}
    #feature #featureinner {height:215px; width:587px; position:relative; margin:20px 0 0 95px;}
    #feature #bottompanel {height:34px; width:588px; background: url('../img/feature_bar.jpg') no-repeat; margin:0 0 0 94px; padding:7px 0 0 15px; color:#FFF; font-family:'lucida sans',arial; font-size:80%; } 
    #feature .controlButtons .prev {background:transparent url('../img/arrow-previous.gif') no-repeat scroll left top; cursor:pointer; float:left; height:10px; margin-right:6px; width:10px;}
    #feature .controlButtons .next {background:transparent url('../img/arrow-next.gif') no-repeat scroll left top; cursor:pointer; float:left; height:10px; width:10px; }
    #feature .controlButtons a:hover { background-position:0px 1px}
    #feature span {float:left;}
    #feature .controlButtons {float:right; margin-right:30px; margin-top:4px;}
    
    /* = Welcome Box
    -----------------------------------------*/
    #welcomebox {background:#FFF url('../img/bg_body.jpg') repeat-y; float:left;}
    #welcome {width:360px; float:left;}
    #welcome .welcometext {margin-left:40px; width:360px; padding-left:65px}
    #welcome #welcometexttop {display:inline;background:#FFF url('../img/bg_quote_left.jpg') no-repeat top left; padding-top:15px; float:left;}
    #welcome #welcometextbot {display:inline;background:#FFF url('../img/bg_quote_right.jpg') no-repeat bottom right; padding-bottom:20px; float:left;}
    #welcome span {color:#999; font-family:'lucida sans',arial; font-size:80%; line-height:150%;}
    
    /* = FindMe Box
    -----------------------------------------*/
    #findme {float:right; width:225px;} 
    #findme .findmebox {float:right; width:225px; height:55px; background:url('../img/contact_dots.jpg') no-repeat bottom left;}  
    #findme .findmebox .findmelogo{width:109px; height:40px; float:left; padding-top:6px;}
    #findme .findmebox .findmelogo img {float:right; margin-right:10px;}
    #findme .findmebox .findmetext {color:#999; font-family:'lucida sans',arial; font-size:80%; padding-top:8px; line-height:150%; width:116px; float:left;}
    
    /* = Services
    -----------------------------------------*/
    #services{background:#FFF url('../img/bg_body.jpg') repeat-y; float:left; display:inline; width:728px; height:auto;}
    #services span {color:#999; display:inline; font-family:'lucida sans',arial; font-size:80%; line-height:170%;}    
    #services #servicesbox {display:inline; width:683px; margin:30px 0 0 25px; float:left; height:311px; background: url('../img/bg_services.jpg') no-repeat top left; }
    #services #servicesbox #printdesign {display:inline;width:270px; height:205px; float:left;margin-left:50px; margin-top:65px; }
    #services #servicesbox #printdesign1 {float:left; width:135px;}
    #services #servicesbox #printdesign2 {float:left; width:135px;}
    #services #servicesbox #webservices {float:left; width:205px; margin-top:65px;} 
    #services #servicesbox #other {float:left; margin-top:65px;}
    
    /* = News
    -----------------------------------------*/
    #news {background:#FFF url('../img/bg_body.jpg') repeat-y; float:left; display:inline;}
    #news #newsbox {display:inline;width:683px; margin:-4px 0 0 23px; float:left; height:225px; background: url('../img/bg_news.jpg') no-repeat top left; }
    #news #newsbox #newsholder { float:left; margin-left:50px; margin-top:110px;} 
    #news #newsbox #newsholder .newsitem {color:#999; font-family:'lucida sans',arial; font-size:80%; padding-top:8px; line-height:150%; float:left;}
    #news #newsbox #newsholder .newsitem span{ font-weight:bold; margin-right:20px; width:90px; display:block; float:left;}
    
    /* = Recent Work
    -----------------------------------------*/
    #recentwork{ display:inline;background:#FFF url('../img/bg_body.jpg') repeat-y; float:left;}
    #recentwork #recentworkbox {display:inline; width:682px; margin:24px 0 0 23px; float:left; height:185px; background: url('../img/bg_recentwork.jpg') no-repeat top left; }
    #recentwork #recentworkbox span {margin-left:50px; margin-top :100px; color:#999; font-family:'lucida sans',arial; font-size:80%; padding-top:8px; line-height:150%; float:left;}
    #recentwork .portfoliomarker {position:absolute; left:728px; top:25px;}
    #recentwork .backto {position:absolute; left:728px; top:112px;}
    
    /* = About Me
    -----------------------------------------*/
    #aboutme {background:#FFF url('../img/bg_body.jpg') repeat-y; float:left;}
    #aboutme #aboutmebox {width:712px; margin:17px 0 0 0px; float:left; height:409px; background: url('../img/bg_aboutme.jpg') no-repeat top left; }
    #aboutme #aboutmebox span {margin-left:50px; margin-top:80px; color:#999; font-family:'lucida sans',arial; font-size:80%; padding-top:8px; line-height:170%; float:left;}
    #aboutme #aboutmebox #cvlabel {font-family:Georgia; color:#392115; font-size:130%; margin:35px 0 0 80px;}
    #aboutme #aboutmebox #pdf {margin-left:70px; margin-top:25px;}
    #aboutme #aboutmebox #downloads {margin-top:23px; color:#999; font-family:'lucida sans',arial; font-size:80%; line-height:170%; margin-left:10px; float:left; }
    #aboutme .aboutmarker {position:absolute; left:728px; top:23px;}
    #aboutme .backto {position:absolute; left:728px; top:110px;}    
    
     /* = Contact Me
    -----------------------------------------*/
    #contactme {background:#FFF url('../img/bg_body.jpg') repeat-y; float:left;}
    #contactme #contactmebox {width:725px; margin:17px 0 0 0px; float:left; height:452px; background: url('../img/bg_contactme.jpg') no-repeat top left; }
    #contactme #contactmebox span {margin-left:50px; margin-top:80px; color:#999; font-family:'lucida sans',arial; font-size:80%; padding-top:8px; line-height:170%; float:left;}
    #contactme #contactmebox #calllabel {display:inline; font-family:Georgia; color:#392115; font-size:130%; margin:35px 0 0 80px; float:left; width:240px;}
    #contactme #contactmebox #enquirylabel {font-family:Georgia; color:#392115; font-size:130%; margin:35px 0 0 80px; float:left; width:200px;}
    #contactme #contactmebox #details {display:inline; color:#999; font-family:'lucida sans',arial; font-size:80%; line-height:270%; margin-top:20px; margin-left:80px; float:left;}
    #contactme #contactmebox #details #innerdetailsleft {float:left; display:inline;  text-align:left; margin-right:10px; color:#666; }
    #contactme #contactmebox #details #innerdetailsright {float:left;}
    #contactme .contactmarker {position:absolute; left:728px; top:23px;}
    #contactme .backto {position:absolute; left:728px; top:110px;}
    #contactme #contactform {color:#666; font-family:'lucida sans',arial; font-size:80%; font-weight:bold; margin-left:105px; float:left; margin-top:20px;}
    #contactme #contactform label {width:75px; float:left; display:block; line-height:220%;}
    #contactme #contactform .text {line-height:220%; margin-top:5px; background:#FFF url('../img/bg_text.gif') no-repeat; border:0px; height:19px; width:211px; padding:0 0 0 5px; font-size:100%;} 
    #contactme #contactform .textlarge {line-height:220%; margin-top:5px; background:#FFF url('../img/bg_textlarge.gif') no-repeat; border:0px; height:81px; width:211px; padding:0 0 0 5px;} 
    #contactme #contactform .btn {width:66px; height:27px; background: url('../img/btn_submit.gif') no-repeat; border:0; margin:5px 0 0 0; padding:0;}
    #contactme #contactform .btn:hover{ background-position:0 1px;}
    
    /* = Footer
    -----------------------------------------*/
    .bodybottom {float:left; height:67px; width:728px; background:url('../img/bg_body_bot.jpg') no-repeat; margin-bottom:10px;}
    .bodybottom span {margin-left:80px; margin-top:20px; float:left;font-family:'lucida sans',arial;font-size:80%;color:#999;}
    
