/* Start of CMSMS style sheet 'ayli layout top menu + 2col' */
/*****************
browsers interpret margin and padding a little differently, 
we'll remove all default padding and margins and
set them later on
******************/

*
{
	margin: 0;
	padding: 0;
}

/*
Set initial font styles
*/

body
{
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 80%;
	background-color: #C8CDD0;
	margin: 0;
}

/*
set font size for all divs,
this overrides some body rules
*/

div { font-size: 1em; }

/*
if img is inside "a" it would have 
borders, we don't want that
*/

img { border: 0; }

/*
default link styles
*/

/* set all links to have underline and bluish color */
a,
a:link 
a:active
{
	text-decoration: none;
	background-color: inherit;
	color: #007DCC;
}

a:visited
{
	background-color: inherit;
	color: #18507C;
	text-decoration: none;
}

a:hover { text-decoration: underline; }

/*****************
basic layout 
*****************/

div#pagewrapper
{
	/* this centers wrapper */
	width: 780px;
	margin: 0 auto;
	/* this centers wrapper */
	max-width: 80em;
	/* IE wont understand these, so we will use javascript magick */
	min-width: 60em;
	background-color: #fff;
	color: black;
	height: 1%;
	border-top: 1px #75828A solid;
	border-right: 3px #ACB4B9 solid;
	border-bottom: 3px #ACB4B9 solid;
	border-left: 1px #75828A solid;
}

/*** header ***
we will hide text and replace it with a image
we need to assign a height for it
*/

div#header
{
	height: 110px;
	/* adjust according your image size 
background: #f1f3f3;*/
background: #fff;
	
}

div#header h4 a
{
	/* you can set your own image here */
	background: #fff url(images/logo.gif) no-repeat 10px 0;
	display: block;
	width: 180px;
	height: 110px;
	/* adjust according your image size */
	text-indent: -999em;
	/* this hides the text */
	text-decoration: none;
	/* old firefox would have shown underline for the link, this explicitly hides it */
}

.slogan
{
	color: #75828A;
	font-size: 1.5em;
	font-weight: 600;
	text-align: right;
	margin: 0 10px 5px 0;
	padding: 0;
	vertical-align: bottom;
	letter-spacing: 0.05em;
	position: relative;
	right: 0;
	top: 85px;
}

div#innerwrap
{
	background-color: white;
	width: 100%;
	min-height: 20em;
}

div#menubar
{
	height: 25px;
	background-color: #ACB4B9;
	color: white;
	vertical-align: middle;
	border-bottom: 1px solid white;
}

img.icon
{
	margin: 3px 0 2px 7px;
	float: left;
	vertical-align: middle;
}

