/***********************************************/
/* HTML tag styles                             */
/***********************************************/
body {
	font-family: Arial, sans-serif;
	color: #333333;
	line-height: normal;	
	margin: 0px;
	padding: 0px;
	background: #cccccc;
}

footer, header, article, nav, section, article {
	display: block;
}

/******* hyperlink and anchor tag styles *******/

a:link, a:visited{
	color: #005FA9;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

table {
	border:0;
	width: 90%;
}

tr {
	padding:0;
	margin: 0;
}

th {
	background-color: #CCCCCC;
	text-align: left;
	padding: 1em;
}
td a {
	vertical-align: top;
}

td {
	padding: 0;

}

td h2 {
	padding:0.5em;
	margin:0;
}
td.description {
	padding-bottom:10px;
	padding-top:0;
	padding-left: 0;
}
td.description p {
	padding:0.5em 0 0.5em 0.5em;
	margin: 0;
}

td.description ul {
	margin-left: 2em;
}

td.description li {
	margin: 0;
}


#refs td {
	padding: 10px;
	vertical-align: top;
}

#refs img, #refs p{
	margin-top: 50px;
	vertical-align: top;		
}
#refs img, #refs p:first-child{
	margin-top: 25px;
	vertical-align: top;		
}



.detailsC {
	text-align: center;
}

form p {
	font-weight: bold;
	margin-top: 1em;
		}

/************** header tag styles **************/

h1{
 font: bold 150% Arial,sans-serif;
 color: #334d55;
 margin: 18px 0px 0px 0px;
 padding: 0px;
}

h2{
 font: bold 114% Arial,sans-serif;
 color: #006699;
 margin: 12px;
 padding: 0px;
 
}

h3{
 font: bold 100% Arial,sans-serif;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}

h3.small {
	margin: 5px;
	font-size: 90%;
}

h4{
 font: 100% Arial,sans-serif;
 color: #333333;
 margin: 0px;
 padding: 0px;
}

h5{
 font: 100% Arial,sans-serif;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}

img {
	border: 0;
}

p {
	margin: 3px 0 3px 0px;
	
}

p.small {
	margin: 5px;
	font-size: 85%;
}

span.nowrap{
white-space:nowrap;
}

code {
	font-size: 120%;
}

/*************** list tag styles ***************/

ul{
 list-style-type: square;
}

ul ul{
 list-style-type: disc;
}

ul ul ul{
 list-style-type: none;
}

ol {
	margin-left: 20px;
}


/********* form and related tag styles *********/

form {
	margin: 0;
}

label{
 font: bold 1em Arial,sans-serif;
 color: #334d55;
}
				
input{
font-family: Arial,sans-serif;
}

/***********************************************/
/* Layout Divs                                 */
/***********************************************/

header {
	position: absolute;
	top: 0px;
	left: 2%;
	right: 2%;
	width:96%;
	height: 60px;
	background: white;	
	border-radius: 0 0 7px 7px;
	-moz-border-radius: 0 0 7px 7px;
	box-shadow: 3px 3px 7px #777; 
	-webkit-box-shadow: 3px 3px 7px #777;
	-moz-box-shadow: 3px 3px #777;    

}

/* FOOTER */

footer {
	position:absolute;
	bottom: 3px;
	height:65px;
	left: 2%;
	right: 2%;
	border-radius: 7px 7px 0 0;
	-moz-border-radius: 7px 7px 0 0;
	box-shadow: 3px 3px 7px #777; 
	-webkit-box-shadow: 3px 3px 7px #777;
	-moz-box-shadow: 3px 0px 3px #777;   
	background: white;	
	z-index: 0;	
}

footer a {
	position: absolute;
	top:20px;
	left: 20px;
}

footer img {
	 border: 0;
}



#html5logo {
	position: absolute;
	top:10px;
	left: 120px;
}

#copyr {
	position: absolute;
	top: 20px;
	right: 10px;
	font-size:7pt;
	font-weight: bold;

}


/* MAIN BLOCK, INCLUDING NAVIGATION PANE */

#pagecell1 {
	position:absolute;
    overflow: visible;
	top: 100px;
	left: 2%;
	right: 2%;
	width:96%;
	padding-bottom: 15px;
	margin: 0;
	background-color: #ffffff;
	border-radius: 7px;
    -moz-border-radius: 7px;
    box-shadow: 3px 3px 7px #777; 
	-webkit-box-shadow: 3px 3px 7px #777;
	-moz-box-shadow: 3px 3px 3px #777;
	z-index: 2;
}

/* NAVIGATION BAR DOWN THE LEFT */

nav {
	float: left;
	clear:both;
	width:178px;
	height:87%;
	margin: 0px;
	padding: 0px;
	border-right: 1px solid #cccccc;
	border-bottom: 0px solid #cccccc;
}

nav div {
	margin: 10px;
	font-size: 85%;
}


