/*
STYLE SHEET FOR British Cavy Council website 
Created by Simon Neesam
www.britishcavycouncil.org.uk
Novice pages

ToC
	1. defaults
	2. structure
	3. links and navigation
	4. fonts
	5. images
	6. tables
	7. forms
Notes

*/

/*-------- 1. defaults --------*/

* {	
	margin: 0;
	padding: 0;
	}

body {
	font: 62.5% "Trebuchet MS", Verdana, sans-serif;
	color: #333333;
	background-color: #ffffff;
	margin: 0 auto;	
	width: 805px;
	}

/*-------- 2. structure --------*/

#mastWrapper {
	display: inline;
	margin: 0 auto;
	width: 800px;

	}

#logoWrapper {
	float: left;
	height: 52px;
	width: 395px;
background: #ffffff url(gifs/Intro-logo.gif) no-repeat 10px 10px;
	padding-top: 58px;
	padding-left: 5px;
border-bottom: 2px solid #a2c046;
	}

#navContainer {
	float: left;
	height: 110px;
	width: 400px;
border-bottom: 2px solid #a2c046;
		}

#navigation ul {
	list-style-type: none;
	}

#navigation li {
	float: left;
	font-size: 12px;
	margin-left: 12px;
	padding-top: 10px;
	border-top: 70px solid #c69974;
	}

#navigation #novIntroPageLink {
border-top: 70px solid #a2c046;
	}

#navigation #novHistoryPageLink {
border-top: 70px solid #b4bec8;
	}

#navigation #novHusbandryPageLink {
border-top: 70px solid #dcad67;
	}

#navigation #novShowingPageLink {
border-top: 70px solid #404c58;
	}

#navigation #novFAQPageLink {
border-top: 70px solid #87a43a;
	}

#navigation #novLinksPageLink {
border-top: 70px solid #af9f6b;
	}

#navigation #novContactPageLink {
border-top: 70px solid #4a5328;
	}

#divWaveBorder {
float: left;
width: 800px;
height: 50px;
background: url(gifs/wave-line.gif) no-repeat 0;
}

#divPageTitle {
	float: left;
	width: 590px;
	padding: 5px 205px 5px 5px;
	}

#divColumn1 {
	float: left;
	width: 190px;
	padding: 5px 5px 5px 5px;
	}

#divColumn2 {
	float: left;
	width: 190px;
	padding: 0px 5px 5px 5px;
	}

#divColumn3 {
	float: left;
	width: 190px;
	padding: 0px 5px 5px 5px;
	}

#divColumn4 {
	float: left;
	width: 190px;
	padding: 0px 5px 5px 5px;
	}

#divColumn1and2 {
	float: left;
	width: 390px;	
	padding: 10px 5px 5px 5px;
	}

#divColumn1and2full {
	float: left;
	width: 400px;
	padding: 10px 0px 0px 0px;
	}


#divColumn1and2breedStandard {
	float: left;
	width: 389px;	
	padding: 0px 5px 5px 5px;
	border-right: 1px solid #cfcecf;
	}

#divColumn2and3 {
	float: left;
	width: 390px;	
	padding: 0px 5px 5px 5px;
	}

#divColumn3and4 {
	float: left;
	width: 390px;	
	padding: 10px 5px 5px 5px;
	}

#divColumn3and4full {
	float: left;
	width: 400px;
	padding: 10px 0px 0px 0px;
	}

#divColumn1and2and3 {
	float: left;
	width: 590px;	
	padding: 0px 5px 5px 5px;
	}

#divColumn2and3and4 {
	float: left;
	width: 590px;	
	padding: 0px 5px 5px 5px;
	}

#novice3Column {
float: left;
width: 590px;
	padding: 5px 5px 5px 5px;
}

#novice4Column {
float: left;
width: 780px;
	padding: 5px 5px 5px 5px;
}


#divColumn1and2and3and4 {
	float: left;
	width: 800px;	
	padding: 60px 0px 5px 0px;
	}

#divCopyright {
	float: left;
	width: 790px;
	padding: 0px 5px 5px 0px;
	text-align: right;
	font-size: 1.0em;
	}

.news {
float: left;
}

.boxoutNews {
	float: left;
	width: 180px;
	background: #cfcecf url(gifs/blue180.gif) repeat-x 0 100%;
	padding: 0px 5px 5px 10px;
	margin-bottom: 20px;
	border-bottom: 3px solid #de8239;
	}

.address {
	float: left;
	width: 180px;
	padding: 5px;
	background: #cfcecf url(gifs/blue.gif) repeat-x 0 0;
	margin-bottom: 20px;
	}

.orange {
	float: left;
	width: 180px;
	background: #de8239;
	padding: 0px 5px 5px 10px;
	margin-bottom: 20px;
	}

