/*   
Theme Name: Iamjohnlong
Theme URI: http://www.iamjohnlong.com/
Description: website design & development.
Version: 3.0
Author: John J. Long
Author URI: http://www.iamjohnlong.com/
*/

/* Reset Styles */

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
fieldset, img {
border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style:normal;
font-weight:normal;
}
ol, ul {
list-style:none;
}
caption, th {
text-align:left;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
abbr, acronym {
border:0;
}
a {
outline: none;
text-decoration: none;
}
/* End Reset */

/* Global Styles */

body {
background: #000 url(../images/new.jpg) repeat-y fixed top center;
font-family: helvetica, san serif;
}
a {
color:#09C;
}
a:hover {
color:#FFF;
}
a:visited {
color:#FFF;
}
#wrapper {
height: auto;
}
.go-to-top{
position: fixed;
top: 0;
right:20px;
left:auto;
}
.clear {
clear: both;
}
.layout {
width: 1000px;
margin: 0 auto;
}
#header {
background:url("../images/head.jpg") repeat-x scroll center top transparent;
height:180px;
padding:0 0 6px;
height: 180px;
width:100%;
}
.header {
width: 960px;
height: 180px;
}
#logo {
float: left;
width: 417px;
height: 134px;
background: url(images/logo.png) no-repeat 0 68px;
}
#logo h2 a {
display: block;
width: 196px;
height: 36px;
margin: 65px 0 0 15px;
text-indent: -999em;
}
#nav {
float:right;
height:50px;
margin:122px 0 0;
}
#nav ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}
#nav li {
float: left;
display: block;
}
#nav a {
color:#0099CC;
display:inline-block;
font-size:1.2em;
height:18px;
letter-spacing:0;
padding:2px 0 0 47px;
text-align:center;
text-decoration:none;
width:auto;
}
#nav-services a {
color:#00d6ef;
}
#nav-about a {
color:#00efa3;
}
#nav-contact a {
color:#00ef22;
}
#nav li span {
color:#fff;
display:block;
font-size:.65em;
text-align: right;
text-decoration:none;
width: auto;
margin: -5px 0;
}
#nav a:hover {
background-position: 0 134px;
}
#letsmeet {
background:url("../images/iamhead.png") no-repeat scroll 0 0 transparent;
height:330px;
margin:40px auto 40px;
width:930px;
}
#letsmeet p {
color:#FFFFFF;
font-size:1.4em;
padding:82px 380px 0 0;
}
#letsmeet a {
color: #0099CC;
}
#letsmeet ul.soc-icon {
display: inline;
}
#letsmeet ul.soc-icon li {
display: inline;
}
#letsmeet ul.soc-icon li a {
float: left;
width: 35px;
height: 35px;
background: url(../images/soc.png) no-repeat;
text-indent: -9999em;
margin: 20px 20px 0 0;
display: inline;
}
#letsmeet ul.soc-icon li.one a:hover {
background-position: 0 -35px;
}
#letsmeet ul.soc-icon li.two a {
background-position:-107px 0;
}
#letsmeet ul.soc-icon li.two a:hover {
background-position: -107px -35px;
}
#letsmeet ul.soc-icon li.three a {
background-position:-72px 0;
}
#letsmeet ul.soc-icon li.three a:hover {
background-position: -72px -35px;
}
#letsmeet ul.soc-icon li.four a {
background-position:-35px 0;
}
#letsmeet ul.soc-icon li.four a:hover {
background-position: -35px -35px;
}
#work {
width: 940px;
height: 650px;
background: #000;
color: #666;
clear:left;
height:322px;
margin:10px 0 0 30px;
overflow: hidden;
position:relative;
}
.content {
background:#000000;
clear:both;
float:left;
margin:0 0 40px 35px;
position:relative;
width:930px;
}
#col-one-wrapper {
float:left;
margin:0 0 40px;
width:482px;
}
#col-two-wrapper {
float:right;
margin:0 68px 0 0;
width:448px;
}
.content-two {
background:#000000 none repeat scroll 0 0;
float:left;
height:350px;
margin:0 0 40px 34px;
position:relative;
width:448px;
}
.content-three {
background:#000000 none repeat scroll 0 0;
float:left;
margin:0 0 40px 34px;
position:relative;
width:448px;
}
.clear {
clear: both;
}
.section {
position:relative;
height:350px;
overflow:hidden;
}
.section .sub {
position:relative;
float:left;
width:890px;
height:350px;
padding: 20px;
}
.section-two {
position:relative;
height:300px;
overflow:hidden;
}
.sub-two {
position:relative;
float:left;
padding: 20px;
color:#FFF;
}
.sub-two .thumbs li {
float:left;
height:115px;
margin:10px;
width:115px;
}
.section-three {
position:relative;
height:300px;
overflow:hidden;
}
.sub-three {
position:relative;
float:left;
padding: 20px;
color:#FFF;
}
.sub-three .thumbs li {
float:left;
height:115px;
margin:10px;
width:115px;
}
.section-four {
overflow: visible;
}
.section-four dl {
color: #fff;
}
.section-four dt {
background:transparent url(../images/arrow.gif) no-repeat scroll left top;
color:#0099CC;
font-size:1.1em;
padding:2px 0 10px 13px;
text-transform: uppercase;
}
.section-four dd {
margin: 0 0 10px;
font-size: 85%;
line-height: 1.4em;
}
.section .section-img {
position:relative;
float:left;
width:610px;
}
.section .section-info {
position:relative;
float: right;
width:260px;
}
.section .section-info a {
display:block;
font-size:0.8em;
margin:10px 0 0 12px;
}
.section .section-info p a {
display:inline;
font-size:1em;
margin: 0;
}
.section .sub h4 {
-moz-border-radius:2px;
background:#111 none repeat scroll 0 0;
color:#0099CC;
font-size:1.1em;
padding:5px 0 0 13px;
text-transform:uppercase;
}
.section .sub p {
-moz-border-radius:2px;
background:#111 none repeat scroll 0 0;
color:#FFF;
font-size:85%;
line-height:1.4em;
padding: 10px 12px;
margin: 4px 0 0 0;
}
.section-nav {
clear:both;
height:20px;
padding:18px 0 0;
position:relative;
}
.section-nav-next a, .section-nav-prev a {
color:#FFF;
padding: 0 0 0 23px;
text-transform: uppercase;
text-decoration: none;
font-size: 9px;
float: left;
margin: 0 6px 0 0;
width: 30px;
display: inline;
}
.section-nav-next a {
background: url(../images/down.gif) left top no-repeat;
}
.section-nav-prev a {
background: url(../images/up.gif) left top no-repeat;
}
.work {
position: relative;
height: 650px;
display: block;
overflow: hidden;
background: #000;
color: #666;
}
.preview {
position: relative;
height: 650px;
display: block;
overflow: hidden;
background: #000;
color: #666;
}
.next {
float: right;
}
.layout h2 {
margin:-25px 0 0 -25px;
padding: 0 0 0 20px;
color: #0099CC;
height: 60px;
font: normal bold 34px Helvetica, san serif;
text-align: left;
background: url(../images/banner.png) no-repeat left top;
line-height:55px;
width:400px;
}
.layout h2 span {
color: #fff;
}
.work p, .services p, .about p, .contact p {
margin: 0 0 15px;
padding: 0;
color: #666;
font: normal normal 11px/16px "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
text-align: justify;
}
/* End Global */

