/* 
	Le Cirq CSS Document 
	OLDER SCHOOL SKILLS
	Written by Alexander Strobbe (September 2008)
*/

*
{
	outline: none;
}

body
{
	background: #000;
	margin: 0px;
	color: #444444;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	text-transform: uppercase;
	text-align: left;
	background: url(../gfx/bg.png);
}

#videoplayback {
	position: absolute;
	width: 390px;
	height: 250px;
 	right: 25px;
	top: 75px; 
}

#bg
{
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: #181818;
	width: 100%;
	height: 100%;
	z-index: -1000;
	overflow: hidden;
	outline: none;
}

img
{
	border: 0px;
}

h1
{
	position: absolute;
	top: -25px;
	right: 140px;
	width: 80px;
	height: 80px;
	background-image: url(../gfx/b_logo_bg.png);
	background-repeat: no-repeat;
	background-position: top left;
	z-index: 9999;
	text-indent: -9999px;
	outline: none;
	margin: 0px;
}

h2
{
	display: none;
	visibility: hidden;
}

h3
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	background-image: url(../gfx/h1.png);
	background-repeat: no-repeat;
	background-position: bottom left;
	padding-left: 20px;
	letter-spacing: 2px;
	margin: 20px 0px 20px -20px;
}

h4
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #35B7F3;
	margin: 0px;
}

#b_shade
{
	margin: 40px auto 0px auto;
	width: 908px;
	height: 506px;
	padding: 0px;
	background-image: url(../gfx/b_shade_bg.png);
	background-repeat: no-repeat;
	background-position: bottom right;
}

#b_container
{
	position: relative;
	margin: 40px auto 0px auto;
	width: 900px;
	height: 500px;
	padding: 0px;
	background: #040404;
	text-align: left;
	background: url(../gfx/b_container_bg.png);
}

.c_nav_selected
{
	text-transform: uppercase;
	text-decoration: none;
	color: #35B7F3;
	border-bottom: 2px #ffffff solid;
}

#page {
	position: relative;
	z-index: 2;
}

#b_shade #b_container ul#b_nav
{
	text-align: left;
	margin: 0px auto 0px auto;
	height: 15px;
	background-image: url(../gfx/b_nav_bg.png);
	background-repeat: repeat-x;
	background-position: top left;
	padding: 6px 5px 4px 40px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	text-transform: uppercase;
	color: #FFFFFF;
	word-spacing: 8px;
	position: relative;
}

#b_shade #b_container ul#b_nav a:link, a:visited
{
	text-transform: uppercase;
	text-decoration: none;
	color: #FFFFFF;
}

#b_shade #b_container ul#b_nav a:hover
{
	text-transform: uppercase;
	text-decoration: none;
	color: #35B7F3;
}

#b_shade #b_container ul#b_nav li
{
	list-style-type: none;
	display: inline;
}

#b_nav_r
{
	position: absolute;
	top: 0px;
	right: 25px;
	word-spacing: normal;
	font-size: 9px;
	padding-top: 7px;
	display: inline;
}

#b_content
{
	margin: -20px auto 0px auto;
	width: auto;
	height: 470px;
	padding: 0px;
	display: none;
}

#b_box
{
	margin: 40px;
	color: #FFFFFF;
	width: 820px;
	text-align: justify;
	line-height: 1.5em;
}

#b_box a:link, #b_box a:visited
{
	text-transform: uppercase;
	text-decoration: none;
	color: #35B7F3;
}

#b_box a:hover
{
	text-transform: uppercase;
	text-decoration: underline;
	color: #FFFFFF;
}

#b_slider
{
	margin-top: -25px;
	background-color: #000000;
}

#b_footer
{
	width: 900px;
	margin: 0px auto 0px auto;
	text-align: center;
	color: #FFFFFF;
	padding: 10px;
	text-transform: uppercase;
}

#b_footer a
{
	text-decoration: none;
	color: #FF0000;
	text-transform: lowercase;
}

#b_footer a:hover
{
	text-decoration: underline;
	color: #FFFFFF;
}


