/* Setup the default attributes for the entire document */
/* html, body, ul, li, h1, h2, h3, h4, p*/
html, body, h1, h2, h3, h4, p {
	margin:  0px;
	padding: 0px;
	color:   #DBDBDB;
}

hr {
    width: 100%;
    margin-top: 1em;
}

h1 img {
	display: block;
}

img {
	border: 0px;
}

p {
	margin: 0.5em 0px;
}

a {
	color: white;
	text-decoration: none;
}

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

.more {
	text-align: right;
}

.clear {
	clear: both;
}

body {
	background: black;
    margin:     0;
    padding:    0;
    overflow:   visible;
	font:       11px arial, sans-serif;
    width:      auto;
/*  height:     440px;*/
}

p.quotation {
    font-style:   italic;
    margin-left:  30px;
    margin-right: 30px;
}

/* *******************************************************************
 * The following two divs (outmost_body, page_content) contain all elements
 * on the page and between them cause horizontal centralisation.
 */

/* This div holds the entire page */
#outermost_body {
    height:      auto;
    width:       auto;
    margin:      0px 0px 0px 0px;
    padding:     0px 0px 0px 0px;
    /* Fix for older versions (5x) of IE */
    text-align:  center;
    /* don't set overflow auto on this or otherwise there is no
     * browser horizontal scroll bar when the site is too wide
     * for the display/window.
     */
}

#central_body {
    /*
     * This div holds all the page content and is positioned to be
     * central using auto margins
     */
    width:       860px;
    min-width:   860px;
    height:      auto;
    /* top right bottom left */
    margin:      0px auto 0px auto;
    text-align:  left; /* Restore text align needed for IE */
    padding:     0px;
	visibility:  visible;
}


/* *******************************************************************
 * headerRow - Top row contining all Header elements
 * Fixed height
 */
#headerRow {
	position:       relative;
	height:         98px;
    vertical-align: top;
    clear:          both;
    margin:         0px;
	list-style:     none;
}

#headerRow ul {
  	margin:     0px;
	padding:    0px;
	list-style: none;
}

#headerRow li {
  	margin:     0px;
	padding:    0px;
	list-style: none;
}

.centralisedCon
{
    /*
     * This div STYLE is centralised vertically within its container and
     * is essentially invisible. Can be used to vertically centralise
     * a container within it.
     */
	background-color: transparent;
	text-align:       center;
	position:         relative;
	top:              50%;
	left:             0px;
	width:            100%;
	height:           1px;
	overflow:         visible;
	visibility:       visible;
	display:          block;
}

#headerLeftLogoPadding
{
    /*
     * Contains header logo and provides padding so it it central
     * w.r.t the image it sits over.
     */
    float:        left;
    position:     relative;
    height:       auto;
    /* This must be set to the same width as the left-person image */
    width:        282px;
}

/*
 * headerLeftLogo - Left-hand logo in the header
 */
#headerLeftLogo
{
    position:       relative;
	background:     0px 0px url(../images/header_left.jpg) no-repeat;
    /*
     * This MUST be set to the same width/height as the background image!
     */
    width:          178px;
    height:         98px;
	margin-left:    auto; /* forces auto centralisation */
	margin-right:   auto; /* forces auto centralisation */
	padding:        0 0 0 0;
}

#headerLeftLogoText
{
    position:         relative;
    margin:           0;
    padding:          0;
    background-color: transparent;
    /*
     * this must be just tall enough to hold the text.
     * If the alignment goes wrong set a background color and
     * set the height/top correctly.
     */
    top:    -30px; /* Half of total height */
    height:  60px;
}

#headerLeftLogoText h1 {
	color:          #fff;
	line-height:    1;
}

#headerLeftLogoText h1 em {
/*	display:     block;
	font-weight: normal;
	font-size:   1.75em; 38.5px
	font-family: "Times new roman", serif;
*/

	display:     block;
	font-weight: normal;
	font-size:   1.75em; /*38.5px*/
	font-family:  verdana, arial, sans-serif;
}

#headerLeftLogoText h1 strong {
	display:      block;
    font-style:   italic;
	font-weight:  normal;
	font-size:    1.25em; /*0.9375em 20.6333px*/
	font-family:  verdana, arial, sans-serif;
}


/*  ** Right-hand part of header  ** */

#topright-container {
	position:    relative;
    float:       left; /* Float next to header logo */
    width:       auto;
    height:      98px; /* Fixed height */
    overflow:    auto;
    width:       570px; /* Needed to prevent wrapping */
}

#topright-container-toprow
{
    /* stuff above the main navbar */
   /*     float:          left; */
	position:       relative;
    padding:        0 0 0 45px;
    margin:         0 0 0 0;
    min-height:     80px;
    overflow:       auto;
}

