/* www.ronanmccrea.com | screen styles */


/* content style guide: */
/* project intro, thumbnails: 108 x 64 */
/* project intro, images: 370 x 250 */
/* project gallery, thumbnails: 108 x 64 */
/* project gallery, images: 650 longest side, pref 650 x 488 */


/* questions/issues: */
/* use of name: 'McCrea', 'the artist', 'I'? - consistency reqd. */
/* exhibition lists: title on first line, in bold and italic. details on second line, in the order: venue, city, year */
/* better titles on news stories - less likelihood of url clashes */
/* photo of ronan on cv page? on front page? */
/* repetition of news stories? */


/* to do: */
/* 1. links styles */
/* 2. tidy styles */
/* 3. main nav rollovers */
/* 4. move 'next'/'previous' tabs in lightbox navigation to below images*/


/* quality checks: */
/* 1. all pages validate */
/* 2. all pages through webxact */
/* 3. all pages through wave */
/* 4. check all skipnav/backtotop links */


/* snags/n.b.: */
/* 1. safari nav rendering probs - bg img */
/* 2. i.e. layout probs */
/* 3. project page layout */
/* 4. slideshowpro for project pages? */


/* list from email: */

/* 
- change li backgrounds for non-news li's to single arrow/triangle, without line continuing down
- get rid of any #f00's in screen.css
- do print.css
- get if_custom_field to work on project details aside
- test auto_excerpt on project extracts
- s.s.l. part 1 - 'self-interview' - available as nicely-laid out pdf thing?
- news archive nav on inner pages
*/



/* ========================================================= */
/* basics */
/* ========================================================= */

body {
	text-align: center; 
	font-size: 62.5%; 
	font-family: Georgia, "Times New Roman", Times, serif;
	background: #dadada;
	color: #333;
}

#wrapmain {background: #ededed url("/site/rotate/rotate.php") center top no-repeat;}
#wrapbase {border-top: 1px solid #808080; clear: both;}

* {margin: 0; padding: 0;}

hr {display: none;}

#top, #main, #footer {
	text-align: left;
	vertical-align: middle;
	margin: 0 auto;
	width: 976px;
}

/* ========================================================= */
/* links */
/* ========================================================= */

a, a:link {color: #175da5; background: url("/site/links/a-link.gif") left bottom repeat-x; text-decoration: none;}
a:visited {color: #175da5;}
a:hover {color: #fff; background: #175da5 url("bg/links/a-hover.gif") left bottom repeat-x; text-decoration: none;}
a:active {color: #175da5;}

a.email, a:link.email {background: url("bg/links/email-a-link.gif") left bottom no-repeat; padding-left: 11px;}
a:hover.email {background: url("bg/links/email-a-hover.gif") left bottom no-repeat; padding-left: 11px;}
p.backtotop a, p.backtotop a:link {background: url("bg/links/backtotop-a-link.gif") right bottom no-repeat; padding-right: 7px;}
p.backtotop a:hover {background: url("bg/links/backtotop-a-hover.gif") right bottom no-repeat; padding-right: 7px;}
a.external, a:link.external {background: url("bg/links/external-a-link.gif") right bottom no-repeat; padding-right: 6px;}
a:hover.external {background: url("bg/links/external-a-hover.gif") right bottom no-repeat; padding-right: 6px;}
a.jump, a:link.jump {background: url("bg/links/jump-a-link.gif") right bottom no-repeat; padding-right: 9px;}
a:hover.jump {background: url("bg/links/jump-a-hover.gif") right bottom no-repeat; padding-right: 9px;}

/* ========================================================= */
/* typography */
/* ========================================================= */

ul li {list-style-type: none;}
#main h2 {
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 2.2em;
	color: #999;
	font-weight: normal;
}
#main div#about h2, #main h2.tall {padding: 0 0 10px 0;}
#main h3 {font-size: 1.2em; line-height: 1.6em; padding: 0 0 0.9em 0;}
#main p {
	font-size: 1.2em;
	line-height: 1.6em;
	padding: 0 0 0.9em 0;
}

#main ul {padding: 0 0 0.9em 0;}
#main ul li {
	font-size: 1.2em;
	line-height: 1.6em;
	padding-left: 10px;
	background: url("/site/arrow-short.gif") left top no-repeat;
}

#main dl {padding-top: 10px;}

#main dl dt {
	font-size: 1.2em;
	line-height: 1.6em;
	padding-left: 10px;
	background: url("/site/arrow-short.gif") left top no-repeat;
}

#main dl dd {
	padding-left: 10px;
	background: url("/site/line.gif") left bottom no-repeat;
}

#main dl#sitemap {padding: 0 0 10px 0;}

#main dl#sitemap dt {
	font-weight: bold;
	margin-top: 10px;
	background: url("/site/arrow.gif") left top no-repeat;
	padding-left: 10px;
}

#main dl#sitemap dd {
	background: url("/site/arrow.gif") left top no-repeat;
	padding-left: 10px;
	margin-left: 32px;
}

#hack p {
	font-size: 10px;
	line-height: 10px;
	padding: 0;
	color: #ededed;
}
#footer p {
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 1.0em;
	padding: 10px 0 10px 0;
}

#archive-nav p {font-size: 1.1em;}

#main p.posted {
	float: right;
	width: 150px;
	border: 1px solid #808080;
	font-family: Arial, Helvetica, Sans-Serif;
	margin: 5px 0 5px 10px;
	padding: 8px;
	font-size: 1.0em;
	background: #dadada;
	text-align: right;
}

