/*
This controls the page background colour and the width.
I would recommend leaving width at 1000px due to most peoples screen resolution
The margins that are set to auto should center the page
*/
body	{width: 1000px;
		margin-left: auto;
		margin-right: auto;
		background-color:#88835D;
		}

/*
This is list of options across the top which include logout and admin
*/
#pageheader {	width: 1000px;
				background-color: #88835D;
				height:40px;
				clear:both;
				}

/*
This is the section at the bottom of th site please leave the clear:both alone as this makes sure it stays at the bottom
See what is written for body as to why width is 1000px
*/				
#pagefooter {	width: 1000px;
				background-color: #E4E4E4;
				height: 50px;
				clear:both;
				}

/*
This is the first menu and the one which customers will see
It has the event description and date and all the menu options
Please leave float and clear alone as they hold its position
*/				
#sidemenu	{width: 12%;
				background-color: #FFFFFF;
				float: left;
				clear: left;
				}

/*
This is the menu where input is taken from staff
This will be only visble in staff view
Please leave float alone as it holds its position
*/				
#secondmenu	{width: 15%;
				background-color: #E6E6E6;
				float: left;
				}
	
/*
This is where all the information is shown
Please leave float alone as it holds its position
*/			
#mainbody		{width: 72%;
				background-color: #CECECE;
				float: left;
				padding-left: 0.5%;
				padding-right: 0.5%;
				}
				
/*
These topnav setting are for the navigation options just beneath the main website header
*/			
a.topnav, a.topnav:link, a.topnav:visited{
	background-color: #9C835D;
	font-size: small;
  	color: #FFFFF0;
	font-weight: bold;
	margin: 0px;
	padding: 2px 5px 4px 5px;
	border-right: 1px solid #9C836A;
	text-decoration: none;
}

a.topnav:hover{
	background-color: #76A5D8;
	color: #FFFFFF;
	text-decoration: none;
	cursor: pointer;
}
		
/*
This is to format how hyperlinks look in the system
*/
a.hlink, a.hlink:link, a.hlink:visited 	{text-decoration: none;
									color: #FFFFFF;
									padding: 2px;	
									background-color: #5F3B69;
									border: 1px solid black;
									font-family: tahoma;
									font-weight:bold;
									}

a.hlink:hover	{cursor: pointer;

				}
/*
This just allows production of a dotted line
*/									
hr.dotted 	{border-style: none none dotted;
			border-color: black;
			}

/*
This is to make sure that the menu fills it space
*/				
table.menuheader	{width: 100%;
					
					}

table.menuitems td {font-size: 10pt;
						padding: 4px;
						}
					
table.menuitems td.side	{font-size: 10pt;
						border-bottom: 1px solid #878787;
						padding: 4px;
						}
					
/*
This is to make sure that the menu fills it space
*/			
table.currentChoices	{width: 100%;
						}
						
table.currentChoices td	{font-size: small;
						text-align: center;
						background-color: #FFFFFF;
						
						}
						
table.currentChoices td.blank 	{font-size: small;
								text-align: right;
								background-color: transparent;
								}

table.currentChoices th	{font-size: small;
						background-color: #2D2A35;
						color: #FFFFFF;
						text-align: center;
						}


/*
This sets out the layout for contact details in the overview page
*/						
table.overviewContact	{width: 50%;
						}
						
table.overviewContact td	{font-size: small;
						text-align: left;
						background-color: #FFFFFF;
						vertical-align: middle;
						}
						
table.overviewContact th	{font-size: small;
						background-color: #2D2A35;
						color: #FFFFFF;
						text-align: left;
						}
						
/*
This sets out the layout for attendance in the overview page
*/						
table.overviewAttendance	{width: 90%;
							}
						
table.overviewAttendance td	{font-size: small;
							text-align: left;
							background-color: #FFFFFF;
							vertical-align: middle;
							}
						
table.overviewAttendance th	{font-size: small;
							width: 50%;
							background-color: #2D2A35;
							color: #FFFFFF;
							text-align: left;
							}

							
/*
This sets out the layout for entertainment in the overview page
*/						
table.overviewEntertainment	{width: 90%;
							}
						
table.overviewEntertainment td		{font-size: small;
									text-align: left;
									background-color: #FFFFFF;
									vertical-align: middle;
									}
						
table.overviewEntertainment th		{font-size: small;
									width: 50%;
									background-color: #2D2A35;
									color: #FFFFFF;
									text-align: left;
									}

/*
This sets out the layout for Toast in the overview page
*/						
table.overviewToast				{width: 90%;
								}
						
