/* html5 */
article, aside, figure, footer, header, hgroup, menu, nav, section { display:block; }

/* font definitions */
/* The Fell Types are digitally reproduced by Igino Marini. www.iginomarini.com */
@font-face {
	font-family:'IM FELL English Roman';
	src:url('f/FeENrm2.eot');
	src:local('IM FELL English Regular'), local('IM FELL English Roman'), local('IM_FELL_English_Roman'), url('f/FeENrm2.woff') format('woff'), url('f/FeENrm2.otf') format('opentype'), url('f/FeENrm2.svg#IM_FELL_English_Roman') format('svg');
}
@font-face {
	font-family:'DejaVuSansCondensedBook';
	src:url('f/DejaVuSansCondensed.eot');
	src:local('DejaVu Sans Condensed Book'), local('DejaVuSansCondensed'), url('f/DejaVuSansCondensed.ttf') format('truetype'), url('f/DejaVuSansCondensed.woff') format('woff'), url('f/DejaVuSansCondensed.svg#DejaVuSansCondensed') format('svg');
}
@font-face {
	font-family: 'DejaVuSansCondensedBold';
	src: url('f/DejaVuSansCondensed-Bold.eot');
	src: local('DejaVu Sans Condensed Bold'), local('DejaVuSansCondensed-Bold'), url('f/DejaVuSansCondensed-Bold.ttf') format('truetype'), url('f/DejaVuSansCondensed-Bold.svg#DejaVuSansCondensed-Bold') format('svg');
}

/* styling */
body {
	background-color:#ffffff;
	color:#2c2c2c;
	font-size:62.5%;
	margin:0;
	padding:0;
	font-family:'DejaVuSansCondensedBook', Arial;
}
a {
	text-decoration:none;
	color:#b90000;
}
a:hover { text-decoration:underline; }
a img { border:0; }
h1 {
	font-family:'IM FELL English Roman';
	font-size:2.4em;
}
h2 { 
	font-family:'IM FELL English Roman';
	font-size:2em;
}
h3 { 
	font-family:'IM FELL English Roman';
	font-size:1.7em;
	padding-top:20px;
}
h4 { 
	font-family:'DejaVuSansCondensedBook';
	font-size:1.3em;
	font-weight:strong;
	padding-top:0;
}
pre { 
	font-size:1.6em;
	border:1px solid #3c3c3c;
	background-color:#cccccc;
	padding:5px;
	white-space:pre-wrap;
	width:800px;
}
code { font-size:1.2em; }
ul, ol  {	font-size:1.6em; }
ul { list-style-type:square; }
li { margin-bottom:10px; }
li ul { font-size:1em; margin-top:5px;}
table, th, td { 
	border:1px solid #000;
	padding:5px;
}
table { 
	width:500px;
	font-size:1.4em; 
	border-collapse: collapse;
	background-color:#ccc;
}
tr { border:1px solid #000; }
td { vertical-align:top; }
.trmainhead, .trhead, strong { font-family:'DejaVuSansCondensedBold'; }
.trmainhead, .centre { text-align:center; }
.trmainhead { background-color:#ddd; }

/* glossary table */
.glossary { width:800px; }
.glossary .tag { width:100px; }
.glossary .desc { width:650px; }
.glossary .ex { width:50px; }
.glossary td { vertical-align:top; }

/* element attribute table */
.attributes td { vertical-align:top; }
.attributes .attrlist { font-size:1.6em; list-style-type:square; }
.attributes .attrlist li { margin-bottom:10px; }
.attributes .attrlist li ul { font-size:1em; margin-top:5px;}

time { font-size:1.2em; }

/* top */
#topbar {
	background-color:#3c3c3c;
	height:34px;
}
#topbar nav { 
	float:left;
	font-family:'DejaVuSansCondensedBook',Palatino,Arial;
	font-size:1.6em;
	line-height:24px;
	margin:5px 0 5px 150px;
}
#topbar nav a {
	color:#ffffff;
	margin-right:50px;
	cursor:pointer;
}
#topbar nav a:hover {
	color:#b90000;
	text-decoration:none;
}
#subscribe {
	float:right;
	margin:5px 150px 5px 0;
}
#subscribe img {
	text-decoration:none;
	border:0;
}

/* iepngfix */
#subscribe img, #html5laboratory, h1 img { behavior:url('c/iepngfix.htc'); }

