/* CSS Document */

/* DOCUMENT INFORMATION -----------------------------------

TITLE:			UDO
LAST UPDATED:	05th June 2009
AUTHOR:			Ben Johnson

NOTES:		The 1st section will reset any variance
			across all browsers making them all
			appear very similar, however it also means
			everything needs its own custom style!
			Retrieved from various sources over the net

-- CONTENTS -----------------------------------------------

	=1:		[STANDARDS / HTML]
	=2:		[LINKS]
	=3:		[COMMON ELEMENTS]
	=4:		[MAIN.TPL COLUMN]
	=5:		[SIDEBAR COLUMN]
	=6:		[FOOTER]
	=7:		[LISTS]
	=8:		[FORMS]
	=9:		[IMAGES]
	=10:	[MISC]	
	
---------------------------------------------------------*/


/*------=1:	[STANDARDS / HTML] -----------------------------*/

html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td, 
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
	vertical-align: baseline;
	font-family: inherit;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	outline: 0;
	padding: 0;
	margin: 0;
	border: 0;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

body {
	background: #131315;
	line-height: 1;
	color: #f4f4f4;
	font-size: 12px;
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}



/*------=2:	 [LINKS] ---------------------------------------*/
a {
	text-decoration: none;
	color: #f4f4f4;
}
a:hover { text-decoration: underline; }

/*------=3:	 [COMMON ELEMENTS] -----------------------------*/

hr {
	height: 1px;
	background-color: #323232;
	border: 0px;
	width: 90%;
}

.floatLeft { float: left; }
.floatRight { float: right; }

.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }

.clearBoth {
	clear: both;
}

p { 
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: left;
	line-height: 16px;
	margin: 0.5em 0 1.5em 0pt;
	padding: 0;
}

.bold, strong {	font-weight: bold; }
	
h1 {
	font-size: 20px;
	line-height: 2.0em;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: -0.5pt;
	padding: 0 0 8px 8px;
}

h2 {
	font-size: 18px;
	line-height: 25px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: -0.5pt;
	padding: 2px 0 10px 8px;
}
	.yellowTitle {	background: url(../images/headingStyles/yellow.png) right bottom  no-repeat;	}
	.blueTitle {	background: url(../images/headingStyles/blue.png) right bottom  no-repeat;	}
	.pinkTitle {	background: url(../images/headingStyles/pink.png) right bottom  no-repeat;	}
	.greenTitle {	background: url(../images/headingStyles/green.png) right bottom  no-repeat;	}
	.purpleTitle {	background: url(../images/headingStyles/purple.png) right bottom  no-repeat;	}

h3 {
	font-size: 17px;
	line-height: 25px;
	padding: 2px 0 10px 8px;
}
	h3 span {
		font-size: 12px;
		padding-left: 7px;
	}

/* tables still need cellspacing="0" in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}

caption, th, td {
	font-weight: normal;
	text-align: left;
}

/* remove possible quote marks (") from <q> & <blockquote> */
blockquote:before, blockquote:after, q:before, q:after {
	content: "";
}

blockquote, q {
	quotes: "" "";
}

.hide {	display: none; }

/*------=4:	 [MAIN.TPL] ------------------------------*/
body {
	text-align: center;
	background: url(../images/background.jpg) center top no-repeat;
	background-color: #131315;
}

#page {
	margin: 0 auto;
	text-align: left;
	width: 1014px;
}

#container {
	width: 1014px;
	margin: 0 auto;
}

#header {
	height: 390px;
	width: 965px;
	position: relative;
	padding-left: 27px;
}
	
#topnav div {
float: left;
}

#topnav {
	position:relative;
}	

	#topnav .leftShadow {
		position:absolute;
		top:0;
		left:-27px;
	}
	
	#topnav .rightShadow {
		position:absolute;
		top:0;
		right:-27px;
	}

