/* general rules */
body
{
        margin: auto;
        padding: 0px;
        border: none;
        text-align: center;
}
div#container
{
        margin: auto;
        padding: 0px;
        height: 100%;
        text-align: left;
        width: 740px;
}
div#container h1
{
		text-shadow: none;
		color: #ccc;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 30pt;
        font-weight: normal;
}
div#container h1 a:link {
        	color: #cccccc;
        }
        div#container h1 a:active {
        	color: #cccccc;
        }
        div#container h1 a:visited {
        	color: #cccccc;
        }
        div#container h1 a:hover {
        	color: #c9203e;
        }
#title
{
	position: absolute;
    width: 300px;
    height: 50px;
    top: 10px;
    left: 20px;
}
body>div#container
{
        height: auto;
        min-height: 100%;
}
/* title of page */
div#header
{
        width: 740px;
        height: 70px;
        background-image: url(header.jpg);
        background-repeat: none;
        position: relative;
}
/* content with menu and titles */
div#content
{
        clear: none;
        width: 740px;
        height: 680px;
        text-align: left;
        position: relative;
        background-image: url(content.jpg);
        background-repeat: no-repeat;
}
        div#content h1
        {
                text-shadow: 1px 1px 5px #ffd6e4;
                line-height: 25px;
                font-size: 18pt;
                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
                color:#bf6a7b;
        }
        div.data
        {
                width: 540px;
                height: 660px;
                margin-left: 30px;
                position: relative;
        }
div#side
{
        position: absolute;
        top: 0px;
        right: -145px;
        width: 145px;
        height: 800px;
        background-image: url(side.jpg);
}
div#footer
{
        width: 740px;
        height: 50px;
        background-image: url(footer.jpg);
}
div#slideshow
{
		width: 280px;
		height: 350px;
		position: absolute;
		top: 0px;
		left: 10px;
		z-index: 1;
}
div#info
{
		text-align: left;
		border-left-color: #bf6a7b;
		border-left-width: 1px;
		border-left-style: dashed;
		padding: 5px;
		padding-left: 10px;
		word-spacing: -1px;
		font-size: 12px;
		font-family: "Lucida Grande", Verdana, Arial, sans-serif;
		width: 210px;
		height: 310px;
		position: absolute;
		top: 5px;
		right: 0px;
		color:#bf6a7b;
		line-height: 2;
}
#gallery
{
		text-align: left;
		width: 540px;
		height: 290px;
		position: absolute;
		bottom: -25px !important;
		bottom: -55px;
		left: 0px;
		padding: 20px;
}
#links
{
		height: 20px;
		width: 450px;
		position: absolute;
		left: 70px;
		bottom: 290px;
		font-family: Century Gothic, Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
		font-size: 10px;
		text-align: center;
		font-weight: normal;
		z-index: 1;
}
#links a:link
{
	font-size: 12px;
}
#links a:active
{	
	font-size: 12px;	
}
#links a:visited
{
	font-size: 12px;
}
#links a:hover
{
	font-size: 12px;
	font-weight: #bf6a7b;	
}
#links2
{
		height: 40px;
		width:615px;
		position: absolute;
		left: 5px;
		bottom: 280px;
		font-family: Century Gothic, Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
		font-size: 10px;
		text-align: center;
		font-weight: normal;
		z-index: 1;
}
#links2 a:link
{
	font-size: 12px;
}
#links2 a:active
{	
	font-size: 12px;	
}
#links2 a:visited
{
	font-size: 12px;
}
#links2 a:hover
{
	font-size: 12px;
	font-weight: #bf6a7b;	
}
#gallery img{
		background-position: center center;
		padding: 5px 15px 5px 15px;
		margin: 2px 4px 2px 4px;
		background-image: url(thumbs.png);
		background-color: none;
		background-repeat: no-repeat;
}
span.active
{
	color: #c9203e;
    font-family: Century Gothic, Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	font-weight: bold;
}
/* content popup */
div.popup
{
        width: 300px;
        height: 250px;
        padding: 10px 5px;
        border: 1px solid gray;
        margin: 0px;
        background-color: #F5F5F5;
        text-align: left;
}
    div.popup_buttons
    {
        width: 280px;
        height: 15px;
        padding: 5px;
    }
