.bannercontent{
	padding:0px;
	margin:0px;
	height:400px;
	position:relative;
	background-color:black
}

.societyname {
	position:static;
	line-height:100px;
	width:730px;
	color:#FFFFFF;
	font-size:38px;
	text-shadow: 1px 1px 1px black;
}

.societybadge {
	height:100px;
	position:static;
	float:left;
	margin-right:50px
}

.headercontent {
	position:absolute;
	top:10px;
	height:100px;
	right:30px;
	z-index: 15
}

.centralarea {
	background-color:#000000;
}

.pagebackground {
	float:left;
	padding:0px;
	padding-bottom: 40px;
	display: inline-block; 
	width:704px;
	background-image:url('scotlandmapbackground.jpg');
	background-size: 100%;
	background-repeat: repeat-y;
}

.pagecontent {
	width:855px;
	margin-left:auto;
	margin-right:auto;
	box-shadow: 5px 5px 5px #DADFE3;
	border: 1px solid black;
}

.pagetitle {
	color: #ffff33;
	text-shadow: 2px 2px 2px black;
	font-size:18px;
}

.maincontent {
	float:left;
	padding:0px;
	padding-bottom: 40px;
	display: inline-block; 
	width:704px;
	background-image:url('scotlandmapbackground.jpg');
	background-size: 100%;
	background-repeat: repeat-y;
}

.maintextdiv {
	text-shadow: 2px 2px 2px black;
	margin-top:20px;
	font-size:14px;
	font-family:'Arial';
	width:600px;
	border: 1px solid black;
	background-color:rgba(0,0,0,0.7);
	color:#FFFFFF;
	margin-left:auto;
	margin-right:auto;
	padding:20px;
}

.captionedimage {
	border: 1px solid gray;	
}

.captionedimagearea{
	font-size:10px;
}

.footercontent {
	background-color: #c0c0c0;
	font-size: 10px;
	font-family: 'Arial';
	border-top: 1px solid black;
}

.navbar:hover {
	background-color: #525252
}


/* BANNER SLIDESHOW STYLING */
			
			.bannerimages IMG {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 8;
			}

			.bannerimages IMG.active {
				z-index: 10;
			}

			.bannerimages IMG.last-active {
				z-index: 9;
			}

			.clear {
				clear: both;
			}

/* HYPERLINK STYLING */

			a:link {
				color: #ffffff;
			}/* unvisited link */
			a:visited {
				color: #ffffff;
			}/* visited link */
			a:hover {
				color: #ffffff;
			}/* mouse over link */
			a:active {
				color: #ffffff;
			}/* selected link */


/* NAVIGATION MENU STYLING */


			#nav {
				padding:0px;
				margin:0px;
				list-style: none;
				margin-bottom: 10px;
				font-size: 20px;
				width: 151px;
				/* Bring the nav above everything else--uncomment if needed.
				 position:relative; */
				 z-index:100;
				 float:left;
				 border-top:1px solid white;
			}
			
			#nav li {
				padding:0px;
				border-bottom:1px solid white;
				float: left;
				position: relative;
			}
			#nav a {
				display: block;
				line-height: 50px;
				height: 50px;
				width: 141px;
				padding: 5px;
				color: #fff;
				background: #000000;
				text-decoration: none;
			}
			#nav li ul li a {
				width:172px;
			}
			#nav a:hover {
				color: #fff;
				background: #6b0c36;
				text-decoration: underline;
				transition: background-color 1s;
				-moz-transition: background-color 1s; /* Firefox 4 */
				-webkit-transition: background-color 1s; /* Safari and Chrome */
				-o-transition: background-color 1s; /* Opera */
			}

			/*--- DROPDOWN ---*/
			#nav ul {
				background: #fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
				background: rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
				list-style: none;
				position: absolute;
				left: -9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
			}
			#nav ul li {
				border-top: 1px solid white; 
				float: none;
			}
			#nav ul a {
				white-space: nowrap; /* Stop text wrapping and creating multi-line dropdown items */
				height: 20px;
				font-size: 15px;
				line-height: 20px;
			}
			#nav li:hover ul {/* Display the dropdown on hover */
				left: 115px; /* Bring back on-screen when needed */
				top: 0px;
				
			}
			#nav li:hover a {/* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
				background: #6b0c36;
				text-decoration: underline;
			}
			#nav li:hover ul a {/* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
				text-decoration: none;
			}
			#nav li:hover ul li a:hover {/* Here we define the most explicit hover states--what happens when you hover each individual link. */
				background: #333;
			}