html, {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
font:70% 'Lucida Grande',Verdana, Helvetica, sans-serif;
}
p {
line-height: 200%;
}
h1 {
margin: 0;
padding: 30px;
font-size: 150%;
color: #000;
text-indent: -9000px;
}
h2 {
margin: 10px 0 10px 0;
padding: 2px;
font-size: 200%;
text-transform: uppercase;
color: #000;
background: none;
}
h3 {
padding: 2px;
font-size: 150%;
text-transform: uppercase;
color: #000;
margin: 10px 5px 0 5px;
}
#container {
position: relative;
min-height: 100%;
height: 100%;
voice-family: "\"}\"";
voice-family: inherit;
height: auto;
}
/* main wrapper that holds it all centrally */
#wrapper {
position: relative;
width:890px;
margin:0 auto;
background-color: #fff;
min-height: 100%;
padding: 0 10px 10px 10px;
}
/* default masthead holding the banner and mainNav */
#header {
width: 890px;
height: 165px;
margin: 15px 0 30px 0;
background:url(img/header.gif);
}
/* now the three main columns, named in order of importance and display when styles switched off */
#primaryContent {
float:left;
width:850px;
display:inline;
margin: 0 20px 20px 20px;
}
/* note here that specifying threeColLayout in the body will activate the following div instead of the default primaryContent */
#threeColLayout #primaryContent {
float: left;
width:430px;
margin: 0 0 20px 155px;
}
/* note here that specifying twoColLayout in the body will activate the following div instead of the default primaryContent */
#twoColLayout #primaryContent {
width:610px;
float:left;
margin: 0;
}
/* just incase twoColLayout is specified in body, and secondaryContent is left in, we turn it off - not ideal, but it works */
#twoColLayout #secondaryContent {
display: none;
}
#secondaryContent{
float:left;
width: 100px;
margin: 0;
}
#sideContent{
float:right;
width:260px;
margin: 0px 0 0 0;
}
/* just incase oneColLayout is specified in body, and these are left in, we turn them off - not ideal, but it works */
#oneColLayout #secondaryContent, #oneColLayout #sideContent {
display: none;
}
/* twoColContent - used to span two right-hand columns - ONLY LEAVE THIS IN IF I DISCUSS IT - box used only if no selector */
#twoColContent{
width:555px;
float:left;
margin: 0 0 20px 195px;
}
#footer{
position: absolute; left: 185px; top: 1250px;
bottom: 0;
width: 890px;
height: 35px;
background: #000;
padding: 0px;
}
#footer p {
margin: 0px 10px 0 0;
text-align: center;
padding: 5px 4px 4px 0;
color: #fff;
font-weight: bold;
}
#footer a:link, #footer a:visited {
color: #588da6;
}
#footer a:hover {
color: #82d0e4;
background: #;
}
/* image control. First we define stuff common to ALL images on the page. It is then up to other styles to override these. By default, all images will have a 2px border, and bottom and right margins of 5px. They will all float left. */
img {
float: left;
margin: 0px 0 10px 0px;
border: 0;
}
/* For any images in the default boxes - the pencil icons - I don't want the 2px border. So I set border to 0 */
.default img {
border: 0;
}
/* For these larger images, I don't want them to float, for that causes the h3 above to be pushed to the right. I also declare a top margin to space the header and image apart, and also increase the border width slightly. We also set it to display:block so that if body id is twoColLayout, the image will force the header and other bits to wrap around it */
.mainImage {
display: block;
float: none;
margin-top: 4px;
border: none;
}
h3.section_head { border-bottom:2px solid #000; font-size:16px; text-transform:uppercase; color:#000; margin-bottom:15px; font-family:
"Trebuchet MS", "Helvetica Condensed", Arial Narrow, "Helvetica", Arial, sans-serif;}
.section_head
/* IMAGES
------------------------------------------------------------ */
img.jawbreaker { border:none; margin:60px 1000px 60px 0px; padding-top: 10px; }
img.about { position:relative; }
/* LAYOUT *FUCK SEMANTICS HERE*
------------------------------------------------------------ */
/*div#container { width:810px; margin:0 auto; position:relative; }
div#content_wrapper { overflow:hidden; padding-top:20px; }
.gutter { margin-right:30px; }
.span1_2 { width:465px; float:left; }
.span1_3 { width:300px; float:left; }
.span2_3 { width:630px; float:left; }
.span1_6 { width:140px; float:left; }
.span1_6.gutter { margin-right:20px; }
.post_body,
.review_body { float:none; }
/* NAV ACCESS
------------------------------------------------------------
ul#nav_access { position:absolute; top:-9999px; left:-9999px; }
ul#nav { margin:0; list-style:none; background:#000; overflow:hidden; height:50px; clear:both; position:relative; width:850px; width:100%; }
ul#nav li { float:left; margin:0; text-indent:-9999em; height:50px; }
ul#nav li a { display:block; height:50px; background:url(img/nav.png) no-repeat top left; }
ul#nav li.home a { width:114px; }
ul#nav li.home a:hover,
ul#nav li.home a:focus { background-position:0 -50px; }
ul#nav li.home a.cur { background-position:0 -103px; }
ul#nav li.about a { width:114px; background-position:-114px 0; }
ul#nav li.about a:hover,
ul#nav li.about a:focus { background-position:-114px -49px; }
ul#nav li.about a.cur { background-position:-114px -103px; }
ul#nav li.work a { width:101px; background-position:-228px 0; }
ul#nav li.work a:hover,
ul#nav li.work a:focus { background-position:-228px -49px; }
ul#nav li.work a.cur { background-position:-228px -103px; }
ul#nav li.blog a { width:95px; background-position:-335px 0; }
ul#nav li.blog a:hover,
ul#nav li.blog a:focus { background-position:-335px -49px; }
ul#nav li.blog a.cur { background-position:-335px -103px; }
ul#nav li.contact a { width:151px; background-position:-430px 0; }
ul#nav li.contact a:hover,
ul#nav li.contact a:focus { background-position:-430px -49px; }
ul#nav li.contact a.cur { background-position:-430px -103px; }*/
#nav {
background:#000;
margin:0 auto;
margin-top:0px;
width:890px;
height:30px;
position:relative;
color:#333;
clear:both;
padding-top: 10px;
}
#mainNav
{
margin: 0px 0 10px 62px;
padding: 0;
width: 800px;
height: 50px;
font-weight: bold;
font-size: 150%;
}
#mainNav ul
{
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#mainNav li
{
display: block;
background: #000000;
margin: 0;
padding: 0;
float: left;
width: auto;
}
#mainNav a
{
color: #6aaac1;
display: inline;
width: auto;
text-decoration: none;
background: none;
margin: 0;
padding: 15px 15px;
border-right: 0px;
}
#mainNav a:hover, #mainNav a:active { color: #82d0e4; }
#mainNav a.active:link, #mainNav a.active:visited
{
position: relative;
z-index: 102;
background: none;
color: #fff;
font-weight: bold;
}
/* Highlighting the current page */
body.home #mainNav a#home, body.links #mainNav a#links, body.work #mainNav a#work, body.about #mainNav a#about, body.contact #mainNav a#contact {
color: #fff;
text-decoration: underline;
}
body.home #mainNav a:hover#home, body.gallery #mainNav a:hover#gallery, body.contact #mainNav a:hover#contact {
color: #030e3c;
}
#linkList {
color: #588da6;
line-height: 100%;
}
#linkList a {color: #588da6; text-decoration: none;}
#linkList a:visited {color: #0c4f6e;}
#linkList a:hover {color: #bc857e; text-decoration: underline;}
/*#linkalot h4 {color: #5c75c5; font-size: 140%;}
#linkalot a {color: #8fadd0; font-size: 140%; text-decoration: none;}
#linkalot a:visited {color: #5c75c5;}
#linkalot a:hover {color: #bc857e; text-decoration: underline;}
Begin lselect styles */
#linkList #lselect {
font-style: italic;
}
#linkList #lselect h3 {
background: #000;
margin: 0px 0px 0px 0px;
width: 200px; height: 68px;
}
#linkList #lselect h3 span {
display: none;
}
#linkList #lselect a {display: block; font-style: normal; font-weight: bold;}
.sideNav {
width:250px;
margin: 0px 0 0 10px;
padding: 0px 0 5px 0;
background: #FFF;
}
.sideNav h3 {font-size:16px; text-transform:uppercase; color:#000; margin-bottom:10px; font-family:"Trebuchet MS", "Helvetica Condensed", Arial Narrow, "Helvetica", Arial, sans-serif;
}
.sideNav p { background: #d5e2e9; padding: 5px;
}
.sideNav h2 {
margin: 0;
padding: 0 5px 10px 5px;
font-size: 160%;
color: #909090;
}
.sideNav ul {
list-style-type: none;
margin: 0px 0px 0px 0px; padding: 0px;
}
.sideNav ul li {
padding: 5px 0px 5px 0px;
}
.sideNav a { font-style: normal; color:#588da6; font-weight: bold; text-decoration: none;}
.sideNav a:visited {color: #4eb3cf;}
.sideNav a:hover {color: #0c4f6e; text-decoration: underline;}
.thumbnails img{
margin: 10px 10px 10px 10px;
border: 1px solid #787878;
}
a {
color: #588da6;
}
a:visited {color: #4eb3cf;
}
a:hover {color: #0c4f6e;
}
#flickr a img {
float:left;
margin:0 0px 8px 8px;
background:#000;
padding:1px;
width:70px;
height:70px;
}
#flickrb a img {
float:left;
margin:0 0px 8px 8px;
background:#000;
padding:1px;
width:220px;
height:320px;
}
.recent_work { position:relative; background:url(img/rw_bg.png) no-repeat right bottom; margin-bottom:30px; overflow:hidden; }
.recent_work h2 { padding-left:410px; position:relative; bottom:-30px; margin-top:-30px; }
.recent_work h3 { padding-left:360px; padding-bottom:0px; padding-top:0px; margin-bottom:5px; margin-left:15px; }
.recent_work p { padding-left:360px; padding-bottom:120px; padding-top:0px; margin-bottom:5px; margin-left:15px; }
.recent_work img {
border: 2px solid #000;
}
.more_work { position: relative; margin-bottom:30px; }
.more_work img { border: 1px solid ; margin:0px 20px 10px 0px;
}
}
}