/* LAYOUT */
#main { background: #F4FAF6 url(/images/home-background.gif) repeat-x; }
#content { width: 800px; margin: 0 auto 2em; }

/* TITLE */
#home-title { overflow: hidden;  padding: 0; margin: 0 5px 0.1em 0.1em; height: 33px; display:block}
#home-title span {  overflow: hidden; height: 33px; background-repeat: no-repeat; }
#home-title .previous { float: left; position: relative; top: 10px; font-size: 14px; padding-right:16px;}
#home-title .previous a {text-decoration: underline;}
#home-title .current { float: left; font-size: 26px;}
#home-title .next  { float: left; position: relative; top: 10px; font-size: 14px; padding-left:16px;;}
#home-title .next a {text-decoration: underline;}
#home-title .tagline {font-size: 26px}

#year-nav{
	float:right;
	width:200px;
	text-align:right;
	margin-top:10px;
	margin-right:4px;
    font-family: Arial, sans-serif;
    font-weight: normal;
}

#month-nav{
	float:right;
	width:210px;
	text-align:right;
	margin-top:10px;
	margin-right:4px;
    font-family: Arial, sans-serif;
    font-weight: normal;
}

#see-also-nav{
	float:left;
	width:100%;
	text-align:left;
	margin-top:10px;
	margin-right:4px;
    font-family: Arial, sans-serif;
    font-weight: normal;
}

.date-name {width:200px; text-align:left; padding-right:8px; padding-left:8px}
.module-content table { width:750px }
.module-content td { padding-bottom:8px}

#header #globaltitle .logo {
	text-align:right;
    font-size:40px;
	text-decoration:none;
	color: black;
    font-family: Arial, sans-serif;
    padding: 0;
	margin: 0;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);	
}

#header #globaltitle {
	width:240px;
	height:52px;
	margin: 8px auto 16px auto;
	text-align:right;
	background: url(/images/logo.gif) center left no-repeat;
}

#header #globalnav {
	clear:both;
	width:300px;
	margin: 8px auto 20px auto;
	text-align:center;
	color:black;	
}

#header #globalnav a {
}


h1 {
	display:inline;
    font-family: Arial, sans-serif;
    font-weight: normal;
    margin: 0;
    padding: 6px 0 6px 8px;
}

h2 {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #C0D2DB;
	border: 1px solid #DDDDDD;
    color: #2D2D2D;
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: normal;
    margin: 0;
	margin-top: 8px; 
	margin-bottom: 0.5em;
    padding: 6px 0 6px 8px;
    
	font-size: 1.3125em; 
}

h3 {
	color:green;
    font-family: Arial, sans-serif;
    font-weight: bold;
	font-size: 24px;
    margin: 0;
    padding: 6px 0 6px 8px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
	text-align: center;
}

.form-error {
	background-color:#EFD8D7;
	border:1px solid red;
	padding:6px
}

#flashMessage {
	text-align: left;
	border: 1px solid #fff;
	color: #000;
	padding: 5px 5px 5px 30px;
	margin: 0 0 12px 0;
	font-size: 14px;
}

#flashMessage.notice {
	color: #060;
	background: url(/images/greentick.gif) #E2F9E3 left no-repeat;
	border-color:#9c9;
}
#flashMessage.alert {
	color: #fff;
	background: url(/images/error.gif) #CC0101 left no-repeat;
	border-color:#CC9999;
}

.annoucement {
	clear:both;
	padding:8px;
	background:#FFDEC9;
	border:1px solid #FF6A00;
}

.add-a-date-button {
	padding: 2px;
	border: 1px solid #DDDDDD;
	background-color: #D2E6EF;
}

.click-here-button {
	padding: 2px;
	border: 1px solid #DDDDDD;
	background-color: #FFEADD;
}

#advert-bottom {
	width: 800px !important; 
	float: left !important; 
	margin: auto 0;
	text-align:center;
}


@media only screen and (max-device-width: 480px) {
	html {
		-webkit-text-size-adjust: none;
	}
	body {
		width: 320px !important; margin: 0; padding: 0;
	}
	#header {
		min-width: 320px !important;
		height: 60px;
	}

	#header #globaltitle {
		margin: 8px 0 0 26px;
		width: 320px;
	}	
	
	#main {
		min-width: 320px !important;
		overflow: visible !important;
	}			
	#content {
		width: 300px !important; 
		margin: 6px; 
		padding: 0;
		text-align: center;
	}
	
	#content p {
		text-align: left;
	}

	#footer {
		min-width: 320px !important; 
		padding: 0.875em 0
	}	
	
	.date-name {
		padding-right: 4px;
		text-align: left;
		width:50% !important;
	}

	.module {
		overflow: visible !important; 
		margin: 0;
	}			

	.module-content {
		padding-left:4px !important;
		padding-right:4px !important;
	}

	.module-content table {
		width: 290px !important;
	}	

	#home-title {
		width: 320px !important; 
		margin: 0; 
		padding: 0;
		text-align: left;
	}	

	#year-nav {
		width: 320px !important;
		float: none !important;
		text-align: center;
		margin: 8px 0 8px 0;
	}
}