/* fyp.css
@auhtor Imran

This will page is focused on the design for the header and footer template and most of the homepage   */

html {overflow-y: scroll; height: 100%;}

/*styling for tables*/
body, td, th 

{
	font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
	margin-bottom:52px;
	/*background-color:blue;*/
	}

#body
{
	
	
	min-width:760px;
	background:url(/Images/background.jpg);
	background-repeat: repeat-x left top;
}


/*wraps the main content for the whole website*/

#wrapper
{

	top:0px;
	width:1200px;
	margin:0 auto;
	position:absolute;
	left:31%;
	margin-left: -360px;
	
}
/* removes link border*/
.borderZero
{
	border-style:none;
}

#1{
    background: blue;
}

#2{
    background: yellow;
}


#1, #2
{
    float:left;
}

#offer
{
    margin: 0 auto;
    background: none;
    border: 1px solid #d7d7d7;
    width:550px;
}


#offers, h1{
    text-align: center;
    background: #c9c9c9;
    margin-top: 0px;
    padding-left:16px;
    color:#ff6600;
}


#banner
{
	
	background-image: url(../Images/banner.png);
	height:140px;
	padding:0.2em;	
}
/*banner image link*/

a#bannerLink {
	position: absolute;
	width: 1030px;
	height: 120px;
	left: 0px;
	top: 0px;
   /*border: 1px solid #f00;*/
	text-indent: -9999px;
	color:f3f3f3;
	
}

/*changes link and hover colours in orderadminpage*/
a#Link 
{
	color:black;
}
#Link:hover
{
	color:#c4c4c4;
}


/* calls the ul class from font and color in html */
ul.color li {cursor: pointer; list-style: none;}
ul.font li {cursor: pointer; list-style:none;}
/*to diplay the font sizes after user clicked on of the sizes*/
body {font-size: 14px;}
body.m{font-size:14px;}
body.s {font-size: 10px;}
body.l{font-size: 20px;}

/*When user clicks the color boxes then background colour changes*/
body.lightgrey
{
	background-color: #cccccc;
	background-repeat:no-repeat;	
}

/*When user clicks the color boxes then background colour changes*/
body.darkgrey
{
	background-color:#333333;
	background-repeat:no-repeat;
}

/*When user clicks the color boxes then background colour changes*/
body.white
{
	background-color:#ffffff;
	background-repeat:no-repeat;
}

/*  rounded edge image covers links */
#box, #box-2 {
	float:left;
	background-image: url(../Images/round%20edged%20border.png);
	background-repeat: no-repeat;
	width:220px;
	height:175px;
	padding-top:20px;
	position: relative;
	bottom: 46px;
	/*background-color:#06F;/*lightblue*/
}

#box-2 {
	bottom:0;
}

#box-2 li {

}

/*a round border that covers the content*/
.border
{
	xmin-height:720px;
	moz-border-radius:10px; /* Firefox */
	-webkit-border-radius:10px; /* Safari and chrome */
	-khtml-border-radius:10px; /* Linux browsers */
	border-radius:10px; /* CSS3 */
	behavior:url(../Styles/border-radius.htc); /* IE */
	background-color: #f3f3f3;
	padding: 1px 30px 20px 30px;
	-moz-box-shadow: 0px 1px 6px #666;
	-webkit-box-shadow: 0px 1px 6px #666;
	box-shadow: 0px 1px 6px #666;
	margin-bottom: 2em;	
	
}

#Borderline
{
	border-top:1px solid #ff6600;
}

/*covers the middle part of the site*/
#content
{	
	min-height:500px;	
	width:970px;
	float:right;		
}

#content p {
	font-size: 22px;
}







/*fieldset enables border and sizes of the form box*/
fieldset
{

	margin:130px;
	padding-left:1em;
	border: 1px black;	

}

fieldset#legend,#comments
{
	padding:4px;
}



/*search bar*/
/*.fieldHolder
{
	position:absolute;
	left:837px;
	width:220px;
	height:27px;
	background: url(../Images/Searchbar2.gif) no-repeat;
	/*background-color:#0C0;*/
	/*float:right;*/
	/*padding:4px;
	margin-right:120px;
	margin-bottom:30px;
				
}*/





/*click to change font size*/
#fontComment
{
	color:#f3f3f3;
	float:right;
	margin:-110px;
	margin-left:12px;
	margin-top:40px;
	/*padding-top:36px;*/
	/*margin-right:-110px;*/
	/*background-color:#06F; /* Blue */
}

