/* 

STYLE SHEET FOR PETTY POOL WEB SITE
Created by CreativeMediaHeroes
www.pettypool.org.uk

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-family: "Century Gothic";
	font-size: 13px;
	color: #000;
	text-align: left;
	margin: 0px;
	padding: 0px;
	line-height: 19px;
	background-color: #0E2069;
	background-image: url(/images/pool-bground1.jpg);
	background-repeat: no-repeat;
}

.img {float:left; margin: 0 8px 3px 0; border: 1px solid #003366;}
.thumb {float:left; margin: 0 8px 3px 0; width: 170px; height:auto; border: 1px solid #003366;}


img.left {
	float: left; margin-right:8px;
}

img.right {
	float: right; margin-left:8px;
}



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

.content {
	width: 460px;
	margin-right: 8px;
	margin-bottom: 8px;
	margin-left: 8px;
}

table#shell {
	margin: 0px;
	padding: 0px;
	width: 780px;
	background-color: #FFF;
	border: solid 1px #003;
	border-bottom: 0px;
}

#header1 {
	margin: 0px;
	padding: 0px;
	height: 117px;
	width: 780px;
}

#header2 {
	margin: 0px;
	padding: 0px;
	height: 52px;
	width: 780px;
	background-color: #FFF;
}

#main {
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 780px;
	background-color: white;
	border: solid 1px #003;
	border-top: 0px;
}

#menu {
	background-color: #554E44;
	height: 400px;
	width: 160px;
	position: static;
	float: left;
}


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

a {
	font-family: "Century Gothic";
	font-size: 13px;
	color: #006699;
	line-height: 19px;
	font-weight: bold;
	text-decoration: underline;
}

a:hover {
	font-family: "Century Gothic";
	font-size: 13px;
	color: #FF6600;
	line-height: 19px;
	font-weight: bold;
	text-decoration: underline;
}

a.footertxt {
	font-family: "Century Gothic";
	font-size: 10px;
	color: #FFF;
	line-height: 12px;
	font-weight: normal;
	text-decoration: underline;
}

a.footertxt:hover {
	font-family: "Century Gothic";
	font-size: 10px;
	color: #FFFF00;
	line-height: 12px;
	font-weight: normal;
	text-decoration: underline;
}

a.choice {
	font-family: "Century Gothic";
	font-size: 13px;
	color: #FFF;
	line-height: 19px;
	font-weight: bold;
	text-decoration: underline;
}

a.choice:hover {
	font-family: "Century Gothic";
	font-size: 13px;
	color: #FFF;
	line-height: 19px;
	font-weight: bold;
	text-decoration: none;
	}
	
a.choice2 {
	font-family: "Century Gothic";
	font-size: 13px;
	color: #FFF;
	line-height: 19px;
	font-weight: bold;
	text-decoration: underline;
}

a.choice2:hover {
	font-family: "Century Gothic";
	font-size: 13px;
	color: #FFF;
	line-height: 19px;
	font-weight: bold;
	text-decoration: none;
}

.menublock {
	width: 127px;
	background: url(../images/green-radial-bg.jpg) no-repeat;
	text-align: left;
	margin: 0px;
	padding: 0px;
}

a.homebutton {
	font-family: "Century Gothic";
	font-size: 11px;
	color: #000;
	text-decoration: none;
	width: 126px;
	height: 50px;
	text-align: left;
	text-indent: 7px;
	vertical-align: bottom;
	line-height: 50px;
	font-weight: bold;
	text-transform: capitalize;
	background: url(../images/home-button1.gif) no-repeat;
	display: block;
}

a.homebutton:hover {
	font-family: "Century Gothic";
	font-size: 11px;
	color: #000;
	text-decoration: none;
	width: 126px;
	height: 50px;
	text-align: left;
	text-indent: 7px;
	vertical-align: text-bottom;
	line-height: 50px;
	font-weight: bold;
	text-transform: capitalize;
	background: url(../images/home-button2.gif) no-repeat;
	display: block;
}

a.menunav {
	font-family: "Century Gothic";
	font-size: 11px;
	color: #000;
	text-decoration: none;
	width: 126px;
	display: block;
	text-align: left;
	vertical-align: middle;
	border-bottom-width: 6px;
	border-bottom-style: solid;
	border-bottom-color: #FFF;
	line-height: 13px;
	font-weight: bold;
	text-transform: capitalize;
	margin: 0px;
	padding-top: 7px;
	padding-bottom: 5px;
	padding-left: 7px;
	}
	
a.menunav:hover {
	font-family: "Century Gothic";
	font-size: 11px;
	color: #003300;
	text-decoration: none;
	width: 126px;
	display: block;
	text-align: left;
	vertical-align: middle;
	border-bottom-width: 6px;
	border-bottom-style: solid;
	border-bottom-color: #FFF;
	font-weight: bold;
	text-transform: capitalize;
	background-image: url(../images/orange-button.gif);
	background-repeat: repeat-y;
	margin: 0px;
	line-height: 13px;
	padding-top: 7px;
	padding-bottom: 5px;
	padding-left: 7px;
}

#footer {
	margin: 0px;
	padding: 0px;
	height: 117px;
	width: 780px;
	font-family: Verdana, sans-serif;
	font-size: 10px;
	color: #FFF;
}

a.coursenav {
	font-family: "Century Gothic";
	font-size: 11px;
	color: #000;
	text-decoration: none;
	display: block;
	text-align: left;
	vertical-align: middle;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #FFF;
	font-weight: normal;
	text-transform: capitalize;
	margin: 0px;
	padding-top: 5px;
	padding-bottom: 3px;
	background-color: #ECE9D8;
	line-height: 12px;
	padding-left: 7px;
}

.courses {
	font-family: "Century Gothic";
	font-size: 11px;
	color: #CCCCCC;
	text-decoration: none;
	width: 126px;
	display: block;
	text-align: left;
	vertical-align: middle;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #FFF;
	line-height: 12px;
	font-weight: bold;
	text-transform: capitalize;
	margin: 0px;
	padding-top: 7px;
	padding-bottom: 5px;
	background-color: #5E3A84;
	padding-left: 7px;
}

a.coursenav:hover {
	font-family: "Century Gothic";
	font-size: 11px;
	color: #660099;
	text-decoration: none;
	display: block;
	text-align: left;
	vertical-align: middle;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #FFF;
	font-weight: normal;
	text-transform: capitalize;
	margin: 0px;
	padding-top: 5px;
	padding-bottom: 3px;
	background-color: #ECE9D8;
	line-height: 12px;
	padding-left: 7px;
}


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

strong {
	font-family: "Century Gothic";
	font-size: 13px;
	color: #000033;
	line-height: 19px;
	font-weight: bold;
}

h1 {
	font-family: "Century Gothic";
	font-size: 21px;
	color: #003366;
	text-align: left;
	line-height: 20px;
	font-weight: bold;
	margin: 3px, 0px, 0px;
}

h2 {
	font-family: "Century Gothic";
	font-size: 15px;
	color: #003366;
	text-align: left;
	line-height: 20px;
}

.picbox1 {
	margin: 0 0 5px 0;
	width: 170px;
	height: auto;
	border: 1px solid #003366;
}

.picblock {
	margin: 0px;
	padding: 0px;
	float: right;
	height: auto;
	width: 170px;
	color: #000;
}

.quote1 {
	font-family: Georgia, serif;
	font-size: 15px;
	line-height: 20px;
	color: #5E3A84;
	font-style: normal;
	padding-left: 30px;
	padding-right: 15px;
	padding-top: 10px;
	text-align: left;
}

.quoted {
	font-family: "Century Gothic";
	font-size: 11px;
	font-weight: bold;
	color: #333333;
	text-align: right;
	margin: -20px 0px 0px;
	padding-right: 25px;
	padding-bottom: 5px;
	padding-left: 15px;
}

.courseinfo {
	font-family: "Century Gothic";
	font-size: 11px;
	line-height: 12px;
	font-weight: bold;
	color: #666666;
	text-align: left;
	padding: 5px;
	margin-top: 5px;
	margin-bottom: 10px;
	border: 1px solid #FF0000;
	width: 380px;
	text-transform: uppercase;
}

.submenu {
	font-family: "Century Gothic";
	font-size: 13px;
	color: #003366;
	text-align: left;
	line-height: 20px;
	margin-bottom: -20px;
	font-weight: bold;
}

.programme {
	font-family: "Century Gothic";
	font-size: 11px;
	color: #000;
	text-align: left;
	padding-left: 10px;
}

.programme-bold {
	font-family: "Century Gothic";
	font-size: 11px;
	color: #000;
	background-position: center;
	text-align: center;
	font-weight: bold;
}

.choice {
	font-family: "Century Gothic";
	font-size: 14px;
	color: #FFF;
	line-height: 28px;
	font-weight: bold;
	text-decoration: underline;
	background-image: url(../images/homepage-choice/pp-activity-bar.jpg);
	background-repeat: no-repeat;
	text-align: center;
	margin: 0px;
	padding: 4px 0px 0px;
	height: 28px;
	width: 292px;
}

.choice2 {
	font-family: "Century Gothic";
	font-size: 14px;
	color: #FFF;
	line-height: 28px;
	font-weight: bold;
	text-decoration: underline;
	background-image: url(../images/homepage-choice/pp-college-bar.jpg);
	background-repeat: no-repeat;
	text-align: center;
	margin: 0px;
	padding: 4px 0px 0px;
	height: 28px;
	width: 292px;
}


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

.montage-l1 {
	margin: 0px;
	height: auto;
	width: 247px;
	border-bottom: 1px solid #FFF;
	padding: 0px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #FFF;
}

.montage-p2 {
	margin: 0px;
	height: auto;
	width: 207px;
	border-bottom: 1px solid #FFF;
	padding: 0px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #FFF;
}
.box {
	margin: 5px;
	padding: 0px;
	border: 1px solid #333333;
	width: 160px;
	text-align: left;
	vertical-align: top;
}
li {
	list-style-position: outside;
	text-align: left;
}


/* --------- NEW NAV  --------- */

.nav2menu{
	font: bold 10px/20px Georgia;
	width: 125px;
	text-transform: uppercase;}

.nav2menu li{
	list-style-type: none;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #999;
}

.nav2menu li a{
	color: #999;
	padding: 0;
	text-decoration: none;
	margin-top: 5px;
}


.nav2menu li a:hover{
	color: #666;
}


/* ROUND CORNERS BLUE */

.blueroundc {
  margin: 5px 0;
  color: #fff;
  width: 90%;
  padding: 15px;
  text-align: left;
  background-color: #33F;
  border: 0 solid #fff;

  background-image: url(../examples/backrepeat.jpg);
  background-repeat: repeat-x;

  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
}

.blueroundc2 {
  margin: 5px 0;
  color: #fff;
  width: 135px;
  padding: 15px;
  text-align: left;
  background-color: #33F;
  border: 0 solid #fff;

  background-image: url(../examples/backrepeat.jpg);
  background-repeat: repeat-x;

  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
}

.p blueroundc2 {font-size: 9px;}