#topnav div a {
display: block;
height: 83px;
width: 100%;
}
#topnav {
	height: 83px;
	width: 960px;
	position: absolute;
	top: 309px;
	float:left;
	background: url('../images/topNavTop.jpg') no-repeat;
}
.menu {
	margin-top: 1px;
	width: 120px;
	height: 80px;	
}
	#home {	background: url('../images/menu/button1.jpg') no-repeat; }
	#home:hover { background: url('../images/menu/button1_selected.jpg') no-repeat; }
	#membership { background: url('../images/menu/button2.jpg') no-repeat; }
	#membership:hover {	background: url('../images/menu/button2_selected.jpg') no-repeat;	}
	#events { background: url('../images/menu/button3.jpg') no-repeat; }
	#events:hover {	background: url('../images/menu/button3_selected.jpg') no-repeat;	}
	#rules { background: url('../images/menu/button4.jpg') no-repeat; }
	#rules:hover { background: url('../images/menu/button4_selected.jpg') no-repeat; }
	#WorldStreetDance {	background: url('../images/menu/button5.gif') no-repeat; }
	#WorldStreetDance:hover { background: url('../images/menu/button5_selected.gif') no-repeat; }
	#news { background: url('../images/menu/button8.gif') no-repeat; }
	#news:hover { background: url('../images/menu/button8_selected.gif') no-repeat; }
	#shop { background: url('../images/menu/button7.jpg') no-repeat; }
	#shop:hover { background: url('../images/menu/button7_selected.jpg') no-repeat; }
	#contact { background: url('../images/menu/button6.jpg') no-repeat; }
	#contact:hover { background: url('../images/menu/button6_selected.jpg') no-repeat; }

/*----------dropdownMenu-------------*/
.dropdown {
	display: none;
	color: #808080;
	background-color: #323232;
	border: 1px solid #000;
	position: absolute;
	z-index: 99;
	width: 190px;
	margin-top: -5px;
	list-style-image: url('../images/btn_next.gif');
	list-style-position: inside;
}
	.dropdown li {
		margin: 0px;
		text-align:left;	
		border-top: 1px solid #000;
		height: 23px;
		padding: 4px 0px 0px 5px;
	}
	#topnav div .dropdown a {
		font-size: 9pt;
		display: inline;
	}
	#topnav div .dropdown a:hover {
		color: #FFFFFF;
	}


	
#contents {
background: url('../images/main-shadow.png') repeat-y;
width: 1014px;
float: left;
}
#topcontents {
background: url('../images/content_bg_top.png') no-repeat top;
min-height: 486px;
width: 960px;
margin: 0 27px;
}
#bottomcontents {
background: url('../images/content_bg_bottom.png') no-repeat bottom;
height: 232px;
width: 1014px;
float: left;
}
#bodyContents {
	width: 790px;
	overflow: hidden;
	float: left;
	margin: 20px 10px 0 15px;
	_margin: 20px 5px 0 5px;	
	padding: 0;
}
	

.return_homepage { 
	float: right;
	height: 295px;
	width: 200px;
	position: relative;
}
	.return_homepage a { 
		position: absolute;
		bottom: 10px;
		right: 6px;
		width: 200px;
		text-align: right;
	}

#column {
	width: 780px;
	overflow: hidden;
	float: left;
	display:inline;
	margin: 0 8px 8px 8px;
}

#column1 {
	width: 468px;
	float: left;
	display:inline;
	margin: 8px 8px 8px 4px;
	overflow: hidden;
	padding-right: 10px;
	background: url('../images/content_devider.gif') center right repeat-y;
}
	* html #column1 { width: 449px; }
	
#column2 {
	width: 280px;
	overflow: hidden;
	float: left;
	margin: 8px;
	display:inline;
}

#category #column1 { width: 522px; }
#category #column2 { width: 220px; }

#column2 li {
	background: url(../images/wigits/purple.jpg) left top no-repeat;
	min-height: 20px;
	padding: 0 0 0 20px;
	margin: 10px 0 0 0;
}

.homeLeft {
	float: left;
	width: 493px;
	margin: 8px 8px 8px 4px;
	overflow: hidden;
	padding-right: 10px;
}

.homeRight {
	float: left;
	width: 255px;
	margin: 8px;
	overflow: hidden;
}

#content {	
	margin: 15px;
	min-height: 230px;
	font-size: 12px;
	text-align: justify;
	line-height: 15px;	
}
#content p {
	font-size: 12px;
	text-align: justify;
	line-height: 15px;	
}
#content a {
	color: #f6ebd7;
}
#content li {
	background: url(../images/wigits/yellow.jpg) left center no-repeat;
	min-height: 20px;
	padding: 5px 0 0 20px;
	margin: 3px 0 0 0;
	font-size:12px;
	line-height:15px;
	text-align:justify;
}



