/*
Main CSS for http://www.marcusk.co.uk
author: Marcus Kielly
date: 10/08/2010
http://www.marcusk.co.uk

This site uses the ""Sticky Footer Solution"" by Steve Hatcher
http://www.cssstickyfooter.com
*/

* {margin:0;padding:0;}

/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 30px;}  /* must be same height as the footer */

/* CLEAR FIX*/
.clearfix:after
{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;
}
/* End hide from IE-mac */

#footer
{
    position: relative;
    margin-top: -30px; /* negative value of footer height */
    height: 30px;
}

input.submit,
a:hover{
    cursor: pointer;
    cursor: hand;
}


/* CENTERING */
/*----------------------------------------------------------------------------*/

div#content,div#masthead_content {
    width: 940px;
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
}

div#footer_content {
    width: 940px;
    padding: 5px 10px 5px 10px;
    margin-left: auto;
    margin-right: auto;
}

body
{
    background-color: #ececec;
}

div#masthead_content
{
    height: 150px;
}

div#footer_content {
    height: 20px;
}

/* MASTHEAD */
/*----------------------------------------------------------------------------*/

h1#logo {
    position:relative;
    top:62px;
    left:0;
}

h1#logo a {
    display:block;
    height:52px;
    width:256px;
}

h1#logo a img{
    border:medium none;
    top:0;
    left:0;
    position:absolute;

}

div#nav_main{
    float: right;
}

div#nav_main ul li{
    font-size: 18px;
    text-align: right;
    display: inline;
    float: left;
    margin-left: 50px;
    text-decoration:none;
}

/* COMMON ELEMENTS */
/*----------------------------------------------------------------------------*/

/* HEADERS */

h1, h2, h3, h4, h5, h6
{
    margin-bottom: 10px;
}

/* BODY TEXT */

p, blockquote
{
    margin-bottom: 10px;
}

/* ANCHORS */
a
{
    outline: none;
    text-decoration: none;
}

a:hover
{
    text-decoration: underline;
}



/* LISTS */
.no_bullet
{
    list-style-type: none;
}

ul
{
    list-style: inside;
}

ol
{
    margin-left: 20px;
}

ul, ol, dl
{
    margin-bottom: 20px;
}

dl{
    text-indent: 10px;
} 

dt
{
    margin-top: 10px;
}


/* SLIDER */
/*----------------------------------------------------------------------------*/

div#intro{
    position: relative;
    height: 301px;
    padding-top: 12px;
    background: url('../graphics/colorstrip.jpg') top left repeat-x;
    margin-bottom: 40px;
}

div#portfolio,
div#gallery{
    width: 1035px;
    height: 301px;
    margin: 0 auto;
}

div#portfolio{
    background: url(./../graphics/loader.gif) 470px 120px no-repeat;
}

div#gallery_content{
    background: url(./../graphics/loader_gallery.gif) 330px 120px no-repeat;
}

div#gallery_content,
div#portfolio_content{
    padding: 0 0 0 25px;
    width: 935px;
    margin: 0 auto;
    float: left;
}

div#portfolio img{
    float: left;
    width: 690px;
    height: 300px;
}

div#gallery a#prev,
div#gallery a#next,
div#portfolio a#prev,
div#portfolio a#next{
    margin-top: 120px;
    width:29px;
    height: 39px;
    background: url('../graphics/btn_project_nav.png');
    background-repeat: no-repeat;
    text-indent: -9999px;
}

div#portfolio a#prev,
div#gallery a#prev{
    float: left;
}

div#portfolio a#next,
div#gallery a#next{
    float: right;
}

div#portfolio a#prev,
div#gallery a#prev{
    background-position: bottom left;
}

div#portfolio a#prev:hover,
div#gallery a#prev:hover{
    background-position: bottom right;
}

div#portfolio a#next,
div#gallery a#next{
    background-position: top left;
}

div#portfolio a#next:hover,
div#gallery a#next:hover{
    background-position: top right;
}