/* content forum (without menu), with tiles */
div#content_forum
{
        background-color: #FFF;
        border: none;
        margin-top: 10px;
        width: 790px;
        text-align: center;
        border: 1px solid #efb5c2;
        padding: 10px;
}
div#common_forum_text
{
        width: 765px;
        background-color: #ededed;
        border: 1px solid #c9203e;
        padding: 10px;
}
img#common_forum_img
{
        float: left;
}
table#common_forum_bar
{
        margin: 2px 0px;
        border-collapse: separate;
        border-spacing: 1px;
}
td.common_forum_button
{
        padding: 2px 5px;
        background-color: #efb5c2;
        border: 1px solid #c9203e;
        font-weight: bolder;
}
div.data_forum
{
        width: 100%;
        padding: 20px 0px;
        margin: 0px 0px 20px 0px;
        background-color: #FFF;
        border: none;
        font-size: 10pt;
        text-align: left;
        height: 250px;
        height: auto !important;
        min-height: 250px;
}
form#go_to_forum
{
        width: 300px;
}
select.go_to_forum
{
        width: 300px;
}
/* footer and disclaimer (gpl license)*/
h6
{
        padding: 2px 3px 2px 2px;
        margin: 0px;
        font-size: 8pt;
        font-family: Verdana, sans-serif;
        line-height: 1.2;
        text-align: center;
        font-weight: bolder;
        }
/* other graphic rules */
br.clear
{
        clear: both;
}
img
{
        border: none;
        padding: 0px;
        margin: 0px;
}
form {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #505050;
        text-decoration: none;
        font-weight: normal;
        padding: 5px;
        text-align: left;
        vertical-align: middle;
}
optgroup
{
        font-style: italic;
}
input[type="text"]
{
        width: 98%;
}
textarea
{
        width: 98%;
        height: 200px;
}
table
{
        table-layout: fixed;
        border-collapse: collapse;
        empty-cells: show;
        width: 100%;
        padding: 0px;
        margin: 0px;
        color: #505050;
}
tr
{
        padding: 0px;
        margin: 0px;
        border: none;
}
th
{
        border: 1px solid #B9B9B9;
        background-color: #F5F5F5;
        padding: 2px;
        margin: 0px;
        font-size: 9pt;
        font-family: Verdana, sans-serif;
        line-height: 1.2;
        text-align: center;
        font-weight: bolder;
}
td
{
        border: 1px solid #B9B9B9;
        font-size: 9pt;
        padding: 2px;
        margin: 0px;
        font-family: Verdana, sans-serif;
        line-height: 1.2;
        text-align: center;
        font-weight: normal;
}
table.section
{
        float: right;
        table-layout: fixed;
        border-collapse: collapse;
        empty-cells: show;
        width: 230px;
        padding: 0px;
        margin-left: 10px;
        margin-bottom: 10px;
        border: none;
}
table.section td
{
        border: none;
        padding: 0px;
        margin: 0px;
        font-family: Verdana, sans-serif;
        text-align: center;
        font-weight: normal;
}
table.section th
{
        border: none;
        padding: 0px;
        margin: 0px;
        font-size: 9pt;
        font-family: Verdana, sans-serif;
        text-align: center;
        font-weight: bolder;
}
table.section img
{
        padding: 5px;
        margin: 5px;
        border: 1px solid #ccc;
}
table.section img:hover
{
        padding: 5px;
        margin: 5px;
        border: 1px dashed #ccc;
}
/* h2 and h3 used for menu (title and option) */
/* h3 also used for left link */
h2
{
        width: 135px;
        height: 15px;
        font-family: Verdana, sans-serif;
    font-size: 15px;
        text-align: left;
        padding: 2px;
        margin-top: 5px;
        margin-bottom: 3px;
        font-family: "Trebuchet MS", "Century Gothic", Arial, Helvetica, sans-serif;
        color: #c9203e;
        border-bottom: 1px dashed #c9203e;
}
h3
{
        padding: 1px 3px;
        margin: 4px;
        font-size: 9pt;
        font-family: Verdana, sans-serif;
        line-height: 1.2;
        text-align: left;
        font-weight: normal;
        color: #505050;
}
/* h4 used for center link */
h4
{
        width: 99%;
        padding: 2px;
        margin: 0px;
        font-size: 9pt;
        font-weight: bolder;
        font-family: Verdana, sans-serif;
        line-height: 1.2;
        text-align: left;
        color: #505050;
}
/* h5 opposite h3 (right link) */
h5
{
        padding: 2px 3px 2px 2px;
        margin: 0px;
        font-size: 9pt;
        font-family: Verdana, sans-serif;
        line-height: 1.2;
        text-align: right;
        font-weight: bolder;
        color: #505050;
}
div
{
        margin: 0px;
        padding: 0px;
        border: none;
        text-align: left;
}
p
{
        padding: 4px 0px;
        margin: 0px;
        font-size: 9pt;
        font-family: Verdana, sans-serif;
        line-height: 1.2;
        text-align: justify;
        font-weight: normal;
        color: #505050;
}
hr
{
        width: 99%;
        height: 1px;
        color: #FFFFFF;
}
/* code, strong and em are text styles which substitute b and i*/
code
{
        font-size: 9pt;
        font-family: Courier, monospace;
        line-height: 1.2;
        text-align: left;
        font-weight: normal;
}
samp
{
        font-family: Courier, monospace;
}
kbd
{
        font-family: Courier, monospace;
}
var
{
    font-style: italic;
}
strong
{
        font-weight: bolder;
}
em
{
        font-style: italic;
}
/* link style */
a:link
{
        color: #505050;
        text-decoration: none;
}
a:visited
{
        color: #505050;
        text-decoration: none;
}
a:active
{
        color: #505050;
        text-decoration: none;
}
a:hover
{
        color: #c9203e;
        text-decoration: none;
}
div.paragraph
{
        padding: 4px 0px;
        margin: 0px;
        font-size: 9pt;
        font-family: Verdana, sans-serif;
        line-height: 1.2;
        text-align: left;
        font-weight: normal;
}
p.small
{
        padding: 2px;
        font-size: 8pt;
}
p.footer
{
        padding-left: 30px;
        width: 50%;
        margin: 0px;
        font-size: 8pt;
}

