@import url('blueprint/screen.css');

/* ---------------------------- Style starts here ------------------------------ */

/* UNIVERSAL
---------------------------- */
* {
    margin: 0px;
    padding: 0px;
}

html {
    border: none;
}

body {
	font-size: 13px;
	margin-top: 5px;
	margin-bottom: 0px;
	font-family: Arial, Helvetica, sans-serif;
	color: #333333;
	background: url(../images/bg.jpg);
}

a {
	text-decoration: none;
	color: #0069A3;
}
a:visited {
	text-decoration: none;
	color: #0069A3;
}
a:hover {
	text-decoration: underline;
	color: #0069A3;
}
a:active {
	text-decoration: none;
	color: #0069A3;
}

.clear {
	clear:both;
}

/* INTRO/HEADING
---------------------------- */
h1, h2, h3 h4, h5, h6 {
	font-family: Arial, Helvetica, sans-serif;
}


/* LEFT
---------------------------- */
#left-column {
	display: block;
	margin-top: 10px;
}

#left-column #logo {
	display: block;
	height: 170px;
	width: 190px;
}

#left-column #logo h1, #left-column #logo h1 a {
	background: url(../images/logo-cosskl.png) no-repeat center;
	display: block;
	height: 170px !important;
	width: 190px;
	text-indent: -9999px;
}

#left-column #logo h1 a {
	height: 170px;
	width: 190px;
}

#left-column #searchform {
	display: block;
	padding: 6px;
	margin-top: 5px;
	width: 178px;
}

#left-column #searchform input.search {
    padding: 4px;
    width: 143px !important;
}

#left-column #searchform input.searchsubmit {
	background:url(../images/btn-search.png) top no-repeat;
	text-indent: -9999px;
	height: 26px;
	width: 26px;
	border: none;
	border: 0;
	cursor: pointer;
	margin-left: -6px;
}

#left-column #searchform input.searchsubmit:hover {
	background:url(../images/btn-search.png) 0px -28px no-repeat;
}

#left-column #balloon {
	display: block;
	margin-top: 14px;
}

#left-column #balloon .topB {
	display: block;
	height: 19px;
	width: 190px;
	background: url(../images/topB.png) -6px 0px no-repeat;
}

#left-column #balloon .midContent {
	display: block;
	width: 148px;
	padding: 5px 21px 5px 21px;
	background: url(../images/midB.png) -6px 0px repeat-y;
}

#left-column #balloon .midContent h2 {
	display: block;
	font-size: 15px;
	font-weight: bold;
	color: #88B73E;
	margin: 0px;
}

#left-column #balloon .midContent p {
	display: block;
	margin-top: 10px;
}

#left-column #balloon .bottomB {
	display: block;
	height: 40px;
	width: 190px;
	background: url(../images/bottomB.png) -6px 0px no-repeat;
}

/* MENU (right)
---------------------------- */
#menu {
	display: block;
	width: 750px;
	position: relative;
	margin-top: 0px;
}

#menu .menuL, #menu .menuM, #menu .menuR {
	display: block;
	background:url(../images/menuL.png) no-repeat;
	height: 60px;
	width: 10px;
	float: left;
}

#menu .menuM {
	background:url(../images/menuM.png) repeat-x;
	width: 730px;
	height: 36px;
	padding: 22px 0px 11px 0px;
}

#menu .menuR {
	background:url(../images/menuR.png) no-repeat;
}

#menu ul {
	margin: 0px;
	padding: 0px;
}

#menu ul li {
	display: block;
	float: left;
	text-indent: -9999px;
	padding: 0px 6px;
}

#menu ul li.home a {
	display: block;
	background: url(../images/bg-navi.png) 2px -12px no-repeat;
	height: 18px;
	width: 80px;
}

#menu ul li.home a:hover, #menu ul li.home .active {
	display: block;
	background: url(../images/bg-navi.png) 2px -48px no-repeat;
	height: 18px;
	width: 80px;
}

#menu ul li.home {
	border-right: 1px solid #999;
}

#menu ul li.latest a {
	display: block;
	background: url(../images/bg-navi.png) -89px -12px no-repeat;
	height: 18px;
	width: 144px;
}

#menu ul li.latest a:hover, #menu ul li.latest .active {
	display: block;
	background: url(../images/bg-navi.png) -89px -48px no-repeat;
	height: 18px;
	width: 144px;
}

#menu ul li.latest {
	border-right: 1px solid #999;
	border-left: 1px solid #4d4d4d;
}

#menu ul li.featured a {
	display: block;
	background: url(../images/bg-navi.png) -242px -12px no-repeat;
	height: 18px;
	width: 159px;
}

#menu ul li.featured a:hover, #menu ul li.featured .active {
	display: block;
	background: url(../images/bg-navi.png) -242px -48px no-repeat;
	height: 18px;
	width: 159px;
}

#menu ul li.featured {
	border-right: 1px solid #999;
	border-left: 1px solid #4d4d4d;
}

#menu ul li.about a {
	display: block;
	background: url(../images/bg-navi.png) -412px -12px no-repeat;
	height: 18px;
	width: 84px;
}

#menu ul li.about a:hover, #menu ul li.about .active {
	display: block;
	background: url(../images/bg-navi.png) -412px -48px no-repeat;
	height: 18px;
	width: 84px;
}

