/*------------------------------------------------------------------
[Master Stylesheet]

Project:	Buttery Web
Version:	1.2
Last change:	28th May 2008 | Code Clean up
Assigned to:	Chris Buttery
Primary use:	Compete website stylings
-------------------------------------------------------------------*/




/*------------------------------------------------------------------
[Body]
*/
body {
		background-color: #333;
		margin: 0;
		padding: 0;
		font:11px 'Lucida Grande',Verdana, Helvetica, sans-serif;
		color: #4C5260;
		line-height: 1.4em;
}
#threeColLayout {
		background: #333 url(background.gif) repeat-x fixed;
		color: #4C5260;
}
#twoColLayout {
		background: #333 url(background.gif) repeat-x fixed;
		color: #4C5260;
}

/*------------------------------------------------------------------
[Header]
*/
#header {
		width: 750px;
		padding: 20px 0;
}

/*------------------------------------------------------------------
[Navigation]
*/
#navcontainer {
		margin: 0; 
		padding: 0;
		float: left; 
		width: 195px; 
		height: 208px;
		background-color: #ff1200;
}
#nav ul {
		margin: 0; 
		padding: 0; 
}
#nav li {
		font-weight: bold;
		color: #777; 
		letter-spacing: 1px; 
		list-style-type: none;
} 
#nav li a:hover {
		font-weight: bold;
		color: #4D95B5; 
		background: url(images/button_over.gif) no-repeat left top;
}
#nav li a {
		display: block;
		width: 195px;
		height: 22px;
		color: #fff;
		text-decoration: none;
		background: url(images/button.gif) no-repeat left top;
		padding: 4px 0 0 0;
		margin: 0;
		text-indent: 30px;
}
#nav .selected a {
		font-weight: bold;
		color: #666; 
		background: url(images/button_selected.gif) no-repeat left top;
		cursor: default;
}

/*------------------------------------------------------------------
[TopColumns]
*/
#container {
		width: 750px;
		height: 208px;
		background-color: #222;
		color: #4C5260;
		margin: 0px;
}
#container img { float: left;}
#primaryTop {
		float:left;
		width:750px;
		height: 200px;
		display:inline;
		margin: 0 0 20px 0;
}
#threeColLayout #primaryTop {
		float:left;
		width:295px;
		background-color: #333;
		height: 200px;
		margin: 0 0 0px 195px;
		padding-right: 5px;
		color: #4C5260;
}
#secondaryTop{
		float:left;
		width:240px;
		margin: 0 0 20px 15px;
		background-color: #333;
		height: 200px;
		color: #4C5260;
}
#sideTop{
		background-color: #ff1200;
		float:left;
		width:180px;
		height: 200px;
		margin: 0 0 20px -750px;
		color: #4C5260;
}
.pageTestimonial {
		float: left;
		height: 194px;
		width:233px;
		padding: 7px;
}
.pageTestimonial p {
	margin: 2px 0 5px 0;
	color: #999;
}


/*------------------------------------------------------------------
[BodyColumns]
*/
#wrapper {
		width:750px;
		margin:0 auto;
		background-color: #fff;
		padding: 0 20px 20px 20px;
}
#primaryContent {
		float:left;
		width:750px;
		display:inline;
		margin: 0 0 40px 0;
}
#threeColLayout #primaryContent {
		float:left;
		width:295px;
		margin: 0 0 100px 195px;
		padding-right: 5px;
}
#twoColLayout #primaryContent {
		width:555px;
		float:left;
		margin: 0 0 100px 195px;
}
#secondaryContent{
		float:left;
		width:240px;
		margin: 0 0 20px 15px;
		color: #4C5260;
}
#sideContent{
		float:left;
		width:180px;
		margin: 0 0 20px -750px;
}

/*------------------------------------------------------------------
[advertisments]
*/
.advertisement{
		width: 180px;
		margin: 0;
		padding: 0;
		overflow: hidden;
		
}
.linkedin {float: left;}
.icon {float: left; margin: 5px 0 5px 10px;}

