/*
   colours
   -------
   black
   white
   #400080: soul purple
   #350036: dark soul purple
   #BB88DD: mauve
   #CC99FF: light mauve
   #808080: grey
   #FAF67F: angel gold
   #FFFFCC: pale angel gold
   #ED1C24: red
 */
html, body { height: 100% }

body {
        background-image: url("/images/bg.png");
        background-size: 100%;
        background-repeat: repeat-y;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	margin: 0px;
        background-color: white;
}

#container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(255, 255, 255, 0.8);
    width: 90%;
}

#gallery-bg {
    position: relative;
    padding: 10px 0;
    background-color: rgba(255, 255, 255, 0.8);
}

.gallery-links {
	clear: both;
        margin-left: auto;
        margin-right: auto;
	padding: 5px;
	text-align: center;
	font-size: 110%;
}

#main-video {
    clear: both;
    margin-left: auto;
    margin-right: auto;
    max-width: 1024px;
    padding: 10px;
}

#thumbnail-holder {
    clear: both;
    margin-left: auto;
    margin-right: auto;
}

#video-thumbnails {
    display: inline-block;
    clear: both;
    width: 98%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.videolink {
    display: block;
    float: left;
    margin: 10px;
    cursor: pointer;
    width: 250px;
}

.videolink .caption {
    font-size: 80%;
    text-align:center;
}

/* Headers */
h1 { 
    font-weight: bold;
    font-size: 120%; 
}
.special h1 {
    font-size: 160%;
    color: red;
}
h2 { 
    font-weight: bold;
    font-size: 110%;
}

h3 { 
    font-weight: bold;
    font-size: 100%;  
}

/* Links */
a {text-decoration: underline}
a:link {
	color: #639;
}
a:visited {color: black;}
a:hover {
	color: #0C0;
	text-decoration: underline
}

/* Forms */
fieldset {
    width: 350px;
}

label {
    font-weight: bold;
    line-height: normal;
    text-align: right;
    margin-right 10px;
    position: relative;
    display: block;
    float: left;
    width: 100px;
}
input.formInputText {
    padding 2px;
    margin-right: 5px;
    margin-bottom: 5px;
    height: 15px;
}

/* Layout */
/*
 +-----------------------------------------------------------------+
 | container (centred)                                             |
 |+---------------------------------------------------------------+|
 || header:                                                       ||
 ||                             navigation                        ||
 |+---------------------------------------------------------------+|
 ||             banner                                            ||
 |+---------------------------------------------------------------+|
 ||                                             +--------------+  ||
 ||        content                              |              |  ||
 ||                                             |   picbox     |  ||     
 ||                                             |              |  ||
 ||                                             +--------------+  ||
 ||                                                               ||
 ||+-------+                                                      ||
 |||feature|                                                      ||
 ||| box   |                                                      ||
 ||+-------+                                                      ||
 ||                                                               ||
 |+------+--------------------------------------------------------+|
 +-----------------------------------------------------------------+
*/


#header {
	position: relative;
    margin-left: auto;
   	margin-right: auto;
   	clear: both;
	padding: 15px 0;
	width: 1000px;
	height: 60px;
	color: white;
	whitespace: nowrap;
	z-index: 200;
}

#header img {
    float: left;
    clear: none;
}

#social {
	position: absolute;
	top: 10px;
	left: 1000px;
	z-index: 200;
	background-color: transparent;
}

#social img {
	margin: 2px;
	}

#audio-banner, #photo-banner, #contact-banner {
        margin-left: auto;
        margin-right: auto;
	padding: 15px 30px;
	max-width: 900px;
	clear: both;
	height: 120px;
	color: white;
	z-index: 44;
        background-repeat: no-repeat;
}
#audio-banner {
        background-image: url("/images/audiobanner.jpg");
}
#photo-banner {
        background-image: url("/images/photobanner.jpg");
}
#contact-banner {
        background-image: url("/images/contactbanner.jpg");
}
        

#footer {
	clear: both;
    margin-left: auto;
    margin-right: auto;
	padding: 15px 5px;
	max-width: 960px;
    height 1px;
	background-color: #FFF;
	text-align: center;
}

#content {
	max-width: 960px;
	min-height: 600px;
	padding: 15px 5px;
	margin-left: auto;
        margin-right: auto;
}

.forcebreak {
    clear: both;
}

/* Header Elements */

.bannerad {
    position: absolute;
    top: 10px;
    left: 680px;
    z-index: 55;
}

/* Submenu Elements */
#submenu ul { margin: 5px; }
#submenu li { padding:0 10px 0 10px; display: inline; }


/* Content Elements */
#content .copy {
    margin: 1px;
    max-width: 958px;
}

