/*  
Theme Name: topio [may 08]
Theme URI: http://topio.co.uk
Description: 3 col minimalist
Author: Simon Blackbourn
Author URI: http://lumpylemon.co.uk/

at last - a truly clean design. i love you flora!


p.s. thanks to ALA for multi-column layout (http://alistapart.com/articles/multicolumnlayouts)
*/



/* g l o b a l   w h i t e s p a c e   r e s e t */

/* Set all margins and padding to zero */
/* for most consistent cross-browser look. */
/* Read more at http://leftjustified.net/journal/2004/10/19/global-ws-reset/ */

* {
	margin: 0;
	padding: 0;
	border: 0;
	text-decoration: none;
	font-weight: normal;
}



.hide, hr, .words p#backtotop {
	display: none;
}




							/* l a y o u t   d i v s */

body {
	color: #000;
	background-color: #fff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	margin-top: 30px;
}

#homepage {
	background: #fff url(im/bghome.jpg) 130px 30px no-repeat;
}

#normal {
	background: #fff url(im/bg.jpg) 130px 30px no-repeat;
}

#logo {
	height: 178px;
}

#wrap {
	float: left;
	width: 420px;					/* The width of the centre div */
	border-left: 240px solid transparent;	/* The width of the left-most div */
	border-right: 310px solid transparent;	/* The width of the right-most div */
	background: transparent url(im/wrap.jpg) top left repeat-y;

	/* IE 5.5 & 6 don't like transparent borders... */
	/* ...so, we set an unused color to be index color*/
	_border-left-color:tomato;
	_border-right-color:tomato;
	/*then remove this indexed color*/
	_filter:chroma(color=tomato);
}

#menus {
	float: left;
	width: 240px;
	margin-left: -240px;
	position: relative;
}

#pictures {
	float: left;
	width: 420px;
	margin-right: -420px;
}

#boxes {
	float: left;
	width: 506px;
}

.words {
	padding-top: 28px;
	line-height: 150%;
	min-height: 285px;
	height: auto;
}

/* for Internet Explorer */
/*\*/
* html .words {
height: 285px;
}
/**/

#narrow {
	float: right;
	width: 310px;
	margin-right: -310px;
	position: relative;
}

#wide {
	float: left;
	width: 310px;
}

#footer {
	clear: both;
	width: 730px;
	margin-left: 240px;
	padding: 60px 0 30px 0;
	font-size: 0.7em;
}

#admin {
	clear: both;
	width: 730px;
	margin-left: 240px;
	padding: 30px 0 0 0;
}






							/* l o g o */

#logo p, #logo h1, #logo h2 {
	display: none;
}





							/* h o m e   p a g e */

#boxes #boxwrap {
	margin: 32px 0 0 60px;
}

#boxes ul {
	list-style: none;
}

#boxes ul#boxlist {
	display: inline;
}

#boxes #boxlist li {
	float: left;
	margin-bottom: 11px;
}

#boxes #boxlist li.not_end {
	margin-right: 11px;
}

#boxes #boxlist li a img {
	border: 1px solid #fff;
	padding: 1px;
}

#boxes #slideshow li a img {
	padding-top: 2px;
}

#boxes #boxlist li a:hover img {
	border: 1px solid #ddd5d2;
}




							/* p i c t u r e   g a l l e r y */

#pictures #gallerywrap {
	text-align: right;
	margin-left: 60px;
}

#pictures #gallerythumbwrap {
	text-align: right;
	margin-bottom: 3px;
}

#pictures #gallerybigpic {
}

#pictures #gallerythumbwrap a img {
	border: 1px solid #f1f1f1;
	padding: 1px;
}

#pictures #gallerythumbwrap a:hover img {
	border: 1px solid #ddd5d2;
	padding: 1px;
}





							/* m e n u s */

#menus ul h3 {
	text-indent: -9999px;
	display: block;
	height: 22px;
	margin-bottom: 5px;
	background: transparent bottom right no-repeat;
}

#menus ul#about h3 {
	background-image: url(im/about.jpg);
}

#menus ul#projects h3 {
	background-image: url(im/projects.jpg);
}

#menus ul {
	padding: 0 0 25px 0;
	line-height: 150%;
}

#menus li {
	list-style-type: none;
	font-size: 0.85em;
	text-align: right;
}

