/* common - based on Eric Meyer's reset, you shouldn't change this section
======================================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {border: 0; margin: 0; padding: 0; vertical-align: baseline; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit;}

body {background: #DDD url(bg.png) repeat left top; font: 75%/1.5 "myriad pro", helvetica, arial, sans-serif; color: #333;}

table {border-collapse: separate; border-spacing: 0;}
caption, th, td {text-align: left; font-weight: normal;}

blockquote:before, blockquote:after,
q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}

li {list-style-type: none;}

hr {display: none;}

strong, b {font-weight: bold;}
em, i {font-style: italic;}

/* basic links properties */
a {border-bottom: 1px solid #ccc; text-decoration: none; color: #333;}
a.alt,
.altbox .content a {border-color: #ccc; color: #333;}
a:hover, a:active, a:focus,
a.alt:hover, a.alt:active, a.alt:focus,
.altbox .content a:hover, .altbox .content a:active, .altbox .content a:focus {border-color: #999; color: #000;}
a img {border: none;}

/* abstract classes
======================================*/
/* autocleaning (use for parent of floated element, but take care, it has some limitations) */
.cw {width: 100%; overflow: hidden;}
.cw2 {overflow: hidden; height: 1%;}
/* float helpers */
.fl {float: left;}
.fr {float: right;}
/* classic cleaner */
.cleaner {clear: both; visibility: hidden; height: 0; overflow: hidden; line-height: 0; font-size: 0;}
/* safe cleaning, use eg. for parent of floated element */
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

/* image replacement (see <h1 id="logo"> section in index.html for example) */
.ir {position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%;}

/* text align helpers */
.tl {text-align: left !important;}
.tr {text-align: right !important;}
.tc {text-align: center !important;}
.ttop {vertical-align: top !important;}

/* for buttons etc. */
.hand {cursor: hand; cursor: pointer;}

/* accessible hiding of elements */
.a-hidden {position: absolute; top: -10000em;}

/* first and last helpers, mainly for table cells */
.first {border-left: 0 !important;}
.last {border-right: 0 !important;}

/* layout
======================================*/

.inner-container {width: 960px; margin: 0 auto;}

/* navigation stripe */
#nav {border-top: 1px solid #000; border-bottom: 1px solid #999; background: #fff;}
	#nav .inner-container {position: relative; z-index: 2; padding: 26px 0 25px 0;}
	#nav #h-wrap {position: absolute; top: 14px; left: 0; =width: 220px;} /* Set your width for section switcher (only in IE 7 and older, modern browsers will set optimal width automatically) */
		#nav #h-wrap h2 {background: 100% 100% no-repeat; position: relative; float: left; height: 51px; line-height: 55px; vertical-align: middle; font-size: 200%; font-weight: bold;}
	#nav #fix {float: right; width: 227px; height: 28px; padding: 0; overflow: hidden; font-family: inherit;}

/* content wrapper */
#container {}
	#container .inner-container {position: relative; z-index: 1; left: 10px; width: 980px; padding: 20px 0;}

#footer {clear: both; padding: 20px 0 10px 0; text-align: center;}
#footer p {margin: 0 0 10px 0; color: #999;}

/* content styling
--------------------------------------*/

/* stylish buttons with rounded corners */
.button {border: 1px solid #000; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background: #000 url("button.gif") repeat-x; padding: 5px 9px 5px; color: #fff; cursor: pointer;}
	.button:hover,
	.button:focus,
	.button:active {border-color: #272727; background: #2a2a2a url("altbutton.gif") repeat-x; text-shadow: #000 1px 1px 0; color: #fff;}
	/* alternative colors */
	.altbox .button {border: 1px solid #272727; background: #2a2a2a url("altbutton.gif") repeat-x; text-shadow: #000 1px 1px 0;}
	.altbox .button:hover,
	.altbox .button:focus,
	.altbox .button:active {border-color: #000; background: #000 url("button.gif") repeat-x; color: #fff;}
	.altbutton {border: 1px solid #272727; background: #2a2a2a url("altbutton.gif") repeat-x; text-shadow: #000 1px 1px 0;}
	.altbutton:hover,
	.altbutton:focus,
	.altbutton:active {border-color: #000; background: #000 url("button.gif") repeat-x; color: #fff;}
	.altbox .altbutton {border: 1px solid #000; background: #000 url("button.gif") repeat-x;}
	.altbox .altbutton:hover,
	.altbox .altbutton:focus,
	.altbox .altbutton:active {border-color: #272727; background: #2a2a2a url("altbutton.gif") repeat-x; text-shadow: #000 1px 1px 0; color: #fff;}

/* icons for content links etc. */
.ico { border: 0 !important; }
.ico-a { border: 0 !important; padding-left: 20px !important; }

/* tags, filetypes */
.tag {
	padding: 4px 7px; color: #fff !important;
	border-radius: 3px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
}
.tag-gray { /* feel free to add more tag types, just change the colors of gradients/borders */
	border-bottom: 1px solid #666;
	background: #999;
	background: gradient(linear, left top, left bottom, from(#bbb), to(#999));
	background: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#999));
}

/* error/information messages */
.msg {
	-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
	border: 1px solid; margin: 0 0 15px 0; padding: 8px 10px 0 10px;
}
.msg p {margin: 0 0 8px 0; padding-left: 25px;}
.msg-ok {border-color: #a6d877; background: #d2ecba url("msg-ok.png") repeat-x; color: #336801;}
.msg-error {border-color: #f3abab; background: #f9c9c9 url("msg-error.png") repeat-x; color: #8d0d0d;}
.msg-warn {border-color: #d7e059; background: #f3f7aa url("msg-warn.png") repeat-x; color: #6c6600;}
.msg-info {border-color: #9fd1f5; background: #c3e6ff url("msg-info.png") repeat-x; color: #005898;}
.msg-ok p {background: url("accept.png") 0 50% no-repeat;}
.msg-error p {background: url("cross_octagon.png") 0 50% no-repeat;}
.msg-warn p {background: url("exclamation_octagon_fram.png") 0 50% no-repeat;}
.msg-info p {background: url("exclamation.png") 0 50% no-repeat;}
.error {color: #b70b0b;}
/* forms */
form {padding: 18px;}
form.plain {padding: 0;} /* plain forms - used in tabular and grid data structures, TAKE CARE of it, please */
form.plain fieldset {border: 0 !important; padding: 0 !important;}
form.basic dl {width: 100%; overflow: hidden;} /* basic layout for forms */
form.basic dl dt,
form.basic dl dd {float: left;}
form.basic dl dt {padding: 3px 5px 3px 0; width: 20%;}
form.basic dl dd {padding: 3px 0 3px 5px; width: 76%;}

label.check,
label.radio {margin-right: 5px;}
form small {color: #999;}
input.txt,
textarea {
	border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
	border: 1px solid #999; background: url("img/txt.gif") repeat-x; padding: 5px 2px;
}
form.basic input.txt,
form.basic textarea {width: 100%;}
input.error,
textarea.error {border-color: #d35757;}
span.loading {background: url("ajax-loader.gif") 0 50% no-repeat; padding: 14px 0 14px 25px; display: block;}
form.fields {} /* plain and clean layout for forms */
form.fields fieldset {
	border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
	border: 1px solid #ccc; margin-bottom: 15px; padding: 10px 15px 15px 15px;
}
form.fields fieldset.last {margin-bottom: 0; border-right: 1px solid #ccc !important;}
form.fields fieldset legend {padding: 0 10px; font-size: 110%;}
form.fields label,
form.fields div.sep {display: block; margin-top: 6px;}
form.fields label.check,
form.fields label.radio {display: inline; margin-top: 0;}
form.fields span.loading {margin-left: 10px;}
/* lists for actions (remove, modify) */
ul.actions {margin: 0;}
ul.actions li {display: inline; margin-right: 5px;}

/* content boxes */
.box {float: left; width: 960px; margin: 0 20px 20px 0;}
	.box-25 {width: 225px;} /* 25% box */
	.box-50 {width: 470px;} /* 50% box */
	.box-75 {width: 715px;} /* 75% box */
	.box-100 {width: 960px;} /* 100% box */
	.altbox {} /* class for alternative (emphasized) boxes (blue headings and colors) */
	/* wrap of box's content */
	.boxin {box-shadow: #aaa 0 0 10px; -webkit-box-shadow: #aaa 0 0 10px; -moz-box-shadow: #aaa 0 0 10px; border: 1px solid #999; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; background: #fff;}
	/* boxes' headers */
	.box .header {
		background: #3d3d3d url("headerbox.png") repeat-x;
		border-top: 1px solid #444;
		border-radius: 5px 5px 0 0;
	   -moz-border-radius-topleft: 5px;
	   -moz-border-radius-topright: 5px;
	   -webkit-border-top-left-radius: 5px;
	   -webkit-border-top-right-radius: 5px;
		position: relative; margin: -1px -1px 0 -1px; padding: 7px 0 9px 20px;
	}
	.altbox .header {border-top-color: #000; background: #000 url("altheaderbox.png") repeat-x;}
	.box .header h3 {position: relative; top: 2px; display: inline; font-size: 150%; color: #fff; text-shadow: #151515 0 1px 0;}
	.altbox .header h3 {}
	.box .header .button {margin-left: 15px;}
	/* boxes' content types – tabular */
    .box .gray {color: #888;}
    .box .content {margin-bottom: 5px;}
	.box .boxcontent {margin: 1em;}
	.box .content table {width: 100%;}
	.box .content table th,
	.box .content table td {padding: 10px 10px 8px 10px;}
	.box .content table th {text-align: left; font-weight: normal;}
	.box .content table tr.even th,
	.box .content table tr.even td {background: #f5f5f5;}
	.altbox .content table tr.even th,
	.altbox .content table tr.even td {background: #f5f5f5;}
	.box .content table th.first,
	.box .content table td.first {padding-left: 20px;}
	.box .content table thead th,
	.box .content table thead td {border-left: 1px solid #f2f2f2; border-right: 1px solid #d5d5d5; background: #ddd; text-shadow: #fff 0 1px 0;}
	.box .content table tbody tr.first th,
	.box .content table tbody tr.first td {border-top: 1px solid #bbb;}
	.altbox .content table tbody {color: #333;}
	.box .content table a.ico-comms {border: 0; padding: 10px; color: #fff;}
	.box .content table tfoot th,
	.box .content table tfoot td {border-top: 1px solid #ccc; background: #fff;}
	/* boxes' content types – simple list */
	.box .content ul.simple li {clear: both; padding: 10px 20px 8px 20px; overflow: hidden;}
	.box .content table tr.even th,
	.box .content ul.simple li.even {background: #f5f5f5;}
	.altbox .content ul.simple li.even {background: #f5f5f5;}
	.box .content ul.simple strong {float: left; font-weight: normal;}
	.box .content ul.simple span {float: right;}
	/* calendar */
	table.calendar {width: 100%;}
	table.calendar thead {zoom: 1;}
	table.calendar thead tr {zoom: 1;}
	table.calendar thead th.month {border-bottom: 1px solid #bbb; font-weight: bold; font-size: 120%; zoom: 1;}
	table.calendar thead th.month a {border: none; position: relative; top: 5px; margin: 0 10px; zoom: 1;}
	table.calendar tbody td,
	table.calendar tbody th {border: 1px solid #ddd; border-top-color: #fff; border-left-color: #fff;}
	table.calendar strong {font-size: 140%;}
	table.calendar .inactive {color: #aaa;}
	table.calendar div.items a {border: 0; margin: 0 1px;}
	