.homeCooliris {
	border: 1px solid #696969;
	height: 370px;
	width: 790px;
}

.small_text {
	clear:both;
	display: block;
	font-size: 12px;
	padding: 2px 0 0 10px;
	letter-spacing: 0px;
}

#welcome {
	height: auto;
	overflow: hidden;
}
	.homeContent {
		overflow: hidden;
		width: 500px;
		height: 105px;
	}

#weblinks li img {
	float: left;
	padding: 0 5px 0 0;
}

.upcomingEvent {
	width: 100%;
	height: 200px;
}

	.upcomingEventPic {
		float: left;
		position: relative;
		margin: 0 10px 0 0;
		height: 170px;
		width: 117px;
		overflow: hidden;
	}
		.overlay {
			position: absolute;
			top: 0px;
			left: 0px;
			background: url(../images/preview_image.png) no-repeat;
			height: 22px;
			width: 22px; 
		}
	.upcomingEvent .contentEvent {
		height: 150px;
		width: 600px;
		overflow: hidden;
	}
	.upcomingEvent h3 {
		font-size: 15px;
		font-weight: bold;	
	}
		.upcomingEvent h3 .date {
			text-align: right;
			font-weight: normal;
		}

	#pastevents li {
		line-height: 12px;	
		padding: 0px 0px 0px 15px;
	}
	.eventTitle { 
		font-size: 14px;
		padding: 0px;
		margin-top: 0px;
	}	
	.eventTitleRight {
		float: right;
		background: url(../images/headingStyles/yellow_small.png) 0px 22px no-repeat; 
		font-size: 14px;
		padding: 0px;
		margin: 0px 0px 5px 0px;
		width: 190px;
		text-align: right;
	}	

		

#share .media {
	float: left;
	margin: 0 2px 0 1px;
}
#newsitem {
	margin: 5px;
	height: 70px;
	width: 750px;
	padding: 5px;
}
#newsitem:hover {
	background-color: #505050;
	cursor: pointer;
}
#newsitem h3 {
	font-size: 13px;
	font-weight: bold;	
	letter-spacing: 1pt;
}
#newsitem p {
	margin: 0;
}
#newsitem .date {
	font-weight: normal;
	font-size: 11px;
	letter-spacing: 0;	
	text-align: right;
	line-height: 25px;
}
#newsitem .more {
	font-size: 11px;
	font-weight: bold;
	line-height: 15px;
}
.newsdate {
	font-weight: normal;
	font-size: 13px;
	letter-spacing: 0;	
	text-align: right;
	line-height: 25px;
	margin-left: 50px; 
}
#related li {
	background: url(../images/wigits/blue.jpg) left top no-repeat;
	min-height: 20px;
	padding: 0 0 0 20px;
	margin: 10px 0 0 0;
}
#related li .date {
	font-size: 12px;
}
#newscontent {
	margin: 0 15px 0 0;
	_margin-right: 5px;
	_overflow: hidden;
	float: left;
	width: 200px;
}



.eventItem {
	height: 220px;
}
.eventItem img {
	margin: 5px 15px 5px 5px;
	float: left;
	height: 210px;
	width: 140px;
	border: groove 2px #9BFC9F;
}
.eventItem h3 {
	float: left;
	width: 450px;
}
.eventItem .right {
	float: right;
	width: 124px;	
}
.floatRight .background_thumbnail img {
	border: solid 4px #BFBFBF;
	margin: 5px 0 20px 20px;
}

/* Tab Navigation Events */
ul.tabNavigation  {
	margin-bottom: 20px;
}
ul.tabNavigation li {
    display: inline;
    list-style:none;
	list-style-image:none;
	background: none;
}
ul.tabNavigation li A {
    padding: 3px 5px;
    background-color: #484C55;
    color: #000;
    text-decoration: none;
}
ul.tabNavigation li A.selected, ul.tabNavigation li A:hover {
    background-color: #333;
    color: #fff;
    padding-top: 7px;
}
ul.tabNavigation li A:focus {
    outline: 0;
}
.tabs #download div {
	height: 100px;
	width: 100px;
	float: left;
	margin: 5px;
}

