/* CSS Document */
html {
    background: url(../images/butterfly-bg.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	background-color: #036cae;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}
body {
	width: 100%;
	height: 100%;
	font-family: 65% Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	padding:0;
	margin:0;
}
/*headings - style font & colour*/
h1 {font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 140%; color: #0295da; font-weight: bold; letter-spacing: 3px; padding-left: 10px;}
h2 {font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif; font-size: 110%; color: #0295da; font-weight: bold; padding-left: 8px; padding-top: 5px; margin: 3px;}
h3 {font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif; font-size: 90%; font-weight: normal; text-transform: uppercase; letter-spacing: 2px; color: #0161aa; padding-left: 10px;}
h4 {font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif; font-size: 83%; color: #4ecf00; font-weight: bold; padding: 3px 8px; letter-spacing: 1px; margin: 3px;}
	
p{font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif; font-size: 73%; font-weight: normal; color: #595A5B; padding: 5px 10px; margin:0px; line-height: 1.5em;}

hr{margin: 0; height: 2px; border-top: 0px; border-left: 0px; border-right: 0px; border-bottom: 2px; border-bottom-color: #edf5f9; border-bottom-style: solid; border-collapse: collapse;}

/*additional paragraph and list classes*/
.bio {font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif; font-size: 73%; font-weight: normal; color: #595A5B; padding: 5px 5px 2px 10px; margin:0px;}
.topright {text-align: right;}
.dark {font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif; font-size: 70%; font-weight: normal; color: #383839; padding: 5px 0px; margin:0px;}
li.dark  {list-style-type: square; margin-left: 10px;}
.bold {font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif; font-size: 75%; font-weight: bold; color: #0066cc; padding: 5px 0px; margin:0px;}
li.bold  {list-style-type: square; margin-left: 2px;}
ul.green {font-family: Arial,Helvetica,sans-serif; list-style-type: none; font-size: 13px; font-weight: bold; color: #333333; margin-top: 15px; margin-bottom: 15px;}
ul.green li {background: url(../images/dot.png) 0 0.8em no-repeat; padding: 6px 20px;}
.bioline {height: 1px; width: 90%; margin-left:10px; border-top: 0px; border-left: 0px; border-right: 0px; border-bottom: 1px; border-bottom-color: #e0e0e0; border-bottom-style: solid; border-collapse: collapse;}

/* ----------cont, ccont & container for dropshadow and to center the layout---------- */
#cont {background: #ffffff url(../images/border.png) repeat-y; width: 926px; height: 100%; margin:0px; padding: 0px; margin-left: auto; margin-right: auto;}
#ccont {background: #ffffff url(../images/border.png) repeat-y; width: 926px; margin:0px; padding: 0px; margin-left: auto; margin-right: auto;}
#container {position: relative; width: 900px; padding:0px; margin: 0 auto;} 

/* ----------banner for logo-------------- */
#banner {width: 900px; height: 180px; padding: 0px; margin: 0;}
#banner img {padding: 0px, 0px;} 

#topmenu {width: 900px; position: relative; height: 22px; background-color: #0295da; padding-bottom: 2px;}
#topmenu p {margin-left: -10px; line-height: 1.2em;}
#topmenu a {font-family: Tahoma, Arial, Helvetica, sans-serif; text-decoration: none; letter-spacing: 2px; font-weight: bold; padding-top:6px; padding-left:6px; padding-right:6px; padding-bottom:4px;}
#topmenu a:link{color:#f4f5f8;}
#topmenu a:active{color:#8df803;}
#topmenu a:visited{color:#f4f5f8;}
#topmenu a:hover{color:#eeeeee; background:#036cae;}

/*TOP MENU CONTACT PAGE - this is to enable IE rule on contact page - code is same as top menu rules, but different in all-ie-only.css file... bit of a messy one and frustrated with IE to say the least 130211*/
#topmenuc {width: 900px; position: relative; height: 22px; background-color: #0295da; padding-bottom: 2px;}
#topmenuc p {margin-left: -10px; line-height: 1.2em;}
#topmenuc a {font-family: Tahoma, Arial, Helvetica, sans-serif; text-decoration: none; letter-spacing: 2px; font-weight: bold; padding-top:6px; padding-left:6px; padding-right:6px; padding-bottom:4px;}
#topmenuc a:link{color:#f4f5f8;}
#topmenuc a:active{color:#8df803;}
#topmenuc a:visited{color:#f4f5f8;}
#topmenuc a:hover{color:#eeeeee; background:#036cae;}
/*end of specific topmenu rules.......................................... 130211*/


/* -----------------content - backdrop on all pages--------------------- */
#content{position: relative; margin: 0 14px;}
#content a {text-decoration: none; font-weight: bold;}

#content a:link{color:#1a1d27;}
#content a:visited{color: #151530;}
#content a:hover{color: #0066cc; font-weight: bold;}
				
/* -----------------left menu  - portfolio pages, inspiration and bio --------------------- */	
.leftmenutop {position: relative; height: 60px; margin-left:-14px; margin-top: 10px; background: url(../images/leftmenutop2.png) transparent top left no-repeat;}
.left {font-family:Tahoma,Arial,Helvetica,sans-serif; color: #ffffff; font-weight: bold; font-size: 70%; margin: 0px; padding-top: 8px; background-color: #036cae;}

#leftmenu {background:#ffffff url(../images/leftbg.png) top left repeat-x; margin-left:-14px; margin-top:0; width:173px;}	
#leftmenu p {padding-left: 20px;	}
#leftmenu a {font-family:Tahoma,Arial,Helvetica,sans-serif; padding-left: 20px; font-weight: bold; font-size: 70%; text-decoration: none; display: block; line-height: 2.5em;}
#leftmenu a:link  {background: url(../images/left-arrow.png) 90% 50% no-repeat; color: #444444;}	
#leftmenu a:visited {background: url(../images/left-arrow.png) 90% 50% no-repeat; color: #444444;}
#leftmenu a:hover {background: url(../images/left-arrow-over.png) 90% 50% no-repeat; background-color: #eeeeee; color:#0295da;}	
#leftmenu a:active {background: url(../images/left-arrow-over.png) 90% 50% no-repeat; background-color: #eeeeee; color: #0295da;}

/* ----------------- classes used for the smaller links in the bottom section of the left side menu - including the arrow image --------------------- */
#lefts {position: relative; margin-left: 15px;}
#lefts p {font-family:Tahoma,Arial,Helvetica,sans-serif; font-weight: bold; font-size: 10px; letter-spacing: 2px; color: #444444; margin-left: -15px;}
#lefts a {font-family:Tahoma,Arial,Helvetica,sans-serif; font-weight: bold; font-size: 10px; display: block; line-height: 1.8em;}
#lefts a:link, #lefts a:visited{background: url(../images/small-arrow.png) 2% 50% no-repeat; color: #999d9d;}
#lefts a:hover, #lefts a:active {background: url(../images/small-arrow-over.png) 2% 50% no-repeat; background-color: transparent; color: #444545;}

/* ----------------- div used to hold the share this box = and prevent it picking up link behaviour from styles above --------------------- */
#null a:link, #null a:visited, #null a:hover, #null a:active{background: transparent; background-image: none; background-color: transparent;}

/* -----------------LEFT MENU - CONTACT PAGE--------------------- */
.leftmenutopc {position: relative; height: 60px; margin-top: 10px; margin-left: -14px; background: url(../images/leftmenutop2.png) transparent top left no-repeat;}

#leftmenuc {background:#ffffff url(../images/leftbg.png) top left repeat-x; margin-top:0; margin-left: -14px; width:173px;}	
#leftmenuc p {padding-left: 20px;}
#leftmenuc a {font-family:Tahoma,Arial,Helvetica,sans-serif; padding-left: 20px; font-weight: bold; font-size: 70%; text-decoration: none; display: block; line-height: 2.5em;}
#leftmenuc a:link  {background: url(../images/left-arrow.png) 90% 50% no-repeat; color: #444444;}	
#leftmenuc a:visited {background: url(../images/left-arrow.png) 90% 50% no-repeat; color: #444444;}
#leftmenuc a:hover {background: url(../images/left-arrow-over.png) 90% 50% no-repeat; background-color: #eeeeee; color:#0295da;}	
#leftmenuc a:active {background: url(../images/left-arrow-over.png) 90% 50% no-repeat; background-color: #eeeeee; color: #0295da;}

/* -----------------RIGHT SIDE PAGE CONTENT - portfolio pages, inspiration and bio --------------------- */
#right {height: 100%; margin: 30px 20px 0 190px; position: absolute; padding: 0;	}
#right p, h4 {padding-right: 60px;}
	
/* -----------------RIGHT SIDE PAGE CONTENT - CONTACT PAGE--------------------- */
#rightc {height: 100%; margin: 30px 20px 0 190px; position: absolute; padding: 0; top: 0px;}
	
/*CSS hover Slideshow on GALLERY PAGE*/				
#slideshow {position:relative; width:850px; height:660px; margin: 0px auto 0px auto; background: #ffffff url(../images/gallerybg.jpg) top left no-repeat;}
#slideshow ul {margin: 0px 5px 5px 5px; padding: 0px; width: 250px; height: 600px; float:right; list-style-type:none;}
#slideshow li {float:left;}
#slideshow p {text-align:left; margin:10px 200px 0 0px; font-size:65%;}
#slideshow a.gallery span { position:absolute; width:1px; height:1px; top:5px; left:5px; overflow:hidden; background:#cccccc;}
#slideshow a.gallery {border: #cccccc 1px solid; display: block; margin: 1px 2px; cursor: pointer; color: #cccccc; text-align: left; text-decoration: none;}
#slideshow a.gallery:visited {border: #cccccc 1px solid; display: block; margin: 1px, 2px; cursor: pointer; color: #cccccc; text-align: left; text-decoration: none;}
#slideshow a.gallery, #slideshow a.gallery:visited {display:block; color:#cccccc; text-decoration:none; border:1px solid #cccccc; margin:1px 2px 1px 2px; text-align:left; cursor:pointer;}

/* THUMBNAIL IMAGES  -  gallery */
#slideshow a.slide1 {background:url(../images/musical-creatures-s.jpg); height:50px; width:50px;}
#slideshow a.slide2 {background:url(../images/prometheus-s.jpg); height:50px; width:50px;}
#slideshow a.slide3 {background:url(../images/monica-becci-s.jpg); height:50px; width:50px;}
#slideshow a.slide4 {background:url(../images/sorrow-s.jpg); height:50px; width:50px;}
#slideshow a.slide5 {background:url(../images/freja-s.jpg); height:50px; width:50px;}
#slideshow a.slide6 {background:url(../images/desk-s.jpg); height:50px; width:50px;}
#slideshow a.slide7 {background:url(../images/bo-guitar-s.jpg); height:50px; width:50px;}
#slideshow a.slide8 {background:url(../images/jonathan-wash-s.jpg); height:50px; width:50px;}
#slideshow a.slide9 {background:url(../images/ben-drawing-s.jpg); height:50px; width:50px;}
#slideshow a.slide10 {background:url(../images/backyard-s.jpg); height:50px; width:50px;}
#slideshow a.slide11 {background:url(../images/amanda-school-s.jpg); height:50px; width:50px;}
#slideshow a.slide12 {background:url(../images/schoolyard-s.jpg); height:50px; width:50px;}
#slideshow a.slide13 {background:url(../images/silvertrees-s.jpg); height:50px; width:50px;}
#slideshow a.slide14 {background:url(../images/dad-s.jpg); height:50px; width:50px;}
#slideshow a.slide15 {background:url(../images/amanda-lounge-s.jpg); height:50px; width:50px;}
#slideshow a.slide16 {background:url(../images/guitar-teacher-s.jpg); height:50px; width:50px;}
#slideshow a.slide17 {background:url(../images/roadwork-bunnies-s.jpg); height:50px; width:50px;}
#slideshow a.slide18 {background:url(../images/peatsridge-slavebunny-s.jpg); height:50px; width:50px;}
#slideshow a.slide19 {background:url(../images/bikeride-mafia-s.jpg); height:50px; width:50px;}
#slideshow a.slide20 {background:url(../images/thunder-cycle-s.jpg); height:50px; width:50px;}
#slideshow a.slide21 {background:url(../images/nightshift-s.jpg); height:50px; width:50px;}
#slideshow a.slide22 {background:url(../images/oneway-parking-s.jpg); height:50px; width:50px;}
#slideshow a.slide23 {background:url(../images/ben-garden-s.jpg); height:50px; width:50px;}
#slideshow a.slide24 {background:url(../images/gardeness-s.jpg); height:50px; width:50px;}
#slideshow a.slide25 {background:url(../images/fan-o-s.jpg); height:50px; width:50px;}
#slideshow a.slide26 {background:url(../images/butterfly-s.jpg); height:50px; width:50px;}
#slideshow a.slide27 {background:url(../images/dr-marten-s.jpg); height:50px; width:50px;}
#slideshow a.slide28 {background:url(../images/2-sides-s.jpg); height:50px; width:50px;}
#slideshow a.slide29 {background:url(../images/bikerbunnies-s.jpg); height:50px; width:50px;}
#slideshow a.slide30 {background:url(../images/bumblebee-s.jpg); height:50px; width:50px;}
#slideshow a.slide31 {background:url(../images/family-s.jpg); height:50px; width:50px;}
#slideshow a.slide32 {background:url(../images/artgroup-s.jpg); height:50px; width:50px;}
	
#slideshow a.gallery:hover {border:1px solid #aaaaaa;}
#slideshow a.gallery:hover span {position:absolute; width:532px; height:630px; top:0px; left:40px; background:#ffffff; text-align:left; margin:0px 200px 0 0px; font-family: Tahoma,Arial,Helvetica,sans-serif; font-size:65%; color: #595A5B;}
#slideshow A.gallery:hover img {border: 1px solid #cccccc; border-top: 1px solid #cccccc; float: left; border-left: 1px solid #cccccc; margin-right: 5px; border-bottom: 1px solid #cccccc;}

/*  ----------------FOOTER---------------------- */ 
#footer {width: 900px; clear: both; height: 35px; background: url(../images/footer.png) no-repeat; background-color: #036cae; text-align: center; margin-left: auto; margin-right: auto;}
#footer p {color: #b3b3b4; font-size: 50%; letter-spacing: 2px;}
#footer a {text-decoration: none; font-weight: normal;}
#footer a:link{color:#bcbcbc;}
#footer a:visited{color:#bcbcbc;} 
#footer a:hover{color:#54618b;}