#content table {
    text-align: left; 
    border: 0;
    border-spacing: 2px;
}

#content tr.oddRow {
    background: #EEEEEE;
}

#content tr.evenRow {
    background: white;
}

#content td {
    vertical-align: top;
    padding: 4px;
}

#content caption {
    font-weight: bold;
    text-align: left;
}

#content .listtable td {
    vertical-align: top; 
}

#content .pictable td {
    text-align: center;
    background: white;
}

#content .copy h2 {margin-left: -15px;}
#content .copy h3 {margin-left: -10px;}

#content .copy ul li {margin-left: 10px;}

#content .error {
    color: red;
}

.disclaimer {
    display: block;
    max-width: 500px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: italic;
}

.quote {
    display: block;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: italic;
    text-align: center;
}

.picbox {
	float: right;
	max-width: 400px;
	width: auto;
	padding: 4px;
	margin: 5px 20px 20px 5px;
	background-color: #FFF;
	border: 3px solid black;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: italic;
	text-align: center;
	color: #440e62;
}

.picbox img {
    display: block;
    text-align: center;
}

.picboxleft {
    float: left;
    max-width: 400px;
    padding: 4px;
    margin: 5px 20px 20px 5px;
    background-color: #FFFFCC;
    border: 1px solid #350036;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-style: italic;
    text-align: center;
}

.picboxleft img {
    display: block;
    text-align: center;
}


#featurebox {
	position: absolute;
	top: 550px;
	left: 10px;
	width: 140px;
	z-index: 55;
	padding: 8px;
	margin: 4px;
	background-color: white;
	border-width: 3px;
	border-style: solid;
	border-color: #BB88DD grey grey #BB88DD;
	-moz-border-radius: 6%;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
}

#featurebox img {
    margin: 4px;
    display: block;
    width: 132px;
}

/*
 * ****************************************************************************
 *   pop up images 
 * ****************************************************************************
 */
.popupimage img {
    position: fixed;
    top: 200px;
    left: 350px;
    display: none;
}

.picbox:hover .popupimage img { display:block; }

.picboxleft:hover .popupimage img { display:block; }

#fullscreen {
    position: absolute;
    width: 99%;
    display: none;
    z-index: 300;
    margin: 10px auto;
    border: 5px solid #FFF;
    border-radius: 7px;
    box-shadow: 0 0 1px 1px #E3E3E3;
    background-color: rgba(0, 0, 0, 0.5);
}

#fullscreen img {
	width: 100%;
}

#fullscreen .closeButton {
 	position: absolute;
 	top: 0; 
 	right: 0;
 	height: 74px;
 	width: 74px;
 	opacity:.7; 
 	filter: alpha(opacity=70);
	background: url(/images/close.png) no-repeat;
	z-index: 300;
}

/*
 * ****************************************************************************
 *   page navigation 
 * ****************************************************************************
 */

 /*
  *  Main Menu
  */
#navigation {
	margin: 0;
	padding: 0;
    display: inline;
    float: right;
    position: relative;
    z-index: 200;
}
#navigation li { 
	list-style: none;
	float:left;
	font:12px Arial, Helvetica, sans-serif #111;
        color: #350036;
	}
	
#navigation li a:link, #navigation li a:visited {
	display:block;
	text-decoration:none;
	background-color: #transparent;
	padding: 1em 1em;
	margin:0;
	border-left: 2px solid #ED1C24;
        color: #350036;
}

#navigation li a:hover {
	background-color:#CCCCCC;
        color: #350036;
}

/*
 * Submenu
 * the sub menu unordered lists have their visibility set to hidden. This also means that the list will degrade gracefully, 
 * if the user doesn't have javascript available on their browser the sub menus will not display (must provide alternative navigation).
 */
#navigation li ul { 
	position: absolute;
	border-top:1px solid #FFF;
	margin:0;
	padding:0;
	color: #FFFFFF; /*350036;*/
}

#navigation .no-js ul { 
	display: none;
}

#navigation li:hover ul { 
	position: absolute;
	border-top:1px solid #FFF;
	margin:0;
	padding:0;
	color: #FFFFFF; /*350036;*/
}

#navigation .no-js:hover ul { 
	display: block;
}

 /*
  *  Sub-menu items
  */
#navigation li ul li {
	display:inline;
	float:none;
        color: #FFFFFF; /*350036;*/
}

#navigation li ul li a:link, #navigation li ul li a:visited {
	background-color:#A0A0A0;
        color: #FFFFFF; /* 350036; */
	width:auto;
}

#navigation li ul li a:hover {
	background-color:#CCCCCC;
        color: #400080;	
}