/* 
Coded by MrCorn of Habbo.com.
*/

/* ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
---- ----          Body Attributes         ---- ----
---- ---- ---- ---- ---- ---- ---- ---- ---- ---- */
body {
	background: #2CBBE0 url(http://hffm.co.uk/web/images/layout/background.jpg) bottom fixed;
	background-repeat: repeat-x;
	font-family: Verdana;
	font-size: 11px;
	text-decoration: none;
	color: #646464;
	margin: 0;
	padding: 0;
	}
h1 {
	font-family: Verdana;
	font-size: 12px;
	text-decoration: none;
	color: #646464;
	margin: 0;
	padding: 0;
}
input, textarea {
	background: #FFF;
	outline: none;
	border: 1px solid #dcdcdc;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	padding: 3px;
	font-family: Verdana; 
	font-size: 11px;
	color: #dcdcdc;
	}
input:focus, textarea:focus {
	border: 1px solid #b4b4b4;
	color: #b4b4b4;
	}
select {
	border: 1px solid #dcdcdc;
	outline: none;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	font-size: 11px;
	color: #646464;
	width: 200px;
	}
input[type="submit"] {
	background: #e1e1e1;
	border: 1px solid #c8c8c8;
	border-bottom: 2px solid #c8c8c8;
	color: #bebebe;
	font-size: 12px;
	font-weight: bold;
	}
input[type="submit"]:hover {
	background: #c8c8c8;
	border: 1px solid #b4b4b4;
	border-bottom: 2px solid #b4b4b4;
	color: #969696;
	font-size: 12px;
	font-weight: bold;
	}
a { 
	color: #5fbcd9;
	text-decoration: none;
	font-weight: bold;
	}
a:hover {
	text-decoration: underline;
	}
img {
	border: 0;
	}
.clear {
	clear: both;
	}

/* ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
---- ----         Wrapper Attributes       ---- ----
---- ---- ---- ---- ---- ---- ---- ---- ---- ---- */
#wrapper {
	width: 994px;
	height: 100%;
	margin: auto;
	}
#wrapper #header {
	background: url(../images/layout/header.png) no-repeat;
	width: 994px;
	height: 111px;
	padding-top: 5px;
	}
#wrapper #header .logo {
	background: url(../images/layout/logo.png) no-repeat;
	width: 416px;
	height: 109px;
	margin-left: 10px;
	}
#wrapper #body-background {
	background: url(../images/layout/body_background.png);
	background-repeat: repeat-y;
	width: 994px;
	height: 100%;
	}
#wrapper #body-banner-bit {
	background: url(../images/layout/body_banner_bit.png) no-repeat;
	width: 994px;
	height: 148px;
	}
#wrapper #body-footer {
	background: url(../images/layout/body_footer.png) no-repeat;
	color: #FFF;
	width: 934px;
	height: 40px;
	margin: auto;
	margin-top: 13px;
	padding: 6px;
	padding-bottom: 15px;
	}
#wrapper #body-footer a { 
	color: #FFF; 
	text-decoration: none; 
	font-weight: bold;
	}
#wrapper #body-footer a:hover { 
	color: #FFF; 
	text-decoration: underline; 
	}
#wrapper #body-footer .footer-left {
	float: left;
	text-align: left;
	}
#wrapper #body-footer .footer-right {
	float: right;
	text-align: right;
	}

/* ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
---- ----         Banner Attributes        ---- ----
---- ---- ---- ---- ---- ---- ---- ---- ---- ---- */
.banner-desc {
	display: inline; 
	float: left; 
	}
.banner-desc .reveal-text, .banner-desc .reveal { 
	display: none;
	}
.banner-desc img { 
	border: 0; 
	display: block;
	}
.banner-desc:hover { 
	position: relative;
	cursor: pointer; 
	text-decoration: none;
	}
.banner-desc:hover .reveal-desc { 
	background:url(../images/layout/desc_bar.png); 
	width: 295px;
	height: 23px; 	
	padding-left: 5px;
	padding-right: 5px;
	display: block; 
	position: absolute; 
	bottom: 0px;
	}
.banner-desc:hover .reveal-text {
	padding-left: 5px;
	padding-right: 5px;
	display: block; 
	position: absolute; 
	bottom: 6px;
	font-weight: normal;
	color: #FFF;
	}
