/* CSS Document */

/* The following piece of code forces all margins to 0 by default, preventing the various default margins of browsers from affecting the layout */
* {
margin:0px;
padding:0px;
}

/* ***General Page Style*** */

body {background-image:url(Images/background.jpg); background-color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; font-size:10px; text-align:justify; background-position:center; background-repeat:no-repeat; background-position:top;

/* The above code sets a general standard for the font used on the page, unless certain text is specifically defined differently. */
/* Despite most of the pages having a background image, this background colour will make text readable, in the event that the background images do not load. */

/* It is possible that in some cases, scrollbars will also appear within the page content (in the iframes for example). */
/* By setting the scrollbar colours, they will blend into the style and scheme of the page if and when they appear. */
/* Some browsers however, such as Mozilla Firefox, do not detect this change. */
scrollbar-arrow-color: #4a678a;
scrollbar-base-color: #dddddd;
scrollbar-dark-shadow-color: #dddddd;
scrollbar-track-color: #dddddd;
scrollbar-face-color: #ffffff;
scrollbar-shadow-color: #4a678a;
scrollbar-highlight-color: #4a678a;
scrollbar-3d-light-color: #4a678a;}

hr {color: #999999; margin:0px 0px 10px 0px;}
hr.2 {color: #999999; width: 650px; margin:0px 0px 10px 0px;}

/* Certain "header" text, used at the top of the page, will use the same style across many pages. This code defines the style of multiple headers for different uses, so that a simple <h1> tag will apply the appropriate size, colour, alignment and style. */
h1 {font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #496e93;
	font-style: strong;
	text-align: left;
	margin:0px 0px 10px 0px;}
h2 {font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #496e93;
	font-style: strong;
	text-align: left;
	margin:0px 0px 10px 0px;}
h3 {font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:#666666;
	font-style: strong;
	text-align: left;
	margin:0px 0px 10px 0px;}
h4 {font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
	font-style: strong;
	text-align: left;
	margin:0px 0px 10px 0px;}

#copyright {text-align:center; position:relative; width:50%; left:25%; right:25%; top:115px; font-size:9px; color:#BBBBBB; font-family:Verdana, Arial, Helvetica, sans-serif; z-index:5;}

/* The 4 following lines control the colour of links in text, in all 4 potential states (unclicked, visited, hovered over and active). */
/* They also remove the underline (or "text decoration" on links. */
/* As most of the links on the page are images, the underlining effect took away from the "desktop style" approach. */
a:link {color: #496e93; text-decoration: none;}
a:visited {color: #496e93; text-decoration: none;}
a:hover {color: #496e93; text-decoration: none;}
a:active {color: #496e93; text-decoration: none;}

a.special:link {color: #FFFFFF; text-decoration: none;}
a.special:visited {color: #FFFFFF; text-decoration: none;}
a.special:hover {color: #FFFFFF; text-decoration: none;}
a.special:active {color: #FFFFFF; text-decoration: none;}

p {margin:0px 0px 10px 0px;}

/* *** Navigation Buttons *** */

.wrapper {		width:600px;
				height:auto;
				margin-left:auto;
				margin-right:auto;}

.navigation {	color:#80b2ef;
				position:relative;
				margin-left:auto; margin-right:auto;
				top:65px;
				width:600px;
				z-index:2;}
				
.header 	{	color:#80b2ef;
				position:relative;
				top:0px;
				width:600px;
				margin-left:auto; margin-right:auto; 
				z-index:1;}
				
#imgHeader {width:478px; height:78px; position:relative; left:57px;}
#imgHeader span {width:478px; height:78px; position:absolute; background:url("Images/header.jpg");}

#navAbout {width:68px; height:22px; position:relative; left:46px;}
#navAbout span {width:68px; height:22px; position:absolute; background:url("Images/navabout.jpg");}
#navImages {width:79px; height:22px; position:relative; left:107px;}
#navImages span {width:79px; height:22px; position:absolute; background:url("Images/navimages.jpg");}
#navVideo {width:73px; height:22px; position:relative; left:166px;}
#navVideo span {width:73px; height:22px; position:absolute; background:url("Images/navvideo.jpg");}
#navWriting {width:93px; height:22px; position:relative; left:230px;}
#navWriting span {width:93px; height:22px; position:absolute; background:url("Images/navwriting.jpg");}
#navContact {width:90px; height:22px; position:relative; left:306px;}
#navContact span {width:90px; height:22px; position:absolute; background:url("Images/navcontact.jpg");}

#imagesArtwork {width:190px; height:92px; position:relative; right:134px;}
#imagesArtwork span {width:190px; height:92px; position:absolute; border:2px solid black; background:url("Images/artworkbutton.jpg");}
#imagesPhotography {width:190px; height:92px; position:relative; left:10px;}
#imagesPhotography span {width:190px; height:92px; position:absolute; border:2px solid black; background:url("Images/photographybutton.jpg");}

/** *** Content for each section of the site, and how the container for the content is displayed on each unique page **/

#newsbox {background:url("Images/transback.png"); border:2px solid #999999; position:relative; z-index:3; top:110px; margin-left:auto; margin-right:auto; color:#000000; overflow:hidden; width:40%; height:auto; padding:10px;}

#contentAbout {background:url("Images/transback.png"); border:2px solid #999999; position:relative; width:50%; height:auto; margin-left:auto; margin-right:auto; top:110px; color:#000000; padding:10px; overflow:hidden; z-index:5;}

#contentImages {position:relative; width:50%; height:auto; top:120px; margin-left:auto; margin-right:auto; color:#000000; padding:10px; overflow:hidden; text-align:center; z-index:5;}

#contentVideo {background:url("Images/transback.png"); border:2px solid #999999; position:relative; width:50%; height:auto; margin-left:auto; margin-right:auto; top:110px; color:#000000; padding:10px; overflow:hidden; z-index:5;}

#contentWriting {background:url("Images/transback.png"); border:2px solid #999999; position:relative; width:50%; height:auto; margin-left:auto; margin-right:auto; top:110px; color:#000000; padding:10px; overflow:hidden; z-index:5;}

#contentContact {background:url("Images/transback.png"); border:2px solid #999999; position:relative; width:50%; height:auto; margin-left:auto; margin-right:auto; top:110px; color:#000000; padding:10px; overflow:hidden; z-index:5;}


/* *** Portfolio Images *** */

.imageArtwork {height:75px; width:75px; margin:5px 5px 5px 5px;}

.black_overlay{display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:500; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80);}

.white_content {display: none; position: absolute; top:80px; left: 25%; width:auto; height:auto; background-color: white; z-index:1000; overflow:hidden;}

.writingimage {display:block; margin-left:auto; margin-right:auto; margin-bottom:10px;}


/***Portfolio Hover Span Text*** */

#linksart a span {display: none;}

#linksart a:hover span {display: block;
   position: absolute; top: 250px; right: 10px; width: 450px;
   padding: 5px; margin: 10px; z-index: 100;
   color: #AAA; background: none;
   font: 10px Verdana, Arial, Helvetica, sans-serif; text-align: right;}

#linksphoto a span {display: none;}

#linksphoto a:hover span {display: block;
   position: absolute; top: 250px; right: 10px; width: 450px;
   padding: 5px; margin: 10px; z-index: 100;
   color: #AAA; background: none;
   font: 10px Verdana, Arial, Helvetica, sans-serif; text-align: right;}
   

/* *** SLIMBOX *** */

#lbOverlay {position: fixed;
			z-index: 9999;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: #666666;}

#lbCenter, #lbBottomContainer {position: absolute;
								z-index: 9999;
								overflow: hidden;
								background-color: #fff;}

.lbLoading {background: #fff url("Images/loading.gif") no-repeat center;}

#lbImage {position: absolute;
			left: 0;
			top: 0;
			border: 5px solid #fff;
			background-repeat: no-repeat;}

#lbPrevLink, #lbNextLink {display: block;
							position: absolute;
							top: 0;
							width: 50%;
							outline: none;}

#lbPrevLink {left: 0;}

#lbPrevLink:hover {background: transparent url("Images/prevbutton.jpg") no-repeat 0 15%;}

#lbNextLink {right: 0;}

#lbNextLink:hover {background: transparent url("Images/nextbutton.jpg") no-repeat 100% 15%;}

#lbBottom {font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
			font-size: 10px;
			color: #666;
			line-height: 1.4em;
			text-align: left;
			border: 2px solid #fff;
			border-top-style: none;
			padding:5px;}

#lbCloseLink {display: block;
				float: right;
				width: 80px;
				height: 22px;
				background: transparent url("Images/closebutton.jpg") no-repeat center;
				margin: 5px 0;
				outline: none;}

#lbCaption, #lbNumber {margin-right: 71px;}

#lbCaption {font-weight: bold;}


/* *** Flowplayer *** */

#player {border:5px solid black; margin-left:auto; margin-right:auto;}