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

/***************************************************
Start of CSS file
***************************************************/


body {
	width:100%;
	margin:auto;
}

/***************************************************
Banner text and images
***************************************************/

#banner {
	width:100%;
	max-width:1324px;
	height:224px;
	margin:auto;
}

/***************************************************
topnav styles
***************************************************/

#outsidenav {
	width:95%;
	margin:auto;
}

#topnav {
	width:100%;
	padding-top:20px;
}
	
#topnav a:link, #topnav a:visited {
	color:#000077;
	padding:10px 0px 10px 0px;
	margin:10px 15px 10px 15px;
}

#Sidebar a:link, #Sidebar a:visited {
	color:#000077;
	padding:10px 0px 10px 0px;
	margin:10px 15px 10px 15px;
}

#topnav .home, #topnav .NewsAndEvents , #topnav .History, #topnav .Gallery, #topnav .BusinessDirectory, #topnav .ClubsAndOrganisations  {
	font-size: 22px;
	text-decoration:none;
	font-weight:bold;
	font-family: "Tempus Sans ITC";		
}

#button1, #button2, #button3, #button4, #button5, #button6 {
	
	height: auto;
		
	background-color:yellow;
	
	padding-top:8px;
	padding-bottom:8px;
		
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: 0.7%;
	margin-left: 0.7%;
	
	border:1px solid #000077;
	border-radius: 10px;
	-moz-border-radius: 10px;
    
	
	box-shadow:5px 5px 0px #000077; /*CSS3 shadow: 30px blurred shadow all 	around image*/
    -webkit-box-shadow:5px 5px 0px #000077; /*Safari shadow version*/
    -moz-box-shadow:5px 5px 0px #000077; /*Mozilla shadow version*/
	
	
}

#button1, #button2, #button3 {
float:left;
}

#button4, #button5, #button6 {
float:right;
}


#CUlogo {
	margin-left: auto;
    margin-right: auto;
    text-align: center
}

.nav {
display: none;
}



/**********************************************************
Wrapper styles - covering the two sidebars and main content
***********************************************************/

#wrapper {
	max-width:1324px;
	margin:auto;
}

p.subheading {
	font-size: 20pt;
	font-weight: bold;
	text-align: left;
	font-family: "trebuchet";
	color: yellow;
	
	padding-left: 8px;
}

p.subheading2{
	font-size: 20pt;
	font-weight: bold;
	text-align: left;
	font-family: "trebuchet";
	color: blue;
	
	padding-left: 8px;
}

p.maintext, ul li {
	font-size:17px;
	font-weight: bold;
	text-align:left;
	padding-left:8px;
	padding-right:8px;
	color:white;
}

p.minorheading{
	font-size:19px;
	font-weight: bold;
	text-decoration: underline;
	text-align:left;
	padding-left:8px;
	color:white;
}

#picture {
	max-width:700px;
	margin: 4%;
}

#picture img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}



/***************************************************
Left sidebar styles
***************************************************/

#Sidebar {
	clear:both;
	float:left;
	width:180px;
	height:500px;
	margin-top:50px;
		
	background-color:white;

}

#sidebutton1 .CreditUnion, #sidebutton2 .LocalAttractions , #sidebutton3 .LocalArtists, #sidebutton4 .ContactUs, #sidebutton5 .UsefulLinks, #sidebutton6 .AboutUs, #sidebutton7 .UsefulInfo  {
	font-size: 18px;
	text-decoration:none;
	font-weight:bold;
	font-family: "Tempus Sans ITC";	
	margin:0px 0px 0px 0px;

}
	
#sidebutton1, #sidebutton2, #sidebutton3, #sidebutton4, #sidebutton5, #sidebutton6, #sidebutton7 {
	
	height: auto;
	
	float:left;
	background-color:yellow;
	
	padding-top:8px;
	padding-bottom:8px;
	
	margin-top: 3px;
	margin-right: 8px;
	margin-bottom: 10px;
	margin-left: 8px;
	
	border:1px solid #000077;
	border-radius: 10px;
	-moz-border-radius: 10px;
    
	
	box-shadow:5px 5px 0px #000077; /*CSS3 shadow: 30px blurred shadow all 	around image*/
    -webkit-box-shadow:5px 5px 0px #000077; /*Safari shadow version*/
    -moz-box-shadow:5px 5px 0px #000077; /*Mozilla shadow version*/
	
}	

/***************************************************
Main content styles
***************************************************/

.btt {
		display: none;
}

#Content {
	float:left;
	margin:auto;

	width:55%;
	min-width:700px;
	margin:10px 25px 20px 25px;

}

#Content2 {
	float:left;
	margin:auto;

	width:55%;
	min-width:650px;
	margin:50px 25px 20px 25px;

	border: 3px solid #000077;	
}

#Content2 #picture {
margin-left:40%;
}