#banner-one {
	background: url(../images/banners/banner_background.png) no-repeat;
	width: 305px;
	height: 124px;
	float: left;
	margin-left: 18px;
	margin-top: 8px;
	padding: 3px;
	}
#banner-two {
	background: url(../images/banners/banner_background.png) no-repeat;
	width: 305px;
	height: 124px;
	float: left;
	margin-left: 12px;
	margin-top: 8px;
	padding: 3px;
	}
#banner-three {
	background: url(../images/banners/banner_background.png) no-repeat;
	width: 305px;
	height: 124px;
	float: left;
	margin-left: 12px;
	margin-top: 8px;
	padding: 3px;
	}
	
/* ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
---- ----       Navigation Attributes      ---- ----
---- ---- ---- ---- ---- ---- ---- ---- ---- ---- */
#navigation {
	background: url(../images/layout/navigation_bar.png) no-repeat;
	width: 974px;
	height: 23px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	}
#navigation .menu-top {
	background: url(../images/layout/menu_top.png) no-repeat;
	width: 200px;
	height: 12px;
	}
#navigation .menu-mid {
	background: url(../images/layout/menu_mid.png) repeat-y;
	width: 200px;
	overflow: hidden;
	}
#navigation .menu-mid a {
	color: #FFF;
	width: 186px;
	height: 13px;
	text-decoration: none;
	font-weight: bold;
	line-height: normal;
	display: block;
	padding: 5px;
	margin: 2px;
	}
#navigation .menu-mid a:hover {
	color: #FFF;
	background: url(../images/layout/menu_hover.png);
	width: 186px;
	height: 13px;
	text-decoration: none;
	font-weight: bold;
	line-height: normal;
	display: block;
	padding: 5px;
	margin: 2px;
	}
#navigation .menu-bot {
	background: url(../images/layout/menu_bot.png) no-repeat;
	width: 200px;
	height: 5px;
	}
#navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}
#navigation li {
	float: left;
	margin-right: 20px;
	}
#navigation li a {
	color: #FFF;
	font-weight: bold;
	text-decoration: none;
	}
#navigation .menu {
	position: absolute;
	width: 200px;
	visibility: hidden;
	z-index: 9999;
	margin-left: -20px;
	}

/* ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
---- ----           Box Attributes         ---- ----
---- ---- ---- ---- ---- ---- ---- ---- ---- ---- */
#center {
	text-align: center;
	vertical-align: middle;
	font-size: 15px;
	font-weight: bold;
	border: 3px solid #D0F065; 
	background: #E2FFA6; 
	padding: 8px;
	margin: 0px auto 5px auto;
	color: #97BC4D;
	width: 95%;
	}
#left {
	width: 269px;
	float: left;
	margin-left: 18px;
	margin-top: 10px;
	}
#left .box-header-orange {
	background: url(../images/layout/box_header_orange.png) no-repeat;
	width: 247px;
	height: 24px;
	padding-left: 11px;
	padding-right: 11px;
	padding-top: 15px;
	}
#left .box-header-green {
	background: url(../images/layout/box_header_green.png) no-repeat;
	width: 247px;
	height: 24px;
	margin-top: 10px;
	padding-left: 11px;
	padding-right: 11px;
	padding-top: 15px;
	}
#left .box-header-blue {
	background: url(../images/layout/box_header_blue.png) no-repeat;
	width: 247px;
	height: 24px;
	margin-top: 10px;
	padding-left: 11px;
	padding-right: 11px;
	padding-top: 15px;
	}
#left .box-body-mid {
	background: url(../images/layout/box_body_mid.png) repeat-y;
	width: 253px;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 4px;
	}
#left .box-body-mid .green a { 
	color: #98d21a; 
	text-decoration: none; 
	font-weight: bold; 
	}
#left .box-body-mid .green a:hover { 
	text-decoration: underline; 
	}
#left .box-body-mid .orange a { 
	color: #eead1b; 
	text-decoration: none; 
	font-weight: bold; 
	}
#left .box-body-mid .orange a:hover { 
	text-decoration: underline; 
	}
#left .box-body-mid .blue a { 
	color: #5fbcd9; 
	text-decoration: none; 
	font-weight: bold; 
	}
#left .box-body-mid .blue a:hover { 
	text-decoration: underline; 
	}
#left .box-body-footer {
	background: url(../images/layout/box_body_footer.png) no-repeat;
	width: 269px;
	height: 10px;
	}
