/*-----------------------------------------------------------------------------
The Slade Times Core Style Sheet

version:   1.0
author:    Ivan Slade
/*----------------------------------------------------------------------------
COPYRIGHT, ALL RIGHTS RESERVED. THIS FILE MAY NOT BE COPIED OR ALTERED IN ANY WAY
-----------------------------------------------------------------------------*/

/* =General
-----------------------------------------------------------------------------*/
#colpanel, #twocolpanel, #threecolpanel, #mainstory, #menu, #guru {
	position: relative;
	width: 85%;
	margin: 0 auto
}

body {
  background: #C6C1C1 url(../i/deskbg.jpg) center repeat-y;
  color: #333;
  font: 62.5%/1.6 Georgia, "Times New Roman", Times, serif;
  text-align:center;
}

/* =Typography
-----------------------------------------------------------------------------*/
.upper {text-transform:uppercase}
.video {text-align:center}
p {margin: 0.9em 0}

/* =Headings
-----------------------------------------------------------------------------*/
h1 {margin: 0.5em 0 1em 0}

/* =Links
-----------------------------------------------------------------------------*/
a:link {color: #006; padding: 0.1em 0 0.1em 0}
a:visited {color: #306}
a:hover; a:active {background: #CFC}
a.morelink {padding-left: 15px; background: url(../i/plus.gif) 0 4px no-repeat}
a.videolink {padding-left: 15px; background: url(../i/videoicon.gif) left center no-repeat}
a.speechlink {padding-left: 15px; background: url(../i/speechicon.gif) left center no-repeat}
#skip a, #skip a:link  {color: #fff}
#footer a:link {color: #666}
#footer a:visited {color: #666}
#footer a:hover, #footer a:active, #skip a:hover, #skip a:active {color: #000; background:#fff; text-decoration:underline}
/* Link Highlights */
a.highlightlink { 
	white-space:nowrap; /* is this IE only? */
}
#content .highlightlink img {
	border: 0; 
	/*height: 1.1em;*/
	vertical-align: baseline;
	margin: -0.1em 0;
}

.hidden {display: none;}

h2 a.highlightlink, h3 a.highlightlink, h4 a.highlightlink {
	font-size: 70%;
	vertical-align: top;
	text-decoration: none;
}
h2 a.highlightlink:hover, h3 a.highlightlink:hover, h4 a.highlightlink:hover {
	text-decoration: none;
}
/* =Branding
-----------------------------------------------------------------------------*/
#wrapper {
	width: 800px;
	margin: 0 auto;
	text-align:left;
} 
#head, #subhead {
	position:relative;
	background: url(../i/paperbg.gif);
	padding: 1px 0;
}
#subhead {padding-top: 50px}
#logo {width: 400px; margin: 0 auto}
#logo h1 {
	text-align:center;
	margin-top: 55px;
	margin-bottom: 0;
	width: 380px;
	height: 46px;
	text-indent: -9000px;
	background: transparent url(../i/sladetitle.png) no-repeat;
}
#date {	
	margin: 10px 0 2px 60px;	
	font: 1.2em Arial, Helvetica, sans-serif;
	color: #333;
	text-align:left
}
#line {
	width: 85%;
	margin: auto;
	font-size: 2px;
	height: 2px;
	background: #666
}
/* =Desktop stuff
-----------------------------------------------------------------------------*/
#pen {
	position: absolute;
	width: 177px;
	height: 262px;
	background: transparent url(../i/pen.png) no-repeat;
	top: 300px; 
	right: -150px
}
#sticky {
	position: absolute;
	width: 171px;
	height: 175px;
	background: transparent url(../i/sticky.png) no-repeat;
	top: 150px; 
	right: -160px
}
#phone {
	position: absolute;
	width: 185px;
	height: 58px;
	background: transparent url(../i/phonecable.png) no-repeat;
	top: -160px; 
	left: -190px
}
#coins {
	position: absolute;
	width: 250px;
	height: 175px;
	background: transparent url(../i/coins.png) no-repeat;
	top: 60px; 
	left: -260px
}
#stain {
	position: absolute;
	width: 150px;
	height: 150px;
	background: transparent url(../i/stain.png) no-repeat;
	top: 350px; 
	left: -180px
}