#titlebar {
	height: 80px;
	border-bottom: 1px solid #cccccc;
	padding-left: 10px;	
}

#pageName {
	width:85%;
}

#pageName h1 {
	position: absolute;
	font:30px/30px "Trebuchet MS",Arial, Helvetica, sans-serif; 
 	color: #006699;
	top: 10px;
}


#smallogo {	
	position: absolute;
	top: 10px;
	right: 15px;
}

#content {
	padding: 20px;
	margin: 0px 0px 0px 178px;
	border-left: 1px solid #ccd2d2;
}

.colmask {
	position:relative;	/* This fixes the IE7 overflow hidden bug */
	clear:right;
	float:left;
	width:100%;			/* width of whole page */
	overflow:hidden;		/* This chops off any overhanging divs */
    margin-top: 20px;
}
/* common column settings */
.colright,
.colmid,
.colleft {
	float:left;
	width:100%;			/* width of page */
	position:relative;
}
.col1,
.col2,
.col3 {
	float:left;
	position:relative;
	min-height: 350px;
	margin:0 0 3px 0;;
	padding:0;	/* no left and right padding on columns, we just make them narrower instead 
					only padding top and bottom is included here, make it whatever value you need */
	overflow:hidden;
	background-color: white;
	border: 1px solid black;
	border-radius: 7px;
	-moz-border-radius: 7px;
	box-shadow: 3px 3px 7px #777; 
	-webkit-box-shadow: 3px 3px 7px #777;
	-moz-box-shadow: 3px 3px 7px #777;
}
/* 3 Column settings */
.threecol {
		/* right column background colour */
}
.threecol .colmid {
	right:33.3%;			/* width of the right column */
	/* center column background colour */
}
.threecol .colleft {
	right:33.3%;			/* width of the middle column */
	/* left column background colour */
}
.threecol .col1 {
	width:29.3%;			/* width of center column content (column width minus padding on either side) */
	left:102%;			/* 100% plus left padding of center column */
}
.threecol .col2 {
	width:29.3%;			/* Width of left column content (column width minus padding on either side) */
	left:39.3%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
	width:29.3%;			/* Width of right column content (column width minus padding on either side) */
	left:77.3%;			/* Please make note of the brackets here:
					(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}

.download_button {
	position: absolute;
	width:50%;
	left: 25%;
	right:25%;
	bottom: 10px;		
	text-align: center;
	font-size: 80%;
	border-radius: 5px;
	-moz-border-radius: 5px;
	padding: 2px;
	background: #005FA9;
	margin:0 auto;
}

.download_button a {
	color:white;

}

.installinstructions {
	position: relative;
	margin-left:0;
	margin-right: 60px;
	border:1px solid black;
	padding: 5px;
}

/*************** story styles ******************/
.story {
	padding: 15px 0px 0px 10px;
	font-size: 80%;
}

.story p, .firststory p {
	margin-left: 30px;
}

.compact li {
	margin-top: -.5em;
	margin-bottom: -.5em;

}

.story ul, .story ol, .firststory ul, .firststory ol {
	margin-left:50px;
}





.firststory {
	padding: 10px;
	font-size: 80%;
}

.story h1, .firststory h1 {
	margin: 20px 0;
}

#p1box {
width:60%;
}


#p1box h1
 {
 	margin-top:0;
 	font:26px/26px "Trebuchet MS",Arial, Helvetica, sans-serif; 
 	color: #006699;
	padding: 0;
}

#p1box img
 {
	float:left;
	margin-top: 1em;
	
}

#p1box p
 {
	font:13px/13px "Trebuchet MS",Arial, Helvetica, sans-serif; 
	margin: 1em 0 2em 0em;
	font-size:90%;
 	text-align: justify;
 	background-image: url(images/equals_icon.gif);
	background-repeat: no-repeat;
	background-position: 0; 0;
	padding-left: 3em;
	
}

#sidebox {
	position: absolute;
	top: 100px;
	right: 0px;
    width: 15%;
	font-size: 80%;
	margin:30px 30px 0 0; 
	padding:20px; 
	background:#DDEEFF; 
	border-width: 1px;
	border-style:solid;
	border-color: black;
	border-radius: 7px;
	-moz-border-radius: 7px;
	box-shadow: 3px 3px 7px #777; 
	-webkit-box-shadow: 3px 3px 7px #777;
	-moz-box-shadow: 3px 3px 7px #777;
	
}

/* COLOURED PANELS  ON HOME PAGE*/
#story_grid {	
	clear:right;
	margin-top: 20px;
	margin-bottom: 0;
	margin-left: -20px;
	padding: 0px;
}