div#portfolio div#project_info{
    margin-top: 30px;
    width: 205px;
    float: right;
    display: inline;
    margin-right: 25px;
    text-shadow: 1px 1px 2px #74848b;
}

div#portfolio div#project_info h3{
    width: 205px;
    border: none;
}



div#project_info div#project_launch{
    position: absolute;
    margin: 0;
    bottom: 10px;
    height: 30px;
    width: 210px;
}

div#project_launch a,
div#project_info a.btn_shadow
{
    width: 102px;
    height: 26px;
    float: left;
    padding: 5px 0 0 0;
    background: url('../graphics/btn_launch.png') top left no-repeat;
    text-align: center;
    text-decoration: none;
}

div#project_launch a#visit_site{
    margin-right: 5px;
}

div#project_launch a:hover,
div#project_info a.btn_shadow:hover{
    background-position: top right;
}

/* MAIN CONTENT AREA */
/*----------------------------------------------------------------------------*/

div#main_col{
    float: left;
    width:620px;
    margin-bottom: 40px;
}

div#services, div#about, div#how{
    float: left;
    clear: left;
    margin-bottom: 60px;
}

h2{
    width:100%;
    float: left;
    padding-bottom: 10px;
    border-bottom: 1px solid #d3d4d5;
    margin-bottom: 40px;
}

div#about img{
    float: left;
    margin-right: 20px;
}

div#services div{
    width: 240px;
    padding-right: 50px;
    float: left;
    margin-bottom: 20px;
}

div#services div.row{
    width: 590px;
    padding: 0;
    float: left;
    clear: left;
}

div#services div h3{
    padding-left: 60px;
    padding-top: 10px;
    height: 43px;
    background-image: url('../graphics/icons.gif');
    background-repeat: no-repeat;
}

h3#design{
    background-position: 0px -37px;
}

div#services div h3#cms,
div#services div h3#web_apps{
    height: 53px;
    padding-top: 0px;
}

div#services div h3#cms{
    background-position: 0px -90px;
}

h3#e_commerce{
    background-position: 0px -145px;
}

div#services div h3#web_apps{
    background-position: 0px -196px;
}

/* HOW I WORK */
/*----------------------------------------------------------------------------*/
div#how h2{
    width: 590px;
}

div#how div.slider_window {
    width: 590px;
    overflow: hidden;
}

div#how div.slider{
    width: 1770px;
    height: 200px;

}

div#how div.slider div{
    float: left;
    width: 590px;
    height: 250px;
    background-color: #FFF;
}

div#how div.slider div p,
div#how div.slider div h3{
    padding: 20px 0 0 20px;
    float: left;
    width: 350px;
}

div#how div.slider img{
    float: right;
}


div#how div.slider_nav{
    width: 100px;
    float: left;
    clear: left;
}

/* SUB COLUMN */
/*----------------------------------------------------------------------------*/
div#sub_col{
    width: 230px;
    float: right;
}

div#sub_col div#project_info div{
        width: 230px;

}

div#contact, div#skills, div#agency{
    float: right;
    clear: right;
    margin-bottom: 20px;
}

div#agency img{
    margin: 10px 0 20px 0;
}


div#skills h3, div#contact h3, div#agency h3{
    width: 100%;
    border-bottom: 1px solid #d3d4d5;
    padding: 20px 0 5px 0;
    margin-bottom: 20px;
}

div#skills dt{
    float: left;
    clear: left;
    text-align: center;
    text-indent: 0;
    padding: 4px 0 0 0;
    width: 58px;
    height: 23px;
    background-color: #E5EFF1;
    border: 1px solid #5CA1AC;
    /* border radius */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;

}

/*CONTACT FORM(first in markup to utilise cascade*/
div#contact{
    position: relative;
    width: 230px;
}

label{
    width: 230px;
    float: left;
    margin-bottom: 5px;
}

input.text, textarea{
    border: none;
    float: right;
    width: 220px;
    margin: 0 0 20px 0;
}

input.text{
    height: 27px;
    padding-top: 3px;
}

textarea{
    height: 140px;
    padding-top: 10px;
}