/*------------------------------------------------------------------
[Images]
*/
img {  
		border-style: none;
}

/*------------------------------------------------------------------
[Headlines]
*/
.headline{
		margin: 15px 0 0 0;
		padding: 0 0 5px 0;
		border: #bbb solid 1px;
}
.headlineBox {
		margin: 0 10px 0 10px;
		background: #FFF;
		padding: 5px 0 5px 0;
		line-height: 170%;
}
.headlineBox p {
		margin: 5px 0 15px 0;
		padding: 0 5px 5px 50px;
		color: #4C5260;
}
.headline img {
		float: left;
		margin: 3px 5px 2px 5px;
		padding-bottom: 40px;
}
.headlineBox ul{
		margin: 0 0 15px 0;
		padding: 0 5px 5px 50px;
		color: #4C5260;
}
.headline li {
	margin: 0;
	padding: 0;
	line-height: 1.8em;
}

/*------------------------------------------------------------------
[Resources]
*/
.resources {
		margin: 0 10px 30px 10px;
		background: #FFF;
		padding: 5px 0 5px 0;
		line-height: 170%;
		border-bottom: 2px dotted #ccc;
}
.resources p {
		margin: 0;
		padding: 0 5px 5px 50px;
		color: #4C5260;
}
.resources img {
		float: left;
		margin: 0px 10px 2px 5px;
}
.resources a:link, .resources a:visited {
		text-decoration: underline;
		text-transform: uppercase;
		color: #ff1200;
		display: inline;
		font-size: 90%;
		margin: 10px 5px 0 0;
		padding-top: 5px;
		font-weight: bold;
}
.resources a:hover{
		text-decoration: none;
		text-transform: uppercase;
		color: #4D95B5;
		display: inline;
		font-size: 90%;
		margin: 10px 5px 0 0;
		padding-top: 5px;
		font-weight: bold;
}

/*------------------------------------------------------------------
[Products]
*/
.product {
		margin: 0 0 30px 0;
		background: #FFF;
		padding: 5px 0 5px 0;
		line-height: 170%;
		border-bottom: 2px dotted #ccc;
}
.product p {
		margin: 0;
		padding: 0 5px 5px 0;
		color: #4C5260;
}
.product img {
		float: left;
		margin: 0px 10px 2px 5px;
}
.productItem{
		float: right;
		margin: 0px;
		height: 220px;
}
.product a:link, .product a:visited {
		text-decoration: underline;
		text-transform: uppercase;
		color: #ff1200;
		display: inline;
		font-size: 90%;
		margin: 10px 5px 0 0;
		padding-top: 5px;
		font-weight: bold;
}
.product a:hover{
		text-decoration: none;
		text-transform: uppercase;
		color: #4D95B5;
		display: inline;
		font-size: 90%;
		margin: 10px 5px 0 0;
		padding-top: 5px;
		font-weight: bold;
}
.buttons {
		padding: 0;
		margin: 0;
		height: 25px;
}

/*------------------------------------------------------------------
[Services]
*/
.services img {
		float: right;
		margin: 0px 5px 2px 5px;
		border: 1px solid #666;
}
.services h1 {
		margin: 10px 0 10px 0;
		padding: 5px 0 2px 0;
		font-size: 110%;
		color: #ff1200;
		border-bottom: 2px dotted #ccc;
}
#daltonDiagram {
		margin: 10px 0 10px 30px;
}

/*------------------------------------------------------------------
[Read More]
*/
.readMore {
		display: block;
		margin:0;
		padding: 5px 0;
		font-weight: bold;
}

/*------------------------------------------------------------------
[Address]
*/
#address {
		margin: 18px 0 20px 8px;
		color: #666;
		line-height: 1.4em;
}