.threecol .col1page1 {
	width:29.3%;			/* width of center column content (column width minus padding on either side) */
	left:102%;			/* 100% plus left padding of center column */
}
.threecol .col2page1 {
	width:29.3%;			/* Width of left column content (column width minus padding on either side) */
	left:39.3%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3page1 {
	width:29.0%;			/* Width of right column content (column width minus padding on either side) */
	left:77.3%;			/* Please make note of the brackets here:
					(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}
.col1page1,
.col2page1,
.col3page1 {
	float:left;
	position:relative;
	min-height: 130px;
	margin: 5px 0 30px 0;
	padding:0;	/* no left and right padding on columns, we just make them narrower instead 
					only padding top and bottom is included here, make it whatever value you need */
	border-width: 1px;
	border-style:solid;
	border-color: black;
	background:#fcce32; 
	overflow:hidden;
	border-radius: 7px;
	-moz-border-radius: 7px;
	box-shadow: 3px 3px 7px #777; 
	-webkit-box-shadow: 3px 3px 7px #777;
	-moz-box-shadow: 3px 3px 7px #777;
}

.col1page1 h2, .col2page1 h2, .col3page1 h2{
	display:block; 
	width:90%; 
	margin:10px 0 0 10px; 
	font:16px/16px "Trebuchet MS",Arial, Helvetica, sans-serif; 
	font-weight:bold; 
	text-transform:uppercase;
	color: white; 
	position:absolute; 
	top:0px; 
	left:0px; 
}

.col1page1 p, .col2page1 p, .col3page1 p{
	display:block; 
	margin:50px 10px 0 10px;	
	font:12px/14px Arial, Helvetica, sans-serif; 
	font-weight:bold;  
	color:black;
	padding:0;

}

.floatright {
	float: right;
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 34px;
	height: 34px;
	margin:20px 0 0 40px; 
}

.floatright a img, .floatright a img, .floatright a img{

}

/* DOWNLOADS PAGE */

#plugintypes {
	clear:right;
	margin-top: 20px;
	margin-bottom: 20px;	
	height: 400px;
	padding: 10px;
	border-radius: 10px;
	-moz-border-radius: 10px;
	background-color: #8FB8BC;
	border: 1px solid black;
	box-shadow: 3px 3px 7px #777; 
	-webkit-box-shadow: 3px 3px 7px #777;
	-moz-box-shadow: 3px 3px 7px #777;
}

.story a.capsule{
	font: bold 1em Arial,sans-serif;
	color: #005FA9;
	display:block;
	padding-bottom: 5px;
}

.story a.capsule:hover{
	text-decoration: underline;
}

.story p, .story li {
	margin-top: 0.75em;
}

.platforms {
	background-image: url(images/allplatforms_small.png);
	background-repeat: no-repeat;
	background-position: 0; 0;
	padding-left: 2.5em;
}

/************ sectionLinks styles **************/

#sectionLinks{
	margin: 0px;
	padding: 0px;
}

#sectionLinks h3{
	padding: 10px 0px 2px 10px;
	border-bottom: 1px solid #cccccc;
}

#sectionLinks a:link, #sectionLinks a:visited {
	display: block;
	border-top: 0px solid #ffffff;
	border-bottom: 1px solid #cccccc;
	font-weight: bold;
	padding: 3px 0px 3px 10px;
	color: #21536A;
}

#sectionLinks a:hover{
	border-top: 0px solid #cccccc;
	background-color: #DDEEFF;
	font-weight: bold;
	text-decoration: none;
}

#sectionLinks a.this {
	background-color: #334D55;
	color: white;
}

#highlightbox {
 	margin: 30px 10px 10px 10px; 
 	padding: 5px; 
 	border: 1px dashed; 
 	font-size: 85%; 
 	text-align: center;
	background-color:#FFFF80;
}

* {padding:0; margin:0}
.dropdown {
	display:block; 
	position:relative
}


.dropdown dt {
	font-weight: bold;
	padding: 3px 0px 3px 10px;
	color: #21536A;
	border-right: 1px solid #cccccc;
}

.dropdown .upperdd {
	border-bottom:1px solid #cccccc; 
	border-top: 0; 
	border-right: 0
	}
	
.dropdown dt:hover {
	background-color:#DDEEFF
	}
	
.dropdown dd {
	position:absolute; 
	top:0; 
	overflow:hidden; 
	width:180px; 
	display:none; 
	background:white; 
	border-right: 1px solid #cccccc;
	border-top:0;
}
.dropdown ul {
	width:200px; 
	border-left:1px solid #cccccc; 
	border-top:1px solid #cccccc;
	list-style:none
	}
	
.dropdown li {
	display:inline;
}

.dropdown a, .dropdown a:active, .dropdown a:visited {
	display:block; 
	text-decoration:none; 
	background:white; 
	width:180px;
}

.dropdown a:hover  {background:#ddeeff; color:#000}

.dropdown .underline {
	width:180px;
}

.empty {
	width:178px;
	background: white;
	color: #21536A;
	border-right: 1px solid #cccccc;
	padding: 0;
	margin:0;	
}


.this {
 	font-weight: bold;
	padding: 3px 0px 3px 10px;
	background-color: #334D55;
	color: white;
	border:0;
}