/* web5 css for spayce.com (also accessible from spayce.net) */
/* copyright 2008 all rights reserved - alison harrison September 2008 */
/* The designer asserts the right to ownership of the design of this site */
/* The layout, look and feel, style and css may not be copied in entireity */
/* Feel free to use this code for experimentation and educational purposes however */
/* Design created in Adobe Illustrator CS, sliced in Photoshop/ImageReady CS */
/* Site created in goLive, although coding and css is hand written in source mode. I've gone off Dreamweaver completely now.  */
/* Did you find that interesting?? email me at alison.harrison @ spayce.com go on, you know you want to! (dont forget to remove the spaces) */
	

/* general elements */
body { font-family: "Trebuchet MS", Arial, Verdana, sans-serif; font-size: 76%; }
a { color: #000000; text-decoration: none; font-weight: bold; }
a:hover { color: #E31557; }
h1, h2, h3, h4, h5, h6 { margin: 0px; font-weight: normal; position: relative; }
span { position: relative; }
h2 { font-size: 1.2em; }
h4 { font-size: 1em; }
a img { border: 0px; }
p { margin: 0px;  padding: 0px;}
.tail, .clear { clear: both; }
.text, .entry {  line-height: 24px;}

/* generic contents */
td, tr, th, table, table.normal { padding: 0px; border: 0px; }
h1, h1.title { color: #666; font-size: 1.8em; margin: 0px 0px 0px 0px; display: block;  }
h2, h3, h3 a, h2.title, .title { color: #666; font-size: 1.5em; margin: 20px 0px 0px 0px; display: block;  }

input, select { border: 1px solid #000000; background: #ffffff; margin: 0px; padding: 0px;}

/* background elements (on white outer area) */
#logo { height: 60px; background: #ffffff url(/style/images/logos/spaycelogo.png) no-repeat 50% 50%; text-align: center; }

/* main div */
#main { width: 990px;  margin: auto; }
#new #main { width: 916px; }

/* navigation (down side) */
#nav { width: 134px;   float: left; margin-top: 42px; }
img.nav { float: left; }

/* navigation across top */
#home { background: url(/style/images/style05/whatsnewactive.gif) top left no-repeat; width: 154px; height: 67px;}
#homeoff { background: url(/style/images/style05/whatsnew.gif) top left no-repeat; width: 154px; height: 67px;}

#prepre { background: url(/style/images/style05/aboutmeactive.gif) top left no-repeat; width: 154px; height: 67px;}
#preport { background: url(/style/images/style05/portfolio.gif) top left no-repeat; width: 154px; height: 67px;}
#preleft { background: url(/style/images/style05/photos.gif) top left no-repeat; width: 154px; height: 67px;}
#preblog { background: url(/style/images/style05/antiblog.gif) top left no-repeat; width: 154px; height: 67px;}

#portpre { background: url(/style/images/style05/aboutme.gif) top left no-repeat; width: 154px; height: 67px;}
#portport { background: url(/style/images/style05/portfolioactive.gif) top left no-repeat; width: 154px; height: 67px;}
#portleft { background: url(/style/images/style05/photos.gif) top left no-repeat; width: 154px; height: 67px;}
#portblog { background: url(/style/images/style05/antiblog.gif) top left no-repeat; width: 154px; height: 67px;}

#leftpre { background: url(/style/images/style05/aboutme.gif) top left no-repeat; width: 154px; height: 67px;}
#leftport { background: url(/style/images/style05/portfolio.gif) top left no-repeat; width: 154px; height: 67px;}
#leftleft { background: url(/style/images/style05/photosactive.gif) top left no-repeat; width: 154px; height: 67px;}
#leftblog { background: url(/style/images/style05/antiblog.gif) top left no-repeat; width: 154px; height: 67px;}

#blogpre { background: url(/style/images/style05/aboutme.gif) top left no-repeat; width: 154px; height: 67px;}
#blogport { background: url(/style/images/style05/portfolio.gif) top left no-repeat; width: 154px; height: 67px;}
#blogleft { background: url(/style/images/style05/photos.gif) top left no-repeat; width: 154px; height: 67px;}
#blogblog { background: url(/style/images/style05/antiblogactive.gif) top left no-repeat; width: 154px; height: 67px;}



/* holds the content and meaty part */
#content { padding-left: 20px; background: #222; margin-left: 150px; padding-top: 3px;}	
#preamble #content { padding-left: 20px; background: #222 ; margin-left: 150px;}

#leftovers #content, #photography #content { padding-left: 20px; background: #222; margin-left: 150px;}
#new #content, #antiblog #content { padding-left: 10px; background: #222; margin-left: 150px;}
.blogentry { margin-bottom: 20px; }

/* stuff is the inner part of content, in which images/style02 are placed as wallpaper. */
#stuff { border: solid #222; border-width: 4px 4px 4px 0px; background: #222; padding: 0px 10px 0 0; 
}

#content {
  -moz-border-radius: .6em .6em;
  border-radius: .4em;
}

#stuff {
  -moz-border-radius:  .6em .6em;
border-top-right-radius: .6em; 
border-bottom-right-radius: .6em;
}

#box12 {
-moz-border-radius:  .6em .6em;
border-top-right-radius: .6em; 
border-bottom-right-radius: .6em;
}


#icons { float: right; width: 24px; text-align: right; }
#icons img { margin-top: 8px; display: block; }

#icons ul { margin-left: 0px; }
#icons img { 
background: none ! important;
padding: 0px ! important; 
}