/* =Main Nav
-----------------------------------------------------------------------------*/
#skip {position:relative; text-align:center; font-size: 1.1em}
#menu {
	margin: 10px auto
}
#menu ul {
	margin: 0;
	padding: 0;
	list-style:none;
	float: left;
}
#menu li {float: left; margin-right: 2px;}
#menu li.last {margin-right: 0}
#menu ul a, #menu ul a:link {
	display: block;
	width: 108px;
	/*width: 93px;
	padding: 0.25em 0.5em;*/
	padding: 0.25em 0;
	line-height: 2.1em;
	text-decoration:none;
	text-transform:uppercase;
	text-align:center;
	font: bold 1.2em Arial, Helvetica, sans-serif;
	color:#333;
	background: url(../i/menbg.jpg) repeat-x;
	border: 1px solid #666
}
#menu ul a:visited {
	color: #333
}
#menu ul a:hover, ul a:active {
	background: #009900; 
	color:#fff
}
#menu a.sel, #menu a:link.sel, #menu a:visited.sel {background:#CC0000; color: #fff}

/* =Main Content
-----------------------------------------------------------------------------*/
#content {
	position: relative;
	background: url(../i/paperbgmain.gif) repeat-y;
	padding-top:10px;
}
#mainpanel {
	position: relative;
}
.colone {
	float: left;
	width: 33%;
}
.coltwo {float: right; width: 66%}
.coltwoa {
	float: left;
	width: 49%;
}
.coltwob {
	float: right;
	width: 49%;
}
#colpanel .colone, #colpanel .coltwoa, #colpanel .coltwob {border: 1px solid #666; background: #E1F0FF url(../i/featbg.jpg) no-repeat; min-height:90px}
#colpanel div h1 {padding: 0 5px 0 60px; font: bold 1.3em Arial, Helvetica, sans-serif; margin-bottom: -0.5em; text-transform:uppercase}
.sub {padding: 0 5px 0 60px; font-size: 1.05em}
#colpanel div.coltwob h1, #colpanel div.coltwob p.sub {padding: 0 60px 0 5px}

#alfie, #flower {position: absolute; top: -5px; left: -5px; width: 58px; height:87px; background:url(../i/alfie.png); _background-image:url(../i/alfie.gif)}
#flower {left: 34%; top: -10px; width: 60px; height:65px; background:url(../i/flower.png); _background-image:url(../i/flower.gif)}
#pizza {position: absolute; top: -25px; right: -5px; width:71px; height: 121px; background:url(../i/pizza.png); _background-image:url(../i/pizza.gif)}

#twocolpanel {padding: 0 0 20px 0}
#twocolpanel .coltwoa {/* border: none; border-right: 1px solid #666; border-bottom: 1px solid #666; */width: 47%}
#twocolpanel .coltwob { width: 49%}
#twocolpanel .colone p, #twocolpanel .coltwoa p, #twocolpanel .coltwob p, #twocolpanel ul {padding: 0 10px; font-size: 1.2em}
#twocolpanel ul {
	margin: 0 0 10px 20px;
	list-style:square;
}
#twocolpanel li {margin-bottom: 0.5em}
#twocolpanel .colone {width: 70%; padding-right: 10px; border-right: 1px solid #666}
#twocolpanel .coltwo{ width: 28%}
/*resume*/
#twocolpanel .colone#resume {width: 67%; padding-right: 10px; border-right: 1px none #666}
#twocolpanel .coltwo#key{ width: 31%; margin-top: 17px}

#threecolpanel .colone p, #threecolpanel .coltwoa p, #threecolpanel .coltwob p, #threecolpanel ul, #threecolpanel p {padding: 0 10px; font-size: 1.2em}

#threecolpanel .colone, #threecolpanel .coltwoa, #threecolpanel .coltwob {border-right: 1px solid #000}