/*------------------------------------------------------------------
[Headings]
*/
h1 {
		margin: 10px 0 18px 0;
		padding: 5px 0 0 0;
		font-size: 160%;
		color: #FF0000;
		line-height: 1.5em;
}
h2 {
		background:none repeat scroll 0 0 #D92315;
		color:#FFFFFF;
		font-size:14px;
		margin:0;
		padding:10px 0 10px 10px;
		line-height: 20px;
}
h3 {
		text-transform: uppercase;
		display: inline;
		font-size: 92%;
		margin: 10px 5px 0 0;
		padding-top: 5px;
		color: #ff1200;
}
.homePage{
		background: none;
		color: #666;
		display:block;
		font-size: 14px;
		height:70px;
		line-height:1.6em;
		margin: 0;
		overflow:hidden;
		padding: 0px;
		width: 100%;
}
.product h1, h1.registration {
		font-family: "Trebuchet MS", sans-serif;
		font-size: 16px;
		margin: 0 0 2px 0;
		padding: 0;
		color: #ff1200;
}
.product h2 {
		font-family: "Trebuchet MS", sans-serif;
		font-size: 14px;
		margin: 0 0 5px 0;
		padding: 0;
		color: #4D95B5;
		background: none;
}
.small {
		font-size: 80%;
}
.customer {
		text-transform: uppercase;
		font-size: 85%;
		color: #4D95B5;

}
.testimonial {
		margin: 5px 0 5px 0;
		border-bottom: 2px dotted #ccc;
}
.italic {
		font-style: italic;
		text-align: center;
		font-size: 120%; 
		color: #ff1200;
}
.bold {
		font-weight: bold;
		color: #333;
}
.boldText{
		font-weight: bold;
}
.boldRed{
		font-weight: bold;
		color: #ff1200;
}
.boldBlue{
		font-weight: bold;
		color: #4D95B5;
}
.redText {
		color: #ff1200;
}

/*------------------------------------------------------------------
[Lists]
*/
ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		border: none;
}
ul.listItems {
		list-style-type: square;
		margin-left: 35px;
		line-height: 2em;
}
ol {
		line-height: 2em;
}
ul.services {
		color: #4C5260;
		margin: 15px 0 20px 35px;
		list-style-type:square;
		line-height: 2em;
}
.links li {
		line-height: 2.3em;
		margin: 0px;
		padding: 0px;
		border: none;
}	
/*------------------------------------------------------------------
[Links]
*/
a:link { 
		color: #4D95B5;
		text-decoration:none;
}
a:visited {
		color: #999999;
		text-decoration:none;
}
a:hover {
		color: #008800;
		text-decoration:underline;
}

/*------------------------------------------------------------------
[Contact Form]
*/
form {
		margin: 18px 0 ;
		padding: 0;
		font-size: 80%;
}
input {
		margin-top:0;
		padding: 2px;
		background: #D7E7E9;
		color: #333;
		border: 1px solid #ccc;
}
textarea {
		margin: 0;
		padding: 0;
		border: 1px solid #ccc;
		background: #D7E7E9;
		color: #333;
}
form .formbutton {
	display: block;
	background: transparent url(images/submit.jpg) no-repeat 0 0px;
	width:  76px !important;
	height: 32px;
	margin: 0;
	float: right;
	border: none;
}
form .formbutton:hover {
	background-position: 0px -32px;
	width: 76px;
	height: 32px;
	border: none;
}
#webMessage {
		margin: 30px 0 100px 0;
}
form label {
	float: left;
	width: 140px;
}

form div {
	clear:left;
	padding: 10px 0;
}

form .text {
	width: 250px;
	border: 1px solid #ccc;
	padding: 2px;
}

form div.submit {
	width: 215px;
	text-align: right;
	margin: 0;
	padding: 0;
	height: 32px;
}
.error { 
	background: #ffeded;
	border: 1px solid #ff0000;
	color: #444;
	display: block;
	font-size: 14px;
	font-weight: bold;
	margin: 18px 0;
	padding: 15px 0px;
	text-align:center;
}
.success{ 
	background: #edfff5;
	border: 1px solid #66cc66;
	color: #333;
	display: block;
	font-size: 14px;
	font-weight: bold;
	margin: 18px 0;
	padding: 15px 0px;
	text-align:center;
}
.red {
color: #ff0000;
}