#featuredevents {
	background: url(../images/featured_bg-middle.gif) repeat-y;
	width: 499px;
	height: auto;
}
	#featuredevent-top { background: url(../images/featured_bg.gif) no-repeat left top; }
	#featuredevent-bottom { background: url(../images/featured_bottom-bg.gif) no-repeat left bottom; }

	#featuredevents .featuredDate {
		text-transform: none;
		font-size:14px;
		line-height:14px;
		letter-spacing: 0px;
		padding:6px 10px 0px 8px;
		float: right;
		display: block;
		_display: none;
	}
	
	#featuredevents .event {
		overflow: hidden;
		margin: 2px;
		width: 495px;
		height: 450px;
	}
	.event .content {
		float: left;
		width: 195px;
		margin: 0 5px 0 5px;
		_margin: 0px;	
	}
		.event .content h3 {
			line-height: 19px;
			font-size:17px;
			padding:0px 0 5px 2px;	
		}
	.event .image {
		float: left;
		width: 290px;
		margin: 5px 0 0 0;	
	}
		.event .image img {
			border: 1px solid #727272;	
		}
		.event .image span {
			border-left: 1px solid #727272;	
			border-right: 1px solid #727272;	
			border-bottom: 1px solid #727272;
			padding: 0 5px 0 5px;
			width: 270px;
			clear: both;
			display: block;	
		}

.boxes {
	overflow: hidden;
	height: 240px;
	clear: both;
	margin: 15px 0 0 0;
}

	.box {
		float: left;
		padding: 5px 5px 5px 3px;
		margin: 0 10px 0 0;
		_margin-right: 2px; 
	}
		.boxblue { background: url(../images/homeBox-blue.jpg) no-repeat center; }
		.boxyellow { background: url(../images/homeBox-yellow.jpg) no-repeat center; }
		.boxpurple { background: url(../images/homeBox-purple.jpg) no-repeat center; }
		
		.box-clip {
			width: 244px;
			height: 226px;
			overflow: hidden;	
		}
		.box h3 a, .box h3 {
			font-size: 16px;
			line-height: 20px;
			letter-spacing: -0.5pt;
			height: 13px;
			overflow: hidden; 
			width: 248px;
			margin: 0 0 10px 0;
		}

		.boxImage {
			clear: both;
			position: relative;
			float: left;
			width: 115px;
			overflow: hidden;
			margin: 8px 4px 0px 2px;
			padding: 0px
		}
		
		.box * {
			font-size: 12px;
			color: #ffffff;
			line-height: 16px;
		}

/*------=5:	 [SIDEBAR COLUMN] ------------------------------*/
.banner {
	width: 130px;
	float: left;
	padding-left: 10px;
	background: url('../images/content_devider.gif') center left repeat-y;
	margin-top: 25px;
}
	#banner {
		margin: 0 12px 0 0;
	}
	* html #banner { float: none; }

	#banner img {
		margin: 0 5px 20px 5px;
		border: groove 1px #403e32;	
		padding: 0;
	}
	#banner p {
		margin: 0px;
		padding: 0px;
		width: 100%;
		height: auto;
		text-align: center;
	}
	
	.socialMedia img {
		border: none !important;	
	}
		.socialMedia a {
			float: left;
			padding: 4px 3px 5px 3px;	
		}
/*------=6:	 [FOOTER] --------------------------------------*/
#footer {
	width: 900px;
	height: 150px;
	float: left;
	margin-left: 55px;
	padding: 40px 0 0 0;
}
	* html #footer { float: none; }
	
.footerItems {
	margin: 0 0 0 25px;
	padding: 65px 20px 0 0;
	width: 130px;
	float: left;
	display:inline;
	background: url('../images/footerseparator.jpg') no-repeat bottom right;
}
.footerItemsImg {
	position: relative;
	margin: 0 0 6px 25px;
	padding: 0 14px 0 24px;
	width: 130px;
	float: left;
	display:inline;
	background: url('../images/footerseparator.jpg') no-repeat bottom right;
}
.footerItemsLast {
	margin: 0 0 0 25px;
	padding: 65px 0 0 0;
	width: 130px;
	float: left;
	display:inline;
	background: none;
}



/*------=7:	 [LISTS] ---------------------------------------*/
ol, ul {
	list-style: none;
}

