@charset "utf-8";

* {margin: 0; padding: 0; }

body {font-family: arial, helvetica, sans-serif; font-size: 100%; color:#666; }

#container {width: 800px; height:470px; margin: 20px auto; font-size: .875em; }

#header {height: 4em; clear: both; color: #999; }
#body #photo, #body #photo-finish { border: none; margin: 0px; }
#body #photo-finish { padding-top: 40px; padding-bottom: 10px;  background: transparent url(img/header.jpg) top center no-repeat; }
#service-description p { margin: 0; text-align: center; }
#footer {background: url(img/footer.jpg) no-repeat; clear:both; padding: 20px; text-align: center; font-size: .8em}

.wrap { clear: both; }
.center { text-align: center; }
table.stats { text-align: right; }

.fullcol { clear: both; }
.halfcol { width: 48%; float: left; margin-left: 4%; }
.quartercol { width: 22%; float: left; margin-left: 2% }
.onethirdcol { width: 32%; float: left; margin-left: 4%; }
.twothirdcol { width: 64%; float: left; margin-left: 4%; }
.thirdcol { width: 32%; float: left; margin-left: 2%; }
#body .fullcol, #body .halfcol, #body .thirdcol, #body .onethirdcol, #body .twothirdcol, #body .quartercol
 { margin-bottom: 2em; border-right: 1px solid #f0f0f0; margin-right: -1px; }
.newrow { clear: left; margin-left: 0 !important; }


img { border: none; }
a, #header #nav a { color: #999; text-decoration: none; }
a:hover, #header #nav a:hover { color: #000; }
#body a { color: #930; text-decoration: underline; }
#body a:hover { text-decoration: none; }
#header a { color: inherit; }
#header a:hover { color: inherit; }
p, table { margin: 15px 0; }
p { text-align: justify; padding-right: 1em; }
table {  background: white; }
td, th { border-bottom: 1px solid #eee; border-right: 1px solid #eee; }
input[type='text'] { border: 1px solid #ccc; }
input[type='text'], td, th { padding: .4em; }
#body ul { margin-left: 2em; }
pre.code { background: #f0f0f0; border: 1px solid #ccc; padding: 1em; }
code { color: #303030; }

h2, h3, .progressbar, input[type=text], pre.code {
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
}


h1 { color: #666; font-size: 2.2em; text-align: center; }
h1 span { font-size: .75em; }
h2 { background: #303030; padding:10px; color: #fff; font-weight: normal; letter-spacing: .15em; }
h3 { background: #666; padding:10px; color: #fff; font-weight: normal; letter-spacing: .15em; }

#pigjar-phonetics { padding-top: 14px; font-size: 1.5em; }

#nav div { padding-top: 14px; float: right; width: 100%; }
#nav ul { color: #000; float: right; }
#nav ul li { display: inline; }
#nav ul li a { padding: 0px 1em; font-weight: bold; border-left: 1px solid #ccc; }
#nav ul li:first-child a { border-left: none; }

label { font-weight: bold; }
form { margin: 1em 0; }
form dt { display: none; }
form #submit-element { text-align: right; padding-right: 1em; }
form ul.errors { margin: 1em; color: #d63; }
.cpinput { width: 98%; }

#progressbars { display: none; }
.progressbar {
    width: 0%;
    background: transparent;
    color: black;
    font-weight: bold;
    white-space: pre;
	overflow: visible;
	margin: .4em 0;
	border: 0px solid #999;
}

.progressbar div {
	padding: .4em;
}

#xa-zones {
	overflow: hidden;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 800px;
}
.a-zone {
	text-align: center;
	font-size: 10px;
}
.a-zone-wsky {
	width: 160px;
	height: 600px;
}
.a-zone-l {
	position: absolute;
	top: 64px;
	left: 50%;
	margin-left: -580px;
}
.a-zone-r {
	position: absolute;
	top: 64px;
	right: 50%;
	margin-right: -580px;
}