/*------------------------------------------------------------------
[Video Content]
*/
#videos {
		width: 240px;
		margin: 10px 0 0 0;
		padding: 0;
		clear: both;
		overflow: auto;
		border-bottom: 2px dotted #ccc;
}
.video {
		float:left; 
		margin: 0 0 15px 0;
		width: 240px;
		padding: 0;
}
.video p{
		padding: 0px;
		margin: 0 0 15px 0;
}
.videoHeading{
		font-weight: bold;
		color: #ff0000;
}
h2#videoTitle{
		font-weight: bold;
		margin: 15px 0 0 0;
		padding:0;
		color: #ff0000;
		background: none;
}
.player{
		margin: 0 0 15px 0;
		padding: 0;
}
.player a{
		margin: 0 0 15px 0;
		padding: 0;
		color: #4D95B5;
}
.player a:hover{
		margin: 0 0 15px 0;
		padding: 0;
		color: #008800;
}

#videoContent{
		width: 100%;
		margin: 10px 0 0 0;
		padding: 0;
		clear: both;
		overflow: auto;
		border-bottom: 2px dotted #ccc;
}
.videoContainer{
		width: 100%;
		height: 240px;
		margin: 0 0 10px 0;
		padding: 0;
		clear: both;
}

#videoContainerHomepage{
		width: 100%;
		height: 230px;
		margin: 10px 0 0 0;
		padding: 0;
		clear: both;
		overflow: hidden;
}
.videoCell{
		float:left; 
		margin: 0 15px 15px 0;
		width: 240px;
		padding: 0;
}

/*------------------------------------------------------------------
[Footer]
*/
#footer{
		text-align: center;
		border-top: #C9C9C9 solid 1px;
		clear:both;
		width: 750px;
		height: 50px;
		padding: 0;
		margin: 0;
}
#footer, #footnote p {
		margin: 0;
		padding: 10px 0 0 0;
		color: #C9C9C9;
}
#footer a:link, #footer a:visited {
		color: #999;
		padding: 0 10px;
		text-decoration: none;
}
#footer a:hover {
		color: #4D95B5;
}
#leftFootnote {
		text-align: left;
		width: 250px;
		margin: 0 0 0 15px;;
		float: left;
		color: #999;
}
#rightFootnote {
		text-align: right;
		width: 250px;
		margin: 0 15px 0 0;
		float: right;
		color: #999;
}

#rightFootnote a:link, #rightFootnote a:visited, #rightFootnote a:hover{
		margin: 0;
		padding: 0;
}

.contactItem {height: 30px; margin: 0; padding: 2px 0; clear: both; overflow:hidden;}
.title { width: 80px; float: left; height: 20px; font-weight: bold;}
.event {float: left; margin: 0 0 0 10px;}
.required { color: #4D95B5;}


.moreTestimonials {
	float: left;
	height: 20px;
	display: block;;
	width: 100%;
	margin: 20px 0;
	padding: 0;
	text-align:left;
}

.moreTestimonials a, .moreTestimonials a:visited { 
	color: #4D95B5;
	text-decoration:none;
}
.moreTestimonials a:hover  {
	color: #008800;
	text-decoration:underline;
}
.moreDetails{
	background: url(images/more_details_btn.jpg) no-repeat 0 0px;
	height:45px;
	width: 204px;
	display: block;
	margin-top:30px;
}
.moreDetails:hover {
	background: url(images/more_details_btn.jpg) no-repeat 0 -46px;
}
.downloadDoc {
	background: url(images/download_brochure_btn.jpg) no-repeat 0 0px;
	height:45px;
	width: 204px;
	display: block;
	margin-top:30px;
}
.downloadDoc:hover {
	background: url(images/download_brochure_btn.jpg) no-repeat 0 -46px;
}
#downloadForm {
	margin-top: 30px;
	background: #f9f9f9;
	padding: 10px;
	width: 270px;
	border: 1px solid #e3e3e3;
}
#downloadForm label {
	width: 60px;
	font-size: 13px;
	float: left;
	padding-top:2px;
}
#downloadForm input {
	width: 200px;
	float: left;
	color: #333;
}
label.error { color: #4D95B5; width: 200px !important;  margin-left: 60px;}
.formItem {
	display: block;
	overflow: hidden;
	margin-bottom: 5px;
	clear: left;
}
#downloadForm h3 {
	text-transform: none;
	display: inline;
	font-size: 13px;
	margin: 15px 0;
	color: #4D95B5;
}