.icon a:hover { background-color: #ACB4B9; }

div#mediabanner
{
	width: 100%;
	margin: 0;
	text-align: center;
	/*IE method of centering a relative div*/
	clear: both;
}

#filmclip
{
	width: 320px;
	height: 256px;
	border-right: 1px solid white;
	visibility: visible;
}

#clientFilmclip
{
	width: 320px;
	height: 256px;
	visibility: visible;
}

.filmimg
{
	width: 459px;
	height: 256px;
	background-color: gray;
}

#content
{
	margin: 0 0 20px 0;
	background-color: white;
	float: left;
	display: block;
	height: 1%;
	padding: 0;
}

#main
{
	margin: 0;
	background-color: white;
	min-height: 20em;
	height: 1%;
}

#clientMain
{
	margin: 0;
	background-color: black;
	min-height: 26em;
	height: 1%;
	padding: 0 0 20px 20px;
	clear: both;
}

#message
{
width: 290px;
	float: left;
	margin-right: 2em;
	color: #75828A;
}

#testVideo
{
	float: left;
	width: 420px;
}

/* if sidebar doesn't include menu but content add class="hascontent" */
.sidecontent
{
	padding: 30px 20px 20px 15px;
	background: url(images/watermark.gif) no-repeat center top;
	height: 1%;
	min-height: 20em;
width: 285px;
}

.maincontent { padding: 20px 15px 20px 0; }
.maincontentBlk { padding: 20px 20px 20px 0; }

/* as we hid all hr for accessibility we create new hr with extra div element */
div.hr
{
	height: 2px;
	border-bottom: 1px dotted #57BFE3;
	margin: 5px 0;
}

/* relational links under content */
div.left49
{
	float: left;
	width: 76%;
	/* 50% for both left and right might lead to rounding error on some browser */
	font-size: 0.88em;
}

div.right49
{
	float: right;
	width: 23%;
	text-align: right;
	font-size: 0.88em;
}

div#footer
{
	clear: both;
	/* keep footer below content and menu */
	background-color: #F1F3F3;
	/* same bg color as in header */
	color: #75828A;
	font-size: 0.9em;
	padding: 4px 15px;
	height: 16px;
}

#footer a:link, #footer a:visited
{
	color: #004D69;
	text-decoration: none;
}

#footer a:hover { text-decoration: underline; }

/********************
CONTENT STYLING
*********************/

div#content { border-bottom: 1px solid #C8CDD0; }

/* HEADINGS */
h1
{
	font-size: 1.3em;
	color: #007DCC;
	line-height: 2em;
	font-weight: normal;
}

h2
{
	color: #00669E;
	font-size: 1.15em;
	line-height: 1em;
	font-weight: normal;
	margin-bottom: 1.1em;
}

h3
{
	color: #004D69;
	font-size: 1.0em;
	display: inline;
	line-height: 1.25em;
}

h4
{
	display: inline;
	float: left;
}

/* END HEADINGS */
/* TEXT */
p
{
	font-size: 0.88em;
	margin-bottom: 12px;
	line-height: 1.3em;
	color: #606A71;
}

#main li { font-size: inherit; }
.address { margin-top: 30px; }
.quote { font-style: italic; }
.author { text-align: right; }

pre
{
	font-family: monospace;
	font-size: 1.0em;
}

strong, b
{
	/* explicit setting for these */
	font-weight: bold;
}

em, i
{
	/* explicit setting for these */
	font-style: italic;
}

/* Wrapping text in <code> tags. Makes CSS not validate */
code, pre
{
	/* css-3 */
	/* Mozilla, since 1999 */
	/* Opera 4-6 */
	white-space: -o-pre-wrap;
	/* Opera 7 */
	word-wrap: break-word;
	/* Internet Explorer 5.5+ */
	font-family: "Courier New", Courier, monospace;
	font-size: 1em;
}

pre
{
	border: 1px solid #000;
	/* black border for pre blocks */
	background-color: #ddd;
	margin: 0 1em 1em 1em;
	padding: 0.5em;
	line-height: 1.5em;
	font-size: 90%;
	/* smaller font size, as these are usually not so important data */
}

/* END TEXT */
/* LISTS */
div#main ul,
div#main ol,
div#main dl
{
	font-size: 1.0em;
	line-height: 1.4em;
	margin: 0 0 1.5em 0;
}

div#main ul li,
div#main ol li { margin: 0 0 0.25em 3em; }

div#dl dt
{
	font-weight: bold;
	margin: 0 0 0.25em 3em;
}

div#dl dd { margin: 0 0 0 3em; }

/* END LISTS */

table.mail
{
	background-color: white;
	color: #00669E;
	font-family: helvetica, verdana, arial, sans-serif;
	border-collapse: collapse;
	border-width: 1px solid #5599BE;
	width: 420px;
}

td.labelcell
{
	font-size: 0.9em;
	color: #00669E;
	padding: 3px 4px;
	border: 1px solid white;
	background-color: #D5E9F7;
	vertical-align: middle;
	text-transform: inherit;
	width: 35%;
}

td.fieldcell
{
	color: #00669E;
	margin-right: 0px;
	padding: 3px 4px;
}

input, textarea, select
{
	border: 1px dotted #5599BE;
	color: #004D69;
	text-align: left;
	font-size: inherit;
}

textarea
{
	font-size: 1.0em;
	font-family: helvetica, verdana, arial, sans-serif;
}

.button, a.btn
{
	background-color: #007DCC;
	color: #fff;
	padding: 3px;
	border-color: #00669E;
	border-width: 1px;
	border-style: outset;
	cursor: pointer;
	font-weight: bold;
text-decoration: none;
}
a.btn { margin: 1em 0; }
a.btn:hover { background-color: white; 
color: #007dcc;
}
.star { color: #004D69; }
.red { color: #CC0017; }
.white { color: white; }

.photo
{
	float: left;
	margin: 10px 10px 10px 0;
	padding: 3px;
	border: 1px solid #C8CDD0;
}
.photoL
{
	float: left;
	margin: 10px 10px 10px 0;
	padding: 3px;
	border: 1px solid #C8CDD0;
}

.photoR
{
	float: right;
	margin: 10px 0 10px 10px;
	padding: 3px;
	border: 1px solid #C8CDD0;
}

a.loging { 
vertical-align: middle;
padding: 3px 10px; 
color: white;
text-decoration: none;
float: left;
margin-left: 3px;
}
a.loging:hover { color: #00669e; }
#secure, #secure2 {
margin: 2em auto;
color: #C8CDD0;
background-color: inherit;
}

#secure { margin: 1em 0; }
#secure2 { width: 50%; }
#secure p, #secure2 p { color: #C8CDD0; }
#secure label, #secure2 label
{
width: 9em;
float: left;
color: #B5BCC1;
font-size: 0.9em;
margin-right: 2em;
}
#secure input, #secure2 input { margin-bottom: 0.25em; padding: 2px; background-color: #F1F3F3;}

/* End of 'ayli layout top menu + 2col' */