/*  ----------------------------------------------------------------------
  
  COLOUR		CODE		WHERE IS IT USED
  
  
  bright red	#F00000		header (brightest point)
  darker red	#9C0707		header (darkest point), heading text
  blue			#3399FF		logo, heading text, navigation highlight
  lighter blue	#D6EBFF		own comments background
  light grey	#CDCDCD  	sidebar
  lighter grey	#D8D8D8		comments background
  dark grey		#333333		navigation background
  dark grey		#666666		body text color
  
  ---------------------------------------------------------------------- */






/*  ----------------------------------------------------------------------
  GENERAL REDECLARATIONS
  ---------------------------------------------------------------------- */

html				{height: 100%;}
* 					{margin:0; padding:0;}

body 				{
	text-align:center;
	color: #666;
	background: #000 url("../images/background.jpg") repeat-x 0 -25px;
	height: 100%;
	padding-top: 0px;
}

body, tr,
td, input,
select, textarea 	{font:normal 12px/1.6em Verdana, Arial, Helvetica, sans-serif;}

a			{outline: none;}
a:link 			{color:#3399FF; text-decoration:underline;}
a:visited 		{color:#3399FF; text-decoration:underline;}
a:hover 		{color:#9C0707; text-decoration:underline;}
a:active 		{color:#9C0707; text-decoration:underline;}

#content-side a:link 			{color:#9C0707; text-decoration:underline;}
#content-side a:visited 		{color:#9C0707; text-decoration:underline;}
#content-side a:hover 			{color:#3399FF; text-decoration:underline;}
#content-side a:active 			{color:#3399FF; text-decoration:underline;}

ul, ol	 		{margin:0 0 10px 25px;}
dl 					{margin:0 0 10px;}
dt 					{font-weight:bold;}
dd					{margin:0 0 3px 10px;}
p 					{margin:0 0 15px;}
h1 					{font-size: 22px; font-family: Verdana, Arial, sans-serif; margin:0 0 12px; color: #3399FF;}
h2 					{font-size: 18px; font-family: Verdana, Arial, sans-serif; margin:8px 0; color: #9C0707;}
h3 					{font-size: 17px; font-family: Verdana, Arial, sans-serif; margin:8px 0; color: #666666;}
h4 					{font-size: 14px; font-family: Verdana, Arial, sans-serif; margin:6px 0 5px;}
h5 					{font-size: 12px; font-family: Verdana, Arial, sans-serif; margin:4px 0;color: #3399FF;}
h6					{font-size:xx-small; margin:3px 0;}
hr 					{border:none;padding: 5px 5px 5px 3px;border-bottom: 1px solid #CDCDCD;margin-bottom: 10px;}
img 				{border:none;}
acronym			{border-bottom: 1px dotted;}
blockquote 	{margin:0 25px 20px 25px; font-style:italic;}



.right {float: right;}
.left {float: left;}
.rightphoto {float: right;margin: 0 0 10px 10px;}
.leftphoto {float: left;margin: 0 10px 10px 0;}
.rightbutton {float: right;margin: 0 0 10px 10px;}
.leftbutton {float: left;margin: 0 10px 10px 0;}
.clr {clear:both;}
.red {color: #FF0000;}
#preload {display: none;}

h4.posted {
	font-size: 12px;
	margin-bottom: 15px;	
	margin-top: -5px;
	color: #3399FF;
}

#content-side h1 {
	font-size: 18px;
	color: #9C0707;
}

h4.breadcrumbs {
	margin-bottom: 15px;	
	margin-top: -5px;
	color: #333;
	font-size: 10px;
	font-family: Verdana, Arial, sans-serif;
}

h2 a:link, h2 a:visited {color:#9C0707; text-decoration:none;}
h2 a:hover 		{text-decoration:underline;}


/*  ----------------------------------------------------------------------
  LAYOUT ELEMENTS
  ---------------------------------------------------------------------- */

#wrapper {
	position: relative;
	background:#fff;
	width: 900px;
	margin: 0 auto;
	text-align: left;
}

#header {
	background:#ff3333 url("../images/header.jpg") no-repeat 0 0;
	padding: 0px;
	width: 900px;
	height: 210px;
}

#header img#banner {
	position: absolute;
	top: 40px;
	right: 30px;
	border: 1px solid #000;
}

#header h1 a {
	display: block;
	width: 380px;
	height: 140px;
	text-indent: -9000px;
}
#header h1  {
	margin-bottom: 0px;
}
#content {
	margin: 0;
	height:auto;
	background: #fff;
}

#content-main {
	float: left;
	width: 565px;
	padding: 15px 30px 30px 30px;
	background: #fff;
}

#content-side {
	float: left;
	width: 215px;
	padding: 15px 15px 15px 45px;
	background: #CDCDCD url("../images/sidebar-bg.gif") repeat-y 0 0;	
}


/*  ----------------------------------------------------------------------
  
  COLOUR		CODE		WHERE IS IT USED
  
  
  bright red	#F00000		header (brightest point)
  darker red	#9C0707		header (darkest point), heading text
  blue			#3399FF		logo, heading text, navigation highlight
  lighter blue	#D6EBFF		own comments background
  light grey	#CDCDCD  	sidebar
  lighter grey	#D8D8D8		comments background
  dark grey		#333333		navigation background
  dark grey		#666666		body text color
  
  ---------------------------------------------------------------------- */



.article {
	margin: 20px 0 20px 0;
	overflow: auto;clear: right;
}

/*.article img {
	float: right;	
	margin: 0 0 20px 20px;
}*/



#content-side img.sign-up-button {
	margin-left: 40px;
}

.news-comment {
	background: #eee;
	padding: 10px;
	padding-bottom: 1px;
	margin-bottom: 10px;
}
.own-comment {
	background: #D6EBFF;
}

.news-comment h1 {
	font-size: 38px;
	float: left;
	margin: 0px 10px 0 0;
	padding: 10px;
}

.news-comment p, .news-comment h4.posted {
	margin-left: 60px;
	
}

.highlight {
	background: #eee;
	padding: 10px 10px 10px 10px;
	margin-bottom: 10px;
}

#map { width: 565px; height: 350px; }


/* ----------------------------------------------- 
		FOOTER
----------------------------------------------- */

/*#footer {
	clear:both;
	height: 30px;
	padding:0px;
	padding-top: 14px;
	padding-left: 100px;
	background:#ff3333 url("../images/footer.jpg") no-repeat 0 0;
	text-align: left;
	font-size: 12px;
}*/

#footer a:link 			{color:#fff; text-decoration:none;}
#footer a:visited 		{color:#fff; text-decoration:none;}
#footer a:hover 			{color:#333; text-decoration:none;}
#footer a:active 			{color:#333; text-decoration:underline;}

#footer {
	clear:both;
	height: 44px;
	padding:0px;	
	color: #fff;
	background: #3399FF;
	text-align: left;
	font-size: 12px;
}