#mainstory {
	position: relative;
	width: 100%;
}
.crayons {background: #EEDDFF url(../i/crayons.jpg) 550px 19px no-repeat; padding-bottom: 10px}
#mainstory.crayons p {padding-right: 120px}
#mainstory h1 {
	font-size: 3em;
	color:#333;
	margin: 0.25em 0 0.5em 0.25em
}
.coltwob h3 {font-size: 1.2em; color:#006; padding: 5px 5px 0px 15px}
#twocolpanel div.coltwo h2 {font-size: 2.2em; margin: 0.5em 0 -0.5em 0.6em; color: #900}
.date {font: bold 0.9em Arial, Helvetica, sans-serif; color: #900}
#twocolpanel .coltwo p {padding: 0 5px 0px 15px; font-size: 1.2em}
#action {
	position: relative;
	background:#fff url(../i/actionbg.jpg) repeat-x;
	margin: 20px auto;
	border: 1px solid #900;
	
}
#action h1 {
	padding: 0.25em 0;
	text-align:center;
	background: #900;
	text-transform:uppercase;
	color:#fff;
	font: bold 1.4em Arial, Helvetica, sans-serif;
	margin: 0
}
input {
	margin-left: 15px;
}
label {
	font-weight: bold;
	font-size: 1.4em;
}

#source {font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; padding-bottom: 2px; margin-top: 0; border-bottom: 1px solid #000}
#guru {
	background: #060 url(../i/gurubg.jpg) top repeat-x;
	font-family:Arial, Helvetica, sans-serif;
	min-height: 100px;
}
#guru h2 {color: #fff; font-size: 2.3em; margin-left:110px }
#guru p {color: #fff; font-size: 1.3em; margin-left:110px; margin-right: 130px}
#gurufloat {position: absolute; left: -50px; top: -20px; /*width:103px; height:116px; background: transparent url(../i/guru.png); _background-image: url(../i/guru.gif)*/}
#guruimg {padding-left: 40px}
#special {position: absolute; right: 30px; top: -20px; width:89px; height:89px; background: transparent url(../i/special.png)}
#mepic {position:relative}
#star {position: absolute; top: 85px; left: 78px; width: 24px; height:22px; background: url(../i/starspin.gif)}
.skills {background: #fff url(../i/keyskillbg.jpg) no-repeat}
#twocolpanel div#key.coltwo h2 {font: bold 1.8em Arial, Helvetica, sans-serif; color:#fff; border-bottom:1px solid #fff; margin-bottom: 0.5em}
#ticklist {
	list-style-image: url(../i/tick.gif);
	font: 1.2em Arial, Helvetica, sans-serif;
	margin: 0 10px 0 30px;
}
#ticklist li {margin: .3em 0}
#resumepic {float: left; margin: 0 20px 10px 10px}
.colone#resume h2 {background:#333; color:#fff; font:bold 1.8em Arial, Helvetica, sans-serif; padding:0.25em}
.colone#resume h3 {font:bold 1.5em Arial, Helvetica, sans-serif; border-bottom: 1px solid #666; color:#900; margin: 0 0 10px 10px}
/*div.colone#resume:first-child p {margin-top: -5px}*/