span.c_highlight
{
	background-color: #333333; 
	opacity:0.7;filter:alpha(opacity=70);
	padding: 4px;
	background-image: url(../gfx/b_nav_bg.png);
	background-repeat: repeat-x;
	background-position: top left;
	margin: 15px 5px 15px 0px;
	color: #35B7F3;
	font-size: 8px;
}

.c_highlight a:link, .c_highlight a:visited
{
	text-transform: uppercase;
	text-decoration: none;
	color: #35B7F3;
}

.c_highlight a:hover
{
	text-transform: uppercase;
	text-decoration: underline;
	color: #FFFFFF;
	
}

#b_box .c_eventbox
{
	width: 400px;
	height: 30px;
	margin: 0px;
	padding: 0px;
	margin: 10px 10px 10px 0px;
}


#b_box .c_eventbox .c_eventitem
{
	width: 400px;
	height: 17px;
	background-image: url(../gfx/b_nav_bg.png);
	background-repeat: repeat-x;
	background-position: top left;
	border-left: 3px solid #FFFFFF;
	opacity:0.7;filter:alpha(opacity=70);
	padding: 8px 5px 5px 10px;
	margin: 0px;
	position: relative;
}

#b_box .c_eventbox .c_eventitem:hover
{
	border-left: 3px solid #35B7F3;
	cursor: pointer;
}


#b_box .c_eventbox .c_eventitem a:link, #b_box .c_eventbox .c_eventitem a:visited
{
	text-transform: uppercase;
	text-decoration: none;
	color: #FFFFFF;
}

#b_box .c_eventbox .c_eventitem a:hover
{
	text-transform: uppercase;
	text-decoration: none;
	color: #35B7F3;
}

#b_box .c_eventbox .c_eventitem .c_eventdate
{
	width: 120px;
	float: left;
	font-size:8px;
}

#b_box .c_eventbox .c_eventitem .c_eventname
{
	width: auto;
	font-size: 10px;
}

#b_box .c_eventbox .c_eventview
{
	width: 30px;
	height: 26px;
	background-repeat: no-repeat;
	background-position: top center;
	border: 2px #ffffff solid;
	margin: 0px;
	padding: 0px;
	position: absolute;
	top: 0px;
	right: 0px;
}

#b_box .c_eventbox .c_eventview:hover
{
	border: 2px #35B7F3 solid;
}

.c_marquee
{
	color: #FFFFFF;
	font-size: 16px;
	text-align: left;
}