/* Contact Styles */
/* Contact Styles */


#contact_me {
float: left;
width: 630px;
}
.required {
color: #fff;
border-bottom: 1px dashed #c00;
}
.contact_wrapper {
padding: 30px;
height: 370px;
}
#contact_form input, #contact_form textarea {
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
border:medium none;
margin:0 0 10px;
padding:10px 0 2px 9px;
}
.contact_input {
position: relative;
width: 370px;
height: 50px;
}
.contact_input label {
color:#09C;
line-height: 30px;
text-transform: uppercase;
float:left;
width:90px;
}
#name_error, #email_error, #url_error, #verify_error {
position: absolute;
top: 12px;
right: 10px;
width: 16px;
height: 16px;
text-indent: -999em;
}
#text_error {
position: absolute;
top: 208px;
left: 10px;
padding: 0 0 0 26px;
background: url(images/form_error.png) no-repeat top left;
color: #666;
font: normal normal 14px Helvetica, Arial, sans-serif;
}
#name, #email, #url, #verify, #text {
width: 270px;
height: 20px;
color: #FFF;
font: normal normal 14px Helvetica, Arial, sans-serif;
background: #333;
}
#text {
height: 100px;
}
#name:focus, #email:focus, #url:focus, #verify:focus, #text:focus {
background: #666;
}
#submit {
background:#000000 none repeat scroll 0 0;
border:medium none;
color:#FFFFFF;
cursor:pointer;
display:block;
text-transform:uppercase;
float: right;
}
#submit:hover, #submit:focus {
color:#09c
}
#twitter_update_list {
margin: 0 0 30px;
}
#twitter_update_list li {
color:#FFFFFF;
margin:8px;
padding:15px 10px;
background: #111;
-moz-border-radius:4px;
}
#twitter_update_list li a {
color:#09C;
}
#twitter_update_list li a:hover {
color:#FFF;
}
/* End Contact */

#footer {
height:30px;
left:0;
width:100%;
background: #000;
border-top: 1px #333 dotted;
clear: both;
}
#footer .wrapper {
margin:8px auto 0;
width:920px;
}
#footer .wrapper li {
color:#FFFFFF;
display:inline;
float:left;
font-size:70%;
letter-spacing:0.5px;
padding:0 10px 0 0;
}
#footer .wrapper li a {
color:#666;
}
#footer .wrapper li a:hover {
color:#999;
}