/*
Description: Stylesheet for Freelance Web Designer and Developer Jamil Walker
Version: 2
Author: Jamil Walker
Author URI: http://www.jamilwalker.com/
*/

@import "reset.css";
@import "text.css";
@import "layout.css";

/* Header *************************/
#header {border-bottom: 2px solid #DEE2E2;height:50px;padding:0;position:relative;z-index:3;padding: 20px 0 0px}
#header h1 {margin:0;padding:0;position:absolute;top:27px; width: 155px; height: 26px; }
#header h1 a {margin:0;padding:0;color: #242f33;text-transform: uppercase;font-size: 20px; display: block; text-indent: -9999em;background: url("images/jw-logo.gif") no-repeat 0 0; width: 155px; height: 26px;  }
#header h1 a:hover {color: #242f33; /*#1a77a7;*/}

#header ul#nav {list-style-type:none;margin:0;padding:0;position:absolute;right:0px;top:30px;z-index:99;}
#header ul#nav li {display:inline;margin:0;padding:0;width: 100px;text-align: center;}
#header ul#nav li a {border-bottom: none;cursor:pointer;float:left;margin:0 0 0 25px;padding:0px;height: 100%;color: #000;/*242F33;*//* background: url(images/menu-bg.jpg) repeat 0 0; */z-index:99;font-size: 1.0em;font-weight: normal;text-transform: uppercase;}
#header ul#nav li a:hover, div#header ul#nav li a:focus, div#header ul#nav li a:active {border-bottom: 4px solid #1A77A7; color: #1A77A7; /*background-position:-150px 0;*/}
#header ul#nav li a.active, #header ul#nav li a.active:hover {border-bottom: 4px solid #000; color: #000; /*242F33*/; }

/* Tagline ************************/
#tagline{border-bottom: 0px solid #DEE2E2;margin-bottom: 20px;padding-bottom:20px; }
#tagline h2.banner{font-size:57px;margin:20px 0 0;color:#1a77a7}
#tagline p {font-size:18px;}

/* Home ***************************/
.recent-work{ margin-top: 30px; }
.recent-work strong{display:block;}

#about-me {padding: 0px 0px 6px; border-top: 0px solid #DEE2e2;margin-bottom: 0px;}
#services-list {padding: 0px 0 0 25px; border: 1px solid #DEE2E2;background: #242f33;}
#services-list ul.list li h4 {color: #fff;font-weight:normal;font-size: 1.2em; padding: 6px 0;}
#services-list ul.list li { padding-left: 25px; }
#services-list ul.list li {background: url('images/tick.gif') no-repeat scroll 0 9px;}

