/* CSS Document main styles*/

/*styles written by dw75@le.ac.uk*/

body {margin: 0; padding: 0; background: url("../images/body_bg.png") #000 no-repeat center top; font-family: Verdana, Arial, Helvetica, sans-serif;}

.cloud {position: absolute; top: 56px ; left: 12%; width: 170px; height: 60px;}
.smallcloud {position: absolute; top: 35px ; left: 51%; width: 76px; height: 27px;}
.smallcloud2 {position: absolute; top: 70px ; left: 18%; width: 76px; height: 27px;}
.campus {float: left; margin: -10px 0 0 20px;}

.flexible {min-width: 770px; max-width: 1024px; margin: 0 auto 0 auto; min-height: 300px; clear: both; padding: 87px 0 0 0; background: transparent;}
.flexible a:link, .flexible a:active, .flexible a:visited {font-weight: bold; color: #8CC6FF; text-decoration: none;}
.flexible a:hover {text-decoration: underline;}
.flexible h1 {font-family: Century Gothic, Verdana, Arial, Helvetica, sans-serif; color: #8CC6FF; font-weight: normal; margin: 0 0 0 20px; padding: 20px 0 10px 0; font-size: 160%; clear: both;}
.flexible h2 {font-family: Century Gothic, Verdana, Arial, Helvetica, sans-serif; color: #8CC6FF; font-weight: normal; margin: 0 0 0 9px; padding: 10px 0 10px 0; font-size: 160%; clear: both;}
.flexible p {color: #b3b3b3; font-size: 72%; line-height: 140%; margin: 0 20px 10px 20px; padding: 0; clear: both;}
.flexible p.narrow {width: 510px; clear: none;}


.flexible .left {float: left; width: 66%; margin: 0 0 0 20px;}
.flexible .left img {margin: 0 0 10px 0;}
.flexible .right {float: right; width: 31%; min-height: 330px;}
.flexible .right p {margin: 5px 0 0 10px; padding: 0;}
.flexible .right ul#gallery {margin: 0 0 40px 10px; padding: 0;}
.flexible .right ul#gallery li {float: left; margin: 0 10px 10px 0; list-style-type: none;}

.flexible .right ul#gallery li a {display: block; border: 1px solid #000;}
.flexible .right ul#gallery li a#current {border: 1px solid #66CC00;}
.flexible .right ul#gallery li img:hover, .flexible .right img:hover {-moz-opacity: 0.70; filter: alpha(opacity=70); opacity:.70;}

.flexible object {background: #000; margin: 0 0 10px 0;}

img {border: none;}
.photo-left {float: left;}
table td {vertical-align: top;}

div.flickr {margin: -65px 0 16px 10px;} 
div.flickr img:hover {-moz-opacity: 0.85 !Important; filter: alpha(opacity=85) !Important; opacity:.85 !important;}

/*This sets the colour of the bar containing the bottom navigation */
.bottomnav {background: transparent; clear: both; padding: 20px 0 0 0; clear: both;}
/*This sets the colour of the five boxes*/
.bottomnav a {background: transparent; border: 1px solid #484848;}
/*This sets the colour of the text within the five boxes*/
.bottomnav a:link, .bottomnav a:visited, .bottomnav a:active {color: #484848;}
/*This sets the colour of the five boxes and text within, when the mouse is rolled over*/
.bottomnav a:hover {color: #002D59; background: #8CC6FF; border: 1px solid #8CC6FF;}


/*This sets the colour for the bar underneath the bottom navigation*/
.maintainer {background: transparent; color: #4f4f4f;}
/*This sets the colour of the text for the updated date*/
.maintainerleft {color: #4f4f4f;}
/*This sets the colour of the text for the maintainer text*/
.maintainerright a:link, .maintainerright a:visited, .maintainerright a:active {color: #8CC6FF; text-decoration: none !important;}
/*This sets the colour of the text for the maintainer text, when the mouse is rolled over*/
.maintainerright a:hover {color: #D5EAFF; text-decoration: underline !important;}
/*This sets the colour of the approved text at the very bottom of the screen*/
.approved {color:#4f4f4f;}