@charset "UTF-8";
/* CSS Document */

body {
	background-color:black;
	font-size:100%; 	/* Do not specify font in px or em here. Trigger resizing problem in IE */
	line-height: 1em; 	/* Deal with stretching of lines in IE */
	font-family: Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
}
.wrapper {
	position:relative;
	margin:0 auto;
	width: 800px;
	overflow:hidden;
}
.header {
	width: 800px;
	height: 160px;
	margin-top: 10px;
	z-index: 1;
}
.container {
	margin-top: 50px;
	background: url(images/faux_columns_background/bg.jpg) repeat-y;
	overflow:hidden;
}
.left_column {
	/* When using float with divs that holds content without specific width,
	   you need to specifiy the width. Else how can it float if it just expands and expands (ie text).
	   You also need to specify BOTH the float left and float right, else it will come below each other.
	   Total Width=800. Width specifies the width of the "Content box". So padding etc comes on the outside.
	   If Left Column will not contain any text (that pushes it's width), then it can be width: auto;. 
	   If it will contain text then we should fix it's width to 230 (as the menu pics are 200 wide), 
	   and set a padding-left to 30, so in case we add text it doesn't go all the way to the edge.
	   For the Right Column, we fix it's width at 550 and add a padding-left of 30.
	   This leaves a slack in between the two columns of 20: 230 + x + 550 =800. x = 20.
	   TOTAL WIDTH: 230 (includes a padding-right of 30) + 20 + 550 (includes a padding-left of 30) = 800 */
	z-index: 1;
	float: left;
	width: 200; /* Content can be 200 wide. Problem: BG picture. */
	text-align: left;
	margin-top: 18px;
	/* padding-right: 0px; Padding for distance to border */
	/* border: 1px solid yellow; */

}
.right_column {
	z-index: 1;
	float: right;
	width: 540px;
	padding-right: 30px;
	/* Due to IE6 issues, a margin (or padding) on the same side as a the float is to, will be doubled in size (here 60). 
	See: http://www.positioniseverything.net/explorer/doubled-margin.html. This is a problem at my contact float, and can be fixed
	with a simple "display: inline" in the Style.*/
	/* border: 1px solid red; */
}
.navi_container {
	z-index: 1;
	margin-top: 8px;
	/*border: 1px solid red;*/
}
.navi_home, .navi_aboutus, .navi_dancestyle, .navi_gallery, .navi_price, .navi_course, .navi_instructor, .navi_contactus, .navi_portal {
	display: block;
	width: 200px;
	height: 27px;
}
.navi_home {
	background-image:url(images/navigation/home.png);
	background-repeat:no-repeat;
}
.navi_home:hover {
	background-position: -240px 0; 
}
.navi_aboutus {
	background-image:url(images/navigation/aboutus.png);
	background-repeat:no-repeat;
}
.navi_aboutus:hover {
	background-position: -240px 0; 
}
.navi_dancestyle {
	background-image:url(images/navigation/dance_styles.png);
	background-repeat:no-repeat;
}
.navi_dancestyle:hover {
	background-position: -240px 0; 
}
.navi_gallery {
	background-image:url(images/navigation/gallery.png);
	background-repeat:no-repeat;
}
.navi_gallery:hover {
	background-position: -240px 0; 
}
.navi_price {
	background-image:url(images/navigation/prices.png);
	background-repeat:no-repeat;
}
.navi_price:hover {
	background-position: -240px 0; 
}
.navi_course {
	background-image:url(images/navigation/schedule.png);
	background-repeat:no-repeat;
}
.navi_course:hover {
	background-position: -240px 0; 
}
.navi_instructor {
	background-image:url(images/navigation/instructor.png);
	background-repeat:no-repeat;
}
.navi_instructor:hover {
	background-position: -240px 0; 
}
.navi_contactus {
	background-image:url(images/navigation/contact_us.png);
	background-repeat:no-repeat;
}
.navi_contactus:hover {
	background-position: -240px 0; 
}
.navi_portal {
	background-image:url(images/navigation/portal.png);
	background-repeat:no-repeat;
}
.navi_portal:hover {
	background-position: -240px 0;
}
.sidebutton {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:0.813em;
	color: #666666;
	text-decoration: none;
}
.sidebutton:hover {
	color: #ff9900;
}
.group_button, .private_button, .wedding_button, .intro_button {
	z-index: 3;
	display:block;
	width: 225px;
	height: 24px;
}
.group_button {
	margin-left: 180px;
	margin-top: 20px;
	background-image:url(images/category_images/text/group.png);
	background-repeat:no-repeat;
}
.group_button:hover {
	background-position: -237px 0;
}
.private_button {
	margin-left: 105px;
	margin-top: 20px;
	background-image:url(images/category_images/text/private.png);
	background-repeat:no-repeat;
}
.private_button:hover {
	background-position: -237px 0;
}
.wedding_button {
	margin-left: 180px;
	margin-top: 20px;
	background-image:url(images/category_images/text/wedding.png);
	background-repeat:no-repeat;
}
.wedding_button:hover {
	background-position: -237px 0;
}
.intro_button {
	margin-left: 280px;
	margin-top: 20px;
	background-image:url(images/category_images/text/intro.png);
	background-repeat:no-repeat;
}
.intro_button:hover {
	background-position: -237px 0;
}
.youth_button {
	z-index: 3;
	display:block;
	width: 310px;
	height: 24px;
	
	margin-left: 105px;
	margin-top: 20px;
	background-image:url(images/category_images/text/youth.png);
	background-repeat:no-repeat;
}
.youth_button:hover {
	background-position: -317px 0;
}
.sociables img{
	padding:1px;
	/* For web browsers who care */
	opacity: 0.4;
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
	/* For IE 8 (and 9, 10, 11?). Don't miss the added quotes */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
	-moz-opacity:0.4;
}
.sociables:hover img{
	/* For web browsers who care */
	opacity: 1;
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	/* For IE 8 (and 9, 10, 11?). Don't miss the added quotes */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	-moz-opacity:1;
}
h1, h2, h3, p, ul, ol, td, .headline, .contact_us_text, #footer_left, #footer_right, .contact_us_text {
	margin:1em 0; /* To deal with the resizing of line-height in IE7 */
	padding: 0;   /* To deal with the resizing of line-height in IE7 */
	color: #808080;
	font-size: 0.813em; /*0.813=13px. 14px=0.875*/
}
ul, ol { /* as margin did not work with ul for some reason */
	margin-left: 40px;
}
a {
	color:#CCCCCC;
}
.highlighted {
	color:#FF9900;
}
h1 {
	color: #EAAC21;
	font-size:1.125em; /*18px*/
}
h2 {
	margin:0px;
	color: #EAAC21;
	font-size:0.938em; /*0.938em=15px, 1.0em=16px */
}
h3 {
	margin:0px;
	color: #EAAC21;
	font-size:0.75em;
}
th {
	color: #EAAC21;
	font-size:0.813em;
}
.headline {
	color: #EAAC21;
	text-align:center;
	font-size:30px;
}
.contact_us_text {
	font-size:0.875em;
}
.calendar {
	margin-left: auto;
	margin-right: auto;
}
.borderit img{
border: 2px solid black;
}
.borderit:hover img{
border: 2px solid #EAAC21;
}
.borderit:hover{
color: red; /* irrelevant definition to overcome IE bug */
}
.no_border {
	border:0px; /*For image links that have border as default */
}
.center_table { 
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
.center_image {
    margin-left:auto;
    margin-right:auto;
    padding:0px;
}
#footer {
	margin-top: 10px;
	clear:both;
	width:100%;
	border-top: 1px solid gray;
}
#footer_left {
	float: left;
}
#footer_right {
	float: right;
}