@charset "utf-8";
/* CSS Document */

/*removes browser default padding and margins which can muck up the layout*/
*{
margin: 0px;
padding: 0px;
}

/*controls the background colour of the site*/
body {
background-color:#080128 ;
}



/*sets the background images fro each page*/

#indexpage #container{
background-image:url(images/home.jpg)
}
#contactpage #container{
background-image:url(images/contact.jpg)
}
#formpage #container{
background-image:url(images/contactform.jpg)
}
#newspage #container{
background-image:url(images/news.jpg)
}
#paperartpage #container{
background-image:url(images/paperart.jpg)
}
#photographypage #container{
background-image:url(images/photography.jpg)
}
#thankspage #container{
background-image:url(images/contactform.jpg)
}
#writingpage #container{
background-image:url(images/writing.jpg)
}


/*sets the default font, style and size*/
body,td,th {
font-family:Century Gothic, sans-serif;
color: #080128;
font-size: 100%;
}

/*these set the default link font colours and styles*/
a:link {
color:#080128;
text-decoration: none;
border: 0px;	
}
a:visited {
text-decoration: none;
color: #080128;
}
a:hover {
text-decoration: underline;
color: #cccccc;
}
a:active {
text-decoration: none;
color:#080128;
}


/*sets the size and position of the site on the screen*/
#container {
margin: 20px auto 0px auto;
width:800px;
min-height:560px;
height: auto !important;
height:560px;
}


/*sets the position of the logo*/
#logo{
background-color:#FFFFFF;
width:110px;
height:110px;
float: left;
display:inline;
padding: 10px;
margin-left:46px;
margin-top:35px;
}


/*sets up the logo rollover action*/
#logoroll{
  display: block;
  width: 110px;
  height: 110px;
  background: url("images/logo.gif") no-repeat 0 0;
}

#logoroll:hover{ 
  background-position: 0 -110px;
}

#logoroll span{
  display: none;
}

/*sets the size, position of the navigation bar*/
#navbar {
padding-top: 84px;
margin-left: 175px;
padding-bottom: 4px;
}

/*sets the look of the navigation links on mouse hover...also the current page navbar link*/
#navbar a:hover, #currentpage a{
color: #cccccc;
margin-left: 0px;
text-decoration:none;
}

/*sets the style and layout of the links within the navigation bar*/
#navbar ul li{
display: inline;
color: #080128;
font-size: 155%;
list-style-type:none;
padding-right: 6px;
padding-left: 8px;	
}

/*sets the size and position of the content area on the main site*/
#content{
clear:both;
width:800px;
height:390px;
}

#buttons{
width:280px;
height:390px;
padding-left:510px;
}

#button_one{
width:115px;
height:165px;
padding-top:225px;
float:left;
z-index:300
}


#button_two{
width:165px;
height:165px;
padding-top:225px;
float:left;
z-index:300;
}

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
/*direction:ltr;*/
visibility: hidden;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
/*left: -1000px;*/
visibility: hidden;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
z-index:100;
cursor: pointer;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
z-index:100;
top: -80px;
left: -42px; /*position where enlarged image should offset horizontally */
display:block;
}

#footer{
margin: 3px auto;
width: 800px;
}

#footer p{
font-size: 60%;
color:#FFFFFF;
}

#form{
padding-left:50px;
}