/* --- Base layout --- */
body {
	margin-left: 10px; 
	margin-top: 10px;
	background: #aaaaaa;
    color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
}

table.page_layout {
	width: 95%;
	border: #000000 solid 1px;
	border-collapse: collapse;
}

/* --- Page components --- */
td.page_header {
	width: 100%;
	height: 174px; /* Should be same as header_logo, header_menu and header_navi total height */
	background: #333333 url('images/logopics/ylalogo_23.jpg') top left no-repeat;
;
}

img.header_logo_pic {
	padding: 0px;
	margin 0px;
	border: none;
	float: right;
}

td.page_side {
	width: 160px;
	background: #dddddd;
	border-right: #aaaaaa solid 1px;
	border-bottom: #000000 solid 1px;
	vertical-align: top;
	text-align: left;
}

td.page_main {
	width: 100%;
	background: #ffffff;
	vertical-align: top;
	text-align: left;
}

/* --- Header components --- */
div#header_logo {
	width: 100%; 
	height: 140px; 
	background: url('images/trellet_logo.gif') top right no-repeat;
}

div#header_menu {
	width: 100%; 
	height: 20px; 
	background: #005da4;
	border: #000000 solid 1px;
}

div#header_navi {
	vertical-align: middle;
	text-align: left;
	width: 100%; 
	height: 16px;
	background: #dddddd; 
	border-bottom: #aaaaaa solid 1px;
}

/* --- Header menu styles --- */
table.header_menu {
	width: 100%;
	height: 20px; /* Should be same as header_menu height */
	border-collapse: collapse;
}

td.header_menu_item {
	font-size: 12px;
	font-weight: bold;
	vertical-align: middle;
	text-align: center;
	background: #000000;
	opacity: .60;
  	filter: alpha(opacity=60);
}

td.header_menu_item:hover {
	font-size: 12px;
	font-weight: bold;
	vertical-align: middle;
	text-align: center;
	background: #000000;
	opacity: .95;
    filter: alpha(opacity=95);
    cursor: pointer;
}

/* --- Navigation menu styles --- */
a.header_navi:link, a.header_navi:active, a.header_navi:visited {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    text-decoration: none;
    color: #4a4a6a;
}

a.header_navi:hover {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    text-decoration: none;
    color: #000000;
}

/* --- Header menu link styles --- */
a.header_menu_item:link, a.header_menu_item:active, a.header_menu_item:visited, a.header_menu_item:hover {
    text-decoration: none;
    color: #ffffff;
}

/* --- Default link styles --- */
a:link, a:active, a:visited {
	text-decoration: none;
    color: #4a4a6a;
}

a:hover {
	text-decoration: underline;
    color: #000000;
}

/* --- General styles used all over the pages --- */
table.inner_layout {
	width: 100%;
	height: 100%;
	border-collapse: collapse;
}

td.inner_layout {
	text-align: left;
	vertical-align: top;
}

/* --- Form styles --- */
td.form_request_rj {
	text-align: right;
    vertical-align: top;
}

td.form_request_lj {
	text-align: left;
    vertical-align: top;
}

input.form_input, textarea.form_input {
    background-color: #eeeeee;
    color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    border: solid 1px #aaaaaa;
}

select.form_select, select {
    background-color: #eeeeee;
    color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    border-top: solid 1px #aaaaaa;
    border-right: solid 1px #aaaaaa;
    border-left: solid 1px #aaaaaa;
    border-bottom: solid 1px #aaaaaa;
}

input.form_button, button.form_button {
    background-color: #aaaaaa;
    color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    border: solid 1px #666666;
}

/* --- Calendar styles --- */

td.calendar_title {
        cursor: default;
       	height: 16px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
        text-align: center;
        text-decoration: none;
        vertical-align: middle;
}

td.calendar_navi {
        cursor: pointer;
        height: 16px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 13px;
    	font-weight: bold;
        text-align: center;
        text-decoration: none;
        vertical-align: middle;
}

td.calendar_weekday {
        cursor: default;
        width: 20px;
        height: 16px;
        background-color: #dddddd;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 9px;
        text-align: center;
        vertical-align: middle;
}

td.calendar_day {
        cursor: pointer;
        width: 20px;
        height: 16px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
        text-align: center;
        vertical-align: middle;
}

