@charset "utf-8";

/* --------------------------------------- html elems ------------------------------------- */
#main a:link {color: #006; text-decoration:underline;}
#main a:visited {color: #006; text-decoration:underline;}
#main a:hover, #main a:active {color: #00f; text-decoration:underline;}

h1 {font-size:20px;margin-bottom:9px;}
h2 {font-size:18px;margin-bottom:8px; font-weight: normal;}
h3 {font-size:16px;margin-bottom:10px; margin-top:10px; font-weight: normal;}
h4, h5, h6 {font-size:12px;margin-bottom:5px; font-weight: bold;}

table.nospacing {padding:0px;}
table.nospacing td {padding:2px; margin:0px;}

/* ----------------------------------------- general -------------------------------------- */
.left { float: left; }
.right { float: right; }

body {
	background: #073228;
	color: #000000;
	font-family:"Lucida Grande", Verdana, sans-serif;
	min-width:900px;
}

#header {
    width: 100%;
    height:35px;
    background-color:#07261e;
    border-bottom: 1px solid #000;
}
#header a, #header a:active, #header a:visited, #header a:hover {
    color:#fff;
    font-weight:normal;
    text-decoration:none;
    font-size:13px;
}

#community-navi {
    float:left;
    margin-left:10px;
}
#community-navi span {
    font-size:16px;
    color:#fff;
    float:left;
    margin-top:5px;
    margin-right:10px;
}
#community-navi div { float: left; }
#community-navi div span { font-size:12px; color:#fff; margin-top:8px; }

#search-field {
    border:0px;
    background-color:#333;
    color:#999;
    width:100px;
    margin-right:5px;
}

#search-button {
    width:70px;
    margin-top:10px;
    margin-right:0px;
    padding: 1px 0px;
}


#title-wrapper {
    position: absolute;
    left: 0px;
    top: 36px;
    width: 100%;
    overflow: visible;
}
#title {
    position: absolute;
    left: 50%;
    width: 1274px;
    margin-left:-637px;
    height: 150px;
/*    background-image:url(../pics/header.jpg);*/
}
#synaesthesia-header {
    width: 1274px;
    margin: 0; padding: 0;
    height: 150px;
}

#base-wrapper {
    position: absolute;
    left: 0px;
    top: 186px;
    width: 100%;
    overflow: visible;
}
#base {
    position: absolute;
    left: 50%;
    width: 1274px;
    margin-left:-637px;
    background-image:url(../pics/background_fade.gif);
    background-repeat: repeat-y;
}
#left-bg {
    width: 272px;
    height: 662px;
    float: left;
    background-image:url(../pics/side_left.jpg);
}
#content-wrapper {
    float:left;
    width: 746px;
    padding:0px;
	background-color: #022121;
	min-height:652px;
    height:auto !important;
    height: 652px;  /* min height hack */
}
#navi {
    float:left;
    margin-right:3px;
    position:relative;
}
.content-corner-tl {
    position:absolute;
    top:0px;
    left:183px;
    z-index:100;
    background-image:url(../pics/corner_tl.png);
    height:10px; width: 10px;
}
#corner-navi {
	left:0;
}
#main-wrapper {
    float:right;
    position:relative;
}
.content-corner-tr {
    position:absolute;
    top:0px;
    right:0px;
    z-index:100;
    background-image:url(../pics/corner_tr.png);
    height:10px; width: 10px;
}

#main {
    width:523px;
    background-color: #fff;
    padding: 50px 20px 5px 20px;
}
#right-bg {
    width: 256px;
    height: 662px;
    float: left;
    background-image:url(../pics/side_right.jpg);
}
#fadeout-bottom {
    width: 1274px;
    height: 60px;
    background-image:url(../pics/footer_fadeout.jpg);
    clear:both;
}

/* ----------------------------------------- navi -------------------------------------- */

.menu {width:170px;}
.menu_head {
	width:160px;
	padding-left:15px;
	padding-top:3px;
	padding-bottom:3px;
	cursor: pointer;
	position: relative;
	font-size: 16px; background: #022121; color: #ffffff;
	border-bottom: 1px solid #444;
}
.menu_head.open {
    border-bottom: 1px solid #bbb;
}

