ÿþ/* ================================================================ **

** style.css

** ---------------------------------------------------------------- **

** Created: 05-05-08 (dd-mm-yy)

** Author: onedollartemplates.com

** Template: Granite Glass

** ================================================================ */





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

** Generic

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

html { font-size: 76%; }

body {

	background: #333 url(../img/bg.gif);

	font-family: "Monotype Corsiva", "Book Antiqua", "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;

	font-size: 1.2em;

	line-height: 1.2em;

	color: #800000;

	text-align: center;

	margin: 0;

	padding: 0;

	text-decoration: none;

	}



/* headers */

h2, h3, h4, h5, h6 { 

	color: #800000; 

	margin: 0; 

	font-weight: normal;

	font-family: "Monotype Corsiva", "Book Antiqua", "Trebuchet MS", BookAntiqua, Tahoma, Verdana, Arial, Helvetica, sans-serif; letter-spacing: -1px;

	}

h2 { font-size: 1.3em; margin: 25px 0 15px; padding-bottom: 25px; border-bottom: 1px solid #ccc; }

h3 { font-size: 1.3em; margin: 25px 0 15px; }

h4 { font-size: 1.3em; margin: 20px 0 10px; }

h5 { font-size: 1.2em; margin: 20px 0 5px; }	

h6 { font-size: 1em; margin: 20px 0 0; }



/* text */

p { margin: 15px 0; }

acronym { cursor: help; }

pre, code, blockquote { 

	margin: 15px 0; 

	border: 1px dashed #ddd; 

	padding: 15px; 

	display: block; 

	background: #fff url(../img/grey_grad_.jpg) repeat-x 0 -130px; 

	color: #666; 

	}

blockquote { 

	font-family: "Monotype Corsiva", "Book Antiqua", "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; border: 1px solid #ddd; 

	padding: 0 15px 0 15px;

	background-color: #eee;

	min-height: 60px; 

	}

* html blockquote { height: 60px; }	



/* links */

a { text-decoration: underline; color: #7D1B7E; outline: none; }

a:hover { text-decoration: none; }



/* images */

img { border: 0px solid #ddd; padding: 1px; background-color: #333; }	

a img { }

a:hover img { border-color: #eee; }

img.right { margin: 0 0 20px 20px; }

img.left { margin: 0 20px 20px 0; }



/* lists */

ul, ol, dl { margin: 15px 0 15px 20px; padding: 0; }

ul { list-style-type: disc; }

ul ul, ol ol { margin-top: 0; margin-bottom: 0; }

ol { margin-left: 25px; }

dl { margin-left: 0; }

dl dt { font-weight: bold; margin-top: 15px; }

dl dd { margin: 0; }

dl dt, li { color: #099; }

li span { color: #333; }



/* tables */

table { margin: 15px 0; border: 1px solid #ddd; border-collapse: collapse; }

table th, 

table td { padding: 10px 15px; text-align: left; }

table thead th { 

	font-family: "Monotype Corsiva", "Book Antiqua", "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; 

	background-color: #099; 

	color: #fff; 

	font-weight: normal; 

	font-size: 1.1em;

	border: 1px solid #099;

	}

table tbody th { background-color: #ddd; }

table tbody th, 

table tbody td { border-top: 1px solid #ddd; }



/* forms */

form { background: url(../img/grey_grad_.jpg) repeat-x; border: 1px solid #ddd; padding: 0; margin: 25px 0; }

form fieldset { border: 0; padding: 10px 25px 15px; margin: 0; }

form fieldset legend { display: none; }

form p { height: 1%; }

form p:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }

form p label {  

	font-size: 1em; 

	color: #333; 

	float: left; 

	display: block; 

	width: 30%; 

	margin-right: 20px; 

	font-family: "Monotype Corsiva", "Book Antiqua", "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; }

form p input,

form p select,

form p textarea { 

	font-size: 1em; 

	color: #333; 

	border: 1px solid #ddd; 

	padding: 8px; 

	background-color: #eee; 

	width: 55%; 

	font-family: "Monotype Corsiva", "Book Antiqua", Tahoma, Arial, Helvetica, sans-serif; 

	}

form p select { width: 57.5%; }

form ul.fieldlist { margin: -30px 0 10px 33%; padding: 0; list-style-type: none; }

form ul.fieldlist li { color: #333; padding: 0 30px 5px 0; white-space: nowrap; }

form input.btn,

a.btn { 

	width: auto; 

	overflow: visible;

	border: 0;

	background: #099 url(../img/image_.jpg) repeat-x 0 -30px; 

	padding: 8px 10px;

	cursor: pointer; 

	color: #fff;

	text-decoration: none;  

	font-weight: bold;

	}

a.btn:hover { background-color: #ccc; color: #333; }	



/* horizontal rule */

hr { border: 0; height: 1px; background-color: #ddd; color: #ddd; margin: 30px 0 0; }



/* classes */

.left { float: left; }

.right {float: right; }

.hide { display: none; }



/* list of links */

ul.links { list-style-type: none; margin-left: 0; }

ul.links li { margin: 5px 0; }



/* list of images */

ul.images { margin-left: -15px; margin-bottom: 0; padding: 15px 0 0; list-style-type: none; height: 1%; width: 104%; }

* html ul.images { width: 100%; }

ul.images:after { content: "."; clear: both; display: block; visibility: hidden; height: 0; }

ul.images li { float: left; margin: 0; padding: 0 0 15px 15px; }

ul.images li img { vertical-align: middle; }





.gallerycontainer{

position: relative;

/*Add a height attribute and set to largest image's height to prevent overlaying*/

}



.thumbnail img{

border: 1px solid white;

margin: 0 5px 5px 0;

}



.thumbnail:hover{

background-color: transparent;

}



.thumbnail:hover img{

border: 1px solid blue;

}



.thumbnail span{ /*CSS for enlarged image*/

position: absolute;

background-color: lightyellow;

padding: 5px;

left: -600px;

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: 10;

left: 400px; /*position where enlarged image should offset horizontally */

z-index: 50;

}





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

**  Container

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

#container {

	margin: 0 auto;

	width: 1007px;

	}



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

**  Header

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

#header { background: url(../img/header_.png) no-repeat; }



/* Logo */

#header h1 { 

	font-family: "Monotype Corsiva", "Book Antiqua", "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; 

	font-size: 2.1em;

	font-weight: normal;

	color: #800000;

	margin: 0;

	padding: 40px 0;

	letter-spacing: -1px;

	}

#header h1 a { text-decoration: none; color: #800000; }

#header h1 a:hover { text-decoration: none; }

#header h1 span { color: #fff; }



/* if you would like to replace the logo with 

an image, comment out the above logo code and

uncomment the following */

/* 

#header h1 {

	background: url(../img/logo.gif) no-repeat;

	width: [your-logo-width-here]px;

	height: [your-logo-height-here]px;	

	margin: 0;

	float: left;

	}	

#header h1 a {

	display: block;

	height: 100%;

	text-indent: -9999px;

	outline: none;

	}

*/	



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

**  Body

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

#body { padding: 20px; background: #222 url(../img/body_.png) repeat-x; }



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

**  Navigation

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

ul#nav {

	margin: 0 0 20px;

	padding: 0;

	list-style-type: none;

	border-top: 1px solid #535457;

	border-bottom: 1px solid #050A10;

	height: 1%;

	}

ul#nav:after {	

	content: ".";

	clear: both;

	display: block;

	visibility: hidden;

	height: 0;

	}

ul#nav li {

	/* this width needs changing 

	depending on the amount of links. 

	Divide 100% by the amount of links 

	and set the value here. 

	e.g. 5 links: 100/5 = 20% */ 	

	width: 14.28%;

	float: left; 

	margin: 0; 

	font-size: 0.8em;

	background: #3C3C3C url(../img/nav_over_.png) no-repeat 50% 100%;

	}	

ul#nav li a {

	display: block; 

	background: #3C3C3C url(../img/nav_.png) repeat-x 50% 100%;

	padding: 11px 0 14px;

	color: #fff;

	text-decoration: none;

	border-right: 1px solid #535457;

	border-left: 1px solid #050A10;

	position: relative;	

	} 	

ul#nav li.first a {	border-left-color: #535457; }

ul#nav li a:hover { background-color: transparent; background-image: none; }

ul#nav li.on a,

ul#nav li.on a:hover { background-image: url(../img/nav_on_.png); }



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

**  Content

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

#content { background-color: #fff; padding: 2px; text-align: center; }

#content div { background: url(../img/content_.png) repeat-x; padding: 1px 20px 15px; min-height: 195px; }

* html #content div { height: 195px; }

#content div:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }

#content div div { bacound-image: none; padding: 0; min-height: 0; }

* html #content div div { height: 1%; }



#content #sub { padding: 0 0 0 20px; }

#content #main { padding: 0 20px 0 0; }



#content #main { width: 700px; float: left; background: url(../img/main_.png) no-repeat 100% 0%; } 

#content #sub { width: 164px; float: right; }



#home #content #sub { 

	padding: 0 20px 0 0; 

	width: 340px; 

	float: left; 

	background: url(../img/sub_.png) no-repeat 100% 0%; 

	}

#home #content #main { 

	padding: 0 0 0 20px; 

	float: right; 

	width: 290px; 

	background-image: none; 

	}

	

#content #sub h2 { font-size: 1.6em; padding-bottom: 10px; margin-bottom: 10px; }	





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

**  Footer

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

#footer { 

	padding: 0 20px; 

	background-color: #222;

	height: 1%; 

	font-size: 0.9em;

	color: #ccc;

	margin-top: -20px;

	}	

#footer:after {

	content: ".";

	clear: both;

	visibility: hidden;

	display: block;

	height: 0;

	}