/********************************************************/
/* Stylesheet for http://www.johnriordan.co.uk/			*/
/* Author Emma Clark - 22.07.08							*/
/* Default												*/
/********************************************************/
/* Reset ************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 1px;
	-moz-outline: 1px dotted #666 !important;
	-moz-outline-offset: 1px !important;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/********************************************************/
/* Elements												*/
/********************************************************/
body {
	font-family: arial, verdana, helvetica, sans-serif;
	text-align:center;
	background:url(../img/bg.gif) repeat-x top left;
}
body#comix {
	background:url(../img/comix-bg.gif) repeat-x top left;
}

h1, h2 {
	font-size:2.5em;
	text-transform:uppercase;
	color:#FF3;
	font-weight:bold;
	float:left;
	padding:0 0.25em 0 0;
}

h2 {
	color:#35A2C9;
}

h3 {
	color:#000;
	font-size:2em;
}

a:link, a:active, a:visited {
	text-decoration:none;
	color:#000;
}
a:hover {
	text-decoration:underline;
	color:#35A2C9;
}

em {
	font-style:italic;
}


/********************************************************/
/* Shared												*/
/********************************************************/
.bold, strong {
	font-weight:bold;
}


/********************************************************/
/* Structure											*/
/********************************************************/
#site-container {
	width:1000px;
	margin:0 auto;
	text-align:left;
}

#site-container #site {
	width:1000px;
	float:left;
}

#header {
	height:4em;
	background:#000;
	padding:0.8em;
}

#content {
	padding:0.8em;
	float:left;
	width:60.6em;
	min-height:32em;
}

#footer {
	width:100%;
	float:left;
	position:relative;
}


/********************************************************/
/* Content												*/
/********************************************************/
/* Header ***********************************************/
#header ul {
	float:left;
	clear:both;
	margin:0.6em 0 0 0;
	width:1000px;
}

#header ul li {
	float:left;
	display:block;
	color:#FFF;
	font-size:0.8em;
	padding:0 1.5em 0.6em 0;
	position:relative;
}

#header ul li.selected {
	font-weight:bold;
}

#header ul li a:link, #header ul li a:active, #header ul li a:visited {
	color:#FFF;
}
#header ul li a:hover {
	text-decoration:none;
	color:#35A2C9;
}

#header ul li ul {
	width:410px;
	border:1px solid #000;
	background:#FFF;
	position:absolute;
	top:10px;
	left:0;
}

#header ul li ul li {
	width:190px;
	float:left;
	font-size:0.85em;
	line-height:1.3em;
	color:#000;
	padding:10px 5px;
}

#header ul li ul li img {
	float:left;
}

#header ul li ul li a:link,
#header ul li ul li a:active,
#header ul li ul li a:visited {
	color:#000;
}
#header ul li ul li a:hover {
	text-decoration:underline;
	color:#35A2C9;
}

#sub-nav {
	width:100%;
	float:left;
	border-bottom:2px solid #000;
}

#sub-nav ul {
	float:left;
	margin:0 5px;
}

#sub-nav ul li {
	display:block;
	float:left;
}

#sub-nav ul li .span, #sub-nav ul li a:link, #sub-nav ul li a:active, #sub-nav ul li a:visited {
	display:block;
	float:left;
	padding:10px 10px;
}

#sub-nav ul li a:hover, 
#sub-nav ul li a.selected:link, #sub-nav ul li a.selected:active, #sub-nav ul li a.selected:visited {
	background:#35A2C9;
	color:#FFF;
}

#sub-nav ul li a.span:hover {
	background:#FFF;
	color:#000;
	text-decoration:none;
}


/* Thumbnails *******************************************/

#content .thumbnails {
	width:400px;
	float:left;
	position:relative;
}

#content .thumbnails li {
	width:80px;
	height:80px;
	float:left;
	display:block;
}

#content .thumbnails li a:link,
#content .thumbnails li a:active,
#content .thumbnails li a:visited {
	border:4px solid #FFF;
	display:block;
	width:72px;
}

#content .thumbnails li a:link img,
#content .thumbnails li a:active img,
#content .thumbnails li a:visited img {
	border:1px solid #000;
}

#content .thumbnails li a:hover,
#content .thumbnails li a.on:link,
#content .thumbnails li a.on:active,
#content .thumbnails li a.on:visited {
	border:4px solid #35A2C9;
}

#content .thumbnails li span {
	display:block;
	position:absolute;
	top:4px;
	left:418px;
	display:none;
}

#content .thumbnails li span#one {
	display:block;
}

#content .thumbnails li span img {
	border:1px solid #000;
	margin:0 0 0.5em 0;
}

#content .thumbnails li span p {
	font-size:0.8em;
	width:400px;
	line-height:1.4em;
	padding:0 0 2em 0;
}

#content #lists {
	position:relative;
	clear:both;
	float:left;
}

#content .comix {
	width:300px;
}

#content .comix li  {
	width:100px;
	height:115px;
	float:left;
	display:block;
	font-size:0.7em;
	line-height:1.3em;
}

#content .comix li.tall {
	height:135px;
}

#content .comix li a:link,
#content .comix li a:active,
#content .comix li a:visited {
	width:88px;
	height:103px;
	padding:2px;
}
#content .comix li a:hover {
	text-decoration:none;
	color:#000;
}

#content .comix li.tall a:link,
#content .comix li.tall a:active,
#content .comix li.tall a:visited {
	height:123px;
}

#content .comix li a:link img,
#content .comix li a:active img,
#content .comix li a:visited img {
	display:block;
	margin:0 0 5px 0;
}

#content .comix li span {
	top:6px;
	left:318px;
}

#content .comix li span p {
	font-size:1.1em;
}


/********************************************************/
/* No js content										*/
/********************************************************/
#content div.info {
	width:30em;
	padding:1em 0;
}

#content div.info img {
	float:left;
	margin:0 1em 0 0;
}

#content div.info p {
	float:right;
	width:22em;
	font-size:0.8em;
	padding:1em 0 0 0;
}


/********************************************************/
/* Footer												*/
/********************************************************/
#footer  p {
	padding:1.2em;
	font-size:0.7em;
	color:#666;
	line-height:1.4em;
}