/* pink lolly css for spayce.com (also accessible from spayce.net) */
/*  copyright 2006 all rights reserved - alison harrison September 2006 */
/* 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: small; }
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: medium; }
h4 { font-size: small; }
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: x-large; margin: 0px 0px 0px 0px; display: block;  }
h2, h3, h3 a, h2.title, .title { color: #666; font-size: large; 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: 710px;  margin: auto; }

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

/* navigation across top */
#home { background: url(/style/images/style04/homeon.gif) top right no-repeat; width: 18px; height: 97px;}
#homeoff { background: url(/style/images/style04/homeoff.gif) top right no-repeat; width: 18px; height: 97px;}

#prepre { background: url(/style/images/style04/preon.gif) top right no-repeat; width: 18px; height: 82px;}
#preport { background: url(/style/images/style04/portoff.gif) top right no-repeat; width: 18px; height: 93px;}
#preleft { background: url(/style/images/style04/leftoff.gif) top right no-repeat; width: 18px; height: 115px;}

#portpre { background: url(/style/images/style04/preoff.gif) top right no-repeat; width: 18px; height: 82px;}
#portport { background: url(/style/images/style04/porton.gif) top right no-repeat; width: 18px; height: 93px;}
#portleft { background: url(/style/images/style04/leftoff.gif) top right no-repeat; width: 18px; height: 115px;}

#leftpre { background: url(/style/images/style04/preoff.gif) top right no-repeat; width: 18px; height: 82px;}
#leftport { background: url(/style/images/style04/portoff.gif) top right no-repeat; width: 18px; height: 93px;}
#leftleft { background: url(/style/images/style04/lefton.gif) top right no-repeat; width: 18px; height: 115px;}


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

#leftovers #content, #photography #content { padding-left: 20px; background: #222; margin-left: 18px;}
#new #content, #antiblog #content { padding-left: 20px; background: #222; margin-left: 18px;}


/* 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: 1em 1em 1em 1em;
  border-radius: 1em;
}

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

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


#icons { float: right; width: 13px; 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: 625px; position: relative; background: #fff; }

/* box3 is the style switcher box */
#box3 { float: right; width: 20px; 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: 10px 10px 20px 6px; height: auto;
background: url(/style/images/style04/dividerup.gif) no-repeat 10px 35px; 
margin-bottom: 0px;
}
#box1 .middle { padding: 0px 10px 10px 10px; position: relative; height: auto; }
#box12 .middle { padding:0px 0px 10px 10px; 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}

		ul { margin: 0px 0px 8px 0px; padding: 0px; }
		li {  display: inline;}
		


li.arrow { 
display: none;
}

.top li { 
font-family: verdana, sans-serif; 
font-size: x-small; 
font-weight: bold;
text-align: left;
}

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

/* on tab with no tabs on right */
.top ul { height: 30px;}

.ontab, .ontaboff {
float: left; 
background: url(/style/images/style04/button-right.gif) no-repeat right bottom;  
margin: 0 2px 0 0;
padding: 0;
}

.ontab a, .ontaboff a  {
display: block;  
background: url(/style/images/style04/button-left.gif) no-repeat left bottom;  
padding: 5px 20px 10px 15px;
color: #fff;
margin: 0;
}

.offtabon, .offtaboff, .offtabmiddleoff, .offtabmiddleon, .offtablast { 
float: left; 
background: url(/style/images/style04/button-right-off.gif) no-repeat right bottom;  
margin-right: 2px;
padding: 0;
}

.offtabon a, .offtaboff a, .offtabmiddleoff a, .offtabmiddleon a, .offtablast a {
display: block;  
color: #fff;
background: url(/style/images/style04/button-left-off.gif) no-repeat left bottom;  
padding: 5px 20px 10px 15px;
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: small; 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: 10px; top: 20px; width: 220px; font-size: small; font-family: "trebuchet MS"; line-height: 24px;}	
.mo img { width: 300px;}
/* positions of excerpts on main page are set on that page using MTEntryTitle */


.mepic { margin: 0 20px;}
.mainintro h2, .mainintro p { width: 320px; }

/* ------------------------------------------ */
/* 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: 252px; width: 1px; position: relative;}
/* in box2 */
.minheight {float: right; height: 265px; 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 20px; }
.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 15px 20px 0px; border: 0px solid #999999; display: inline; position: relative; }
#box12 #floatbox .middle {  height: auto; padding: 0 0 0 25px; }
#floatbox { z-index: 50;  }
.portfolioc #floatbox { width: 250px; padding: 0;}

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

#floatbox .middle {background: #ffffff url(/style/images/style04/dividerside.gif) 0 0 no-repeat; 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: 355px ! important; margin-right: 15px; margin-left: 0; }
.thumbnailcol { width: 240px; }

#floatbox.antiblog { width: 280px;  }

#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 */

#latestwork, #latestnews, #latestphot { position: relative;}

span.workthumb {  
width: 190px ! important; 
height: 190px ! important; 
margin-right: 10px ! important;  
position: relative ! important;  
float: left;
}

.mainthumb img { 
height: 150px ! important; 
width: 182px ! important; 
border: 1px solid #000 ! important;
margin: auto;
}

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

.mainthumb { 
border: 1px solid #E31557 ! important;
padding: 2px 2px 0px 2px;
margin-top: 8px;
display: block;
}

#latestphot { float: left; }


#latestnews { float: left; width: 390px;
margin-right: 10px; }

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

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

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

.newleftover {
border: 1px solid #E31557 ! important;

}

.newleftover .inner {
padding: 10px; 
border: 2px solid #fff;
height: 226px;
background: #E31557;
}

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

#latestnews .newleftover {

color: #fff;
}

.newleftover a {
color: #fff;
}

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


.divider { background: url(/style/images/style04/divider.gif) no-repeat bottom left; clear: both;  height: 40px;}
.divider.up { background: url(/style/images/style04/dividerup.gif) no-repeat bottom left; margin-bottom: 20px;}
.divider.last { height: 20px; margin-top: 0;}
.excerpt { display: none; }

#latestphot { width: 230px ; }
#latestnews { float: left; width: 360px; }