.menu_head a:link { color:#ffffff; text-decoration:none;}
.menu_head a:hover, a:visited, a:active { color: #ffffff; text-decoration:none; }
.menu_head span { text-decoration:none; }

.menu_body { background: #123131; color:#fff; width: 175px; font-family:Helvetica, Arial, sans-serif; font-size:12px; padding-bottom: 8px}
.menu_body a:link {
    display:block;
    color:#022121;
    text-decoration:none;
    padding-top:3px; padding-left:20px;
}
.menu_body a:hover, .menu_body a:visited, .menu_body a:active  {
    display:block;
    color: #022121;
    text-decoration:none;
    padding-top:3px; padding-left:20px;
}
.

.breadcrumbs { color: #ffffff; font-size:10px; }

#menu-head-1 .arrow {
    background-image:url(../pics/arrows.png); background-repeat:none;
    width:15px; height:15px; position: absolute; top:8px; left:155px;
    background-position:-8px -5px;
}
#menu-head-2 .arrow {
    background-image:url(../pics/arrows.png); background-repeat:none;
    width:15px; height:15px; position: absolute; top:8px; left:155px;
    background-position:-8px -35px;
}
#menu-head-3 .arrow {
    background-image:url(../pics/arrows.png); background-repeat:none;
    width:15px; height:15px; position: absolute; top:8px; left:155px;
    background-position:-8px -65px;
}
#menu-head-4 .arrow {
    background-image:url(../pics/arrows.png); background-repeat:none;
    width:15px; height:15px; position: absolute; top:8px; left:155px;
    background-position:-8px -95px;
}
#menu-head-5 .arrow {
    background-image:url(../pics/arrows.png); background-repeat:none;
    width:15px; height:15px; position: absolute; top:8px; left:155px;
    background-position:-8px -125px;
}
#menu-head-6 .arrow {
    background-image:url(../pics/arrows.png); background-repeat:none;
    width:15px; height:15px; position: absolute; top:8px; left:155px;
    background-position:-8px -155px;
}
#menu-head-7 .arrow {
    background-image:url(../pics/arrows.png); background-repeat:none;
    width:15px; height:15px; position: absolute; top:8px; left:155px;
    background-position:-8px -185px;
}

#menu-head-1.open .arrow { background-repeat:none; background-position:-35px -5px; }
#menu-head-1.open, #menu-body-1, #menu-head-1.active { background-image:url(../pics/navi_bg_1.jpg); }

#menu-head-2.open .arrow { background-repeat:none; background-position:-35px -35px; }
#menu-head-2.open, #menu-body-2, #menu-head-2.active { background-image:url(../pics/navi_bg_2.jpg); }

#menu-head-3.open .arrow { background-repeat:none; background-position:-35px -65px; }
#menu-head-3.open, #menu-body-3, #menu-head-3.active { background-image:url(../pics/navi_bg_3.jpg); }

#menu-head-4.open .arrow { background-repeat:none; background-position:-35px -95px; }
#menu-head-4.open, #menu-body-4, #menu-head-4.active { background-image:url(../pics/navi_bg_4.jpg); }

#menu-head-5.open .arrow { background-repeat:none; background-position:-35px -125px; }
#menu-head-5.open, #menu-body-5, #menu-head-5.active { background-image:url(../pics/navi_bg_5.jpg); }

#menu-head-6.open .arrow { background-repeat:none; background-position:-35px -155px; }
#menu-head-6.open, #menu-body-6, #menu-head-6.active { background-image:url(../pics/navi_bg_6.jpg); }

#menu-head-7.open .arrow { background-repeat:none; background-position:-35px -185px; }
#menu-head-7.open, #menu-body-7, #menu-head-7.active { background-image:url(../pics/navi_bg_7.jpg); }