/*Sub page styles*/
#subPageTitle h1 {margin: 50px 0px 0 60px; font: 4em normal Arial, Helvetica, sans-serif; color:#ccc}
#pageNo {float: right; margin: -40px 60px 0 0; font: bold 3em Arial, Helvetica, sans-serif; color:#000}
.fcol {float:left; width:45%; margin-top: 10px}
.dates {background:#ccc}
.dates strong {color: #060}
#twocolpanel .colone p.note {
	background:#E5F0FA url(../i/infoicon.gif) no-repeat scroll left center;
	border:1px outset #333;
	padding: 5px 5px 5px 30px}
#secPanel {position: relative; margin: 5px auto}
#secText h1 {text-align:center; font: bold 110px "Arial Black", Arial, Helvetica, sans-serif; margin: -50px 0 -20px 0; padding: 0}
/*set section header colours*/
#bodyresume #secText h1 {color:#B4C1CF}
#bodyinternet #secText h1 {color:#9C9}
#bodymultimedia #secText h1 {color:#CC9; letter-spacing:-0.1em}
#bodycode #secText h1 {color:#73758C}
#bodydesign #secText h1 {color:#C9F}
/*end header colours*/
#secCols {position: relative; margin: -30px 80px 10px 80px}
#secCols p {font-size: 1.1em; font-family: Arial, Helvetica, sans-serif; border-left: 2px double #069; padding-left: 5px; margin: 0}
#secCols p strong {color:#069}
#bodyinternet #secCols p {border-left: 2px double #696}
#bodyinternet #secCols p strong {color:#696}
#bodymultimedia #secCols p {border-left: 2px double #663}
#bodymultimedia #secCols p strong {color:#663}
#bodycode #secCols p {border-left: 2px double #505161}
#bodycode #secCols p strong {color:#505161}
#bodycode #secCols p {border-left: 2px double #336}
#bodycode #secCols p strong {color:#336}
#bodycode #secCols p {border-left: 2px double #505161}
#bodycode #secCols p strong {color:#505161}
#bodydesign #secCols p {border-left: 2px double #50009F}
#bodydesign #secCols p strong {color:#50009F}

#secCols p em {font-size: 1.4em; font-style:normal}
#secCols p a {text-decoration:none; font-size: 1.2em; margin-bottom: -3em}
#jumpme {position: absolute; bottom: -5px; left: 220px; background: transparent url(../i/meresume.png) no-repeat; width: 96px; height: 117px }
#surfme {position: absolute; bottom: -5px; left: 480px; background: transparent url(../i/surferme.png) no-repeat; width: 167px; height: 110px}
#multimediame {position: absolute; bottom: -5px; left: 420px; background: transparent url(../i/multimediame.png) no-repeat; width: 150px; height: 113px}
#codeme {position: absolute; bottom: -5px; left: 290px; background: transparent url(../i/codeme.png) no-repeat; width: 127px; height: 89px}
#designme {position: absolute; bottom: -5px; left: 500px; background: transparent url(../i/designme.png) no-repeat; width: 103px; height: 116px}
#intintro, #mmintro {
	width: 650px;
	margin: 0 auto;
	background:#333 url(../i/internetbg.jpg) top left no-repeat;
	color: #fff;
}
#mmintro {background:#033 url(../i/mmbg.jpg) top left no-repeat}
#intintro h2, #mmintro h2 {float: left; font: bold 2em Arial, Helvetica, sans-serif; padding: 2em 1em 1em 1em}
#intintro p, #mmintro p {font: 1.2em Arial, Helvetica, sans-serif; padding: 1em}
#view {color:#333; padding: 15px 0}
#infospot {position: relative; margin-top: 35px; padding: 5px; background: url(../i/infobg.jpg) top repeat-x; border: 2px solid #006}
#infopic {background: transparent url(../i/info.png) no-repeat; position:absolute; top: -25px; right: -20px; width: 72px; height: 74px}
#panelinternet {
	width: 650px;
	margin: 0 auto;
}
/* =Footer
-----------------------------------------------------------------------------*/
#footer {
	position: relative; 
	top: -20px;
	text-align:center;
	height: 53px;
	min-height: 53px; 
	background: url(../i/footbg.gif) no-repeat;
	font-size: 1.1em
}
#footer p {text-align:center}

/* =Forms
-----------------------------------------------------------------------------*/