#right {
	width: 669px;
	float: right;
	margin-right: 18px;
	margin-top: 10px;
	}
#right .main-box-header {
	background: url(../images/layout/main_header_blue.png) no-repeat;
	width: 647px;
	height: 24px;
	padding-left: 11px;
	padding-right: 11px;
	padding-top: 15px;
	}
#right .main-box-header-green {
	background: url(../images/layout/main_header_green.png) no-repeat;
	width: 647px;
	height: 24px;
	padding-left: 11px;
	padding-right: 11px;
	padding-top: 15px;
	}
#right .main-box-header-orange {
	background: url(../images/layout/main_header_orange.png) no-repeat;
	width: 647px;
	height: 24px;
	padding-left: 11px;
	padding-right: 11px;
	padding-top: 15px;
	}
#right .main-box-mid {
	background: url(../images/layout/main_box_mid.png) repeat-y;
	width: 653px;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 4px;
	}
#right .main-box-mid .green a { 
	color: #98d21a; 
	text-decoration: none; 
	font-weight: bold; 
	}
#right .main-box-mid .orange a { 
	color: #eead1b; 
	text-decoration: none; 
	font-weight: bold;
	}
#right .main-box-mid a { 
	color: #5fbcd9; 
	text-decoration: none; 
	font-weight: bold;
	}
#right .main-box-mid a:hover { 
	text-decoration: underline; 
	}
#right .main-box-footer {
	background: url(../images/layout/main_box_footer.png) no-repeat;
	width: 669px;
	height: 10px;
	}
#right .main-box-spacer {
	height: 10px;
	}

/* ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
---- ----          Radio Attributes        ---- ----
---- ---- ---- ---- ---- ---- ---- ---- ---- ---- */
#radio-wrapper {
	background: #EEE;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 7px;
	margin-top: 4px;
	}
#djsays {
	background: url(../images/layout/dj_says_bubble.png) no-repeat;
	width: 249px;
	height: 19px;
	margin-left: -3px;
	padding: 5px;
	}
#radio-player-fix {
	margin-left: 11px;
	}
#radio-play {
	background: url(../images/layout/radio_play.png);
	width: 15px;
	height: 14px;
	float: left;
	margin-right: 3px;
	}
#radio-stop {
	background: url(../images/layout/radio_stop.png);
	width: 15px;
	height: 14px;
	float: left;
	margin-right: 5px;
	}
.volume-control {
	background: url(../images/layout/radio_control.png);
	width: 15px;
	height: 14px;
	cursor: move;
	}
.volume-track {
	background: url(../images/layout/volume_track.png) no-repeat center top;
	width: 173px;
	height: 14px;
	padding-right: 5px;
	float: left;
	}

/* ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
---- ----        Timetable Attributes      ---- ----
---- ---- ---- ---- ---- ---- ---- ---- ---- ---- */
#timetable {
	width: 786px;
	margin: 20 auto;
	}
#timetable .timetable-header {
	background: url(../images/layout/timetable_header.png) no-repeat;
	width: 764px;
	height: 24px;
	line-height: 39px;
	padding-left: 11px;
	padding-right: 11px;
	padding-top: 15px;
	}
#timetable .timetable-mid {
	background: url(../images/layout/timetable_mid.png) repeat-y;
	width: 770px;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 4px;
	}
#timetable .timetable-footer {
	background: url(../images/layout/timetable_footer.png) no-repeat;
	width: 786px;
	height: 10px;
	}
#timetable .cell {
	border: 1px #FFFFFF solid;
	background: #eee;
	font-size: 11px;
	}

/* ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
---- ----        Content Attributes        ---- ----
---- ---- ---- ---- ---- ---- ---- ---- ---- ---- */
#content-wrapper {
	width: 669px;
	height: auto;
	}
.column-left {
	width: 212px;
	float: left;
	margin-right: 8px;
	margin-bottom: 8px;
	}
.column-center {
	width: 212px;
	float: left;
	margin-right: 8px;
	margin-bottom: 8px;
	}
.column-center2 {
	width: 432px;
	float: left;
	margin-right: 8px;
	margin-bottom: 8px;
	}
.column-right {
	width: 212px;
	float: left;
	margin-bottom: 8px;
	}
.column-page {
	width: 653px;
	height: auto;
	}