td.calendar_today {
        cursor: pointer;
        width: 20px;
        height: 16px;
	    font-family: Verdana, Arial, Helvetica, sans-serif;
 		font-size: 10px;
	    font-weight: bold;
 		background-color: #f3f3f3;
 	   	border: solid 1px #000000;
        text-align: center;
        vertical-align: middle;
}

td.calendar_note {
        cursor: pointer;
        width: 20px;
        height: 16px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	font-weight: bold;
    	color: #003300;
        border: solid 1px #ffffff;
        background-color: #aaffaa;
        text-align: center;
        vertical-align: middle;
}

td.calendar_note_today {
        cursor: pointer;
        width: 20px;
        height: 16px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	font-weight: bold;
    	color: #003300;
    	background-color: #aaffaa;
    	border: solid 1px #000000;
        text-align: center;
        vertical-align: middle;
}

/* --- News item styles --- */
table.news_item {
	width: 100%;
	border-collapse: collapse;
}

td.news_logo {
	width: 40px;
}

td.news_title {
	vertical-align: center;
	text-align: left;
	font-weight: bold;
	font-size: 14px;
}

td.news_body {
	vertical-align: top;
	text-align: justify;
}

td.news_time {
	vertical-align: top;
	text-align: right;
	font-style: italic;
	font-size: 10px;
}

td.news_sepl {
	height: 12px;
	background: url('images/separator_left.jpg') no-repeat;
	background-position: center left;
}

td.news_sepr {
	height: 8px;
	background: url('images/separator_right.jpg') no-repeat;
	background-position: center right;
}

span.news_category {
	color: #7f7f7f;
	font-size: 10px;
	margin-bottom: 4px;
}

/* --- ABOUT item styles --- */
table.about_item {
	width: 100%;
	border-collapse: collapse;
}

td.about_title {
	vertical-align: top;
	text-align: left;
	font-weight: bold;
	font-size: 14px;
}

td.about_body {
	vertical-align: top;
	text-align: justify;
}

td.about_sepl {
	height: 8px;
	background: url('images/separator_left.jpg') no-repeat;
	background-position: center left;
}

td.about_sepr {
	height: 8px;
	background: url('images/separator_right.jpg') no-repeat;
	background-position: center right;
}

/* --- Collapse/open button --- */
td.collapse {
	width: 10px;
	text-align: right;
	vertical-align: bottom;
}

div.collapse {
	cursor: pointer;
	font-size: 9px;
	text-align: center;
	vertical-align: center;
	color: #7f7f7f;
	border: 1px solid #aaaaaa;
}

/* --- Trellesanomat --- */
td.ts_image{
	width:180px;
}

td.ts_text{
	vertical-align: top;
	text-align: left;
}

li.ts{
	margin-left: 2em;
}

span.ts_header{
	font-size: 150%;
	font-weight: bold;
}

/* --- Main menu (Smartmenus) --- */

/* The "clearFix" class is used for clearing the main menu items because they
   are left-floated for horizontal main menus and we have to clear them if our main
   menu is relatively positioned (as in this example) so that the main menu box
   takes its place correctly on the page. We have to apply this class to the parent
   DIV of the root UL of our menu tree. Please take a look at section 6.1 in the
   SmartMenus User's Manual for a detailed explanation if you like. */

.clearFix:after { /* for modern browsers */
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearFix { /* for IE7/Win */
    min-height:1px;
}
* html .clearFix { /* for IE5-6/Win */
    height:1px;
}

.smartMenuItem {
	width: 80px;
}

.smartSubMenuItem {
}

/* --- Main menu (TigraMenu) --- (NOT USED)*/

/* blue grades - root level; text properties for states: normal, hover, click */
.TM0i0 {
	font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	padding: 4px;
}

/* blue grades - root level; box properties for states: normal #4a98d3; */
.TM0o0 {
	background: #005da4;
	border: 1px solid #000000;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
}

/* blue grades - root level; box properties for states: hover, click */
.TM0o1 {
	background: #4D99E6;
	border: 1px solid #000000;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
}

/* blue grades - sub levels; box properties for states: normal */
.TM1o0 {
	background: #4D99E6;
	border: 1px solid #000000;
	text-align: left;
	vertical-align: middle;
	text-decoration: none;
}

/* blue grades - sub levels; box properties for states: hover, click */
.TM1o1 {
	background: #005da4;
	border: 1px solid #000000;
	text-align: left;
	vertical-align: middle;
	text-decoration: none;
}