#menu-body-1 a:hover {background-color:#cdeeb3;}
#menu-body-2 a:hover {background-color:#bce3ee;}
#menu-body-3 a:hover {background-color:#eadff1;}
#menu-body-4 a:hover {background-color:#f0b6c2;}
#menu-body-5 a:hover {background-color:#f2ddc3;}
#menu-body-6 a:hover {background-color:#e4efb9;}
#menu-body-7 a:hover {background-color:#cdf4d3;}

#menu-body-1 a.active, #menu-body-1 a.active_path {background-color:#cdeeb3;}
#menu-body-2 a.active, #menu-body-2 a.active_path {background-color:#bce3ee;}
#menu-body-3 a.active, #menu-body-3 a.active_path {background-color:#eadff1;}
#menu-body-4 a.active, #menu-body-4 a.active_path {background-color:#f0b6c2;}
#menu-body-5 a.active, #menu-body-5 a.active_path {background-color:#f2ddc3;}
#menu-body-6 a.active, #menu-body-6 a.active_path {background-color:#e4efb9;}
#menu-body-7 a.active, #menu-body-7 a.active_path {background-color:#cdf4d3;}


.subnavi {
    width:523px;
    padding: 10px 20px 5px 20px;
    float: left;
}
.subnavi a, .subnavi a:link, .subnavi a:visited
{
	color: #000;
	margin-right: 20px;
	text-decoration: none;
	float: left;
	margin-bottom: 5px;
	text-transform: uppercase;
	font-size: 11px;
}
.subnavi a:hover {
	text-decoration: underline;
}

.subnavi a.active, .subnavi a.active:hover, .subnavi a.active:visited {
    text-decoration:underline;
}

.subnavi span { margin-bottom: 5px; }
#subnavi-1 {
    background-image:url(../pics/subnavi_bg_1.jpg);
    background-repeat: repeat-x;
    background-color: #91cc62;
}
#subnavi-2 {
    background-image:url(../pics/subnavi_bg_2.jpg);
    background-repeat: repeat-x;
    background-color: #83c2d4;
}
#subnavi-3 {
    background-image:url(../pics/subnavi_bg_3.jpg);
    background-repeat: repeat-x;
    background-color: #bc86dc;
}
#subnavi-4 {
    background-image:url(../pics/subnavi_bg_4.jpg);
    background-repeat: repeat-x;
    background-color: #c8586e;
}
#subnavi-5 {
    background-image:url(../pics/subnavi_bg_5.jpg);
    background-repeat: repeat-x;
    background-color: #f0b25b;
}
#subnavi-6 {
    background-image:url(../pics/subnavi_bg_6.jpg);
    background-repeat: repeat-x;
    background-color: #dad96d;
}
#subnavi-7 {
    background-image:url(../pics/subnavi_bg_7.jpg);
    background-repeat: repeat-x;
    background-color: #9ae0a2;
}

/* ----------------------------------------- messages -------------------------------------- */
.messages {
	margin-bottom:10px;
}

.message {
	border: 1px dotted #888;
	text-align:center;
	color:#888;
}

.message a.clear {
	color:#888;
}

/* ----------------------------------------- forms -------------------------------------- */
.formtable td, th { vertical-align: bottom; }
.button
{
	border: 0px;
	background-image: url(../pics/button_green_bg.jpg);
	color: #fff;
	cursor: pointer;
	padding: 3px 10px 3px 10px;
	font-size: 11px;
	font-weight: bold;
	background-repeat: repeat-x;
	background-color: #0a4644;
}
.button:hover
{
	text-decoration:underline;
}
ul.errorlist {
	margin-left:0px;
	margin-bottom:0px;
	color:#f00;
	list-style-type: none;
	padding:0px;
	text-align:left;
}
.errorlist li {
	display: block;
	font-size: 12px;
}

.edit {color:#777;}
a.edit, a.edit:hover, a.edit:visited, a.edit:active  {color:#777;}

textarea {background-color:#fff; height:60px; border: 1px solid #000; }

label {font-weight:bold}

.interview textarea {width:100%; height:100px; margin:7px 0 20px 0;}