/* CSS Document */

body {
color: #fff;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 76%;
background-color: #000;
margin: 0;
padding: 0;
}

.darkgrey {
background-color: #000;
}

/* Text properties  */

.hide {
text-indent: -9999px;
}

img {
display: block;
border: 0;
}

a:link {
font-weight: bold;
text-decoration: none;
color:#9cf;
background: transparent;
}

a:visited {
font-weight: bold;
text-decoration: none;
color: #9cf;
}

a:hover {
font-weight: bold;
text-decoration: underline;
color:#9cf;
background: transparent;
}

a:active {
font-weight: bold;
text-decoration: none;
color: #9cf;
background: transparent;
}

h1 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 1.4em;
font-weight: bold;
text-align: right; 
}

h2 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 1.2em;
font-weight: bold; 
text-align: left; 
}

h3 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 1.2em;
font-weight: bold;
text-align: right; 
}

h4 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
text-align: left; 
}

h4.sidebar {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.9em;
font-weight: bold;
text-align: left; 
}

a.sidebar {font-size:0.9em;}
.yellow {color:#ffc;}

p {
margin: 1.2em 0em 1.2em 0em;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align: left;
font-size: 1.0em;
font-weight: normal;
}

ul {
list-style-image:none;
padding-left:10px;
margin-left:5px;
margin-bottom:5px;
}


/*background image filling in whole web browser space*/

img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
			
/* Set up proportionate scaling */
width: 100%;
height: auto;
			
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}




/*Main structure including left-hand side navigation and main container. These are used for all pages */

#container {
position: relative;
margin-top:20px;
margin-left:auto;
margin-right:auto;
height:600px;
width:900px;
}

#left {
float:left;
width:200px;
height:600px;
padding: 0px 0px 0px 0px;
background-image:url(images/main/menu_back.png);
background-repeat:no-repeat;
z-index: 1;
}

#mainlogo {
margin-top: 5px;
margin-left: 85px;
padding: 0px 0px 0px 0px;
float: left;
z-index: 2;
clear:left;
}

#navigation {
width: 40px;
margin-left: 56px;
margin-top: 92px;
z-index: 3;
}

/*Popup window structure*/

#popupwindow {
background-color: #000;
}

/*Play window structure*/
#play {
margin-top:20px;
margin-left:auto;
margin-right:auto;
height:620px;
width:900px;
background-image: url(images/play/playbackground.gif);
background-repeat:no-repeat;
background-position: top;
text-align: right;
}

#playlink {
text-align: center;
}

/*Index pages structure */

#indexcontainerone {
float:left;
width:400;
height:600;
padding: 0px 0px 0px 0px;
}

#indexoneleft {
float:left;
width:200;
height:600;
padding: 0px 0px 0px 0px;
}

.links { 
margin-left:10px;
margin-top:10px:
background-color:#666;
height:130px;
}

#indexonemiddle {
float:left;
width:50;
height:600;
padding: 0px 0px 0px 0px;
}

#indexoneright {
float:left;
width:150;
height:600;
padding: 0px 0px 0px 0px;
}

#indexonerightabout {
width: 150px;
margin-left: 0px;
margin-top: 501px;
}


#indexcontainertwo {
float:right;
width:300;
height:600;
padding: 0px 0px 0px 0px;
}

#indextwoleft {
float:left;
width:150;
height:600;
padding: 0px 0px 0px 0px;
}

#indextworight {
float:left;
width:150;
height:600;
padding: 0px 0px 0px 0px;
}

/* About page structure */

#aboutright {
float:left;
width:300px;
height:600px;
padding: 0px 0px 0px 0px;
background-image:url(images/main/about_right.gif);
background-repeat:no-repeat;
}

#aboutcenter {
float: left;
width: 400px;
height: 600px;
padding: 0px 0px 0px 0px;
background-image:url(images/main/about_middle.gif);
background-repeat:no-repeat;
}

#aboutscroll {
overflow:auto;
width: 390px;
height: 380px;
padding: 0px 0px 0px 0px;
margin-top: 10px;
margin-left: 10px;
}

#aboutlogo {
margin-top: 136px;
margin-left: 100px;
padding: 0px 0px 0px 0px;
float: left;
clear:left;
z-index: 4;
}

#aboutrecent {
margin-top: 138px;
margin-left: 103px;
height:100px;
padding: 0px 0px 0px 0px;
z-index: 3;
float:left;
clear:left;
text-align:left;
}

/* CV page structure */

#cvright {
float:left;
width:200px;
height:600px;
padding: 0px 0px 0px 0px;
background-image:url(images/main/cv_right.gif);
background-repeat:no-repeat;
}

#cvcenter {
float: left;
width: 500px;
height: 600px;
padding: 0px 0px 0px 0px;
background-image:url(images/main/cv_middle.gif);
background-repeat:no-repeat;
background-color:#003;

}

#cvscroll {
overflow:auto;
width: 490px;
margin-top: 10px;
margin-left: 10px;
height: 490px;
padding: 0px 0px 0px 0px;
}

