/* stylesheet.css */

/*
FIRST IN THE CUE - COLOUR SCHEME
Yellow: #ffc220
Charcoal: #636468
Dark Charcoal: #3f3f3f
Light Grey: #b2b2b2
Medium Grey: #8c8c8c
Blue: #3399ff

FONT FAMILY
verdana,lucida, helvetica, arial, sans-serif
'IM Fell French Canon', serif
'Open Sans Condensed', sans-serif
*/

body{
   font-family: verdana,lucida, helvetica, arial, sans-serif;
   background-color: none;
   background-image: url(images/background.jpg);
   background-repeat: repeat-x;
   padding: 0px;
   margin: 0px;
}


/* paragraphs */
p{
 font-family: verdana,lucida, helvetica, arial, sans-serif;
 font-size: 13px;
 line-height: 23px;
 color: #8c8c8c;
 background: transparent;
 white-space: normal;
}

/* headings */
p1{
 font-family: 'IM Fell French Canon', serif;
 font-weight: 400;
 font-style:italic;
 font-size: 26px;
 Line-height: 26px;
 color: #3399ff;
 background: transparent;
 white-space: normal;
 letter-spacing: 1px;
 text-decoration: italic;
}

p2{
 font-family: 'Open Sans Condensed', sans-serif;
 font-weight: normal;
 font-size: 22px;
 Line-height: 22px;
 color: #8c8c8c;
 background: transparent;
 white-space: normal;
 letter-spacing: 1px;
}

p3{
 font-family: 'IM Fell French Canon', serif;
 font-weight: 400;
 font-style:italic;
 font-size: 26px;
 Line-height: 26px;
 color: white;
 background: transparent;
 white-space: normal;
 letter-spacing: 1px;
 text-decoration: italic;
}

p4{
 font-family: 'Open Sans Condensed', sans-serif;
 font-weight: normal;
 font-size: 16px;
 Line-height: 22px;
 color: #3399ff;
 background: transparent;
}

/* stand-out quote */
h1{
 font-family: 'IM Fell French Canon', serif;
 font-weight: 400;
 font-style:italic;
 font-size: 26px;
 Line-height: 26px;
 color: #3399ff;
 background: transparent;
 white-space: normal;
 letter-spacing: 1px;
 text-decoration: italic;
}

/* emphasised text - bold */
.emph{
 font-weight: bold;
}


/* emphasised text - italic */
.ital{
 color: #3399ff;
 font-style: italic;
}

/* blue text */
.blue{
 color: #3399ff;
}

/* image float left */
img.floatleft{
 float: left;
 margin-top: 10px;
 margin-bottom: 200px;
 margin-left: 4px;
 margin-right: 20px;
}

/* image float right */
img.floatright{
 float: right;
 margin-top: 15px;
 margin-bottom: 50px;
 margin-left: 15px;
 margin-right: 4px;
}


/* headings */
h1{
 font-family: 'IM Fell French Canon', serif;
 font-weight: 400;
 font-size: 26px;
 Line-height: 26px;
 color: #3f3f3f;
 background: transparent;
 white-space: normal;
 letter-spacing: 1px;
}


/* navigation links */
div#navigation a:link{
 color: #3f3f3f;
 text-decoration: none;
}

div#navigation a:visited{
 color: #3f3f3f;
 text-decoration: none;
}

div#navigation a:focus{
 color: #3399ff;
 text-decoration: none;
}

div#navigation a:hover{
 color: #3399ff;
 text-decoration: none;
}

div#navigation a:active{
 color: #3f3f3f;
 text-decoration: none;
}

/* left column links */
div#leftcolumn a:link{
 color: #3399ff;
 text-decoration: underline;
}

div#leftcolumn a:visited{
 color: #3399ff;
 text-decoration: underline;
}

div#leftcolumn a:focus{
 color: #3f3f3f;
 text-decoration: underline;
}

div#leftcolumn a:hover{
 color: #3f3f3f;
 text-decoration: underline;
}

div#leftcolumn a:active{
 color: #3f3f3f;
 text-decoration: underline;
}


/* right column links */
div#rightcolumn a:link{
 color: #8c8c8c;
 text-decoration: underline;
}

div#rightcolumn a:visited{
 color: #8c8c8c;
 text-decoration: underline;
}

div#rightcolumn a:focus{
 color: #3f3f3f;
 text-decoration: underline;
}

div#rightcolumn a:hover{
 color: #3f3f3f;
 text-decoration: underline;
}

div#rightcolumn a:active{
 color: #8c8c8c;
 text-decoration: underline;
}


/* full column links */
div#fullcolumn a:link{
 color: #8c8c8c;
 text-decoration: underline;
}

div#fullcolumn a:visited{
 color: #8c8c8c;
 text-decoration: underline;
}

div#fullcolumn a:focus{
 color: #3f3f3f;
 text-decoration: underline;
}

div#fullcolumn a:hover{
 color: #3f3f3f;
 text-decoration: underline;
}

div#fullcolumn a:active{
 color: #8c8c8c;
 text-decoration: underline;
}

/* footer links */
div#footer a:link{
 color: #white;
 text-decoration: none;
}

div#footer a:visited{
 color: #white;
 text-decoration: none;
}