.novice {
	float: left;
	width: 180px;
	background: #ffffff;
	padding: 0px 5px 5px 10px;
	margin-bottom: 20px;
	border-bottom: 3px solid #9cb842;
	}

.column2and3shade {
	padding: 10px 5px 5px 5px;
	background: #e6dfd8;
	margin-right: 10px;
	margin-top: 5px;
	}

.ingredients {
float: right;
width: 240px;
padding: 5px;
border-top: 1px solid #333333;
border-bottom: 1px solid #333333;
}

.textAndImage {
float: left;
	width: 790px;	
	padding: 0px 5px 5px 5px;
	}

.BCC {
float: left;
width: 300px;
background: #ffffff;
margin-top: 20px;
}

.contentLink {
float: left;
}
.Q {
float: left;
width: 590px;
margin-top: 10px;
}

.Qa {
float: left;
width: 100px;
background: #92c046;
padding-top: 5px;
margin-right: 10px;
}

.Qb {
float: left;
width: 480px;
background: #ffffff;
padding: 5px 0px 0px 0px;
}

.A {
float: left;
width: 590px;
}

.Aa {
float: left;
width: 100px;
padding-top: 5px;
margin-right: 10px;
}

.Ab {
float: left;
width: 480px;
background: #ffffff;
padding: 5px 0px 5px 0px;
}

.columnShade1 {
float: left;
width: 380px;
background: #af9f6b;
padding: 10px 5px 5px 5px;
margin-bottom: 5px;
}

.columnShade2 {
background: #cfcecf;
padding: 0px 5px 5px 5px;
}

.columnShade3 {
background: #e7e7e7;
padding: 0px 5px 5px 5px;
}

.columnShade4 {
	padding: 0px 5px 5px 5px;
	margin-bottom: 5px;
	background: #cdbfb1;
	}

.columnShade5 {
float: left;
width: 570px;
background: #c7ced6;
padding: 10px 10px 10px 10px;
margin-bottom: 10px;
}

.columnShade6 {
float: left;
width: 570px;
background: #d9dee3;
padding: 10px 10px 10px 10px;
margin-bottom: 10px;
}

.columnGrad1 {
	background: #cfcecf url(gifs/blue.gif) repeat-x 0 0;
	padding: 5px 5px 10px 5px;
	margin-bottom: 20px;
	}

.highlightShade2 {
padding: 5px 20px 5px 20px;
background: #cfcecf;
	margin-bottom: 10px;
}



.redLink ul, .greenLink ul, .blueLink ul, .contentLink ul {
	list-style-type: none;
list-style-position: inside;
padding-top: 5px;
	}

.redLink li {
font-size: 1.2em;
line-height: 1.8em;
padding-left: 15px;
padding-bottom: 10px;
background-image: url(Graphics/red-arrow.gif);
background-repeat: no-repeat;
background-position: 0em .5em;
	}

.greenLink li {
font-size: 1.2em;
line-height: 1.8em;
padding-left: 15px;
padding-bottom: 10px;
background-image: url(Graphics/green-arrow.gif);
background-repeat: no-repeat;
background-position: 0em .5em;
	}

.blueLink li {
font-size: 1.2em;
line-height: 1.8em;
padding-left: 15px;
padding-bottom: 10px;
background-image: url(Graphics/blue-arrow.gif);
background-repeat: no-repeat;
background-position: 0em .5em;
	}

.contentLink li {
font-size: 1.2em;
line-height: 1.8em;
padding-left: 15px;
padding-bottom: 10px;
background-image: url(Graphics/red-arrow.gif);
background-repeat: no-repeat;
background-position: 0em .5em;
	}

.contentLink li li {
font-size: 1em;
line-height: 1.8em;
padding-left: 40px;
padding-bottom: 10px;
background-image: url(Graphics/blue-arrow.gif);
background-repeat: no-repeat;
background-position: 2em .5em;
	}


.BCC ul {
list-style-type: none;
list-style-position: inside;
}

.BCC li {
padding-left: 15px;
background-image: url(Graphics/red-arrow.gif);
background-repeat: no-repeat;
background-position: 0 .5em;
}


.photoCredit400 {
float: right;
width: 400px;
}


/*-------- 3. links and navigation --------*/

a:link, a:visited {
	font-weight: normal;
	}

a:link {
	color: #000080;
	text-decoration: underline;
	}

a:visited {
	color: #000080;
	text-decoration: underline;
	}

a:hover {
	color: #de8239;
	font-weight: normal;
	text-decoration: underline;
	}

a:active {
	color: #ff0000;
	text-decoration: underline;
	}

#navigation a:link {
	font-weight: normal;	
	text-decoration: none;
	color: #333333;
	}