/* header */
header { margin-left:150px; }
article header, section header { margin-left:0; }
#html5laboratory {
	background-image:url('../i/html5-laboratory-large.png');
	width:452px;
	height:209px;
	display:block;
	margin-top:15%;
	margin-left:25%;
}

/* content */
#content {
	width:800px;	
	margin:0 100px 100px 150px;
	font-family:'DejaVuSansCondensedBook';
}
#content p {
	font-size:1.6em;
}
#topbar nav a {
	font-family:'IM FELL English Roman';
	font-size:1em;
}
article nav a, section nav a, a.totop {
	font-family:'IM FELL English Roman';
	font-size:1.6em;
}

#about, #experiments, #resources, #contact { margin-top:100%; }

#contact  label  { 
	width:100px; 
	float:left;
	font-size:1.6em;
}
#formfeedback {
	display:none;
	margin-bottom:10px;
	margin-left:100px;
	color:#b40404;
}
.formitem { margin-bottom:5px; }
.formitem input { width:300px; }
.formitem textarea { 
	width:300px;
	height:250px;
}
.formbutton {
   position:relative;
   display:inline;
   text-align:center;
   left:150px;
   top:5px;
}
.greybutton {
   width:85px;
   font-size:10px; 
   color:rgb(118,111,111);
}

/* comments */
#comments ul {
	list-style-type:none;
	padding-left:0;
	font-size:14px;
}
#comments ul li {
	border:1px dotted #aaa;
	clear:both;
	padding:5px;
}
#comments .author { border-color:#b90000!important; }
#comments .pGrav {
	float:left;
	display:inline;
	height:40px;
}
#comments .userDetails {
	float:left;
	height:40px;
	margin-left:10px;
}
#comments .pName {
}
#comments .pDate {
	margin-top:5px;
}
#comments .pComment {
	clear:both;
	padding-top:10px;
}
#commentForm {}
#commentForm label {
	font-size:14px;
	margin-right:15px;
	margin-bottom:5px;
}
#commentForm input {
	margin-bottom:5px;
}
#commentForm #name, #commentForm #email, #commentForm #website  {
	width:200px;
}
#commentForm #name { margin-left: 1px; }
#commentForm #email { margin-left:2px; }
#commentForm #website { margin-left:-8px; }
#commentForm #comment {
	width:400px;
	height:120px;
}
#commentForm #addComment {
	margin-top:10px;
	float:left;
	clear:left;
	width:100px;
}
#captchaContainer {
	height:50px;
}
#captchaContainer img { 
	float:left; 
	border:1px solid #aaa;
}
#captchaContainer #info { 
	float:left;
	margin-left:10px;
}
#captchaContainer label { margin-top:5px; }
#captchaContainer input {
	margin-top:10px;
	width:30px;
}
#formError {
	font-size:14px;
	color:#b40404;
}
/* smileys */
.s-bg, .s-co, .s-ma, .s-sm, .s-ek, .s-su, .s-wi, .s-cf, .s-rd, .s-lo, .s-tg, .s-sd  { 
	width:21px;
	height:17px;
	background-image:url('../i/smileys.gif');
	background-color:transparent;
	background-repeat:no-repeat;
}
.s-bg { background-position: -3px -0px; } /* biggrin */
.s-co { background-position: -3px -17px; } /* cool */
.s-ma { background-position: -3px -34px; } /* mad */
.s-sm { background-position: -3px -51px; } /* smile */
.s-ek { background-position: -3px -68px; } /* eek */
.s-su { background-position: -3px -85px; } /* surprised */
.s-wi { background-position: -3px -102px; } /* wink */
.s-cf { background-position: -3px -119px; } /* confused */
.s-rd { background-position: -3px -136px; } /* redface */
.s-lo { background-position: -3px -153px; } /* lol */
.s-tg { background-position: -3px -170px; } /* tongue */
.s-sd { background-position: -3px -187px; } /* sad */

/* footer */
footer {
	background-color:#3c3c3c;
	height:28px;
}
article footer, section footer { background-color:transparent; }
#copyright {
	font-size:1.2em;
	line-height:28px;
	float:right;
	margin-right:150px;
	color:#ffffff;
}
#copyright a {
	color:#ffffff;
}
#copyright a:hover {
	color:#b90000;
}