/* positions of content boxes */
#box1 { float: left; width: 300px; position: relative; background: #fff;}
#box2 { float: left; width: 330px; position: relative; margin-left: 10px; margin-top: 17px;}

/* box12 is the full width box (ie, box 1 plus 2, not box twelve!! */
#box12 { float: left; width: 765px; position: relative; background: #fff; }
#new #box12 { width: 695px; }

/* box3 is the style switcher box */
#box3 { float: right; width: 26px; position: relative; margin-top: 50px; clear: right; }
.rss { margin-top: 48px; }


/* hidden links for non css layout */
.hiddentitle, .hiddenlink, .hidden { display: none; }

/* contents of box 1 and box12 */
#box1 .top, #box12 .top { 
padding: 0px 0px 0px 0px; height: auto;
margin-bottom: 0px;
}
#box1 .middle { padding: 0px 10px 10px 10px; position: relative; height: auto; }
#box12 .middle { padding: 0px 0px 30px 0px; position: relative; height: auto; }
#box1 .tail, #box12 .tail {  padding: 0px 10px 10px 10px; position: relative; }

#stuff, #content, .middle, #box12, #floatbox { position: relative; }

#webdesign #box12 .middle { padding-top: 0px; }

#stuff #box12 .middle { padding: 20px; }
#new #box12 .middle { padding: 0px; }



ul {
margin: 0px 0px 0px 0px; 
padding: 0px; 
-moz-border-radius: .4em .4em 0 0;
border-top-right-radius: .4em; 
border-top-left-radius: .4em;
}
		li {  display: inline;  }

ul:first-child { -moz-border-radius: .4em .4em 0 0;}
		


li.arrow { 
display: none;
}

.top li { 
font-family: verdana, sans-serif; 
font-size: .9em; 
font-weight: bold;
text-align: left;
float: left;

}

