/*------ Stylesheet for Isabelle Jackson 
http://www.isabellejackson.co.uk/

created March 05 by Isabelle Jackson
http://www.isabellejackson.co.uk -----------*/

/*
======================================================
colour scheme:
DARK GREY: #696969 for text
Gray: #808080 for visited hyperlinks
light gray: #E0E0E0 for dark cells in tables
Slate gray: #708090
LIGHT SILVER: #ececec 
silver: #ccc
======================================================
*/


html {width:100%;font-size:101%;}


body {background: #ffffff; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 85%; color: #696969;}

/*-------------------------------------*/
a {text-decoration:none;  font-weight: bold; color: #000000;}

a:visited {color: #808080;} 

a:hover {color: #ff0000;}

/*-------------------------------------*/



#main {border: 1px solid #cccccc; width: 978px; height: 500px auto; padding: 0; margin: 0;}


#menu {float: right; height: 100px; padding: 0 3px; margin: 0; width: 78%;}

#textArea {
	 width: 83%; float: right; padding: 10px 3px; margin:0;
}

#footer {width: 978px; margin: 0;}


/*---------navigation top right of the page -----------------*/


#topNav {float: right; text-align: center; margin: 0; padding: 0; width: 55%; background-color: #ffffff;}

#topNav ul.link {margin: 0; padding: 0; list-style: none; float: right;}

#topNav ul.link li {padding:0; margin: 0; float: left;}

#topNav ul.link li a, #bottomNav ul.link li a:link {color: #000000; float: left;	width: 80px; height: 20px; margin: 0; padding: 5px 0 10px 0; background-color: transparent; font-weight: lighter; font-size: 1em; text-decoration: underline;}  


#topNav ul.link li a:visited {color: #808080; float: left; width: 80px; height: 20px; margin: 0; padding: 5px 0 10px 0; background-color: transparent;  font-weight: lighter; font-size: 1em;}


#topNav ul.link li a:hover {float: left; margin: 0; padding: 5px 0 10px 0; background-color: #ffffff;  font-size: 1em; font-weight: lighter; text-decoration: none;}



/*-------------------------------------------------------*/


/*---------navigation bottom of the page -----------------*/


#bottomNav {float: right; text-align: center; margin: 0; padding: 0; width: 55%; background-color: #ffffff;}

#bottomNav ul.link {margin: 0; padding: 0; list-style: none; float: right; font-size: .8em;}

#bottomNav ul.link li {padding:0; margin: 0; float: left;}

#bottomNav ul.link li a, #bottomNav ul.link li a:link {color: #000000; float: left; margin: 0; padding: 15px 0; background-color: transparent; font-weight: lighter; font-size: 1em;}  


#bottomNav ul.link li a:visited {color: #808080; float: left; margin: 0; padding: 15px 0; background-color: transparent; font-weight: lighter; font-size: 1em;}

#bottomNav ul.link li a:hover {color: #ff0000; float: left; padding: 15px 0; margin: 0; background-color: #ececec;  font-size: 1em; font-weight: lighter;}

/*-------------------------------------------------------*/
img {border: none;}

.floatLeft {float: left;}

.floatRight {float: right;}

.eventlight{background-color: white; font-size: .8em;}

.eventdark {background-color:  #E0E0E0; font-weight: bold; font-size: .8em;}

.clear {clear: both;}

p {font-size: .9em; line-height: 1.6em;}

.copyright {text-align: left; font-size: .7em; color: #808080; width: 40%; float: left; padding: 5px 0;}

.intro {font-size: 1.2em; text-align: left; line-height: 2em; padding: 0 15px 0 15px; float: right;}

.buttons {float: right; margin-right: 0px;}

.contact {list-style: inside circle; font-size: .9em; line-height: 1.4em; padding: 0 5px;}

.tabletitle {font-size: 110%; color: #708090; font-weight: lighter;}


h1 {margin: 0; padding: 0;}

h2 {font-size: 1.6em; font-style: italic; font-weight: lighter; color: #708090; padding: 3px; text-align: left;}

.portfolio { font-size: 1.6em; font-style: italic; font-weight: lighter; color: #708090; padding: 3px; text-align: left;}

/*------------------Photo gallery----------------*/

#container {
    background:#fff url(../images/gallery/wave1.jpg) 10px 10px no-repeat;
    }
#container a.slideb:hover img, #container a.slidei:hover img {
    float:right;
    }
#container a.gallery:hover img {
    border:1px solid #fff; 
    float:left; 
    margin-right:5px;
    }
/* styling the :hover span */
#container a.gallery:hover span {
    position:absolute; 
    width:488px; 
    height:366px; 
    top:10px; 
    left:10px; 
    color:#000; 
    background:#fff;
    }

/* change the thumbnail border color */
#container a.gallery:hover {
    border:1px solid #fff; 
    }

/* move the thumbnails into the correct position */
#container ul {
    margin:5px; 
    float:right;
    }

/* set the size of the unordered list to neatly house the thumbnails */
#container ul {
    width:198px; 
    height:386px;
    }
#container li {
    float:left;
    }
