/* BASIC PAGE SETUP ============================================================================= */

body { 
margin : 0 auto;
padding : 0;
font : 100%/1.4 'Open Sans', 'lucida sans unicode', 'lucida grande', 'Trebuchet MS', verdana, arial, helvetica, helve, sans-serif; 	
color : #424242; 
text-align: left;
background-color: #FFCC33;
line-height: 1.5;
}

               div#container {
                     margin: 0 auto;
                     width: 90%;
					 max-width: 1200px;
                       }
				#container {
					font-size:1.0em;
					}

div.cinereousTable {
  border: 6px solid #948473;
  background-color: #FFE3C6;
  width: 50%;
  text-align: center;
}
.divTable.cinereousTable .divTableCell, .divTable.cinereousTable .divTableHead {
  border: 1px solid #948473;
  padding: 4px 4px;
}
.divTable.cinereousTable .divTableBody .divTableCell {
  font-size: 13px;
}
.divTable.cinereousTable .divTableHeading {
  background: #948473;
  background: -moz-linear-gradient(top, #afa396 0%, #9e9081 66%, #948473 100%);
  background: -webkit-linear-gradient(top, #afa396 0%, #9e9081 66%, #948473 100%);
  background: linear-gradient(to bottom, #afa396 0%, #9e9081 66%, #948473 100%);
}
.divTable.cinereousTable .divTableHeading .divTableHead {
  font-size: 17px;
  font-weight: bold;
  color: #F0F0F0;
  text-align: left;
  border-left: 2px solid #948473;
}
.divTable.cinereousTable .divTableHeading .divTableHead:first-child {
  border-left: none;
}

.cinereousTable .tableFootStyle {
  font-size: 16px;
  font-weight: bold;
  color: #F0F0F0;
  background: #948473;
  background: -moz-linear-gradient(top, #afa396 0%, #9e9081 66%, #948473 100%);
  background: -webkit-linear-gradient(top, #afa396 0%, #9e9081 66%, #948473 100%);
  background: linear-gradient(to bottom, #afa396 0%, #9e9081 66%, #948473 100%);
}
.cinereousTable .tableFootStyle {
  font-size: 16px;
}
/* DivTable.com */
.divTable{ display: table; }
.divTableRow { display: table-row; }
.divTableHeading { display: table-header-group;}
.divTableCell, .divTableHead { display: table-cell;}
.divTableHeading { display: table-header-group;}
.divTableFoot { display: table-footer-group;}
.divTableBody { display: table-row-group;}

/* RESPONSIVE GRID SYSTEM =============================================================================  */

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after {
	content:"";
	display:table;
}
.group:after {
	clear:both;
}

/*  GRID OF EIGHT   ============================================================================= */
	
.span_8_of_8 {
	width: 100%;
}

.span_7_of_8 {
	width: 87.3%; 
}

.span_6_of_8 {
	width: 74.6%; 
}

.span_5_of_8 {
	width: 61.9%; 
}

.span_4_of_8 {
	width: 49.2%; 
}

.span_3_of_8 {
	width: 36.5%;
}

.span_2_of_8 {
	width: 23.8%; 
}

.span_1_of_8 {
	width: 11.1%; 
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 880px) {
        .col {  margin: 1% 0 1% 0%; }
	.span_8_of_8 {
		width: 100%; 
	}
	.span_7_of_8 {
		width: 100%; 
	}
	.span_6_of_8 {
		width: 100%; 
	}
	.span_5_of_8 {
		width: 100%; 
	}
	.span_4_of_8 {
		width: 100%; 
	}
	.span_3_of_8 {
		width: 100%; 
	}
	.span_2_of_8 {
		width: 100%; 
	}
	.span_1_of_8 {
		width: 100%; 
	}
}

#header{
float: left;
text-align:center;width: 100%;
	margin: 1px 0px 2px 0px;
	padding: 1px;
        
}
#header h3 { margin: 5px 0px 5px 0px; }
#header h1 { margin: 0px; }

#centered {
  width: 92% ;
  margin-left: auto ;
  margin-right: auto ;
}

.normal            { font-size: 1.05em; 
                     font-family: Calibri, Helvetica, sans-serif ; font-style: normal; font-weight: 100; color: #424242; 
                     text-align: center; margin: 4px; }
.title             { font-weight: bold; 
                     color: #800000;
                     text-align: center; margin: 4px; }
.header            { font-size: 1.3em; font-weight: normal; text-align: center;
                     font-family: 'lucida bright',Candara, Calibri, Helvetica, sans-serif; color: #800000;
                     text-align: center; margin: 3px; }
.condensed         { font-family: 'Open Sans Condensed', Calibri; font-weight: normal ;
                     font-style: normal ; color: #424242; padding: 2px; border: 0; 
                     text-align: center; margin: 0px; word-spacing: 2px}
.condensed2         { font-family: 'Open Sans Condensed', Calibri; font-weight: bold ;
                     font-style: normal ; color: #424242; padding: 2px; border: 0; 
                     text-align: center; margin: 0px; word-spacing: 2px}
.bold              { font-weight: bold ; color: #424242; padding: 0; border: 0; 
                     text-align: center; margin: 0px; word-spacing: 0}
.italic            {  
                     font-style: italic ; color: #424242; padding: 0; border: 0; 
                     text-align: center; margin: 2px; word-spacing: 0}
.italicnowrap      { white-space: nowrap;
                     font-style: italic ; color: #424242; padding: 0; border: 0; 
                     text-align: center; margin: 1px; word-spacing: 0;}
.nowrap      { white-space: nowrap;
                     padding: 0; border: 0; 
                     text-align: center; margin: 1px; word-spacing: 0;}
.caption           { max-width: 250px; 
                     font-style: italic ; color: #424242; padding: 0; border: 0; 
                     float:right; text-align: center; margin: 1px; word-spacing: 0;}

a:link             { color: #CC0000;
                     font-weight: bold; text-decoration: none; }
a:visited          { color: #800000;
                     font-weight: bold; text-decoration: none; }
a:hover            { color: #800000; background-color: #FF9900;
                     font-weight: bold; text-decoration: none; }
a.alter,a.alter:link,a.alter:visited
                   { background-color: #FFFFCC; } 
a.alter,a.alter:hover,a.alter:active
                   { background-color: #FF9900; } 
a.no-bg,a.no-bg:link,a.no-bg:active,a.no-bg:hover,a.no-bg:active 
                   { background:none; } 
P.small            { font-size: 0.7px; 
                     font-family: Helvetica, sans-serif ;font-style: normal; font-weight: lighter ; color: #424242; 
                     text-align: left; margin: 3px; }
P:first-line       { font-weight: bold; }
h1                 { font-size: 1.7em; margin: 0.5em 0em 0.2em 0em;
                     font-family: 'Open Sans', Calibri, Helvetica, "Century Gothic", sans-serif ; font-weight: bold ; color: #CC0000; }
h2                 { font-size: 1.7em; margin: 0.5em 0em 0.2em 0em;
                     font-family: 'Open Sans', Calibri, Helvetica, "Century Gothic", sans-serif ; font-weight: bold ; color: #CC0000; }
h3                 { font-size: 1.3em; margin: 0.7em 0em 0.4em 0em;
                     font-family: 'Open Sans Condensed', Candara, Calibri, Helvetica, sans-serif ; font-style: normal; font-weight: bold; color: #800000; }
h4                 { font-size: 1.15em; 
                     font-family: Calibri, Helvetica, sans-serif ; font-weight: normal ; color: #424242; }
td                 { border: 0 solid #800000; background-color: #FFCC33; font-weight: normal; font-size: 1em;}
.normal            { font-size: 1.1em; border: 0 solid #800000; background-color: #FFCC33; font-weight: normal; text-align: left; vertical-align: top; padding: 0.05em; }
.small             { border: 0 solid #800000; background-color: #FFCC33; font-weight: normal; font-size: 12px; color: #424242; text-align: left; vertical-align: top; padding: 5px; }
.smallalter        { border: 0 solid #800000; background-color: #FFFFCC; font-weight: normal; font-size: 12px; color: #424242; text-align: left; vertical-align: top; padding: 5px; }
.centered          { border: 0 solid #800000; background-color: #FFCC33; font-weight: normal; text-align: center; vertical-align: top; padding: 5px; }
.normalright       { border: 0 solid #800000; background-color: #FFCC33; font-weight: normal; text-align: right; vertical-align: top; padding: 2px; }
.bordered          { border: 1px solid #800000; background-color: #FFCC33; font-weight: bold; text-align: center; vertical-align: top; }
.borderedleft      { border: 1px solid #800000; background-color: #FFCC66; font-weight: bold; text-align: left; vertical-align: top; }
.borderedleft2     { border: 1px solid #800000; background-color: #FFFFCC; font-weight: bold; text-align: left; vertical-align: top; }
.bordered2         { border: 1px solid #333; background-color: darkred; font-weight: bold; color: darkorange; text-align: center;}
.kopje             { border: 1px solid #800000; background-color: #800000; font-weight: bold; color: #FFCC33; text-align: center;}
.kopje2            { border: 1px solid #800000; border-top-width: 0px; border-left-width: 0px ; border-right-width: 0px ; background-color: #FFCC33; font-family: Candara, Calibri, Helvetica; font-weight: normal; color: #800000; text-align: left; padding: 3px;}
.kopje3            { border: 1px solid #800000; border-top-width: 0px; border-left-width: 1px ; border-right-width: 0px ; overflow:hidden; height: 15px; background-color: #FFCC33; font-family: Candara, Calibri, Helvetica; font-weight: normal; color: #800000; text-align: left; padding: 3px;}
.disco             { border: 1px solid #800000; border-right: 1px solid #FFCC33; border-left: 1px solid #800000; border-top: 1px solid #FFCC33; background-color: #ddd; font-weight: bold; color: #800000; text-align: center;}
.disco2            { border: 1px solid #BDBDBD; border-right: 0px ; border-left: 0px ; border-top: 0px ; vertical-align: top;}
.alu               { border: 1px solid #800000; background-image: url(../icons/alu.png); ; font-weight: bold; text-align: center;}
.top               { border: 0 solid #800000; background-color: #FFCC33; font-weight: normal; color: #424242; text-align: center; vertical-align: middle; padding: 5px; }

img                { -ms-interpolation-mode: bicubic;
                     border-width: 0px;
                     float:left;
                     max-width: 100%;
                     height: auto !important;
}
img[alt]           {
                     visibility: visible;
                    }
img.floatleft   { float: left; margin: 0 10px 0 0; }
img.floatright  { float: right; margin: 0 0 0 10px; }
img.bordered    { border-width: 1px;
                     border-style: solid; 
                     border-color: #800000;
                     float:right;
                }
.centered          { border-width: 1px;
                     border-style: solid; 
                     border-color: #800000;
                     margin: 0 auto;
                                  }
hr                 { color:#424242; background-color:#424242; height:1px; border:none; }
ul                 { list-style-type: disc; 
                     list-style-position: inside;
                     margin-left: 0px; padding-left: 0px; }
dl.event
{
	margin: 1em 0;
	padding: 0;
	}
.event dt
{
	position: relative;
	left: 0;
	top: 1.1em;
	width: 14em;
	font-weight: bold;
}
.event dd
{
	border-left: 1px solid #000;
	margin: 0 0 0 12em;
	padding: 0 0 .5em .5em;
}
div.img
  {
  margin:1px;
  border:1px solid #800000;
  height:auto;
  width:auto;
  float:left;
  text-align:center;
  display:block; 
  }

div.kopje4       { border: 1px solid #800000; border-top-width: 0px; border-left-width: 1px ; border-right-width: 0px ; overflow:hidden; height: 15px; background-color: #FFCC33; font-family: Candara, Calibri, Helvetica; font-weight: normal; color: #800000; text-align: left; padding: 3px;}
div.kopje5       { border: 1px solid #800000; border-top-width: 0px; border-left-width: 0px ; border-right-width: 0px ; overflow:hidden; height: 15px; background-color: #FFCC33; font-family: Candara, Calibri, Helvetica; font-weight: normal; color: #800000; text-align: left; padding: 3px;}
div.festival     { border: 1px solid #800000; background-color: #FFFFCC; color: #666666; font-weight: bold; text-align: left; vertical-align: top; }

div.cinereousTable {
  border: 4px solid #948473;
  background-color: #FFE3C6;
  width: 50%;
  text-align: center;
}
.divTable.cinereousTable .divTableCell, .divTable.cinereousTable .divTableHead {
  border: 1px solid #948473;
  padding: 4px 4px;
}
.divTable.cinereousTable .divTableBody .divTableCell {
  font-size: 13px;
}
.divTable.cinereousTable .divTableHeading {
  background: #948473;
  background: -moz-linear-gradient(top, #afa396 0%, #9e9081 66%, #948473 100%);
  background: -webkit-linear-gradient(top, #afa396 0%, #9e9081 66%, #948473 100%);
  background: linear-gradient(to bottom, #afa396 0%, #9e9081 66%, #948473 100%);
}
.divTable.cinereousTable .divTableHeading .divTableHead {
  font-size: 17px;
  font-weight: bold;
  color: #F0F0F0;
  text-align: left;
  border-left: 2px solid #948473;
}
.divTable.cinereousTable .divTableHeading .divTableHead:first-child {
  border-left: none;
}

.cinereousTable .tableFootStyle {
  font-size: 16px;
  font-weight: bold;
  color: #F0F0F0;
  background: #948473;
  background: -moz-linear-gradient(top, #afa396 0%, #9e9081 66%, #948473 100%);
  background: -webkit-linear-gradient(top, #afa396 0%, #9e9081 66%, #948473 100%);
  background: linear-gradient(to bottom, #afa396 0%, #9e9081 66%, #948473 100%);
}
.cinereousTable .tableFootStyle {
  font-size: 16px;
}
/* DivTable.com */
.divTable{ display: table; }
.divTableRow { display: table-row; }
.divTableHeading { display: table-header-group;}
.divTableCell, .divTableHead { display: table-cell;}
.divTableHeading { display: table-header-group;}
.divTableFoot { display: table-footer-group;}
.divTableBody { display: table-row-group;}

#footer
{
	clear: left;
	text-align: center;
	padding: 1px;
	height: 1%;
    font-size: 1em;
}


/* Main menu settings */
#centeredmenu {
   clear:both;
   float:left;
   margin:0;
   padding:0;
   border-bottom:1px solid #800000; /* line below menu */
   width:100%;
   font-family: Calibri, Geneva, sans-serif; /* Menu font */
   font-size:100%; /* Menu text size */
   z-index:1000; /* This makes the dropdown menus appear above the page content below */
   position:relative;
}

/* Top menu items */
#centeredmenu ul {
   margin:0;
   padding:0;
   list-style:none;
   float:right;
   position:relative;
   right:50%;
}
#centeredmenu ul li {
   margin:0 0 0 1px;
   padding:0;
   float:left;
   position:relative;
   left:50%;
   top:1px;
}
#centeredmenu ul li a {
   display:block;
   margin:0;
   padding:.6em .5em .4em;
   font-size:1.3em;
   line-height:1em;
   background:#ddd;
   text-decoration:none;
   color:#444;
   font-weight:bold;
   border-bottom:1px solid #000;
}
#centeredmenu ul li.active a {
   color:#fff;
   background:darkred;
}
#centeredmenu ul li a:hover {
   background:darkorange; /* Top menu items background colour */
   color:#fff;
   border-bottom:1px solid #03f;
}
#centeredmenu ul li:hover a,
#centeredmenu ul li.hover a { /* This line is required for IE 6 and below */
   background:darkorange; /* Top menu items background colour */
   color:#fff;
   border-bottom:1px solid #03f;
}

/* Submenu items */
#centeredmenu ul ul {
   display:none; /* Sub menus are hiden by default */
   position:absolute;
   top:2em;
   left:0;
   right:auto; /*resets the right:50% on the parent ul */
   width:10em; /* width of the drop-down menus */
}
#centeredmenu ul ul li {
   left:auto;  /*resets the left:50% on the parent li */
   margin:0; /* Reset the 1px margin from the top menu */
   clear:left;
   width:100%;
}
#centeredmenu ul ul li a,
#centeredmenu ul li.active li a,
#centeredmenu ul li:hover ul li a,
#centeredmenu ul li.hover ul li a { /* This line is required for IE 6 and below */
   font-size:1.2em;
   font-weight:normal; /* resets the bold set for the top level menu items */
   background:#eee;
   color:#444;
   line-height:1.4em; /* overwrite line-height value from top menu */
   border-bottom:1px solid #ddd; /* sub menu item horizontal lines */
}
#centeredmenu ul ul li a:hover,
#centeredmenu ul li.active ul li a:hover,
#centeredmenu ul li:hover ul li a:hover,
#centeredmenu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
   background:darkorange; /* Sub menu items background colour */
   color:#fff;
}

/* Flip the last submenu so it stays within the page */
#centeredmenu ul ul.last {
   left:auto; /* reset left:0; value */
   right:0; /* Set right value instead */
}

/* Make the sub menus appear on hover */
#centeredmenu ul li:hover ul,
#centeredmenu ul li.hover ul { /* This line is required for IE 6 and below */
   display:block; /* Show the sub menus */
}