.inputt {border: 1px solid #000; width: 180px}

/* Removes fieldset borders. even on Opea 7 */
fieldset {
  border: 1px solid transparent;
}

/* =Lists
-----------------------------------------------------------------------------*/
ul.qual li {list-style-image:url(../i/qual.gif)}
ul.cert li {list-style-image:url(../i/certificate.gif)}
ul.int li {list-style-image:url(../i/int.gif)}
ul.hand li {list-style-image:url(../i/hand.gif)}
ul.map li {list-style-image:url(../i/smap.gif)}
/* =Tables
-----------------------------------------------------------------------------*/

table { 
  border-spacing: 0;
	border-collapse: collapse;
}

td {
  text-align: left;
	font-weight: normal;
}

/* =Images
----------------------------------------------------------------------------*/

/* =Easy Clearing
-----------------------------------------------------------------------------*/
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.about .left {text-align: left}
.center, .center h2, .center p {text-align: center}

/* =Flash
----------------------------------------------------------------------------*/
#pcont {position:absolute; top: -150px; left: 0; width: 99%; display: none}
#pageturn {position: relative; margin: 0 auto}

/* = Fisheye
----------------------------------------------------------------------------*/
.fisheye{
	text-align: center;
	height: 200px;
	position: relative;
}
a.fisheyeItem
{
	text-align: center;
	color: #000;
	font-weight: bold;
	text-decoration: none;
	width: 40px;
	/*position: absolute;*/
	float: left;
	display: inline;
	top: 0;
}
.fisheyeItem img
{
	border: none;
	margin: 0 auto 5px auto;
	width: 100%;
}
.fisheyeItem span
{
	display: none;
	positon: absolute;
}
.fisheyeContainer
{
	/*background: #ccc url(../i/febg.jpg) repeat-x;*/
	height: 280px;
	width: 600px;
	/*left: 500px;*/
	position: absolute;
	overflow:hidden
}
/*Profile page styles*/
#view {width: 600px; margin: 0 auto}
body.frame h1, #view h1 {
	font-size: 1.3em;
	font-weight: bold;
	background: #333 url(../images/h1bg.jpg) repeat-x top;
	color: #fff;
	padding: 5px;
	letter-spacing:0.08em
}
#view p, #view ul {font-size:1.2em}
#view ul {list-style-type:square; margin: 0 0 1em 2em}

/*Image box styles*/
#ImageBoxOverlay
{
	background-color: #000;
}
#ImageBoxCaption
{
	background-color: #F4F4EC;
}
#ImageBoxContainer
{
	width: 250px;
	height: 250px;
	background-color: #F4F4EC;
}
#ImageBoxCaptionText
{
	font-weight: bold;
	padding-bottom: 5px;
	font-size: 13px;
	color: #000;
}
#ImageBoxCaptionImages
{
	margin: 0;
}
#ImageBoxNextImage
{
	background-image: url(..i/imagebox/spacer.gif);
	background-color: transparent;
}
#ImageBoxPrevImage
{
	background-image: url(..i/imagebox/spacer.gif);
	background-color: transparent;
}
#ImageBoxNextImage:hover
{
	background-image: url(..i/imagebox/next_image.jpg);
	background-repeat:	no-repeat;
	background-position: right top;
}
#ImageBoxPrevImage:hover
{
	background-image: url(..i/imagebox/prev_image.jpg);
	background-repeat:	no-repeat;
	background-position: left bottom;
}
/*multimedia page styles*/
#filmcont {
	position:relative;
	margin: 5px auto;
	width: 500px;
}
#filmbar {
	margin: 0 auto;
	width: 387px;
	overflow:auto;
}
#iconstrip {
	/*position:relative;*/
	width: 1419px;
	height: 129px;
	
}
.mmicon {background: transparent url(../i/filmstrip.jpg) top left no-repeat; width: 129px; height: 129px;float: left}
.mmicon img {margin-left: 6px; margin-top: 22px;}
a#scrollleft {position:absolute; left: 20px; top: 30px; width: 31px; height:61px; background: transparent url(../i/scrollleft.gif) no-repeat}
a#scrollright {position:absolute; right: 20px; top: 30px; width: 31px; height:61px; background: transparent url(../i/scrollright.gif) no-repeat}

a:hover#scrollleft {background: transparent url(../i/scrollleftsel.gif) no-repeat}
a:hover#scrollright {background: transparent url(../i/scrollrightsel.gif) no-repeat}

/* Tooltips
----------------------------------------------------------------------*/
#tooltip {
	position: absolute;
	z-index: 3000;
	border: 1px solid #111;
	background-color: #eee;
	padding: 5px;
	opacity: 0.85;
}
#tooltip h3, #tooltip div { margin: 0; }

#tooltip.pretty {
	font-family: Arial;
	border: none;
	width: 210px;
	padding:20px;
	height: 135px;
	opacity: 0.8;
	background: url('../i/shadow.png');
}
#tooltip.pretty h3 {
	margin-bottom: 0.75em;
	font-size: 12pt;
	width: 220px;
	text-align: center;
}
#tooltip.pretty div { width: 220px; text-align: left; }

#tooltip.fancy {
	background: url('../i/shadow2.png');
	padding-top: 5em;
	height: 100px;
}