/*footer for additional links and copyright */

#footer
{
	max-height:50px;
	clear:both;
	background-color:#f37c14;
	border-top: 3px solid #564B47;
	border-bottom: 3px solid #564B47;
	padding: 0px 15px 0px 15px;
	text-align:right;
}

/*changes link colour for terms and faq*/
#footer a
{
	color:#f3f3f3;
}
/*changes link colour when hovered for terms and faq links*/
#footer a:hover
{
	color:black;
}



 /*magnifier glass button next to search field */	
/*.img_but
{
	width:16px;
	height:16px;
	/*background-color:#09C;/* Blue */
	/*float:right;
	margin-right:20px;
	margin-top:8px;
}
/*Controls image on FAQ page*/

.home-image {
	margin-bottom: 40px;
	text-align:center;
}
.home-image img {
		width: 	300px;
		height: 300px;			
}
.image
{
	float:right;
	margin-top:-92px;
}

/*controls login link positioning*/
#login
{
	float:right;
	padding-top:0px;
	margin-left:-500px;
	margin-right:-90px;
	margin-top:150px;
	/*background-color:#903;/*maroon*/	
}




/*opening time image at the bottom of the nav image*/
#openingTimes
{
	padding-top:20px;
	padding-bottom:37px;
	/*background-color:red;*/

}

/*main navigation */

#MainNav
{
	min-height: 420px;
	width:190px;
	float:left;
	padding-top:40px;
	padding-bottom:30px;	
}

#MainNav li
{
	
	padding-right:40px;
	list-style:none;
		
}



/*text for faq and terms page*/
.text
{
	border-bottom:1px solid #ff6600;
	padding-bottom:50px;
}

/*subheadings for faq and terms page*/
.textHeading
{
	color:#ff6600; 
	font-weight:bold;
	margin-top:30px;

}

/*one div for question field in faq page*/
.questionText
{
	padding:2px;
	width:300px;
	text-align:left;
}
/*text input field that is hidden*/
.textInput
{
	width:170px;
	height:22px;
	background:none;
	border:1px solid;
	color:#000000;
	margin-top:-20px;
	float:right;
	margin-right:36px;
	/*background-color:#336;/*purple*/ 
}



/*assesbility buttons located in banner*/
#threeA
{
	/*background-color:#0C0;/* Green */
	padding:0px;
	float:right;
}

/*welcome text in index*/
#welcome p
{
	
	color:#ff6600;
	padding:21px;
	padding-right:80px;
	margin-top:-36px;
	font-style:normal;
	text-align:justify;
	font-size:22px;
	
	
	
}

ul#menu
{
    color:#474646;
}

#menu li{
    line-height: 30px;
}


/*changes colour to  links*/
a 
{
	color:#ff6600;
	text-decoration:none;
}
/*changes colour to links when hovered  */
a:hover
{	
	color:#444;	
}



/*removes unnecessary border on images*/

a img 
{ 
	border: none; 
}

#banner h1 {
	font-size: 1px; 
	height: 1px;
	margin-left: -9999px;	
}

/*main header tags*/
h2 {
color:#ff6600;
 font-size:1.5em; 
 font-weight:bold; 
 font-style:italic;
 font-weight:bolder;
  text-align:center;
 }
 
 h2, p
 {
     color:#ff6600;
 }
 
 
 
 /*secondary main header tags*/
 h3{
	 font-size:1.1em;
	 color:#ff6600;
	 text-align:center;
 }
 /*h4,h5 and h6 are used so it can be controlled individually if ever needed*/
 h4
 {
	 color:#ff6600;
	 font-size:18px;
	 
 }
 
 h5
 {
		
	 text-align:left;
	 background-color:#0C0;
	 font-size:1em;
	 color:#f3f3f3;
 }
 
 h6
 {
	 color:#ff6600;
	 text-align:right;
	 font-size:1.2em;
	 margin-right:110px;
	 margin-top:12px;
 }
 
 h6.extraHeader
 {
	 color:#ff6600;
	 font-size:1.5em; 
	 font-style:italic;
	 font-weight:bolder;
	 text-align:center;
	 margin: 0px 0px 0px -31px;
	 text-align: left;
	 
 }

.padding10 { padding: 10px; }

.covid p {
	font-size: 18px;
	padding: 0;
	margin-top: 0;
}

.covid h1 {
	margin: 20px 0;
	padding: 0;
	background: none;
}