#footer .links {
	float: left;
	width: auto;
	margin: 12px 0 0 100px;
}

#footer #threeam {
	float: right;
	margin: 8px 20px 0 0;
	width: 214px;
	height: 30px;
	text-indent: -9000px;
}

#footer #threeam a {
	float: right;
	width: 214px;
	height: 30px;
	background: url("../images/3am-footer.gif") no-repeat 0 0;
}



/* ----------------------------------------------- 
		NOTICES
----------------------------------------------- */

/* green */
#notice {
	background: #BBEECC;
	border: 3px solid #E3FFED;
	padding: 10px;
	font-weight: bold;
	color: #333;
	margin-bottom:10px;
}
/* red */
#errorExplanation,
#error {
	background: #FF4E4E;
	border: 3px solid #FF7C7C;
	padding: 10px;
	font-weight: bold;
	color: #333;
	margin-bottom:10px;
}
/* orange */
#warning {
	background: #ff9900;
	border: 3px solid #FF7722;
	padding: 10px;
	font-weight: bold;
	color: #333;
	margin-bottom:10px;
}

#flash.alert #notice {
	background: #FF7402;	
	border: 3px solid #FBA45D;
}

#notice .error h2,
#notice .error p,
#notice .error li,
#errorExplanation h2,
#errorExplanation p,
#errorExplanation li {
	color: #333;
}

#notice.warning {
	background: #FF7402;	
	border: 3px solid #FBA45D;
}

#notice.success {
	background: #BBEECC;	
	border: 3px solid #7AC593;
}