.contact-box { }
.contact-box h3 {font-size: 1.2em}
.request, .info {margin: 10px 0; padding: 20px; background: #dee2e2;}
.request p, .info p { margin-bottom: 0; }
.info a, .info strong{}
.info a:hover{border-bottom: 0px dotted #89999F;}
p.phone{}
p.email a {}

/* Contact Form ***************************/
.label {color: #49595F; text-align: left;font-weight:bold;}
.req {color: red;display:block;font-size:xx-small;}
.input input {width: 250px}
.input textarea {width: 350px;}
.input input.box, .input textarea.box {background: #DEE2e2;line-height:1.5;border:none;padding: 5px;margin-bottom: 10px;}

.input input.box:hover, .input textarea.box:hover {background: #eee;}
.input .submit {background: #1a77a7; color: #fff;padding: 8px 10px;width: 100px; font-size: 1.2em; text-transform: uppercase;border: none;}
.input .submit:hover {background: #242F33;cursor:pointer;}
ul.planner.list li.num1 {background: url("images/num1.jpg") no-repeat scroll 0 0px;padding: 0 0 0 35px;border:none;}
ul.planner.list li.num2 {background: url("images/num2.jpg") no-repeat scroll 0 0px;padding: 0 0 0 35px;border:none;}
ul.planner.list li.num3 {background: url("images/num3.jpg") no-repeat scroll 0 0px;padding: 0 0 0 35px;border:none;}
#wpcf7-f1-p11-o1.wpcf7 {padding: 10px 0 0;}

/* Work and Contact ***************************/
.work-title{margin-bottom: 15px;color: #1a77a7;}
.work-title.nopad {margin-bottom: 0px;}
.subcontractor {font-style: italic;font-size: 10px;}
.contact-title {margin-bottom: 15px; color: #242F33;}
.work-info, .contact-info {background: #DEE2E2;}
.work-info ul.list, .contact-info ul.list{margin-top:5px;}
.work-info ul.list li, .contact-info ul.list li {background: url("images/smallarrow-2.gif") no-repeat scroll 0 11px;}
.work-info ul.list h4 {color: #1a77a7; font-size: 12px; }

.work-item {margin: 15px 0 30px; padding-bottom: 15px; border-bottom: 1px dotted #DEE2E2;}
.work-item.last {border:none;}
.work-item .alpha, .work-item .omega {margin-bottom: 30px}
.contact-info strong, .work-item strong {display:block; font-size: 1.1em;}

.work-img {text-align:right;background:#fff none repeat scroll 0 0;padding:0;position:relative;width:620px;}
.work-img img {border: 1px solid #DEE2E2; padding: 5px;}
ul.items {background:#DEE2E2;list-style-type:none;margin:0;padding:5px 0 5px 5px;position:absolute;right:0px;top:-40px;z-index:2;}
ul.items li {display:inline;margin:0;padding:0;}
ul.items li.one a {background: url("images/btn_work_1.jpg") no-repeat scroll 0 0;border:none;display:block;float:left;height:24px;margin:0 5px 0 0;padding:0;width:25px;}
ul.items li.one a:hover {background: url("images/btn_work_1.jpg") no-repeat scroll 0 -24px;}
ul.items li.one a.selected {background: url("images/btn_work_1.jpg") no-repeat scroll 0 -48px;}
ul.items li.two a {background: url("images/btn_work_2.jpg") no-repeat scroll 0 0;border:none;display:block;float:left;height:24px;margin:0 5px 0 0;padding:0;width:25px;}
ul.items li.two a:hover {background: url("images/btn_work_2.jpg") no-repeat scroll 0 -24px;}
ul.items li.two a.selected {background: url("images/btn_work_2.jpg") no-repeat scroll 0 -48px;}
ul.items li.three a {background: url("images/btn_work_3.jpg") no-repeat scroll 0 0;border:none;display:block;float:left;height:24px;margin:0 5px 0 0;padding:0;width:25px;}
ul.items li.three a:hover {background: url("images/btn_work_3.jpg") no-repeat scroll 0 -24px;}
ul.items li.three a.selected {background: url("images/btn_work_3.jpg") no-repeat scroll 0 -48px;}
ul.items li.one a span, ul.items li.two a span, ul.items li.three a span {display:none;}

/* About **************************/
.about-info {background: #DEE2E2;}
.about-info p {margin-bottom: 0px;padding: 0px 20px; margin: 20px 0;}
.more-info {padding: 0px 20px; border-left: 1px dotted #242F33;margin: 20px 0;}
.about-info .description {}
.about-info ul.list{margin-top:5px;}
.about-info ul.list li {border: none;}
.about-info ul.list li {background: url("images/smallarrow-2.gif") no-repeat scroll 0 11px;}
.about-info .more-info .title{padding-bottom: 5px;border-bottom: 1px dotted #49595F; font-size: 1.2em}

.process {margin-top: 50px;}
.process .grid_4 p {margin-bottom: 0;}
.process small{font-weight: bold;display:block;font-size:12px;margin:0 0 9px}
.process img {padding: 8px; margin-bottom: 20px;border: 1px solid #DEE2E2;background: #DEE2E2;}
.process h4 {margin-bottom: 10px;color: #1a77a7; font-size: 16px; }

.photos {margin-top: 30px;}
.photos a {float:left; margin: 0 20px 14px 0px;padding: 3px;display:block;background: #fff;border: 1px solid #DEE2e2;}
.phots a.last{margin: 0 0 14px 0;}
.photos a:hover {border-color: #1A77A7;}
.photos img {float:left; margin: 0; padding: 0; width: 63px; height: 63px;}

/* Footer *************************/
#footer{margin-top: 30px;margin-bottom: 30px; padding: 20px 0;border-top: 6px solid #DEE2E2;}
#footer h4 {font-size:14px;font-weight:bold;margin:7px 0 3px;padding:0;}
#footer h4 a{color: #1a77a7;}
#footer p {margin: 0; padding: 0;}
#footer .copy {text-align: right;}

/* Misc ***************************/
h2.title {font-weight:bold;color: #242F33;}
h3.title {margin-bottom: 20px;color: #242f33;text-transform: uppercase;/*font-size: 1em;background: #242f33; padding: 8px 15px;float:left; display:block;font-weight:normal; */}
span.title {font-size: 1.2em;font-weight:bold;}
img.me {border: 1px dotted #DEE2E2; padding: 5px;}
img.lg-me {background: #fff; padding: 5px;margin-top: 3px;}
.innerpad {padding: 20px;}
.innerpad.top {padding: 12px 20px 0 0px;}
.border {border: 0px solid #DEE2E2;}
.resume a {font-size: 1.1em;}
.resume img{vertical-align: middle;}
.request h3, .info h3 {}
a.top {text-transform:uppercase;}

ul.list {list-style-type:none;margin:15px 0 15px;padding:0;}
ul.list li {background: url("images/smallarrow-1.gif") no-repeat scroll 0 11px;padding:0 0 0 17px;border-bottom: 1px dotted #242F33}
ul.list li.first {border-top: 0px dotted #242F33}
ul.list li.last {border:none;} 
ul.list h4{font-size: 1.1em;margin-bottom: 0;padding: 8px 0;}
ul.list em, ul.list p {display: none;}