/* These are for basic elements */
html{ /* is an element! */
background: #111;
}
a.hidden{
display:none;
}
body{ /* Because I've styled my , I can use my as a container, saving me a :) */
position: relative;
margin: auto;
padding-bottom: 50px;
width: 780px;
font: .9em/1.5 "Calibri", "Bitstream Vera Sans", Arial, helvetica, sans-serif;
background: #111 url(images/cross-hatch.gif) top repeat-x;
color: #999;
}
p{
margin: 0 0 10px 0;
padding: 0;
}
a{
text-decoration: none;
border-bottom: 1px dotted #333;
color: #35A0C2;
overflow: hidden;
outline: none;
}
a:hover, a:focus{
color: #A7C691;
border: 0;
}
a:active{
color: #FFF;
}
acronym{
border-bottom: 1px dotted #333;
cursor: help;
}
code{
font-size: 11px;
}
strong{
font-weight: bold;
}
/* These are my header styles */
h1{
width: 200px;
font-size: 30pt;
}
h1 a{
border: 0;
}
h2{ /* Using image replacement so screen readers and bots get hypertext niceness, high functioning users get aesthetic loveliness :) */
padding: 25px 0;
width: 780px;
height: 36px;
border-top: 2px solid #222;
border-bottom: 2px solid #222;
font-size:24pt;
font-weight:normal;
}
h2 a#me {
float: left;
border: 0;
margin-right: 1em;
}
a.sw {
float: right;
border: 0;
margin-right: 1em;
}
h2 em{
color: white;
font-style: normal;
}
h2#intro{
min-height: 180px;
}
h2#profile{
}
h2#work{
height: 107px;
}
h2#free-thinking{
height: 106px;
}
h2#in-touch{
}
h3{
margin: 0 20px 10px 0;
width: 200px;
float: left;
height: 24px;
font-size: 18pt;
font-weight:normal;
}
.column h3{
}
#profile-wrap h3{
float: none;
}
h4, legend{
margin-top:15px;
margin-bottom: 10px;
font-size: 1.5em;
color: #666;
}
h4 a{
border: 0;
}
/* This is all stuff for General Layout */
#header{
position: relative;
padding: 80px 5px 25px 5px;
}
/* My navigation */
#header ul{
position: absolute;
right: 0;
bottom: 0;
line-height: 1.0;
}
#header ul li{
margin-left: 20px;
font-size: 1.1em;
float: left;
}
#header ul li a{
display: block;
padding-bottom: 25px;
border: 0;
}
#header ul li.current_page_item a, body#work-page #header ul li.page-item-4 a, body#blog-page #header ul li.page-item-5 a{
background: url(images/active-nav.gif) bottom no-repeat;
color: #FFF;
cursor: default;
}
.module{ /* A nice generic "container" which can be used for separating content up */
padding: 25px 0;
border-bottom: 2px solid #222;
}
.content{
width: 560px;
float: right;
}
p.meta{
margin: 0;
}
p.elapse, p.note {
color: #555;
font-size: 70%;
}
dl.publications p{
color: #555;
font-size: 90%;
}
dl.publications h5 {
font-size: 100%;
margin-top: 1em;
}
dl.times dt {
padding: 2px 2px;
background: #161616;
float:left;
padding-right:1.5em;
}
dl.times dd {
min-height:5ex;
margin-left: 4.5em;
}
dl.ranges dt {
padding: 2px 2px;
background: #161616;
float:left;
padding-right:.5em;
width: 5em;
}
dl.ranges dd {
min-height:5ex;
margin-left: 6.5em;
}
dl.contact dt {
padding: 2px 2px;
background: #161616;
float:left;
padding-right:.5em;
width: 8em;
}
dl.contact dd {
min-height:5ex;
margin-left: 9.5em;
}
a.more-link, a.comment-link{
white-space: nowrap;
border: 0;
}
ol.compact {
margin-top: -.5em;
}
ol.compact li {
list-style-type: square;
margin-left: 1.5em;
}
a.more-link{
padding: 2px 5px;
background: #161616;
float:right;
}
a em {
font-style:normal;
padding: 2px 1px;
background: #161616;
}
em{
color:#CCCCCC;
}
strong {
color: white;
}
ol.work-list{
margin-right: -20px;
}
ol.work-list li{
margin: 0 20px 20px 0;
float: left;
}
ol.work-list li a{
border: 0;
}
ol.work-list li a img{
display: block;
padding: 1px;
width: 163px;
height: 80px;
border: 4px solid #161616;
}
ol.work-list li a:hover img, ol.work-list li a:focus img{
border-color: #222;
}
ol.hfeed{
}
ol.hfeed li{
margin-bottom: 10px;
}
ol.old-posts{
margin-right: -20px;
}
ol.old-posts li{
margin-right: 20px;
width: 173px;
/* float: left; */
}
ol.old-posts li img{
margin-left: -1px;
float: none;
width: 163px;
}
img.blog-image, .entry-content img{
margin: 0 0 10px 20px;
padding: 1px;
width: 163px;
border: 4px solid #161616;
float: right;
}
#profile-wrap{
margin-right: -40px;
padding-bottom: 25px;
}
.column{
margin: 25px 40px 0 0;
width: 233px;
float: left;
}
#tags{
margin-right: 20px;
width: 366px;
float: left;
}
#tags p{
line-height: 1.0;
}
#tags a{
border: 0;
}
ol.comment-list li{
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #222;
}
img.gravatar{
margin: 0 20px 0 0;
width: 50px;
height: 50px;
border: 4px solid #161616;
float: left;
}
div.comment{
width: 480px;
float: right;
}
img#full-work{
display: block;
margin-bottom: 10px;
padding: 1px;
width: 550px;
height: 389px;
border: 4px solid #161616;
}
#work-description{
width: 350px;
float: left;
}
#services{
margin: 0 0 20px 20px;
padding: 10px;
width: 153px;
border: 4px solid #161616;
float: right;
}
#services ul{
margin-top: -10px;
}
#services ul li{
padding: 0 5px 0 10px;
background: url(../images/divide.jpg) left no-repeat;
}
ul.image-switch{
text-align: right;
}
ul.image-switch li{
display: inline;
padding: 0 5px 0 10px;
background: url(../images/divide.jpg) left no-repeat;
}
ul.image-switch li.first, #services ul li.first{
padding-left: 0;
background: none;
}
fieldset#search{
width: 173px;
float: right;
}
label{
display: block;
margin: 3px 20px 0 0;
width: 60px;
float: left;
text-align: right;
font-weight: bold;
cursor: pointer;
cursor: hand;
}
textarea, .textbox{
margin-right: 0;
padding: 5px;
border: 1px solid #222;
background: #000;
color: #FFF;
font: 1.0em/1.5 "Lucida Grande", Helvetica, Arial, Serif;
vertical-align: middle;
}
textarea:focus, .textbox:focus{
border: 1px solid #333;
background: #111;
}
textarea{
width: 465px;
float: left;
}
input#submit{
margin-left: 78px;
}
#footer{
margin-top: -2px;
border-top: 2px solid #222;
padding: 15px 0;
}
#footer p{
margin: 0;
}
#footer, #footer a{
color: #666;
}
/* This is for clearing floats */
.module, ol.work-list, ol.hfeed li, #profile, #profile-wrap, ol.comment-list li, form p, .entry-content, ul.tag-list{
display: inline-block;
_height: 1%;
}
.module:after, ol.work-list:after, ol.hfeed li:after, #profile:after, #profile-wrap:after, ol.comment-list li:after, form p:after, .entry-content:after, ul.tag-list:after{
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
/* Added post-launch */
p#skip-nav{
margin: 0;
}
p#skip-nav a{
position: absolute;
top: 9px;
left: 0;
display: block;
padding: 5px 0 10px 0;
width: 780px;
border: 0;
text-align: center;
font-weight: bold;
line-height: 1.0;
color: #111;
}
h4.unfold a {
display: block;
padding-top: 5px;
padding-bottom: 5px;
border: 0;
line-height: 1.0;
}
/*
.closed {
display:none;
}*/
h4.unfold a:hover, h4.unfold a:focus {
background: #191919 url(images/skip.gif) bottom no-repeat;
color: #FFF;
}
p#skip-nav a:hover, p#skip-nav a:focus{
background: #191919 url(images/skip.gif) bottom no-repeat;
color: #FFF;
}
ul.client-list, ul.tag-list{
margin-right: -20px;
}
ul.client-list li, ul.tag-list li{
margin: 0 20px 10px 0;
width: 173px;
float: left;
font-size: 1.25em;
color: #555;
}
img.large-image{
margin-left: 0;
width: auto;
float: none;
}
li {
}