#purple li {
	background: url(../images/wigits/purple.jpg) left top no-repeat;
	min-height: 20px;
	padding: 0 0 0 20px;
	margin: 10px 0 0 0;
	font-size: 12px;
	letter-spacing: 0px;
}
#blue li {
	background: url(../images/wigits/blue.jpg) left top no-repeat;
	min-height: 20px;
	padding: 0 0 0 20px;
	margin: 10px 0 0 0;
	font-size: 12px;
	letter-spacing: 0px;
}
#pink li {
	background: url(../images/wigits/pink.jpg) left top no-repeat;
	min-height: 20px;
	padding: 0 0 0 20px;
	margin: 10px 0 0 0;
	font-size: 12px;
	letter-spacing: 0px;
}
#yellow li {
	background: url(../images/wigits/yellow.jpg) left top no-repeat;
	min-height: 20px;
	padding: 0 0 0 20px;
	margin: 10px 0 0 0;
	font-size: 12px;
	letter-spacing: 0px;
}
#green li {
	background: url(../images/wigits/green.jpg) left top no-repeat;
	min-height: 20px;
	padding: 0 0 0 20px;
	margin: 10px 0 0 0;
	font-size: 12px;
	letter-spacing: 0px;
}


#links li {
	background: url(../images/wigits/blue.jpg) left center no-repeat;
	font-size: 12px;
	letter-spacing: 0px;
}

/*------=8: [FORMS] ---------------------------------------*/
form {margin-bottom: 0px;}

input.checkbox { width: 15px;}
.text { width: 220px; }
.tiny { width: 40px; }
.small { width: 80px; }
.med	{ width: 180px; }
.xlarge { width: 350px; }

#newscontent p label {
	float:left;
	margin-right: 5px;
	width: auto;
	font-weight: bold;
	text-align: right;
	font-size: 13px;
}

textarea {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
}

select {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8pt;
}

input {
	background: url('../images/input.jpg') no-repeat center;
	width: 213px;
	height:22px;
	border: none;
	padding: 5px 0 0 2px;
	margin: 0 0 5px 0;
	color: #fff;
}
	.submit {
		cursor: pointer;
		padding: 0px 0 0 2px !important;
		margin-top: 1px;
	}

.input_small {
	background: url('../images/input_small.jpg') no-repeat center;
	width: 153px;
	height: 22px;
	border: none;
	padding: 5px 0 0 0;
	color: #fff;
}

.buttonSubmit {
	background: url('../images/submit.gif') no-repeat bottom right;
	border: none;
	height: 23px;
	width: 52px;
	padding: 0px;
	margin: 0px 40px 10px 0;
	float: right;
	cursor: pointer;
}

.pictures_event {
	width:460px;
	float: left;
}
	.pictures_event img.thumb {
		
		float: left;
		padding: 0 5px 10px 5px;
	}
	.pictures_event img.large {
		
		float: left;
		padding: 0 5px 10px 5px;
	}
	
/*------=9: [IMAGES] --------------------------------------*/

img {border: 0px; display: block;}	
img.inline { display: inline; }

img.imgBox { float: left; margin: 3px; padding: 2px; border: 1px solid #404040; }


/*------=10: [MISC] ----------------------------------------*/
#video {
	margin-bottom: 10px;
}
.video {
	background: url('../images/video.jpg') no-repeat left top;
	width: 240px;
	height: 215px;
	padding: 7px;
	overflow: hidden;
}

.featuredimage {
	margin-top: 15px;
	border: 0;
}
	.featuredimage img.featured {
		margin: 0 auto;
		border: 2px groove #467AE2;
	}


.event .date {
	color: #879bc4;
	font-size: 10px;
	padding: 0px;
}
	
.red	{ color: #cc0000; }
.green	{ color: #00FF00; }
.blue	{ color: #00CC00; }
.black	{ color: #000000; }
.white	{ color: #FFFFFF; }
.grey	{ color: #666666; }
.amber	{ color: #FF6600; }

ul.webmap, .webmap ul {
	list-style: disc;
	padding: 2px;
	margin: 5px 2px 2px 25px;
	list-style-position: outside;
}
	.webmap ul { margin-left: 45px; }
	.webmap li {
		padding: 3px 2px 3px 2px;
		margin: 0px;
	}