.small-testimonial { padding: 0 10px;}


/* Newsletter */

#newsletter {
border:1px solid #C9C9C9;
float:left;
margin:18px 0;
overflow:hidden;
padding:0 0 10px;
width:180px;
}

#newsletter p { margin: 10px 10px 0 10px; line-height: 1.6em;}
#newsletter label, #newsletter input {
margin: 0 10px;
}
#newsletter input  { width: 155px; }
#newsletter form { margin: 0;}

#newsletter form div {
	clear:left;
	padding: 5px 0;
}

#newsletter form .formbutton {
	display: block;
	background: transparent url(images/join.jpg) no-repeat 0 0px;
	width: 60px;
	height: 25px;
	margin: 0 0 0 10px;
	padding: 0;
	float: left;
}
#newsletter form .formbutton:hover {
	background-position: 0px -27px;
	width: 60px;
	height: 25px;
}
#newsletter label {
font-size: 10px;
}

ul.program li{
		margin: 7px 0;
}

/* Clearfix */
.clearfix:after {
	clear: both;
	display: block;
	content: ".";
	height: 0;
	visibility: hidden;
}

* html > body .clearfix {
	width: 100%;
	display: block;
}

* html .clearfix {
	height: 1%;
}

/* Promo Page */
h1.promo {
		font-size: 400%;
		color: #FF0000;
		line-height: 1.5em;
}

h1.promosml {
		font-size: 350%;
		color: #FF0000;
		line-height: 1.5em;
}

h3.promo {
		text-transform: none;
		font-size: 200%;
		color: #4C5260;
		line-height: 140%
}

h3.promopay {
		text-transform: none;
		font-size: 200%;
		color: #FF0000;
		line-height: 140%
}

p.promo {
		font-size: 150%;
		line-height: 130%;
}

p.promobold {
		font-size: 150%;
		line-height: 130%;
		font-weight: bold;
}

.required_promo {
		color: #4D95B5;
		margin-top: 0;
}

form.promo-reserve div,
form.promo-pay div {
	clear:left;
	padding: 5px 0;
}

form.promo-reserve label,
form.promo-pay label {
	float: left;
	width: 100px;
}

form.promo-reserve div.submit {
	margin: 0;
	padding: 0;
	padding-left: 100px;
	text-align: left;
	width: auto;
	height: 32px;
}

form.promo-reserve div.submit input {
	float: none;
}

form.promo-pay input.ppbutton,
form.promo-paytbl input.ppbutton {
	background: none;
	border: none;
}

table.promopay {
	border: #bbb 1px solid;
}

input.promocheckit {
		background: #ff0000;
		color: #fff;
}

span.promototal {
	font-size: 120%;
	line-height: 30px;
}

#hideme {
	display: none;
}

ul.promolistItems {
		list-style-type: square;
		margin-left: 35px;
		font-size: 150%;
		line-height: 130%;
}


.enrolnowbuttonred {/*Display this image in the link area*/
    text-decoration: none;
    text-indent: -6000em;                                       
    display: block; 
    height: 32px;                                       
    width: 121px;                                       
    background: url(images/enrolnow_button_red.png) no-repeat;
    padding: 0;
}

.enrolnowbuttonred:hover {/*Display this image in the link area when you mouseover*/
    text-decoration: none;                                                          
    background-position: 0 -32px;
}