#menus ul li.current_page_item, #menus ul#projects li.current-cat, #menus ul#essentials li.current_page {
	background: transparent url(im/arrowright.jpg) right 50% no-repeat;
}

#menus ul li a {
	display: block;
	width: 220px;
	padding-right: 20px;
}

#menus a:link {
	color: #000;
}

#menus a:visited {
	color: #000;
}

#menus a:hover {
	color: #690;
}

#menus ul a:hover {
	background: transparent url(im/arrowright.jpg) right 50% no-repeat;
}

#menus a:active {
	color: #000;
}




							/* w o r d s */

.words h1 {
	color: #444;
	font-weight: bold;
	font-size: 0.85em;
	margin: 0 0 1.5em 40px;
}

.words strong {
	font-weight: bold;
}

.words p {
	margin: 0 0 1.5em 40px;
	font-size: 0.85em;
}

.words p#goto {
	font-size: 0.7em;
	text-align: right;
	margin-top: 3em;
	color: #999;
	border-top: 1px solid #690;
}

.words a, .words a {
	border-bottom: 1px dashed #690; /* use nifty bottom pattern trick here */
}

.words a:link, .words a:link {
	color: #000;
}

.words a:visited, .words a:visited {
	color: #000;
}

.words a:hover, .words a:hover {
	color: #690;
}

.words a:active, .words a:active {
	color: #000;
}




							/* f o o t e r */

#footer p {
	text-align: right;
	color: #999;
}

#footer p#bg {
	background-color: #ddd5d2;
	color: #000;
	padding: 0.5em;
	text-align: left;
}

#footer p a {
	border-bottom: 1px dashed #999;
}

#footer p a:link {
	color: #999;
}

#footer p a:visited {
	color: #999;
}

#footer p a:hover {
	color: #000;
	border-bottom: 1px solid #000;
}

#footer p a:active {
	color: #999;
}

#footer p#bg a {
	border-bottom: none;
}

#footer p#bg a:link {
	color: #000;
}

#footer p#bg a:visited {
	color: #000;
}

#footer p#bg a:hover {
	color: #000;
	border-bottom: none;
}

#footer p#bg a:active {
	color: #000;
}




							/* a d m i n   b a r */

#admin p {
	font-size: 0.7em;
	background-color: #f1f1f1;
	padding: 0.5em;
	text-align: right;
}

#admin p strong {
	font-weight: bold;
}

#admin p span {
	padding-left: 1em;
}

#admin p a {
	font-weight: bold;
	padding: 0.2em;
	border: 1px solid #f1f1f1;
	text-decoration: none;
}

#admin p a:link {
	color: #000;
}

#admin p a:visited {
	color: #000;
}

#admin p a:hover {
	color: #000;
	border: 1px solid #000;
	background-color: #fff;
}

#admin p a:active {
	color: #000;
}




							/* l i s t s */

.words ul {
	margin: 0 0 1.5em 50px;
	font-size: 0.85em;
}

.words ul li {
	list-style-type: square;
	margin-bottom: 0.3em;
}




							/* a c c e s s i b l e   c o n t a c t   f o r m */

							/* thank you to http://www.websiteoptimization.com/speed/tweak/forms/ */


form {								/* set width in form, not fieldset (still takes up more room w/ fieldset width */
	width: 280px;
	margin-left: 30px;
	line-height: 100%;
}

form fieldset {
	/ * clear: both; make inputs break to left in ie5.x mac */
}

form label { 
	display: block;					/* block float the labels to left column, set a width */
	float: left; 
	width: 70px;
	margin: 23px 0 0;				/* set top margin same as form input - textarea etc. elements */
	text-align: right;
	font-size: 0.85em;
}

form input, form textarea {
									/* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
	width: 150px;					/* set width of form elements to auto-size, otherwise watch for wrap on resize */
	margin: 20px 0 0 5px;			/* set margin on left of form elements rather than right of */
	border: 1px solid #999;			/* label aligns textarea better in IE */
	padding: 0.3em;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
}

form input#submit {
	width: auto;
	background-color: #f9f9f9;
	color: #000;
	font-weight: bold;
	font-size: 0.85em;
}

textarea {
	overflow: auto;
	font-size: 0.9em;
}

form input:focus, textarea:focus {
	background-color: #f1f1f1;
}

form br {
	clear: left;					/* setting clear on inputs didn't work consistently, so brs added for degrade */
}