table.overviewToast td		{font-size: small;
							text-align: left;
							background-color: #FFFFFF;
							vertical-align: middle;
							}
						
table.overviewToast th		{font-size: small;
							width: 30%;
							background-color: #2D2A35;
							color: #FFFFFF;
							text-align: left;
							}		
/*
This sets out the layout for layout in the overview page
*/						
table.overviewLayout	{width: 90%;
						}
						
table.overviewLayout td		{font-size: small;
							text-align: left;
							background-color: #FFFFFF;
							vertical-align: middle;
							}
						
table.overviewLayout th		{font-size: small;
							width: 50%;
							background-color: #2D2A35;
							color: #FFFFFF;
							text-align: left;
							}						
/*
This sets out the layout for timetable in the overview page
*/						
table.overviewTimetable	{width: 90%;
						}
						
table.overviewTimetable td	{font-size: small;
							text-align: left;
							background-color: #FFFFFF;
							vertical-align: middle;
							}
						
table.overviewTimetable th	{font-size: small;
							width: 50%;
							background-color: #2D2A35;
							color: #FFFFFF;
							text-align: left;
							}
							
/*
This sets out the layout for admin in the overview page
*/						
table.admin	{
			}
						
table.admin td	{font-size: small;
				text-align: left;
				background-color: #FFFFFF;
				}
						
table.admin th	{font-size: small;
				background-color: #2D2A35;
				color: #FFFFFF;
				text-align: left;
				}

/*
This sets out the layout for admin in the overview page
*/						
table.groupprices	{
					}
						
table.groupprices td	{font-size: small;
					text-align: left;
					background-color: #FFFFFF;
					}
						
table.groupprices th	{font-size: small;
					background-color: #2D2A35;
					color: #FFFFFF;
					text-align: left;
					}				
/*
This sets out the layout for menu selection bar in the menu admin page
*/						
table.menuselect	{
					}
	
table.menuselect td	{
					font-size: medium;
					color: #FFFFFF;
					text-align:center;
					background-color: #2D2A35;
					border-right: 1px solid #2D2A35;
					}
					
table.menuselect td.selected	{
							background-color:  #FFFFFF;
							font-size: medium;
							color: #2D2A35;
							text-align: center;
							}
	
table.menuselect td:hover	{
							background-color:  #FFFFFF;
							font-size: medium;
							color: #2D2A35;
							text-align: center;
							cursor: pointer;
							}

table.conferencedetails { }
							
/*
This sets out the layout for contact details in the overview page
*/						
table.pagehalf	{width: 100%;
						}
						
table.pagehalf td	{width: 50%;
					vertical-align: top;
						}

/*
This sets out the layout for the final totals of all the prices table
*/						
table.finaltotals	{width: 60%
				
				}
				
table.finaltotals td	{font-size: medium;
					text-align: left;
					background-color: #FFFFFF;
					width: 40%;
					}
						
table.finaltotals th	{font-size: medium;
					background-color: #2D2A35;
					color: #FFFFFF;
					text-align: left;
					width: 60%;
					}	
/*
This controls the format of the title text at the top of the page
*/							
h1.pagetitle		{color: black;
				font-family: Tahoma;
				
				}
				
h2.subtitle		{color: black;
				font-family: Tahoma;
				
				}
/*
This will control how functional icons act within the system
*/

input.icon	{cursor: pointer;
			height:20px;
			width:20px; 
			}
				
/*
This will control the width of all text boxes in the secondary menu
*/

input[type="text"] 	{width: 250px;

					}

input.date 	{width: 70px;

			}					
	
input.contact	{width: 150px;
					
						}
						
input.textboxmenu	{width: 60px;
					
						}

input.inchoice	{width: 40px;
					
					}
					
input.venuename {width: 150px;

				}

input.venuehire {width: 50px;

				}
				
input.dateselect {width: 80px;

				}
				
input.menuadminbig {width: 225px;

					}
					
input.menuadminmed {width: 75px;

					}
					
input.menuadminsmall {width: 48px;

					}
					
input.submitbutton	{font-weight: bold;
					font-family: Tahoma;
					border: 1px solid #000000;
					background-color: #5F3B69;
					cursor: pointer;
					color:#FFFFFF;
					}

textarea.textinput	{overflow-x: hidden;
					font-size: small;
					}

input.username {width: 142px;
				}
					

/* This will define how text about limit that have been reached will be displayed */	
span.warning	{color: #FF0000;
				font-size: medium;
				}

select.menuselect option	{font-size: small;
					
					
					}