#new .top li, #search .top li { background: #EC638F;  }
#antiblog .top li { background: #CC99D2;  }
.preamblec .top li { background: #79bfdf; }
.portfolioc .top li { background: #f3c935; }
.leftoversc .top li { background: #bfe43e; }

.top li a:hover { color: #fff;}

/* on tab with no tabs on right */
.top { border-bottom: 1px solid #000; }
.top ul { display: block;   }

#new .top, #search .top { background: #EC638F;  }
#antiblog .top  { background: #CC99D2; }  
.preamblec .top { background: #79bfdf;  }
.leftoversc .top { background: #bfe43e;  }
.portfolioc .top  { background: #f3c935;  }



/*.top ul:after, .top li:after, .top:after { content: ""; clear: both; display: block; line-height: 0px; height: 0 font-size: 0px; visibility: hidden;
} */
.top:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.top {
    display: inline-block;
}

html[xmlns] .top {
    display: block;
}

* html .top {
    height: 1%;
}




.top li, .ontab, .ontaboff {
float: left;   
margin: 0 0px 0 0;
padding: 0;
border-right: 1px solid #333;
}



#new .ontab a, #new .ontaboff a, #search .ontab a, #search .ontaboff a  { background: #E31557; }
.preamblec .ontab a, .preamblec .ontaboff a  { background: #1987b9; }
.portfolioc .ontab a, .portfolioc .ontaboff a  { background: #f48c10; }
.leftoversc .ontab a, .leftoversc .ontaboff a  { background: #93b90e; }
#antiblog .ontab a, #antiblog .ontaboff a  { background: #B268BC; }

.top a  {
display: block;  
color: #fff;
margin: 0;
padding: 5px 20px 7px 20px;
}

.top a:hover { background: #000;}

.offtabon, .offtaboff, .offtabmiddleoff, .offtabmiddleon, .offtablast { 
float: left; 
margin-right: 2px;
padding: 0;
border-right: 1px solid #333;
}


.offtabon, .offtaboff, .offtabmiddleoff, .offtabmiddleon, .offtablast { 
display: block;  
color: #fff;
padding: 5px 20px 7px 20px;
margin: 0;
}

/* image thumbnails on various pages */
.thumbnail { float: left;  margin: 0px 5px 5px 0px; width: 73px; height: 73px; }
.thumbnail img {  width: 72px; height: 72px; border: 1px solid #000000; }
.thumbnail p { margin: 0px; display: inline; padding: 0px; position: relative; }


/* ------------------------------------------ */
/* contents of box 2 */
#box2 .top  { background: url(/style/images/style03/shadows/shadowtop.gif) bottom right no-repeat; padding-bottom: 9px;  margin: 0px; font-size: 2px; height: 9px;}
#box2 .middle {background: #ffffff url(/style/images/style03/shadows/shadowright.gif) top right repeat-y; padding: 2px 16px 16px 10px; font-size: 1em; font-family: "trebuchet MS"; line-height: 24px;}
#box2 .tail {  background: #ffffff url(/style/images/style03/shadows/shadowbase.gif) bottom right no-repeat;   padding: 4px 0px 4px 0px;  text-align: center;  line-height: 24px;}

/* text that appears inside box2 (like mouseover  excepts on main page, etc */
#intro, .mo { position: absolute; left: 0px; top: 20px; width: 300px; font-size: 1em; font-family: "trebuchet MS"; line-height: 24px;}	
.mo img { width: 300px;}
/* positions of excerpts on main page are set on that page using MTEntryTitle */




/* ------------------------------------------ */
/* contents of box 3 */

#box3 img { margin: 3px 1px 0px 0px;  border: 0px;}
#box3 .middle { border: 0px; width: 20px; }

#box3 .top { display: none; }

#box3 .feed img { margin-top: 50px; }


/* in box1 and 12 */
.minheight1 {float: right; height: 302px; width: 1px; position: relative;}
/* in box2 */
.minheight {float: right; height: 315px; width: 1px; position: relative; }


/* ------------------------------------------ */
/* SEARCH BOX */
/* search box appears floating over all pages */
#searchbox { 
position: absolute; 
left: 35%; 
top: 200px; 
width: 200px; 
border: 2px solid #000000; 
background: #fff;
z-index: 50; 
visibility: hidden;
background: #eee;
}

#searchbox .top { background: #222; height: 15px; margin: 0px; font-size: 2px; text-align: right; padding: 1px 1px 1px 1px; }
#searchbox .middle { padding: 8px;  }

#searchbox br { display: none; }
#searchbox input { margin-bottom: 8px; display: block; float: left; font-size: .9em ! important; margin-right: 5px; }
#searchbox label { margin-bottom: 8px; display: block; }
#searchbox #search { width: 120px; float: left;  font-size: 1em ! important;}

/* ------------------------------------------ */
/* SEPARATE PAGE ELEMENTS */

/* main page (what's new) */
.newthumb img {width: 300px; height: 220px; margin: 4px 0px; overxflow: hidden; display: block; }
.newthumb img { width: 300px; border: 1px solid #444444;   }

h4.newdetail { margin-top: 5px; position: relative; }
.newleftover { margin-top: 8px; }
.newthumb .excerpt { display: none; }
#new h1, #new h2, #new h4 { margin-top: 0px;}
#new #box2 .middle { padding-top: 10px;}

/* PREAMBLE PAGE */
h2.title { margin-top: 10px; }
#preamble .floatbox { border: 1px solid #999999; margin: 0px 10px 20px 20px;}
#preamble .floatbox img { margin-right: 0px; }
#preamble #box2 .middle { padding-top: 5px; }

ul.summary { margin-left: 0px; }


/* PHOTOGRAPHY PAGES */
.polaroid { margin-top: 10px; background: #ffffff; padding: 8px; border: #000000 solid; border-width: 1px 2px 2px 1px; width: 560px; display: block; }
#jump { float: right; }
 
#calendar { width: 550px;}
#calendar td { width: 60px; height: 60px; vertical-align: top; text-align: left; border: 1px solid #000000; background: #ffffff; padding: 4px; background: #ffffff center; }

#snapshots .thumbnail p { margin: 5px 0px 5px 0px; display: inline; padding: 0px;  }
.snapthumb { border: solid #000000; border-width: 1px 2px 2px 1px; width: 100px; height: 100px; margin: 0px 10px 10px 0px; float: left;}

.photopage .polaroid { float: left; margin-right: 20px; margin-top: 0px; width: 300px;  }
.photopage .polaroid img { width: 300px; height: 370px; }

.polaroidpage .polaroid { float: left; margin-right: 10px; margin-bottom: 10px; width: 250px; }
.polaroidpage .polaroid img { width: 250px; height: 300px;}

.entry img { margin-bottom: 8px; border: 1px solid #aaaaaa;  }

.floaticon {position: absolute; top: 50px; right: 20px; width: 140px;}
.floaticon img { margin-bottom: 4px; border: 0px; }
.floatbox form { margin: 0px; padding: 0px; display: inline; height: 25px; vertical-align: middle;}	


/* PORTFOLIO PAGES - formatting elements for text on detail pages */
.title br, .detailthumb br { display: none; }
.date { font-style: normal; font-size: .9em; color: #999; margin: 0px 0px 6px 0px; display: block; }

.detailthumb img { margin: 0px 0px 0px 0px; border: 1px solid #000000; width: 300px; height: auto;  display: block; }
.detailthumb p {margin-bottom: 10px; }

.mo img { border: 1px solid #000000; width: 300px;}
.mo, #intro { padding: 0 0 0 0px; }
.mo h2 { margin-top: 0 ! important;}

.backforth { text-align: left; padding: 0px 0px 0px 0px; margin-top: -6px; }
.backforth2 { text-align: right; padding: 0px 8px 0px 0px; position: absolute; right: 10px; top: 0px; margin-top: -6px; }
.backforth a:link, .backforth a:visited, .backforth2 a:link, .backforth2 a:visited { color: #888888; }
.backforth a:hover, .backforth2 a:hover {color: #000000; }

#webdesign h2 { margin-top: 10px; }

.contentthumb img {  margin: 0px 0px 0px 0px; border: 1px solid #000000;  display: block;  }

#links .title, #links .date { display: none; }

.floatbox {float:  right; margin-right: 20px; }
.floatbox img { margin-right: 8px; float: left; }

/* ------------------------------------------ */
/* THIS IS NOT A WEBLOG (or the anti weblog) */
#floatbox { float: right; width: 220px;  margin: 0px 0px 00px 10px; border: 0px solid #999999; display: inline; position: relative; }
#box12 #floatbox .middle {  height: auto; padding: 0px; }
#antiblog #box12 #floatbox .middle {  height: auto; padding: 10px; }
#floatbox { z-index: 50;  }

/* #box12 #floatbox .middle  i { font-size: .9em }*/

/* #floatbox .middle { height: 280px;} */

#floatbox .top { display: none; }
/*#box12 #floatbox .tail { background: #fff url(/style/images/style04/divider.gif) no-repeat 16px 0;}*/

#floatbox.portfolio, #floatbox.print, #floatbox.joomla  { width: 300px; margin-right: 0px; margin-left: 0; padding: 0;}

.thumbnailcol { width: 400px;  }

#floatbox.antiblog { width: 280px;  }
#antiblog #floatbox { border: 1px solid #ccc; }

#antiblog .title { width: 300px;}
.appear { position: absolute; right: 20px; top: 20px; width: 260px }
.entry { margin-right: 20px; display: block;}
/* ------------------------------------------ */
/* footer and copyright */

#footer { color: #999999; letter-spacing: 3px; text-align: center; line-height: 32px; }
#footer img { margin: 20px auto 0px auto; }

#powered { text-align: center; color: #dddddd; }
#powered a { color: #dddddd; }



/* testing */
.mainintro { padding: 10px 20px; }
.mainintro p { line-height: 1.6em; font-size: 1.1em; color: #333;}

#latestnews, #latestphot { position: relative;}
#latestnews { margin-left: 10px; }

#latestwork { background: #E31557;  padding: 20px 0 20px 20px; }
#latestwork h2, #latestwork .workthumb em, #latestwork .workthumb em a { color: #fff; } 

#latestwork:after { display: block; content: ""; clear: both;}


span.workthumb {  
margin-right: 13px ! important;  
position: relative ! important;  
float: left;
padding: 0; 
}

.mainthumb img { 
height: 162px ! important; 
width: 197px ! important; 
float: left;
}

#latestphot .mainthumb img { 
height: 243px ! important; 
width: 182px ! important; 
}

.mainthumb { 
border: 3px solid #fff ! important;
margin-top: 8px;
display: block;
margin-bottom: 0;
float: left;
}

#latestphot .mainthumb { border-color: #E31557 ! important; }
#latestphot { width: 230px ; }

#latestphot { float: left; }


#latestnews { float: left; width: 400px;
margin: 0 20px; }

h2.mainpg { 
color: #999;
border-bottom: 1px solid #ccc;
margin-bottom: 10px;
}

#latestwork h2.mainpg { border-color: #fff; }
#latestwork a { color: pink; }
#latestwork a:hover { color: #fff; }

h2.short {
margin-right: 10px;
}

h4.mainpg { margin-top: 10px ! important;}


.newleftover .inner {
}

#latestwork em, #latestnews em, #latestphot em,
#latestwork em a, #latestnews em a, #latestphot em a  { 
font-style: normal; color: pink ! important; 
font-size: .9em
}

#latestnews .newleftover {
color: #333;
}

.newleftover a {
color: #E31557;
}

.newleftover a:hover {
color: #EFE4E8;
}


.divider { clear: both;  height: 20px;}
.divider.up { margin-bottom: 0px;}
.divider.last { height: 0px; margin-top: 0;}
.excerpt { display: none; }



.mepic { float: right; z-index: 50; margin: 0 0 40px 20px;}
.mainintro h2.mainpg { width: 410px; }


/* testing for IE. Fucking horrid browser. */
.portfolioc .middle .middle, .portfolioc #box12 #intro  {  margin: 0 ! important;  }
.portfolioc #box12 #floatbox .middle, .portfolioc .middle .middle { padding: 0 ! important;}
.portfolioc #floatbox { width: 300px ! important; padding: 0 ! important; }
#latestwork, #box12, .middle, .thumbnailcol  { height: 1%; zoom: 100%;}








/*=:project
    scalable Inman Flash Replacement (sIFR) version 3.

  =:file
    Copyright: 2006 Mark Wubben.
    Author: Mark Wubben, <http://novemberborn.net/>

  =:history
    * IFR: Shaun Inman
    * sIFR 1: Mike Davidson, Shaun Inman and Tomas Jogin
    * sIFR 2: Mike Davidson, Shaun Inman, Tomas Jogin and Mark Wubben

  =:license
    This software is licensed and provided under the CC-GNU LGPL.
    See <http://creativecommons.org/licenses/LGPL/2.1/>    
*/

/*---- sIFR ---*/
.sIFR-flash {
  visibility: visible !important;
  margin: 0;
  padding: 0;
}

.sIFR-unloading .sIFR-flash {
  visibility: hidden !important;
}

.sIFR-replaced, .sIFR-ignore {
  visibility: visible !important;
}

.sIFR-alternate {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  display: block;
  overflow: hidden;
}

.sIFR-replaced div.sIFR-fixfocus {
  margin: 0pt; 
  padding: 0pt; 
  overflow: auto; 
  letter-spacing: 0px; 
  float: none;
}

.sIFR-dummy { 
  width: 0px;
  height: 0px;
  margin-left: 42px;
  z-index: 0;
}

/*---- Header styling ---*/