/* Audio page structure */

#audioright {
float:left;
width:200px;
height:600px;
padding: 0px 0px 0px 0px;
background-image:url(images/main/audio_right.gif);
background-repeat:no-repeat;
}

#audiocenter {
float: left;
width: 500px;
height: 600px;
padding: 0px 0px 0px 0px;
background-image:url(images/main/audio_middle.gif);
background-repeat:no-repeat;
}

#audiocontent {
margin-top: 10px;
margin-left: 10px;
width: 400px;
height: 300px;
padding: 0px 0px 0px 0px;
}

#audiotext {
margin-top: 188px;
margin-left: 10px;
padding: 0px 0px 0px 0px;
float: left;
z-index: 4;
}

/* Video page structure */

#videoright {
float:left;
width:200px;
height:600px;
padding: 0px 0px 0px 0px;
background-image:url(images/main/video_right.gif);
background-repeat:no-repeat;
}

#videocenter {
float:left;
width: 500px;
height: 600px;
padding: 0px 0px 0px 0px;
background-image:url(images/main/video_middle.gif);
background-repeat:no-repeat;
}

#videocontent {
margin-top: 10px;
margin-left: 10px;
width: 450px;
height: 300px;
padding: 0px 0px 0px 0px;
}

#videoscroll {
overflow:auto;
width: 490px;
margin-top: 10px;
margin-left: 10px;
margin-bottom: 10px;
height: 480px;
padding: 0px 0px 0px 0px;
}

#videotext {
margin-top: 0px;
margin-left: 10px;
padding: 0px 0px 0px 0px;
float: left;
z-index: 4;
}

/*Animation page structure*/

#animationright {
float:left;
width:200px;
height:600px;
padding: 0px 0px 0px 0px;
background-image:url(images/main/animation_right.gif);
background-repeat:no-repeat;
}

#animationcenter {
float:left;
width: 500px;
height: 600px;
padding: 0px 0px 0px 0px;
background-image:url(images/main/animation_middle.gif);
background-repeat:no-repeat;
}

#animationcontent {
margin-top: 10px;
margin-left: 10px;
width: 450px;
height: 350px;
padding: 0px 0px 0px 0px;
}

#animationtext {
margin-top: 140px;
margin-left: 10px;
padding: 0px 0px 0px 0px;
float: left;
z-index: 4;
}

/*Architecture page structure*/


#architectureboth {
float:left;
width: 700px;
height: 600px;
padding: 0px 0px 0px 0px;
background-image:url(images/main/architecture_both.gif);
background-repeat:no-repeat;
}

#architecturecontent {
overflow:auto;
margin-top: 10px;
margin-left: 10px;
margin-bottom:10px;
width: 630px;
height: 480px;
padding: 0px 0px 0px 0px;
}

#architecturetext {
margin-top: 0px;
margin-left: 10px;
padding: 0px 0px 0px 0px;
float: left;
z-index: 4;
}

.textwidth { width:450px; }

/*Web Design page structure*/

#webdesignboth {
float:left;
width: 700px;
height: 600px;
padding: 0px 0px 0px 0px;
background-image:url(images/main/webdesign_both.gif);
background-repeat:no-repeat;
}

#webdesigncontent {
overflow:auto;
margin-top: 10px;
margin-left: 10px;
margin-bottom:10px;
width: 630px;
height: 480px;
padding: 0px 0px 0px 0px;
}

#webdesigntext {
margin-top: 0px;
margin-left: 10px;
padding: 0px 0px 0px 0px;
float: left;
z-index: 4;
}

/*Illustration page structure*/

#illustrationright {
float:left;
width:200px;
height:600px;
padding: 0px 0px 0px 0px;
background-image:url(images/main/illustration_right.gif);
background-repeat:no-repeat;
}

#illustrationcenter {
float:left;
width: 500px;
height: 600px;
padding: 0px 0px 0px 0px;
background-image:url(images/main/illustration_middle.gif);
background-repeat:no-repeat;
}

#illustrationcontent {
margin-top: 10px;
margin-left: 10px;
width: 450px;
height: 350px;
padding: 0px 0px 0px 0px;
}

#illustrationtext {
margin-top: 140px;
margin-left: 10px;
padding:: 0px 0px 0px 0px;
float: left;
z-index: 4;
}



/*Photography page structure*/

#photographyright {
float:left;
width:200px;
height:600px;
padding: 0px 0px 0px 0px;
background-image:url(images/main/photography_right.gif);
background-repeat:no-repeat;
}

#photographycenter {
float:left;
width: 500px;
height: 600px;
padding: 0px 0px 0px 0px;
background-image:url(images/main/photography_middle.gif);
background-repeat:no-repeat;
}

#photographycontent {
margin-top: 10px;
margin-left: 10px;
width: 450px;
height: 350px;
padding: 0px 0px 0px 0px;
}

#photographytext {
margin-top: 140px;
margin-left: 10px;
padding:: 0px 0px 0px 0px;
float: left;
z-index: 4;
}