input.text, textarea{
    padding-left: 10px;
    /* border radius */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;

    /* drop shadow */
    box-shadow: inset 3px 3px 5px #d1d5d6;
    -webkit-box-shadow: inset 3px 3px 5px #d1d5d6;
    -moz-box-shadow: inset 3px 3px 5px #d1d5d6;

    /* required to fix chrome shadow/radius combo bug*/
    border:2px solid #ececec;
}

.shadow{
    /* drop shadow */
    box-shadow: 3px 3px 5px #d1d5d6;
    -webkit-box-shadow: 3px 3px 5px #d1d5d6;
    -moz-box-shadow: 3px 3px 5px #d1d5d6;
}

input.submit{
    border: none;
    float: right;
    text-align: center;
    padding-bottom: 4px;
    width: 67px;
    height: 24px;
    background: url('../graphics/btn_submit.gif') top left no-repeat;
}

input.submit:hover{
    background-position: top right;
}

div#agency a#btn_agency{
    width: 230px;
    height: 30px;
    float: left;
    padding-top: 7px;
    text-align: center;
    background: url('../graphics/btn_agency.gif') top left no-repeat;
    text-decoration: none;
}

div#agency a#btn_agency:hover{
    background-position: top right;
}

div#project_info h3{
    padding-bottom: 5px;
    border-bottom: 1px solid #d3d4d5;
}

div#project_info div{
    margin-bottom: 40px;
    float: left;
    clear: left;
}

div#skills dd{
    text-indent: 0;
    width: 150px;
    padding-top: 10px;
    margin: 0 0 20px 80px;
}

span.error{
    position: absolute;
    margin-top: 5px;
    left: -130px;
    display: block;
    padding-right: 10px;
    background: url('../graphics/error.png') right no-repeat;
}

span.error b{
    float: left;
    width: 100px;
    padding: 10px;
    border-top:2px solid #bd2a30;
    border-bottom:2px solid #bd2a30;
    border-left:2px solid #bd2a30;
    background-color: #fcdedd
}

a.btn_shadow{
    text-shadow: 1px 1px 2px #295b65;
}

a.btn_shadow:hover{
    text-shadow: 0px 0px 2px #295b65;
}



/* GALLERY */
/*----------------------------------------------------------------------------*/

div.pagination_container{
    display:block;
    height: 22px;
    margin-bottom: 20px;
    padding-left: 5px;
}
div.pagination {
    float: left;
    /* border radius */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    background-color: #1a82f7; /* fallback color
   background-image: url(images/linear_bg_2.png); /* fallback image */
    background-image: -moz-linear-gradient(100% 100% 90deg,#fcfdfd, #d4e1e6 );
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fcfdfd), to(#d4e1e6));
    border: 1px solid #878d91;

}

div.pagination a{
    height: 17px;
    width: 20px;
    float: left;
    padding-top: 3px;
    text-align: center;
}

div.pagination a.current_page{
    background-color: #ED1C24;
    background-color: #1a82f7; /* fallback color*/
    background-image: url(images/linear_bg_2.png); /* fallback image */
    background-image: -moz-linear-gradient(100% 100% 90deg,#eb1c24, #b4151b );
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eb1c24), to(#b4151b));
}

div.pagination a.current_page.first{
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
    border-top-left-radius: 5px;

    -moz-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

div.pagination a.current_page.last{
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-right-radius: 5px;

    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-bottom-right-radius: 5px;
}


/* FOOTER */
/*----------------------------------------------------------------------------*/
div#footer_content{
    border-top: 1px solid #d3d4d5;
}
div#footer_content h2{
    width: 100px;
    border-bottom: none;
    padding: 0;
    float: left;
}

div#footer_content p{
    margin-top: 5px;
    padding-top: 10px;
    float: left;
}

div#footer a#here{
    width: 42px;
    height: 23px;
    float: left;
    padding: 10px 0 5px 5px;
    margin: 5px 0 0 5px;
    background: url('../graphics/icons.gif') 0 0 no-repeat;
}


div#four_oh_four h1{
    border-bottom: 1px solid #d3d4d5;
}