@charset "utf-8";
/* CSS Document */

* {	margin:0; padding:0}

* html #outer {height:100%}	/*not sure what this does..???*/

html, body {
	height:100%;			/* needed to base 100% height on something known*/
	text-align:center;
	background-color: #a0a080;
}
/*LINKS*************************** LINKS *********************************/
a:link {font-family:Tahoma, Geneva, sans-serif;color: #a0a080;	text-decoration: underline;}
a:active {font-family:Tahoma, Geneva, sans-serif;color: #a0a080;text-decoration: underline;}
a:visited {font-family:Tahoma, Geneva, sans-serif;color: #a0a080;text-decoration: none;}
a:hover {font-family:Tahoma, Geneva, sans-serif;color: #a0a080;text-decoration: underline;}
/*CLASSES************************ CLASSES ********************************/
.box 		{float:left;margin-right:5%;}
.bold		{font-weight:bold; color: #4b4644;}
.price 		{font-size:x-small; font-weight:normal; float:right;} /*add price for lessons*/
.closed 	{font-weight:bold; color: #903;}
.image		{float:left;}
.innertube	{margin: 2%; /*Margins for inner DIV inside each column (to provide padding)*/}
.new		{font-weight:bold; color: red;}
.noborder 	{border: hidden;}
.pic		{float:left; margin: 0px 10px 0px 0px; border-style: solid; border-width:2px; border-color: #ffffff;}
.prog		{float:right; margin-right:5px; margin-top:10px;}
.spacer10 	{padding: 10px 0px 0px 0px;}	/*add class to <p> to give extra paragraph spacing at top*/
.spacer20 	{padding: 20px 0px 0px 0px;}	/*add class to <p> to give extra paragraph spacing at top*/
.spacerpost {padding: 0px 0px 30px 0px;}	/*add class to <p> to give extra paragraph spacing at bottom*/
.url-1 		{font-size:small; font-weight:bold;}   /*footer, map url*/
.url-2 		{font-size:x-small; font-weight:bold;} /*footer*/
.url-3		{font-size:x-small; font-weight:bold; color: #a0a080; text-decoration: underline;} /*pseudo url*/
.xsit	 	{font-size:x-small; font-weight:none; color: #4b4644; font-style:italic;} /*own drinks*/
/*PROG/////////////////PROG TABLE////////////////*/
table.programme{ 
 width: 80%;
 float: left;
 background-color: transparent;
 border: 1px #4b4644 solid;
 border-collapse: collapse;
 margin-bottom: 5px;/*gap between tables*/
 margin-left: 10%;
} 
td.month { 
 background-color: #d5d5a5;
 font-family: Tahoma, Geneva, sans-serif;
 font-weight: normal;
 font-size: small;
 color: #4b4644; 
 border-right: 1px #4b4644 solid;
 padding-left: 5px;
}
td.date{
 width:10%;
 background-color: transparent;
 font-family: Tahoma, Geneva, sans-serif;
 font-weight: normal;
 font-size: small;
 text-align: left;
 color: #4b4644;
 border-bottom: 1px #4b4644 dotted;
 border-right: 1px #4b4644 dotted;
 padding-left: 5px;
}
td.entry {
 width:70%;
 background-color: transparent;
 font-family: Tahoma, Geneva, sans-serif;
 font-weight: normal;
 font-size: small;
 color: #4b4644;
 text-align: left;
 border-bottom: 1px #6699CC dotted;
 border-right: 1px ##4b4644 solid;
 padding-left: 5px;
}
td.banner{
 width:80%;
 background-color: #4b4644;
 font-family: Tahoma, Geneva, sans-serif;
 font-size: small;
 font-weight:bold;
 color: #eeeecc;
 padding-left: 5px;
}
/*FORMATS************************ FORMATS ********************************/	
h1 {font-family:Tahoma, Geneva, sans-serif; /*index page section titles*/
	font-size: medium;
	color: #4b4644;
	padding: 5px 0px 0px 0px;}
	
h2 {font-family:Tahoma, Geneva, sans-serif; /*AA logo spacing*/
	font-size:medium ;
	color: #4b4644;
	margin-top: 30px;}
	
h3 {font-family:Tahoma, Geneva, sans-serif; /*index page question*/
	font-size: small;
	color: #4b4644;
	text-decoration:underline;
	padding: 20px 0px 5px 0px;}	
	
h4 {font-family:Tahoma, Geneva, sans-serif; /*holiday page nunber*/
	font-size:medium;
	color: #a0a080;
	padding: 5px 0px 0px 0px;}

h5 {font-family:Tahoma, Geneva, sans-serif; /*holiday location*/
	font-size:large;
	font-weight: bold;
	color: #4b4644;
	padding: 10px 0px 0px 0px;}
	
h6 {font-family:Tahoma, Geneva, sans-serif; /*holiday break name*/
	font-size: small;
	color: #903;
	font-weight: bold;
	text-decoration:underline;
	padding: 15px 0px 0px 0px;}

p	{color: #4b4644;
	font-family:Tahoma, Geneva, sans-serif; 
	font-size: small;
	padding: 0px 0px 0px 0px;
}
/*TAGS**************************** TAGS **********************************/
#outer {
	width:98%;				/*extra 2% forms left and right margin*/
	background: #eeeecc;
	margin:auto;
	min-height:100%;
	margin-top:-50px;		/*footer height - this drags the outer 50px up through the top of the monitor */
	text-align:left;
	clear:both;
	margin-bottom: -10px;
	background-image:url(images/tango.jpg);
	background-repeat:no-repeat;
	background-position:bottom;
}
#outer img {
	float: left;
	margin-top:1%;
	margin-left:5%;
	margin-bottom:0%;
}
#contentwrapper{float: left; width: 100%;}

#contentcolumn img {float: left;}

#contentcolumn{margin: 0 50% 0 190px;} /*Margins for content column. Should be "0 right-column-width 0 left-column-width*/

#leftcolumn{
float: left;
width: 190px; /*Width of left column in percentage*/
margin-left: -100%;
}
#rightcolumn{
float: left;
width: 50%; /*Width of right column in %*/
margin-left: -50%; /*Set margin to -(RightColumnWidth%)*/
}
/*HEADER************************* HEADER *********************************/
#header {
	background:#4b4644;
	height: 100px;
	border-top:60px solid #a0a080; /* soak up negative margin and allows header to start at top of page - set 10px> to reveal 10px of top border color*/
}
#headerbottom{
	border: 1px solid white;
}
/*MENU*************************** MENU ***********************************/
.menutext {font-family: Tahoma, Geneva, sans-serif;font-size: large;}
#menu {
   float:left;
   width:100%;
   margin-top: 0px;
   background:#4b4644;/*menu bar colour*/
   border-bottom:3px solid #fff;/*bottom border line colour*/
   overflow:hidden;
   position:relative;
}
#menu ul {
   clear:left;
   display:block;
   float: right;			/*to float menu to right*/
   list-style:none;
   margin-right:1%;
   padding:0;
   /*position:relative;
   left:50%;*/				/*shifts UL element left 50% of menu DIV*/
   text-align:center;
}
#menu ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   /*position:relative;
   right:50%;*/				/*shifts UL LI elements right 50% of UL DIVg*/
   color:#a0a080;			/*menu divider colour*/
}
#menu ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   background:#4b4644;		/*inactive tab background colour*/
   color:#a0a080;			/*inactive tab text colour*/
   text-decoration:none;
   line-height:1.3em;
}
#menu ul li a:hover {
   background:#4b4644;		/*active tab background colour*/
   color:#eeeecc;			/*active tab text colour*/
}
#menu ul li a.active,
#menu ul li a.active:hover {
   color:#eeeecc;			/*active tab text colour*/
   background:#4b4644;		/*active tab background colour*/
   font-weight:normal;
}
/*FOOTER************************* FOOTER *********************************/
#footer {/* footer now sits at bottom of window*/
	background:#4b4644;
	width:98%;
	margin:auto;
	position: relative;
	min-height:50px;/* must match negative margin of #outer */
	clear:both;
	font-family: Tahoma, Geneva, sans-serif;
	border-top: 2px solid #fff;/*bottom border line colour*/
}
#footerleft {
	float:left;
	width:30%;
	text-align:left;
}
#footermiddle {
	float:left;
	width:40%;
	text-align:center;
}
#footerright {
	float:left;
	width:30%;
	text-align:right;
}
#footbottom{
	margin-bottom: -10px;/*creates gap beneath footer*/
}
#footer a {
	display: inline;
	text-decoration:underline;
}
#footer p {
	font-weight:normal;
	font-size: x-small;
	color: #a0a080;
	padding:2px;
}
#footer .p2 {
	font-weight:bold;
	font-size: small;
	color: #a0a080;
}
/*FORM**************************** FORM **********************************/
.button{
clear:both;
margin-left:0px;
margin-top: 10px;
width:50px;
height:20px;
background:#a0a080;
text-align:center;
color:#4b4644;
font-size:small;
font-weight:bold;
}
/*FIXES************************* FIXES ***********************************/
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
	content:"";	height:100%; float:left; width:0; margin-top:-32767px;/* thank you Erik J - negate effect of float*/}

#outer:after {/* thank you Erik J - instead of using display table for ie8*/
	clear:both;	display:block; height:1%; content:" ";}
/*MAIN******************* MAIN CONTENT COLUMNS ***************************/

/*Percentage dimensions of the holy grail layout
All the dimensions are in percentage widths so the layout adjusts to any screen resolution. Vertical dimensions are not set so they stretch to the height of the content
Maximum column content widths
 800 x 600 (Left and right columns: 162 pixels, Center page: 357 pixels
1024 x 768 (Left and right columns: 210 pixels, Center page: 459 pixels

The header, colmask and footer divs are 100% wide and stacked vertically one after the other.
Colmid is inside colmask and colleft is inside colmid. 
The three column content divs (col1, col2 and col3) are inside colleft. 
Notice that the main content column (col1) comes before the other columns*/