#caption-float-left {
    display:        block;
    clear:          none;
    float:          left;
    position:       relative;
    text-align:     left;
    height:         40px; /* (height of title bar  - height of nav bar 98-31 */
    width:          300px;
    padding:        16px 0 0 0;
    margin:         0 0 0 0;
/*    margin-right:   140px;*/
    overflow:       visible;
}

#caption-float-left h2 em {
	font-weight:  bold;
	font-style:   italic;
	font-size:    16.5px;
	font-family:  arial, sans-serif;
/*    line-spacing: 1;*/
}

/*
 * Min-navigation/links bar
 */
#mininav-links {
    display:        block;
    float:          right;
   /*     float:          right;*/
	position:       relative;
/*	width:          150px;*/
    top:            0px;
/*    margin-left:    145px;*/
    padding-top:    25px;
    margin-right:   40px;
    clear:          right;
	font-size:      11px;
	font-weight:    normal;    
}

#mininav-links li {
	display: inline;
}


/* *******************************************************************
 * Main Navigation bar style
 */

#mainNav {
	position:    absolute;
    bottom:      0;
	background:  top left url(../images/nav_left.gif) no-repeat;
	width:       570px;
	text-align:  center;
}

#mainNav div {
    /* top right bottom left */
	background: top right url(../images/nav_right.gif) no-repeat;
    /* top right bottom left */
	padding:    0 10px 0px 10px;
    /* padding: 0 10px;*/
}

#mainNav ul {
	margin:      0px;
	padding:     0px;
	background:  top left url(../images/nav_bg.gif) repeat-x;
    /* top right bottom left */
	padding:     7px 0 6px 0px;
    /* padding: 7px 0 10px 0px;*/
    font-family: arial, sans-serif;
    font-size:   11px; /* this varies list item space (non breaking spaces) */
}

#mainNav li {
	margin:  0px;
	padding: 0px;
	display: inline;
}

#mainNav a {
    font-family: arial, sans-serif;
	font-weight: normal;
    font-size:   16px;
}

#mainNav b {
    font-family: arial, sans-serif;
	font-weight: bold;
    font-size:   16px;
}

/*
 * The page summary is a row just below the header.
 * It spans the (fixed) page width.
 */
#pageSummaryStyler
{
    font-family: arial, sans-serif;
	font-weight: normal;
	font-size:   15px;
}

#pageSummaryStyler h2 {
    font-family: arial, sans-serif;
	font-weight: normal;
	font-size:   15px;
}

#pageSummaryStyler h2 em {
	font-size:   25px;
	font-family: serif;
}

#pageSummary
{
    clear:       both;
    position:    relative;
    float:       left;
    height:      65px;
    min-width:   550px; /* Keep in step with body width */
    width:       auto;
    overflow:    auto;
    /* This must be set to the same width as the left-person image */
    margin-left: 282px;
    margin-top:  5px;
    /* top right bottom left */
    /* Keep left padding in sync with left-person right margin */
    padding:     0 0 0 28px;
}

#pageSummaryNoLeftMargin
{
    clear:       both;
    position:    relative;
    float:       left;
    height:      65px;
    min-width:   100%; /* Keep in step with body width */
    width:       auto;
    overflow:    auto;
    /* This must be set to the same width as the left-person image */
    margin-top:  5px;
    /* top right bottom left */
    /* Keep left padding in sync with left-person right margin */
    padding:     0 0 0 28px;
}

#pageSummaryContent
{
    position:         absolute;
    top:              50%;
	text-align:       left;
    width:            auto;
    height:           26px; /* Text height */
    margin-top:       -13px;
}

#pageSummaryContent2Line
{
    position:         absolute;
    top:              50%;
	text-align:       left;
    width:            95%;
    height:           52px; /* Text height */
    margin-top:       -26px;
}

/* *******************************************************************
 * Container for page photo and main content
 * Also acts as a way to apply uniform style
 */

#pageMainContentWholeWidth
{
    overflow: visible;
}

#pageMainContentWholeWidth h2 {
	font-size:   13px;
	font-weight: normal;
}

#pageMainContentWholeWidth h3 {
	font-size:   18px;
	font-weight: normal;
}

#pageMainContentWholeWidth h2 em {
	font-size:   22px;
	font-family: serif;
}

#pageMainContentWholeWidth h3 em {
	font-size:   20px;
	font-weight: normal;
}

#pageMainContentWholeWidth p {
	font-size:   15px;
	font-weight: normal;    
}

#pageMainContentWholeWidth li {
	font-size:   15px;
	font-weight: normal;    
}

#pageMainContentWholeWidth ul {
	font-size:   15px;
	font-weight: normal;    
}

#pageMainContentWholeWidth a {
	color: #DBDBDB;
	text-decoration: none;
}

#pageMainContentWholeWidth a:hover {
	color: #eee;
	text-decoration: underline;
}

#copyright {
	font-family:  arial, sans-serif;
    font-size:    11px;
	font-weight:  normal;    
}


/* *******************************************************************
 * Left-hand photo
 */