div#footer a:focus{
 color: #3399ff;
 text-decoration: none;
}

div#footer a:hover{
 color: #3399ff;
 text-decoration: none;
}

div#footer a:active{
 color: #white;
 text-decoration: none;
}

/* navigation list divider */
.navdiv{
 color: #3399ff;
 font-weight: bold;
 word-spacing: 38px;
}


/* navigation bar div */
#navigation {
 clear: both;
 width: 1000px;
 height: 58px;
 font-family: 'Open Sans Condensed', sans-serif;
 font-size: 18px;
 font-weight: normal;
 line-height: 70px;
 color: #3f3f3f;
 letter-spacing: 2px;
 padding: 0px;
 border: none;
 margin: auto;
 background-color: transparent;
 text-align:center;
 text-decoration: none;
}


/* header div */
#header {
 color: white;
 width: 1000px;
 height: 225px;
 clear: both;
 padding: 0px;
 border: none;
 margin: auto;
 background-color: transparent;
 text-align:center;
 background-image: url(images/header.png);
 background-size: 1000px 225px;
}

/* main container div */
#container { 
 margin: auto;
 width: 900px;
 border: none;
 background-color: transparent;
}

/* Full column div */
#fullcolumn { 
 color: #b2b2b2;
 border: none;
 background: transparent;
 padding: 0px 0px 20px 0px;
 margin: 0;
 width: 900px;
 clear: both;
}


/* right column main text div */
#rightcolumn { 
 color: #8c8c8c;
 border: none;
 background: transparent;
 padding: 10px 0px 50px 25px;
 margin: 0;
 width: 640px;
 float: right;
 clear: right;
 display: inline;
}


/* left column div */
#leftcolumn { 
 float: left;
 clear: left;
 color: #8c8c8c;
 border: none;
 background: #e6e7e8;
 margin: 10px 0px 35px 0px;
 padding: 20px 25px 25px 25px;
 width: 175px;
 display: inline;
}


/* Charcoal Bar 100% width div */
#charcoalbar{
 width: 100%;
 height: 180px;
 margin: auto;
 background-color: #3f3f3f;
 border: none;
 padding: 0px;
 clear: both;
}


/* footer container div */
#footercontainer { 
 width: 900px;
 height: 70px;
 clear: both;
 border: none;
 background: transparent;
 margin: auto;
 padding: 0px;
}

/* footer left div */
#footerleft { 
 width: 450px;
 height: 70px;
 clear: left;
 float: left;
 display: inline;
 border: none;
 background: transparent;
 margin: auto;
 padding: 0px;
 font-family: 'Open Sans Condensed', sans-serif;
 font-size: 9px;
 line-height: 70px;
 color: white;
 text-align: left;
 letter-spacing: 1px;
}

/* footer right div */
#footerright { 
 width: 450px;
 height: 70px;
 clear: right;
 float: right;
 display: inline;
 border: none;
 background: transparent;
 margin: auto;
 padding: 0px;
 font-family: 'Open Sans Condensed', sans-serif;
 font-size: 9px;
 line-height: 70px;
 color: white;
 text-align: right;
 letter-spacing: 1px;
}


/* centered full width column container for main gallery body */
#gallerycontainer{
 width: 900px;
 color: white;
 border: none;
 background: transparent;
 margin: auto;
 padding-top: 15px;
 padding-bottom: 15px;
 padding-left: 45px;
 padding-right: 45px;
 min-height: 633px;
}



ul.enlarge{
list-style-type:none; /*remove the bullet point*/
margin-left:0;
text-align: center;
}
ul.enlarge li{
display:inline-block; /*places the images in a line*/
position: relative;
z-index: 0; /*resets the stack order of the list items - later we'll increase this*/
margin:0 20px 10px 10px;
font-family: verdana,lucida, helvetica, arial, sans-serif;
font-size:13px;
line-height:15px
text-align: center; 
color: #8c8c8c;
background-color:white;
padding: 6px;
-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-webkit-border-radius: 2px; 
-moz-border-radius: 2px; 
border-radius: 2px;
}
ul.enlarge img{ 
border: none;
margin: 0px 0px 5px 0px; 
}

ul.enlarge span{
position:absolute;
left: -9999px;
top: 0px;
background-color:white;
padding: 9px;
font-family: verdana,lucida, helvetica, arial, sans-serif;
font-size:1em;
text-align: center; 
color: #8c8c8c; 
-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
box-shadow: 0 0 20px rgba(0,0,0, .75);
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius:4px;
}
ul.enlarge li:hover{
z-index: 50;
cursor:pointer;
}
ul.enlarge span img{
padding:0px;
background:#ccc;
}
ul.enlarge li:hover span{ 
top: -250px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
left: -20px; /*distance from the left of the thumbnail to the left of the popup image*/
}
ul.enlarge li:hover:nth-child(2) span{
left: -125px; 
}
ul.enlarge li:hover:nth-child(3) span{
left: -235px; 
}
/**IE Hacks - see http://css3pie.com/ for more info on how to use CS3Pie and to download the latest version**/
ul.enlarge img, ul.enlarge span{
behavior: url(pie/PIE.htc); 
}