/*
 * CSS for b4k4.co.uk
 * Hand-baked by Phil Moore
 */

body { 
	padding: 0; margin: 0;
	height: 100%;
	background: #77776a url('../images/page-bg.gif') repeat-y top left;
	font-family: "Tahoma", "Lucida Grande", "Lucida Sans Unicode", "Arial", "Helvetica", sans-serif;
	font-size: 0.9em;
}

/* GENERAL ELEMENTS */
p { line-height: 1.5em; margin: 0.3em 0 0.6em; padding: 0; font-size: 1em; }
li { line-height: 1.5em; font-size: 1em; }
small { font-size: 0.75em; }
h2 { font-size: 2em; font-weight: normal; text-transform: uppercase; color: #00d0ff; border-bottom: 1px solid #c3c2c2; padding: 0; margin: .6em 0 .6em; }
h3 { font-size: 1.6em; font-weight: normal; text-transform: uppercase; color: #00d0ff; border-bottom: 1px solid #c3c2c2; padding: 0; margin: 1em 0 .6em; clear: both; }
h4 { font-size: 1.4em; font-weight: normal; color: #333232; border-bottom: 1px solid #d7efed; width: 610px; padding: 0; margin: 1.4em 0 .5em; }
acronym { cursor: help; border-bottom: 1px dotted #ccc; }

/* Forms */
form { padding: 10px 0px; font-size: 0.9em; }
form p { line-height: 1.5em; }
label { font-weight: bold; padding-right: 5px; }
input.simple { border: dotted #aaa; border-width: 0 0 1px; margin-right: 10px; }
input.text_in { border: 1px solid #ccc;}
textarea { width: 80%; height: 100px; font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; }

a { color: #00d0ff; }
a:link, a:visited { text-decoration: none; }
a:hover, a:active { text-decoration: underline; }

a.nostyle:link, a.nostyle:visited, a.nostyle:hover, a.nostyle:active, a.nostyle img { padding: 0; border: 0; background: none; }

/* Subtlties */
a.subtle:link, a.subtle:visited { color: #000; background-color: #fff; }
a.subtle:hover, a.subtle:active { color: #fff; background-color: #000; }
p.intro { font-size: 1.1em; font-weight: normal; }
p.intro em { font-weight: bold; font-style: normal; }


/* LEFT BAR (heading) */
h1#banner {
	position: absolute;
	top: 0; left: 39px;
	width: 160px; height: 640px;
	padding: 0; margin: 0;
	z-index: 10;
}
h1#banner a {
	display: block;
	width: 160px; height: 640px;
	background: url('/images/b4k4-banner.gif') no-repeat left top;
	text-indent: -5000px;
	overflow: hidden;
}

/* NAV */
#nav { position: absolute; top: 0; padding: 0; margin: 0; font-size: 0.9em; right: 80px; text-align: right; z-index: 10; height: 1em; }
#nav a.on { font-weight: bold; }
#nav a { background: none; color: #000; padding: 1px 2px; vertical-align: bottom; }
#nav a.over { color: #000; padding: 1px 2px; background: url('/images/black-alpha.png'); text-decoration: none; }
#nav_info { font-size: 0.9em; position: absolute; padding: 0; top: 1.2em; right: 80px; display: block; background: transparent url('/images/black-alpha.png'); text-align: center; color: #000; }


/* CONTENT */
#content { padding: 70px 74px 0px 250px; margin: 0; background: transparent url('/images/dirt-bg.jpg') top right no-repeat; width: 630px; position: relative; }

/* MAIN PAGE HEADINGS */
.h_replace { padding: 0; margin: 0 0 1em; width: 630px; height: 57px; border: 0; }
.h_replace a { display: block;  width: 630px; height: 57px; text-indent: -1000px; overflow: hidden; }
/* Specifics */
#webdesign.h_replace a { background-image: url('/images/box-web-head.gif'); }
#photography.h_replace a { background-image: url('/images/box-photo-head.gif'); }
#about.h_replace a { background-image: url('/images/box-about-head.gif'); }
#contact.h_replace a { background-image: url('/images/box-contact-head.gif'); }

/* INFO BOX(ES) */
.info_box { 
	width: 200px; clear: right; float: right; margin: 10px 0 10px 10px; position: relative; overflow: hidden; 
	border: 1px solid #000; background: #fff url('/images/infobox-bg.gif'); display: inline;
}
.info_box h4 { 
	width: 100%; margin: 0; padding: 0; line-height: 1.4em; font-weight: bold;
	background: #000; opacity: .85; color: #fff; text-align: left; font-size: 1em; border-bottom: 1px solid #000;
}
.info_box .slideme {
	position: absolute; width: 200px; font-size: 0.9em;
	padding: 8px 0 0; margin: 0; bottom: 0;
	opacity: .85; color: #fff; overflow: hidden;
	background: #000 url('/images/expand-arrow.gif') top right no-repeat;
}
.info_box .slideme p { font-size: 0.9em; line-height: 1.4em; padding: 0 3px; }
.info_box li { list-style: none; border-top: 1px solid #666; margin-top: 1px; }
.info_box a { background: #000; background-image: none; color: #fff; display: block; padding: 3px; text-decoration: none; }
.info_box a:hover { background: #eee; color: #000; }
.info_box p a { display: inline; padding: 0; text-decoration: underline; }

#recent_sites { background: url('/images/stjames-preview.gif') no-repeat top left; width: 200px; height: 220px; } 
#portfol_exp { width: 200px; height: 220px; margin-top: 0; }

.footnote { font-size: 0.8em; }

/* AREAS & SECTIONS */
.section { border: solid #cecece; border-width: 1px 0; width: 610px; }
img.decoration { float: right; border: 1px solid #000; margin-left: 10px; }
img.decoration-alt { float: left; border: 1px solid #000; margin-right: 10px; }

p#footer { clear: both; padding: 3px 0 5px; color: #aaa; font-size: 0.75em; text-align: right; }
#footer a:link, #footer a:visited { color: #aaa; }