#menu ul li.about {
	border-left: 1px solid #4d4d4d;
}

#menu .balloon {
	display: block;
	margin-top: -20px;
	float: right;
}

#menu .balloon a {
	display: block;
	background: url(../images/btn-shared-stories.png) no-repeat -3px -3px;
	height: 62px;
	width: 195px;
	text-indent: -9999px;
}

#menu .balloon a:hover {
	background: url(../images/btn-shared-stories.png) no-repeat -3px -70px;
}

/* RIGHT
---------------------------- */
#maps-container {
	display: block;
	margin: 0px 5px;
	margin-bottom: 20px;
	width: 740px;
	height: 540px;
	border: 1px solid #AAA;
}

#main-content {
	display: block;
	margin: 0px 20px;
}

#main-content .form-element {
	display: block;
	margin: 10px 0px;
}

#main-content .inputText input {
	display: block;
	padding: 5px;
    width: 530px;
}

#main-content .textArea textarea {
	display: block;
	padding: 5px;
	width: 530px;
	height: 300px;
}

#main-content .form-element .label {
	display: block;
	font-weight: bold;
	padding-top: 5px;
}

#main-content .form-element .label span.help {
	font-weight: normal !important;
	color: #999;
}

#main-content .form-element .small-maps-container {
	display: block;
	border: 1px solid #AAA;
	height: 300px;
	width: 540px;
	margin-top: 10px;
}

#main-content .horiz-line{
	display: block;
	background: url(../images/horiz-line.png) no-repeat 0 0;
	height: 15px;
	width: 720px;
	margin-bottom: 20px;
}

#main-content h2.submitstory, #main-content h2.lateststories {
	display: block;
	background:url(../images/h2-submitstory.png) no-repeat -6px 0px;
	text-indent: -9999px;
	margin-top: 15px;
	padding: 0px !important;
	margin-bottom: 0px !important;
}

#main-content h2.lateststories {
	background:url(../images/h2-lateststories.png) no-repeat -6px 0px;
	text-indent: -9999px;
	margin-top: 20px;
}

#main-content h2.success-title {
	background:url(../images/h2-thankyou.png) no-repeat -6px 0px;
	text-indent: -9999px;
	margin-top: 20px;
}

#main-content h3 {
	display: block;
	margin-bottom: 4px;
	font-weight: bold;
}

#main-content ul {
	display: block;
	margin: 0px;
	padding: 0px;
}

#main-content ul.latest li {
	list-style-type: none;
	padding: 0px 0px 20px 0px;
	margin-bottom: 20px;
	background: url(../images/latest-icons.png) no-repeat right top;
	border-bottom: 1px dotted #999;
}

#main-content ul.latest li h3 {
    font-size: 18px;
}

#main-content .author span {
	color: #999;
}

#main-content p.success {
	color: #264409;
	padding: 15px;
	padding-left: 51px;
	border: 1px dotted #C6D880;
	background: url(../images/success.png) no-repeat 10px 12px #E6EFC2;
	font-family: "Comic Sans MS";
	font-size: 14px;
	margin-bottom: 15px;
}

.photo {
    border: 1px solid #CCC;
    float: right;
    margin-left: 10px;
    padding: 3px;
}

/* LIST
---------------------------- */
.list-meta {
    color: #060;
    font-family: "Comic Sans MS";
    font-size: 13px;
}

.list-snippet {
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    font-size: 12px;
}

.about-content h3 {
	display: block;
	margin-bottom: 15px !important;
	font-weight: bold;
	font-size: 20px;
	color: #333;
	font-family: "Comic Sans MS";
}

.about-content p {
	display: block;
	margin-bottom: 15px;
}

/* FOOTER
---------------------------- */
#sponsors {
	display: block;
	margin-top: 20px;
	background:transparent url(../images/footer-cosskl.png) no-repeat scroll 768px -1px;
	width: 100%;
	height: 73px;
}

#sponsors .bcouncil {
	display: block;
	float: left;
	margin-left: 5px;
	margin-right: 20px;
}

#sponsors .mph {
	display: block;
	float: left;
	margin-right: 20px;
}

#sponsors .stw {
	display: block;
	float: left;
}

#footer {
	display: block;
	position: relative;
	margin-top: -2px;
	color: #FFF;
	font-size: 12px;
}

#footer a {
	display: block;
	color: #FFF;
	text-decoration: none;
}

#footer a:hover {
	display: block;
	color: #0069A3;
	text-decoration: underline;
}

#footer .footerL, #footer .footerM, #footer .footerR {
	display: block;
	background:url(../images/footerL.png) no-repeat 0 -7px;
	height: 60px;
	width: 10px;
	float: left;
}

#footer .footerM {
	background: transparent url(../images/footerM.png) repeat-x scroll 0 -7px;
	width: 930px;
	height: 22px;
	padding: 16px 0px 11px 0px;
}

#footer .footerR {
	background:url(../images/footerR.png) no-repeat 0 -7px;
}

#footer .footertextL {
	display: block;
	float: left;
	margin-left: 5px;
}

#footer .footertextR {
	display: block;
	float: right;
	margin-right: 5px;
}

/* FOOTER
---------------------------- */
.errors {
    background-color: #F00;
    color: #FF0;
    font-weight: bold;
    padding: 0px 10px;
}