html
{
	min-width:320px;
	/*max-width:1680px;*/	
} 

body {
	margin: 0 0 1em 0;
	padding: 0;
	color: black;
	background-color: #eee;
	line-height: 130%;
	font-family: arial, helvetica, verdana, tahoma, sans-serif;
	text-align: center;
}

#wrapper-header {	background: #222; }

#header {
	background: #222 url('images/banner.jpg') right no-repeat;
	width: 85%;
	height: 95px;
	line-height: 95px;
	margin: 0 auto;
	border-left: 1px solid #707070;
	border-right: 1px solid #707070;
	text-align: left;
}

#header h1 {
		margin: 0;
		padding: 0;
		color: #eee;
		font-size: 180%;
		padding-left: 10px;
		letter-spacing: -1px;
		float: left;
}

#header h1 a {
	text-decoration: none;
	color: #eee;
}

#header h1 a .logo_colour
{ color: #FAF700;}


#facebook {
	float: right;
	padding-right: 10px;
	padding-top: 10px;
	/*border: 1px dashed #f00;*/
	display: inline-block;
	max-height: 80px;
}

#wrapper-menu {
	background: #A80000;/* url('images/menu-background.png') top left repeat-x; */
	float: left;
	width: 100%;
}

#menu {
	width: 85%;
	margin: 0 auto;
	font-size: 95%;
	white-space: nowrap; /* stops half a menu link dropping to next line. Instead, the whole link will drop. This only happens if you have a lot of menu links, and large text size */
	padding-right: 2px;	/* The menu far left, and far right borders are not quite lining up in non IE browsers for some reason. This makes it less noticable */
}

* html #menu { padding-right: 0; } /* See above comment. This re-adjusts IE to the above padding */

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	border-left:  1px solid #880000;
	border-right: 1px solid #880000;
	width: 100%;
}

#menu li { display: inline; }

#menu a:link, #menu a:visited {
	padding: 0.25em 1em;
	background: transparent;
	color: #fff;
	text-decoration: none;
	float: left;
	border-right: 1px solid #880000;
}

#menu a:hover {
	background: #880000; /*url('images/menu-hover.png') repeat-x; */
	color: #eeeeee;
}

#content {
    width: 83%; 
    margin: 0 auto;
    padding: 3.5em 1% 20px 1%;
    border-left: 1px solid #bbb;
    border-right: 1px solid #bbb;
    background: white;
    font-size: 90%;
    text-align: left;
}

#adsense {
    width: 100%;
    height: 90px;
    float: left;
    /*border: 1px dashed #f00;*/
}

#main {
    float: left;
    width: 73%; /* Actually 75% because of the padding */
    padding: 3.5em 1% 20px 1%;
    background: white;
}

#sidebar {
    float: right;
    width: 25%;
    max-width: 150px;
    background: white;
}

.marx-style {
    display: none;
    visibility: hidden;
}

* html #content { padding-top: 1.8em; } /* Set padding top in IE to 20px */

#footer {
	clear: both;
	margin: 0 auto;
	padding: 2px 1%;
	width: 83%;
	text-align: right;
	color: white;
	letter-spacing: 0.15em;
	background: #A80000; /* url('images/menu-background.png') top left repeat-x; */
	border: 1px solid #880000;
	font-size: 75%;
}

#footer a:link, #footer a:visited {
	color: #FAF700;
	text-decoration: none;
}

#footer a:hover {
	text-decoration: underline;
}

h2 {
	color: #666;
	padding-bottom: 3px;
	border-bottom: 1px solid #a80000;
	font-size: 150%;
	letter-spacing: -1px;
}

#content a:link, a:visited {
	color: #CC0000;
	text-decoration: none;
}

#content a:hover {
	text-decoration: underline;
}

#content blockquote
{
	border: 1px dotted #888888;
	margin:1em 20px;
	padding: 5px;
	line-height: 1.2em;
	background: #e3e3e3
}

p { margin-left: 1em; }

hr 
{
	color: #ccc;
	background-color: #ccc;
}

/* Video-specific stuff */
#video_thumbnail
{
	float:left;
	position: relative;
	padding: 0px 10px 0px 0px;
	width: 120px;
	height: 90px;
}

#video_thumbnail span
{
	width: 32px;
	height: 32px;
	display: block;
	position: absolute;
	bottom: 10px;
	right: 20px;
	background: url('images/player_play.png') no-repeat;
}

#video_tags
{
	clear: both;
	font-size: 80%;
}

/* NICE FORM STUFF */
form.nice-layout div {
  margin: 2px 0;  /* Separate the controls for the benefit of IE */
  align:left;
}
form.nice-layout label {
  display: inline-block;
  width: 5em;
  text-align: right;
  font-size: 20px;
}
form.nice-layout input {font-size: 24px;}

/* SIZE-SPECIFIC STUFF */

@media only screen and (max-width : 857px)
{
	/* 
	Mobile: go to full-width.
	This is helpful for showing ads. 
	*/
	
	#header 
	{
		width: 100%;
	}
	#menu {width: 100%;}
	#content 
	{
		width: 100%;
		padding: 3.5em 1px 20px 1px;	
	}
	#footer 
	{
		width: 99%;
		padding: 2px 1px;
	}
}

@media only screen and (max-width : 530px)
{
	#facebook 
	{
			position: relative;
			display: none;
	}
}


@media only screen and (max-width: 360px)
{
	#header
	{
		height: 50px;
		line-height: 50px;
	}
}