#flash.alert #notice {
	background: #FF7402;	
	border: 3px solid #FBA45D;
}


/*  ----------------------------------------------------------------------
  FORM ELEMENTS
  ---------------------------------------------------------------------- */

form {
	
}



form hr {
  clear: both;
  border: 0px;
  border-top: 1px solid #ccc;
  margin-top: 10px;
  margin-bottom: 10px;
}

form h3 {
 	margin-bottom:6px;
	padding: 2px; 
}

form .hidden {
  text-indent: -9000px;
}

form .controls {
  padding-top: 0px;
  margin: 20px 0 40px 143px;
}

form .farleft {
	margin-left: 0px;
}

form .controls input {
	margin-top: -5px;
}

form span.help {
	float: left;
	margin: -5px 0 10px 140px;
	font-size: 10px;
	text-decoration: italic;
	display: inline;
}

form label span {
	color: #ff0000;
}

form ul.nobullet, form ol.nobullet {
  list-style-type: none;
}

form br {clear:left;}

fieldset {
	margin-top: 12px;
	margin-bottom:20px;
	border: 1px solid #99cc33;
	clear: both;
	padding: 10px;
	width: 500px;
}

label, input, textarea, .radiolabel {
	display:block;
	float:left;
  	width:200px;
	margin-bottom:6px;
	padding: 2px;
}

input				{width: 200px;}
input.tinyinput 	{width:50px;}
input.shortinput 	{width:100px;}
input.mediuminput 	{width:250px;}
input.longinput 	{width:300px;}


label {
	font-weight: bold;
}



textarea.largetextbox {
	margin-left: 143px;float: left;
	width: 400px;
	height: 300px;
}

textarea.fullwidth {
	margin-left: 0;
	width: 550px;
	height: 200px;
}

label span {
  color: #FF0000;
}

legend {
  color: #000;
  font-weight: bold;
}

label, .radiolabel, longradiolabel {
	width:130px;
	text-align:left;
	padding-right:10px;
	padding-top:2px;
}

label.longlabel, .longradiolabel {
  width: 240px;
}



/*  ----------------------------------------------------------------------
  
  COLOUR		CODE		WHERE IS IT USED
  
  bright red	#F00000		header (brightest point)
  darker red	#9C0707		header (darkest point), heading text
  blue			#3399FF		logo, heading text, navigation highlight
  light grey	#CDCDCD  	sidebar
  dark grey		#333333		navigation background
  dark grey		#666666		body text color
  
  ---------------------------------------------------------------------- */

input {
	border: 1px solid #ccc;
	background-color: #fff; 
	width: 135px; 
	height: 16px;
}

input:hover, textarea:hover {
	border: 1px solid #3399FF;
}

input.noborder {border: none;} 

input.radio{
	width:auto;
	margin-right:10px;
	position:relative;
	top:2px;
	background-color:transparent;
}

input[type="checkbox"] {
  width: auto;
  border: none;
}

input.checkbox {
	width: auto;
  	border: none;
  	margin-right: 5px;
	background-color:transparent;
}

table.checkbox-table {
	width: 400px;
}

table.checkbox-table label {
	width: auto;
	margin: 0;
	padding: 0 10px 0 10px;
}

input.short {
	width: 50px;
}

input.medium {
	width: 100px;
}

input.long {
	width: 200px;
}

input[type="hidden"] {
	display: none
}
	
input.button {
	padding: 5px;
	width: auto;
	height: auto;
	margin-left: 0px;
	margin-right: 10px;
	color: #fff;
	border: 1px solid #333;
	background: #3399FF;
}

input.button:hover {
	color: #fff;
	border: 1px solid #333;
	background: #9C0707;
}

textarea{
  border: 1px solid #ccc;
  width: 300px;
  height: 60px;
}

select {
	width: auto;
	margin-bottom: 10px;
}

select.farleft {
	margin-left: 0px;
}

select.fullwidth {
	width: 100%;
}

.fieldWithErrors input{
	background-color: #FCC;
}

.radio {
	/*width: 100%;*/
	display: block;
  	margin-left: 143px;
  	margin-bottom: 10px;
  	height: 20px;
}

.longradio {
  margin-left: 0;
  margin-top:5px;
  margin-left: 250px;
}

.radio label, .longradiolabel {
  width: auto;
  float: left;
  margin-left: 0;
  margin-top: 0;
}

