html {
	height: 100%;               /* this will ensure the page will always fill the screen */
	background-color: #f4f4f4;  /* the page should have a slight margin at the edges, which should be off-white */
	font-family: tahoma;        /* exploit the web company font */
	font-size: 80%;             /* browser default font size is huge - reduce it */
}
body {
	margin:       0px auto;     /* to centre the body horizontally */
	border-style: solid;        /* )                                */
	border-width: 0px 1px;      /* > nice subtle horizontal borders */
	border-color: #dddddd;      /* )                                */
	width:        1500px;       /* default to a nice wide display: we'll use media queries to adjust this later on */
	min-height:   100%;         /* this will ensure the page will always fill the screen */
	background:   url('../_images/header-bg.png') 10px 15px no-repeat scroll white; /* add this to the body, not the header, as it needs to span multiple sections */
	opacity:      0.99;         /* this prevents the sudden font change at the end of a fadeIn */
}
#leftmargin {
	position: fixed;
	left: 0;
	top: 0;
	width: 70px;
	height: 100%;
	background: url('../_images/seasonal/xmaslights_vertical_left.png') 0 0 repeat-y scroll transparent;
}
#rightmargin {
	position: fixed;
	right: 0;
	top: 0;
	width: 70px;
	height: 100%;
	background: url('../_images/seasonal/xmaslights_vertical_right.png') 0 0 repeat-y scroll transparent;
}

h3 { margin: 0px; font-size: 150%; font-weight: normal; }
p { margin: 10px 0 0 0; }
ol li { margin-bottom: 10px; }
img { border: 0px; }
input, select, textarea { font: 100% tahoma; }
abbr { border-bottom: 2px dotted orange; }

#header {
	padding: 0px 30px;       /* don't use margin - that spills out of the containing element (body in this case) */
}
#header h1 { /* Exploit The Web logo */
	float: right;
	margin: 10px 0px 0px 0px;
	font-size: 250%;
}
#header h2 { /* call us / tweet us / like us */
	float: left;
	margin: 50px 0px 0px 700px;
	font-size: 200%;
	font-weight: normal;
	white-space: nowrap;
}
#header h2 * {
	display: none;
}
#header h2 :first-child {
	display: inline;
}
#header h2 a {
	color: #a22;
	text-decoration: none;
	text-shadow: #dbb 1px 1px;
}
#header h3 { /* Exploit The Web strapline */
	clear: right;
	float: right;
	margin: 0px;
	font-size: 90%;
	font-weight: bold;
}
#header:after {
	content: "."; display: block; clear: both; height: 0px; overflow: hidden;
}

#nav { margin: 20px 30px; text-align: right; }
#nav a { display: inline-block; margin-left: 6px; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0px 0px 4px 0px #ddd; padding: 8px 16px; background-color: #eee; color: #a00; font-weight: bold; text-decoration: none; text-transform: uppercase; }
#nav a.current  { background-color: #a00; color: #eee; }

#main { margin: 0px 30px; padding-bottom: 80px; }

#footer { position: fixed; left: 0px; bottom: 0px; width: 100%; height: 60px; }

#footer div { margin: 0px auto; border-top: 1px solid #dddddd; padding: 10px; width: 1480px; height: 39px; background-color: white; font-size: 80%; }
#footer p { margin: 2px 0 0 0; }
#footer img { vertical-align: middle; }

.floatright { display: block; float: right; margin: 0px 0px 20px 20px; }
.clear { clear: both; }

.content {
	border: 1px solid #dddddd;
	border-radius: 6px;
	padding: 20px;
}
.shadow {
	box-shadow: 0px 0px 10px 0px #bbb;
}

.button {
	display: block;
	float: right;
	margin-top: 5px;
	border-radius: 6px;
	box-shadow: 3px 3px 6px 0px #888;
	padding: 5px 20px 8px 20px;
	background-color: #a00;
	color: white;
	text-decoration: none;
	font-size: 140%;
}


/************ social media ************/
#fb-like-container, #twitter-container {
	display: none;
	position: fixed;
	z-index: 99;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.9);
}

#fb-like-container > div, #twitter-container > div {
	display: block;
	margin: 20px auto;
	border: 1px solid #bbb;
	box-shadow: 0px 0px 6px 0px #ccc;
	padding: 10px;
	width: 500px;
	background-color: white;
}