#left-person {
	position:   relative;
	float:      left;
    top:        -14px;
	width:      282px;
	height:     auto;
/*	width:      282px;
	height:     377px;*/

    /* top right bottom left */
    margin:     0px 28px 0 0px;
/*     margin:     -12px 28px 0 0px; */
    padding:    0 0 0 0;
    overflow:   hidden;
}

#left-person img {
    /* top right bottom left */
    margin:     0 0 0 7px;    
    padding:    0 0 0 0;    
    width:      262px;
    height:     387px;
}



/* *******************************************************************
 * Main page content (changed by navigation menu)
 */
#right-main-body {
    /* contains all elements to the right of the left-person */
	position: relative;
    float:    left;
    width:    550px;
    overflow: hidden;
    margin:   0px 0px 0px 0px;
    padding:  0px 0px 0px 0px;
}

.black-box {
    /* fill width of container */
	width:    100%;
    clear:    both;
}

#black-box-scroll-text {
    /* Contains the content to be scrolled */
    position: relative;
    height:   280px;
    overflow: auto;
    bottom:   0px;
}

#full-main-body {
    /* contains all elements to the right of the left-person */
	position: relative;
    float:    left;
    width:    100%;
    overflow: hidden;
    /* Keep margin in stync with left-person */
    margin:   0px 28px 0px 0px;
    padding:  0px 0px 0px 0px;
}

.full-black-box {
    /* fill width of container */
	width:    100%;
    clear:    both;
}

#full-black-box-scroll-text {
    /* Contains the content to be scrolled */
    position: relative;
    height:   350px;
    overflow: auto;
    bottom:   0px;
}

/* ****************************************************************
 * Audio-player with related image + text stuff
 */
.audioAlignBox {
    /* holds text with a div */
    padding-top: 10px;
    clear:       right;
}

.audioCaptionFloat-theme {
    float:    right;
    position: relative;
    clear:    right;
    width:    150px;
    border:   solid 1px white;
    /* top right bottom left */
    padding:  10px 10px 10px 10px;
    margin:   0px  43px 0px  43px; /*(20+50) */
}

.audioCaptionFloat-dreams {
    float:    right;
    position: relative;
    clear:    right;
    width:    200px;
    border:   solid 1px white;
    /* top right bottom left */
    padding:  10px 10px 10px 10px;
    margin:   0px  20px 0px  20px;
}

.audioCaptionImage-fixed-width {
    width:  100%;
    height: auto;
}

.audioCaptionImage-fixed-height {
    width:  auto;
    height: 100%;
}

/* ****************************************************************
 * Normal page Footer (empty on most pages, but usually defined)
 */
#footer {
    float:       left;
	margin-left: 0px;
	margin-top:  12px;
	width:       99%;
    overflow:    hidden;
    clear:       left;
    text-align:  center;
}

#footer {
	font-size:   10px;
	font-weight: normal;
	font-family: arial,sans-serif;
}




/* ****************************************************************
 * ****************************************************************
 * Photo gallery page stuff
 */
#galleryWhole
{
    position: relative;
    width:    auto;
    height:   430px;
    overflow: hidden;
    /* top right bottom left */
    margin:   0px 0px 0px 0px;
    padding:  10px 0px 0px 0px;
}

#galleryMainImage
{
    position:    relative;
    float:       left;
    top:         0px;
    width:       590px;
    height:       99%;
/*    height:      428px;*/
    clear:       right;
    left:       50px;
    overflow:    hidden;
    border: 1px solid #000;
}

.galleria{
    /* contains the thumbnail scroller */
    /*width:       196px;*/
    width:       125px;
    float:       left;
	border:      1px solid #bbbbbb;
    /* top right bottom left */
    margin:      0px 0px 0px 0px;
    padding:     0px 0px 0px 0px;
    overflow:    auto;
}

.galleria li{
    display:       block;
    width:         55px;
    height:        70px;
    overflow:      hidden;
    float:         left;
    margin:        0px 2px 2px 0px;
    border:        1px solid black;
    background:    transparent url(../i/ajax-loader-small.gif) 50% 50% no-repeat;
    border-color:  #345;
    cursor:        pointer;
}

.caption {
    display:          block;
    position:         absolute;
    bottom:           0px;
    left:             0;
    width:            96%;
    height:           25px;
    /* top right bottom left */
    padding:          0 2%;
    line-height:      25px;
    color:            #fff;
    background-color: #000;
    opacity:          .8;
}

.horiz-child
{
    /*
     * Force image to scale to smallest dimension of viewer whilst
     * maintaining aspect ratio.
     * Used where viewer height > width
     */
    width:   100%;
    height:  auto;
}

.vert-child
{
    /*
     * Force image to scale to smallest dimension of viewer whilst
     * maintaining aspect ratio.
     * Used where viewer height <  width
     */
    height: 430px;
    width:  auto;
}