.forminput
{
	background-color: #111111;
	border: #444444 1px solid;
	font-size: 10px;
	color: #35B7F3;
	padding: 2px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

.formbutton
{
	background-color: #000000;
	border: #444444 1px solid;
	font-size: 10px;
	color: #35B7F3;
	padding: 2px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

.formbutton:hover
{
	color: #000;
	background: #35B7F3;
	cursor: pointer;
}

#b_calendar
{
	height: 350px;
	width: 800px;
	margin: 0px;
	padding: 0px;
	position: relative;
	opacity:0.7;filter:alpha(opacity=70);
	border: #000000 2px solid;
}


#b_calendarlist
{
	width: 160px;
	height: 350px;
	padding: 0px;
	margin: 0px;
	background-image: url(../gfx/b_calendarlist_bg.png);
	background-repeat: repeat-y;
	background-position: top left;
	overflow: hidden;
	position: relative;
	z-index: 10;
}

#b_calendarcontent
{
	width: 610px;
	height: 300px;
	background: url(../gfx/stripebg.gif) #181818;
	border: 5px #000000 solid;
	position: absolute;
	left: 160px;
	top: 0px;
	padding: 20px;
}

#b_calendarlist .b_calendaritem
{
	width: 142px;
	border-right: 3px #FFFFFF solid;
	height: 30px;
	background-image: url(../gfx/b_calendaritem_bg.png);
	background-repeat: repeat-x;
	background-position: top left;
	margin-top: 5px;
	padding: 5px 5px 5px 10px;
	float: left;
}


#b_calendarlist .b_calendaritem:hover
{
	border-right: 3px #000000 solid;
	cursor: pointer;
}

#b_calendarlist .b_calendaritemactive
{
	width: 142px;
	border-right: 3px #35B7F3 solid;
	height: 30px;
	background-image: url(../gfx/b_calendaritem_bg.png);
	background-repeat: repeat-x;
	background-position: top left;
	padding: 5px 5px 5px 10px;
	float: left;
}

#eventview {
	display: block;
}

#b_eventcontainer
{
	width: 425px !important;
	height: 170px !important;
	overflow: hidden !important;
	margin-bottom: 20px;
	position: relative;
}

#b_calcontainer
{
	overflow: hidden;
}




#b_iteminfo
{
	width: 480px;
	height: 270px;
	overflow: auto;
	padding: 0px 10px 10px 0px;
	margin-top: 5px;
}

#b_itemflyer
{
	width: 100px;
	height: 100px;
	position: absolute;
	top: 15px;
	right: 15px;
	border: 4px #FFFFFF solid;
	background-position: top left;
	background-repeat: no-repeat;
	cursor: pointer;
}

#b_itemflyer:hover
{
	border: 4px #000000 solid;
	cursor: pointer;
}

#b_calendarnav
{
	width: 150px;
	height: 25px;
	padding: 5px;
	background-image: url(../gfx/b_calendaritem_bg.png);
	background-repeat: repeat-x;
	background-position: top left;
	text-align: center;
	position: relative;
	z-index: 100;
}

#b_calendarinfo
{
	font-size: 11px;
	text-transform: none;
}

#b_gboutput
{
	width: 400px;
	height: 300px;
	position: absolute;
	top: 130px;
	right: 40px;
	background: url(../gfx/stripebg.gif) #181818;
	padding: 20px;
	padding-top: 10px;
}


#b_gbinput
{
	width: 350px;
	position: absolute;
	top: 130px;
}


#b_video {
	height: 350px;
}

/* CUSTOM SCROLLBAR */

.scrollgeneric {
line-height: 1px;
font-size: 1px;
position: absolute;
top: 0; left: 0;
}

.vscrollerbase {
width: 10px;
background-color: #000000;
}
.vscrollerbar {
width: 10px;
background-color: #35B7F3;
border: #333333 1px solid;
}
.hscrollerbase {
height: 10px;
background-color: #000000;
}
.hscrollerbar {
height: 10px;
background-color: #35B7F3;
border: #333333 1px solid;
}

.scrollerjogbox {
width: 10px;
height: 10px;
top: auto; left: auto;
bottom: 0px; right: 0px;
background-color: gray;
}

#gallery {
	position: absolute;
	outline: none;
	z-index: 1;
}

/* SPLASH */

body#landing {
	background-image: url(../gfx/bg.png);
	margin: 0px;
	padding: 0px;
}

body#landing div#b_landing {
	width: auto;
	height: 600px;
	background: url(../gfx/b_landing_bg.png) no-repeat;
	position: relative;
	overflow: hidden;
}

body#landing div#b_landing h1 {
	width: 231px;
	height: 231px;
	position: absolute;
	top: 50px;
	left: 50px;
	text-indent: -9999px;
	outline: none;
	background-image: url(../gfx/logo.png);
	margin: 40px;
}

body#landing div#b_landing p {
	position: absolute;
	top: 350px;
	left: 100px;
	color: #EEE;
	text-decoration: none;
	text-transform: none;
	font-size: 10px;
}

body#landing div#b_landing p.enter {
	position: absolute;
	top: 370px;
	left: 100px;
	color: #EEE;
	text-transform: none;
	font-size: 18px;
}

body#landing div#b_landing p.enter a {
	color: #33A6F1;
	border-bottom: 1px solid #EEE;
	text-transform: none;
	text-decoration: none;
}

body#landing div#b_landing p.enter a:hover {
	color: #EEE;
	border-bottom: 1px solid #33A6F1;
}