/* Adding the thumbnail images */
#container a.gallery, #container a.gallery:visited {
    display:block; 
    color:#000; 
    text-decoration:none; 
    border:1px solid #000; 
    margin:1px 2px 1px 2px; 
    text-align:left; 
    cursor:default;
    }
#container a.slidea {
    background:url(../images/gallery/seascape-tbn.jpg); 
    height:93px; 
    width:60px;
    }
#container a.slideb {
    background:url(../images/gallery/holland07-tbn.jpg); 
    height:93px; 
    width:60px;
    }
#container a.slidec {
    background:url(../images/gallery/beach_huts06-tbn.jpg); 
    height:93px; 
    width:60px;
    }
#container a.slided {
    background:url(../images/gallery/worthing_pier1-tbn.jpg); 
    height:60px; 
    width:93px;
    }
* html #container a.slided {
    width:91px; 
    w\idth:93px;
    }
#container a.slidee {
    background:url(../images/gallery/ben_mark-tbn.jpg); 
    height:60px; 
    width:93px;
    }
#container a.slidef {
    background:url(../images/gallery/beaulieu_water-tbn.jpg); 
    height:60px; 
    width:93px;
    }
* html #container a.slidef {
    width:91px; 
    w\idth:93px;
    }
#container a.slideg {
    background:url(../images/gallery/scotland1-tbn.jpg); 
    height:60px; 
    width:93px;
    }
#container a.slideh {
    background:url(../images/gallery/bonfire_night06-tbn.jpg); 
    height:93px; 
    width:60px;
    }
#container a.slidei {
    background:url(../images/gallery/cobnor07-tbn.jpg); 
    height:93px; 
    width:60px;
    }
#container a.slidej {
    background:url(../images/gallery/winter_sailing-tbn.jpg); 
    height:93px; 
    width:60px;
    }
#container a.slidek {
    background:url(../images/gallery/jump2-tbn.jpg); 
    height:60px; 
    width:93px;
    }
* html #container a.slidek {
    width:91px; 
    w\idth:93px;
    }
#container a.slidel {
    background:url(../images/gallery/IoW06-tbn.jpg); 
    height:60px; 
    width:93px;    

    }
/* Remove the images and text from sight */
#container a.gallery span {
    position:absolute; 
    width:1px; 
    height:1px; 
    top:15px; 
    left:15px; 
    overflow:hidden; 
    background:#fff;
    }

/* The containing box for the gallery. */
#container {
    position:relative; 
    width:770px; 
    height:388px; 
    margin:20px auto 0 auto; 
    border:1px solid #aaa; 
    }

/* Removing the list bullets and indentation */
#container ul {
    padding:0; 
    margin:0; 
    list-style-type:none; 
    }

/*----------------------------------------------------------------------------------*/