.radio input.radioinput, .longradio input.radioinput {
  float: left;
  width: auto;
  margin-right: 5px;
}

form#dropdown select {
  width: 300px;
} 

form#dropdown input.formButton {
  width: auto;
}

/*Login form elements*/

form.loginform {
	margin-bottom: 30px;
}

form.loginform input, form.loginform label {
	margin-top: 0px;
	margin-bottom: 0px;
}

form.loginform input {
	border: 1px solid #666;
}

form.loginform input:hover {
	border: 1px solid #3399FF;
}

form.loginform .username {
	width: 180px;
}

form.loginform .password {
	width: 120px;
	margin-right: 5px;
	margin-bottom: 10px;
}

form.loginform .search {
	width: 145px;
	margin-right: 5px;
}

form.loginform .hidden {
	display: none;	
}

form.loginform .gobutton {
	padding: 2px 5px 1px 5px;
	width: auto;
	height: auto;
	margin-left: 0px;
	margin-right: 10px;
	color: #fff;
	border: 1px solid #333;
	background: #3399FF;
}

form.loginform .gobutton:hover {
	color: #fff;
	border: 1px solid #333;
	background: #9C0707;
}

/*  ----------------------------------------------------------------------
  
  COLOUR		CODE		WHERE IS IT USED
  
  bright red	#F00000		header (brightest point)
  darker red	#9C0707		header (darkest point), heading text
  blue			#3399FF		logo, heading text, navigation highlight
  light grey	#CDCDCD  	sidebar
  dark grey		#333333		navigation background
  dark grey		#666666		body text color
  
  ---------------------------------------------------------------------- */
  
  
  

/* ----------------------------------------------------
				LIST STYLING
---------------------------------------------------- */

/* Content Side Linklist */

#content-side ul.linklist li a  {
	padding-top: 5px;
	padding-left: 3px;
	padding-bottom: 5px;
	display:block;
	height: auto;
	text-decoration: none;
	overflow: hidden;
	color: #9C0707;
}

#content-side ul.linklist {
	list-style-type: none;
	margin-left: 0;
}

#content-side ul.linklist li {
	border-bottom: 1px solid #666666;
}

/* Content Side Linklist */

#content-side ul.linklist li a:hover  {
	display:block;
	background: #3399FF;
	text-decoration: none;
	color: #fff;
}


/* Content Main Linklist */

#content-main ul.linklist li a  {	
	display:block;
	height: auto;
	text-decoration: none;
	overflow: hidden;
	color: #3399FF;
	
}

#content-main ul.linklist {
	list-style-type: none;
	margin-left: 0;
}

#content-main ul.linklist li {
	padding-top: 5px;
	padding-left: 3px;
	padding-bottom: 5px;
	border-bottom: 1px solid #CDCDCD;
	margin-bottom: 10px;clear: both;
}

#content-main ul.linklist li a:hover  {
	color: #9C0707;
}

#content-main ul.linklist li .band-name  {
	width: 300px;
}

#content-main ul.linklist li .band-icons  {
	width: 230px;
	float: right;
}

#content-main ul.linklist li .band-icons a  {
	display: inline;
}

#content-main ul.linklist li .band-icons a img  {
	float: right;
}




/* Event Linklist */

#content-main ul.eventlist li a  {	
	text-decoration: none;
	color:#9C0707;
}

#content-main ul.eventlist li a:hover  {	
	text-decoration: none;
	color:#3399FF;
}

#content-main ul.eventlist {
	list-style-type: none;
	margin-left: 0;
	margin-bottom: 10px;
}

#content-main ul.eventlist li {
	clear: left;
	padding: 5px 5px 5px 3px;
	border-bottom: 1px solid #CDCDCD;
	margin-bottom: 10px;
	overflow: auto;
}

div.auto_complete {
          width: 350px;
          background: #fff;
}
div.auto_complete ul {
  border:1px solid #888;
  margin:0;
  padding:0;
  width:100%;
  list-style-type:none;
}
div.auto_complete ul li {
  margin:0;
  padding:3px;
}
div.auto_complete ul li.selected {
  background-color: #ffb;
}
div.auto_complete ul strong.highlight {
  color: #800; 
  margin:0;
  padding:0;
}