#navigation a:visited {
	font-weight: normal;
	text-decoration: none;
	color: #333333;
	}

#navigation li a:hover {
	text-decoration: none;
	color: #a74516;
	background: #ffffff;
margin-top: -80px;
padding-top: 10px;
	border-top: 70px solid #cfcecf;
	}

#navigation a:active {
	background: #c0c0c0;
	color: #f57f20;
	}

#homePage #homePageLink a:link, #homePage #homePageLink a:visited,
#aboutPage #aboutPageLink a:link, #aboutPage #aboutPageLink a:visited, 
#caviesPage #caviesPageLink a:link, #caviesPage #caviesPageLink a:visited,
#galleryPage #galleryPageLink a:link, #galleryPage #galleryPageLink a:visited, 
#resourcesPage #resourcesPageLink a:link, #resourcesPage #resourcesPageLink a:visited, 
#linksPage #linksPageLink a:link, #linksPage #linksPageLink a:visited, 
#contactPage #contactPageLink a:link, #contactPage #contactPageLink a:visited {
	background: #554555;
	}

#navigation li:hover ul {
	display: block;
	left: 0px;
	}

#navigation li li {
	background: #c0c0c0;
	border-bottom: 1px solid #ffffff;
	}

#navigation li li a:link, #navigation li li a:visited {
	text-transform: none;
	padding-left: 6px;
	}

#navigation li li a:hover, #navigation li li a:active {
	background: none;
	border-left: 0px solid #f57f20;
	}

#navigation li li a:active {
	border-left-color: #aaaaaa;
	}


#homePage #homePageLink li li a:link, #homePage #homePageLink li li a:visited, 
#aboutPage #aboutPageLink li li a:link, #aboutPage #aboutPageLink li li a:visited, 
#caviesPage #caviesPageLink li li a:link, #caviesPage #caviesPageLink li li a:visited, 
#galleryPage #galleryPageLink li li a:link, #galleryPage #galleryPageLink li li a:visited, #resourcesPage #resourcesPageLink li li a:link, #resourcesPage #resourcesPageLink li li a:visited, #linksPage #linksPageLink li li a:link, #linksPage #linksPageLink li li a:visited, #contactPage #contactPageLink li li a:link, #contactPage #contactPageLink li li a:visited {
	background: none;
	}


.blueLink a:link {
color: #000080;
	text-decoration: none;
	font-weight: normal;
}

.blueLink a:visited {
color: #000080;
	text-decoration: none;
	font-weight: normal;
}

.blueLink a:hover {
color: #de8239;
	text-decoration: underline;
	font-weight: normal;
}

.redLink a:link {
color: #a74516;
	text-decoration: none;
	font-weight: normal;
}

.redLink a:visited {
color: #a74516;
	text-decoration: none;
	font-weight: normal;
}

.redLink a:hover {
color: #de8239;
	text-decoration: underline;
	font-weight: normal;
}


.greenLink a:link {
color: #000080;
	text-decoration: none;
	font-weight: normal;
}

.greenLink a:visited {
color: #000080;
	text-decoration: none;
	font-weight: normal;
}

.greenLink a:hover {
color: #de8239;
	text-decoration: underline;
	font-weight: normal;
}

.contentLink a:link {
color: #000080;
	text-decoration: none;
	font-weight: normal;
}

.contentLink a:visited {
color: #000080;
	text-decoration: none;
	font-weight: normal;
}

.contentLink a:hover {
color: #de8239;
	text-decoration: underline;
	font-weight: normal;
}

.whiteLink a:link {
color: #ffffff;
	text-decoration: none;
	font-weight: normal;
}

.whiteLink a:visited {
color: #ffffff;
	text-decoration: none;
	font-weight: normal;
}

.whiteLink a:hover {
color: #000080;
	text-decoration: underline;
	font-weight: normal;
}

.orangeLink a:link {
color: #a74516;
	text-decoration: none;
	font-weight: normal;
}

.orangeLink a:visited {
color: #a74516;
	text-decoration: none;
	font-weight: normal;
}

.orangeLink a:hover {
color: #de8239;
	text-decoration: underline;
	font-weight: normal;
}

.columnShade1 a:link {
color: #ffffff;
}

.columnShade1 a:visited {
color: #ffffff;
}

.columnShade1 a:hover {
color: #333333;
}

#divCopyright a:link, .divCopyright a:visited {
color: #000080;
text-decoration: none;
}

#divCopyright a:hover, .divCopyright a:active {
color: #de8239;
text-decoration: underline;
}

.BCC a:link, .BCC a:visited {
color: #a74516;
text-decoration: none;
}

.BCC a:hover, .BCC a:active {
color: #a74516;
background: #d9dee3;
text-decoration: underline;
}



