/*
info CSS for KS Turner site
*/

body {
   font-family: Veranda, Helvetica, Arial, sans-serif;
   background-color: #cccccc;
   background-image: url(background4.jpg);
   line-height: 125%;
   padding-left: 0px;
   margin: 0;
}

h1, h2, h3, h4 {
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

h1 {
   font-size: 22px;
   background-color: #cccccc;
   background-image: url(background4.jpg);
   background: url(name.gif) no-repeat bottom left;
   color: white;
   padding-top: 40px;
   padding-bottom: 40px;
   padding-left: 32px;
   margin: 0;
}

h2 {
   color: #666666;
   font-size: 140%;
   font-weight: bold;
   padding-top: 5px;
   padding-left: 10px;
}


h4 {
   color: #666666;
   font-size: 125%;
   font-weight: bold;
   padding-top: 5px;
   padding-left: 10px;
}


#tagline p {
   font-style: italic;
   font-size: 14px;
   color: white;
   font-family: Georgia, Garamond, Times, serif;
   background-color: black;
   background-image: url(background.jpg);
   border-top: 3px solid #cc0000;
   border-bottom: 3px solid #cc0000;
   padding-top: 5px;
   padding-bottom: 5px;
   padding-left: 36px;
   margin: 0;
}

li {
   font-size: 14px;
   line-height:140%;
   list-style-type: none;
   list-style-position: outside;
   background-color: #cccccc;
   margin-left: -10px;
   margin-right: 20px;
   margin-top: 5px;
   margin-bottom: 5px;
   padding-top: 3px;
   padding-bottom: 3px;
   padding-left: 5px;
   padding-right: 5px;
   border: solid black 2px;
}

#navigation {
   width: 190px;
   height: 510px;
   background: url(rose.gif) no-repeat bottom center;
   border-right: 3px solid #cc0000;
   border-left: 0;
   border-top: 0;
   border-bottom: 3px solid #cc0000;
}


p {
   font-size: 14px;
   color: black;
   padding-left: 10px;
}


a {
   font-weight: bold;
}

a:link {
   color: #cc0000;
}

a:visited {
   color: #cc0000;
}

a:hover {
   text-decoration: none;
   color: #cc0000;
   background-color: grey;
}

a:active {
   color: #cc0000;
   background-color: black;
}


b {
   font-weight: bold;
}

b:link {
   color: white;
}

b:visited {
   color: white;
}

b:hover {
   text-decoration: none;
   color: #cc0000;
   background-color: grey;
}

b:active {
   color: #cc0000;
   background-color: black;
}
   

.fun {
   color: #000066;
   font-family: Times, Garamond, serif;
   font-size: 14px;
   letter-spacing: 0.03em;
   font-weight: bold;
}

.textbox {
   width: 560px;
   border: 2px solid black;
   padding-left: 10px;
   padding-right: 10px;
}

.textbox p {
   font-family: Garamond, Times, serif;
   font-size: 16px;
   line-height: 150%;
   text-align: justify;
   text-indent: 25px;   
}

p.indented {
margin: 0px;
padding: 0px;
text-indent: 20px
}


/*This next bit of css deals with the actual position of the items on the screen, giving
   a frames effect. It uses absolut positioning - fixed x and y co-ordinates which are measure, in pixels
   from the top-left corner of the browsers display.
*/

#navigation, #body, #header {
   position: absolute;
}

#navigation, #body {
   top: 135px
}

#body {
   left: 200px
}

#header {
   width: 100%;
}

/*
main positioing css finishes here. The next bit is integrated content and arranging positions.
*/

.feature {
   float: right;
   margin-right: 40px;
   margin-left: 20px;
}

.feature2 {
   float:right;
   margin-left: 20px;
}

.feature3 {
   float:right;
   margin-left: 20px;
   margin-top: 5px;
   margin-right: 40px
}

.feature4 {
   float:left;
   margin-left: 0px;
   margin-top: 5px;
   margin-right: 10px
}


/*
the following is the code for the gallery thumbnails and hover for
larger image
*/

<style type="text/css">

.gallerycontainer{
position: relative;
/*Could add a height attribute and set to largest image's height to prevent overlaying*/
}



/*
the following sets the font size etc within the enlarged image
*/

.gallerycontainer p {
   font-size: 10px;
   color: #666666;
   margin-top: 0;
   width: 250px;
   line-height: 1.1em;
}

/*
gallery font finished. Next is info on gallery thumbnails etc
*/

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

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail:hover img{
border: 1px black;
margin: 0 5px 5px 0;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: -200px;
left: 200px; /*position where large image is offset horizontally */
}

/*
code for the gallery thumbnails and hover finishes here
*/

blockquote {
   font-size: 14px;
   font-style: italic;
   line-height: 150%;
}

blockquote2 {
   float:left;
   font-size: 14px;
   font-style: italic;
   line-height: 150%;
}

</style>