td.evidence
{
        background-color: #F5F5F5;
        text-align: left;
        font-weight: bolder;
}
td.not_evidence
{
        background-color: #F5F5F5;
        text-align: left;
        font-weight: bolder;
}
/* label and input used for forms */
td.label
{
        vertical-align: top;
        width: 20%;
        text-align: left;
}
td.input
{
        vertical-align: top;
        width: 80%;
        text-align: left;
}
/* block of quote or code */
blockquote
{
        border: 1px solid #B9B9B9;
        margin: 4px;
        padding: 2px;
        background-color: #DDDDDD;
        text-align: left;
}
q
{
    font-style: italic;
}
div.quote /* backwards compatibility */
{
        border: 1px solid #B9B9B9;
        margin: 4px;
        padding: 2px;
        background-color: #DDDDDD;
        text-align: left;
}
div.code
{
        border: 1px solid #B9B9B9;
        margin: 4px;
        padding: 2px;
        background-color: #DDDDDD;
        text-align: left;
}
/* hidden text (for screen readers) */
.hidden
{
        display: none;
}
/* smile and evidence */
span.smile
{
        padding: 2px;
}
span.evidence
{
        color: #0000CC;
        font-weight: bolder;
}
/* small link (used for partner) */
a.partner
{
        color: #808080;
        text-decoration: none;
        font-size: 10pt;
        font-family: Verdana, sans-serif;
        line-height: 1.2;
        text-align: center;
        font-weight: normal;
}
/* link for button and button which open new windows */
a.button_blank
{
        color: #006699;
        text-decoration: none;
}
a.button
{
        color: #006699;
        text-decoration: none;
}
/* element without margin, padding and border (collapsed images) */
.null
{
        background-color: inherit;
        padding: 0px;
        border: none;
        margin: 0px;
}
/* positive and negative span (for example 'online' and 'offline') */
.positive
{
        color: #00CC00;
        text-align: left;
}
.negative
{
        color: #CC0000;
        text-align: left;
}
/* color of error messages */
.error
{
        color: #CC0000;
}
/* ajax */
div.ajax_window
{
    width: 200px;
    height: 200px;
    position: absolute;
    top: 20px;
    height: 20px;
    border: 1px solid gray;
}
/*slider*/
		* { margin: 0; padding: 0; }
		
		p { text-align: left; margin: 15px 0 }
		
		p, ul { font-size: 13px; line-height: 1.4em } 
		
		p a, li a { color: #39c; text-decoration: none }
		
		p.img, p.valid { text-align: center }
		
		p.valid { color: #fff; padding-top: 30px }
		
		p.light { color: #999; margin: 15px; padding: 15px; border: 3px #ccc dashed }
		
		a:focus { outline:none }
		
		img { border: 0 }
		
		h3 { border-bottom: 1px solid silver; margin-bottom: 5px; padding-bottom: 3px; text-align: left }
		
		.stripViewer .panelContainer .panel ul {
			text-align: left;
			margin: 0 15px 0 30px;
		}
		
		/* THE IMPORTANT STUFF STARTS HERE */
		
		.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
			width: 100%;
			position: relative;
			margin: 20px 0;
		}

		/* These 2 lines specify style applied while slider is loading */
		.svw {width: 50px; height: 20px; background: #fff; overflow: hidden;}
		.svw ul {position: relative;}

		.stripViewer { /* This is the viewing window */
			position: relative;
			overflow: hidden; 
			border: 0px solid #39c; /* this is the border. should have the same value for the links */
			margin: auto;
			width: 460px; /* Also specified in  .stripViewer .panelContainer .panel  below */
			height: 290px;
			clear: both;
			background: none;
			text-align: center;
		}
		
		.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
			position: relative;
			left: 0; top: 0;
			width: 100%;
			list-style-type: none;
			-moz-user-select: none; /* Stops the panels from highlighting/selecting, which I found problematic in Firefox. Also stops the CSS from validating though. Oh well. */
		}
		
		.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
			float:left;
			width: 500px; /* Also specified in  .stripViewer  above */
			height: 100%;
			text-align: center;
		}
		
		.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
			padding: 10px;
		}
		
		.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
			display: none;
			margin: auto;
		}
		
		.stripNav ul { /* The auto-generated set of links */
			list-style: none;
		}
		
		.stripNav ul li {
			float: left;
			margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in slideviewer.js */
		}
		
		.stripNav a { /* The nav links */
			font-size: 10px;
			font-weight: bold;
			text-align: center;
			line-height: 32px;
			background: #c6e3ff;
			color: #000;
			text-decoration: none;
			display: block;
			padding: 0 15px;
		}
		
		.stripNav a:hover {
			background: #9cf;
		}
		
		.stripNav a.current {
			background: #39c;
			color: #fff;
		}
		
		.stripNavL, .stripNavR { /* The left and right arrows */
			position: absolute;
			top: 230px;
		}
		
		.stripNavL a, .stripNavR a {
			display: block;
			height: 32px;
			width: 32px;
		}
		
		.stripNavL {
			top: 130px;
			left: 0;
			width: 32px;
			height: 32px;
			background: url("left.gif") no-repeat center;
			background-position: 0px 0px;
		}
		.stripNavL:hover {
			top: 130px;
			left: 0;
			width: 32px;
			height: 32px;
			background: url("left.gif") no-repeat center;
			background-position: 0px -32px;
		}
		.stripNavR {
			top: 130px;
			right: 0;
			width: 32px;
			height: 32px;
			background: url("right.gif") no-repeat center;
			background-position: 0px 0px;
		}
		.stripNavR:hover {
			top: 130px;
			right: 0;
			width: 32px;
			height: 32px;
			background: url("right.gif") no-repeat center;
			background-position: 0px -32px;
		}