/*-------- 4. fonts --------*/


html {
	font-size: 100%;
	font-family: "Trebuchet MS", Verdana, sans-serif;
	color: #333333;
	}

h1 {
	color: #404c58;
	font-size: 36px;
	text-align: left;
	}

h2 {
color: #9fa5ab;	
font-size: 20px;
padding-top:5px;
padding-bottom: 10px;
		}

#divPageTitle h2 {
	font-size: 24px;
	color: #a09e9f;
	border-bottom: 0;
	}

.news h2 {
font-size: 20px;	
color: #de8239;
	padding-bottom: 10px;
	border-bottom: 0;
	}

.columnShade1 h2 {
	color: #ffffff;
	border-bottom: 1px solid #ffffff;
margin-top: -10px;
margin-left: -5px;
	margin-right: -5px;
padding-left: 5px;
	}

.columnGrad1 h2 {
color: #ffffff;
	border-bottom: 1px solid #ffffff;
	margin-left: -5px;
	margin-right: -5px;
	margin-bottom: 10px;
	padding-left: 5px;

}

.whiteLink h2 {
color: #ffffff;
}

h3 {
	font-size: 12px;
color: #404c58;	
	border-bottom: 1px solid #9fa5ab;
	}

.boxoutNews h3 {
	color: #ffffff;
	background: #de8239;
	text-align: center;
	margin: 0 -10px 0px -10px;
	border-bottom: 1px solid #ffffff;
	}
	
.address h3 {
	color: #ffffff;
	border-bottom: 1px solid #ffffff;
	margin-left: -5px;
	margin-right: -5px;
	margin-bottom: 10px;
	padding-left: 5px;
	}

.novice h3 {
	color: #ffffff;
	background: #9cb842;
	text-align: center;
	margin: 0 -10px 0px -10px;
	}


.orange h3 {
color: #ffffff;
text-align: center;
border-bottom: 0;
}

.columnGrad1 h3 {
color: #ffffff;
}

p {
	font-size: 1.2em;
	margin-bottom: 1em;
	}

.textAndImage p {
padding-right: 200px;
}

.ingredients p {
padding-right: 0px;
}

.red p {
color: red;
}

.boxoutNews p {
	padding: 5px 0px 0px 0px;
	}

.novice p {
color: #dddddd;	
padding: 5px 0px 0px 0px;
	}

.photoCredit p {
color: #404c58;
text-align: right;
}

.photoCredit400 p {
color: #404c58;
text-align: right;
}


.Qa p {
font-family: Garamond;
font-size: 40px;
color: #ffffff;
text-align: center;
margin-bottom: 5px;
}

.Qb p {
font-family: Garamond;
font-size: 15px;
color: #92c046;
margin-bottom: 5px;
}

.Aa p {
font-size: 30px;
color: #333333;
text-align: center;
margin-bottom: 5px;
}

.Ab p {
color: #333333;
margin-bottom: 5px;
}

.BCC p {
font-size: 1.3em;
color: #a74516;
}


h4 {
color: #ff00ff;
}

h5 {
color: #ff00ff;
	}

#divparaText h4 {
color: #ff00ff;
	}

#divparaText h5 {
color: #ff00ff;
	}

/*-------- 5. images --------*/

.randomImage {
	margin-left: -5px;
	margin-right: -5px;
	border-bottom: 10px solid #ffffff;
	}

.staticImage {
	margin-left: -5px;
	margin-right: -5px;
	border-bottom: 10px solid #ffffff;
	}

a img {
	border: 0;
	}

.photoRight {
float: right;
margin-bottom: 10px;
margin-left: 6px;
}

.first190image {
margin-top: 20px;
}

.flimStrip {
margin-top: 5px;
margin-right: 0px;
margin-bottom: 10px;
}

/*-------- 6. tables --------*/

table	{
	border-collapse: collapse;
	font-size: 1.2em;
	color: #333333;
	background-color: #d9dee3;
	margin-top: 10px;
	margin-bottom: 20px;
	}

th, td	{
	border: 0px solid #ffffff;
	vertical-align: top;
	padding: 1px 4px;
	}

caption	{
	font-weight: bold;
	padding: 0 0 5px;
	}

th	{
	text-align: left;
	background-color: #d9dee3;
	}

tfoot	{
	background-color: #d9dee3;
	color: #333333;
	font-size: 0.8em;
	}

tfoot td	{
	text-align: center;
	}

tbody tr.alt td {
	background: #e7e7e7;
	}

tbody td {
	border-top: 0;
	border-bottom: 0;
	}


/*-------- 7. forms --------*/


/*-------- 8. lightbox --------*/


#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }











/* ---------- add your code below ---------- */