#Content2 p {
margin-left:5px;
}

/***************************************************
News and Events event boxes
***************************************************/

#event1, #event2 {
	float:left;
	margin:auto;

	width:90%;
	min-width:300px;
	
	margin-top:10px;
	margin-left:4.5%;
	margin-bottom:5px;
}

#event1 {
border: 3px solid #000077;
}

#event2 {
border: 3px solid yellow;
}

p.eventHeading {
    font-size: 27px;
	text-decoration:none;
	font-weight:bold;
	font-family: "Tempus Sans ITC";	
}

p.eventDate {
    font-size: 21px;
	text-decoration:none;
	font-weight:bold;
	font-family: "Tempus Sans ITC";	
}

p.eventDesc {
    font-size: 21px;
	text-decoration:none;
	font-family: "Tempus Sans ITC";	
}

/***************************************************
Right sidebar styles
***************************************************/


#sidebar2 {
	float:left;
	
	width:23%;
	height:auto;
	margin-top:50px;
	margin-bottom:30px;
	
	border:3px solid #00688B;
	
	background:url(Img/hixs_pattern_evolution.png);
}

#sidebar2 .sidebartext {
	font-size:17px;
	font-weight: bold;
	text-align:left;
	padding-left:8px;
	color:white;
}

#sidebar2 .subheading2 {

	font-size: 14pt;
	font-weight: bold;
	text-align: left;
	padding-left:8px;
	color: yellow;
}

#sidebar2 .sidebartext2 {
	font-size:19px;
	font-weight: bold;
	text-align:left;
	padding-left:8px;
	color:white;
	text-decoration:underline;
}

#sidebar2 img {
	padding-left:15px;
}

#searchbox {
margin-left:10px;
margin-bottom:10px;
}


/***************************************************
Footer
***************************************************/

#footer {
	clear:both;

	width:90%;
	margin-top:50px;
	margin-left:auto;
	margin-right:auto;
	
	border:3px solid #00688B;
	background:url(Img/hixs_pattern_evolution.png);
}

#footer .sidebartext {
	font-size:17px;
	font-weight: bold;
	text-align:left;
	padding-left:8px;
	color:white;
}

#footer .subheading2 {
	font-size: 14pt;
	font-weight: bold;
	text-align: center;
	padding-left:8px;
	color: yellow;
}

#footer a:link, #footer a:visited {
	font-size: 14pt;
	font-weight: bold;
	text-align: left;
	padding-left:8px;
	color: white;
}

/***************************************************
Responsive web design 
***************************************************/

@media (max-width:1200px) {
	
/*New CSS for banner and nav bar*/

#banner img {
	margin-left:5%;
	margin-right:5%;
    max-width: 90%;
    height: auto;
    width: auto\9; /* ie8 */
}

#banner {
	height:auto;
}
			
#button1, #button2, #button3, #CUlogo, #button4, #button5, #button6, #Sidebar {
	display:none;
}

#topnav a:link, #topnav a:visited {
	color:#000077;
	padding:5px 10px 5px 10px;
	margin:0px 0px 0px 14px;

}

.nav {
		position: relative;
		min-height: 40px;
		display: inline;
		padding: 10px 10px 10px 10px;
		margin-left:20px;
	}	
	.nav ul {
		width: 250px;
		padding: 0px 0px 0px 0px;
		position: absolute;
		top: 0;
		left: 0;
		border: solid 1px #aaa;
		background: #fff url(img/icon-menu.png) no-repeat 10px 11px;
		border-radius: 5px;
		box-shadow: 0 1px 2px rgba(0,0,0,.3);
	}
	.nav li {
		display: none; /* hide all <li> items */
		margin: 0;
	}
	.nav .current {
		display: block; /* show only current <li> item */
	}
	.nav a {
		display: block;
		padding: 1px 5px 5px 22px;
		text-align: left;
		text-decoration: none;
	}
	.nav .current a, .nav .current2 a {
		background: none;
		color: #666;
		text-decoration:underline;
	}

	/* on nav hover */
	.nav ul:hover {
		background-image: none;
	}
	.nav ul:hover li {
		display: block;
		margin: 0 0 5px;
	}
	.nav ul:hover .current {
		background: url(images/icon-check.png) no-repeat 10px 7px;
	}

	
#Content {
		width: 60%;
		margin:50px 10px 10px 10px;
}

#sidebar2 {
		width: 35%;
		margin-top:50px;
}

							}
							
@media (max-width:1150px) {		

#Content {
		width: 95%;
}

#sidebar2 {
		margin: 10px 10px 10px 10px;
		width: 95%;
}

#sidebar2 {
	height:auto;
}

#sidebar2 tr{
	font-size:19pt;
}

#sidebar2 .sidebartext {
	font-size:21pt;
}

#sidebar2 .subheading2 {
	font-size: 18pt;
}
						}