#main p.addin {
	clear: both;
	padding: 10px 0 10px 0;
	/* border-top: 1px solid #aeaeae; */
	margin: 10px 0 0 0;
}

/* ========================================================= */
/* top */
/* ========================================================= */

#top {
	height: 111px; /* use this to push main down */
	font-family: Arial, Helvetica, Sans-Serif;
	padding-top: 97px;
}

#skipnav {position: absolute; top: -10000px;}

#top h1 {
	float: left;
	width: 372px;
	height: 44px;
	font-size: 1.8em;
}

#top h1 a {
	text-decoration: none;
	background: none;
	font-weight: normal;
	float: left;
	padding: 13px 5px 8px 0;
	color: #000;
}

#top ul {
	float: left;
	width: 350px;
}

#top ul li {float: left;}

#top ul li a {
	float: left;
	text-decoration: none;
	font-size: 1.8em;
	height: 31px;
	padding: 13px 14px 0 14px;
	border-left: 1px solid #dadada;
	border-right: 1px solid #dadada;
	background: #dadada;
}

#top ul li a.active, #top ul li a:hover.active {
	background: #fff;
	color: #000;
	border-left: 1px solid #808080;
	border-right: 1px solid #808080;
}

#top ul li a:hover {
	/* background: #175da5; */
	background: #0f3255;
	color: #fff;
	border-left: 1px solid #0f3255;
	border-right: 1px solid #0f3255;
}

/* ========================================================= */
/* top » search */
/* ========================================================= */

#search {float: right; width: 230px;}

#search p#searchtitle {
	float: left;
	font-size: 1.8em;
	color: #999;
	padding-top: 13px;
}

#search form {float: right; padding-top: 12px;}

#search form input {
	background: #dadada;
	padding: 2px;
	font-size: 1.1em;
	font-family: Arial, Helvetica, Sans-Serif;
	color: #333;
}
#search form input#searchtext {width: 115px;}

/* ========================================================= */
/* main » basics */
/* ========================================================= */

#main div#aside {float: right; width: 230px;}
#main div#excerpts {float: left; width: 746px;}
#main div#about {float: left; width: 726px; padding-top: 20px;}
#main div#hack {clear: both;}

/* ========================================================= */
/* main » work excerpts */
/* ========================================================= */

#main div#excerpts div.excerpt {
	float: left;
	width: 353px;
	height: 180px;
	padding: 10px 20px 0 0;
	background: url("/site/excerpt.gif") left bottom no-repeat;
}

#main div#excerpts div.excerpt a img {
	float: right;
	vertical-align: bottom;
	border: 1px solid #175da5;
	margin: 4px 0 5px 5px;
}

#main div#excerpts div.excerpt a:hover img {border: 1px solid #0f3255;}


#main div#excerpts div.excerpt h3 {
	padding: 0 0 0 10px;
	background: url("/site/arrow.gif") left top no-repeat;
}
#main div#excerpts div.excerpt p {
	padding: 0 0 0 9px;
	margin: 0 0 31px 0;
	border-left: 1px solid #aeaeae;
}

/* ========================================================= */
/* main » asides */
/* ========================================================= */

#main div#aside h3 {padding: 0;}

/* ========================================================= */
/* main » work project page styles */
/* ========================================================= */

#main div.section {
	float: left;
	width: 585px;
	margin: 0 0 6px 0;
}

#main div.section p {
	clear: both;
}

#main div.section ul.gallery {list-style-type: none; padding: 0;}

#main div.section ul.gallery li {
	line-height: normal;
	padding: 0;
	background: none;
	float: left;
	margin: 0 7px 7px 0;
}

#main div.section ul.gallery a img {
	border: 1px solid #175da5;
	vertical-align: bottom;
	background: none;
}

#main div.details {
	float: right;
	width: 372px;
	margin: 0 0 15px 0;
}

#main div.details img {border: 1px solid #aeaeae; margin-top: 4px;}

#main div.details p {
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 1.1em;
	line-height: 1.6em;
}

#main div.details dl {
	background: #dadada;
	padding: 10px;
	border: 1px solid #808080;
}

#main div.details dl dt {
	width: 100px;
	background: url("/site/arrow-short.gif") left top no-repeat;
	font-weight: bold;
}

#main div.details dl dd {
	font-size: 1.2em;
	line-height: 1.6em;
	background: none;
	margin: 0 0 10px 30px;
}

/* ========================================================= */
/* inner pages (cv, contact, sitemap, etc.) */
/* ========================================================= */

#main div.article {width: 726px;}
#main div.cv {width: 726px; /* background: #f00; */}

#main div.cv h3 {
	/* background: #fff; */
	float: left;
	width: 231px;
	clear: left;
	margin-top: 20px;
}

#main div.cv ul {
	/* background: #ccc; */
	float: left;
	width: 495px;
	margin-top: 20px;
}

#main div.cv ul li {
	background: url("/site/arrow-short.gif") left top no-repeat;
	margin-bottom: 8px;
}

#main div.cv p {
	/* background: #ffc; */
	clear: left;
}


/* ========================================================= */
/* search results page */
/* ========================================================= */

#main div.chunk {
	margin: 25px 0 0 0;
	padding: 10px 0 0 0;
	width: 726px;
	float: left;
	border-top: 1px solid #aeaeae;
}

#main div.chunk div.highlight {
	background: #fff;
	padding: 10px 10px 1px 10px;
	margin: 0 0 0 0;
	border: 1px solid #808080;
}

#main p#summary {padding: 11px 0 0 0;}

/* ========================================================= */
/* footer */
/* ========================================================= */

#footer {text-align: right;}
#footer p.floater {float: left;}

/* death to false metal */