﻿/*** Please keep via extra css clean

  "Manifest plainness, Embrace simplicity." --Lao-tzu 

** INDEX:

  ** Element styles - body, table, h1, et cetera.

  ** Basic Structure - styles for basic page-layout.
    -- Left Column
    -- Center Column

  ** Common styles - nav, htmlarea, footer, common components.

  ** View styles - for all non-common.
    -- Article
    -- Project

**/

/** Basic element styles, resets ***************************************/

/** RESETS **/
body, html, form { padding: 0px; margin: 0px; }
table { border-collapse: collapse; }
td, th { 	padding: 0px; vertical-align: top; text-align: left; }

/** Styles **/
body {
	padding: 0;
	margin: 0;
	background-color: #fafafa;
	background-image: url('../../images/body_bg.jpg');
	background-repeat: repeat-x;
	font-family: arial, sans-serif;
	font-size: 12px;
	}
		
h1 {
	margin: 0;
	margin-bottom: 20px;
	padding: 0;
	padding-top: 2px;
	font-size: 18px;
	font-weight: bold;
	color: #5e5a56;
	}

h2 {
	display: block;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 10px;
	margin-top: 0;	
	padding: 0;
	color: #5e5a56;
}


a {
	color: #0097dd;
	text-decoration: none;
	}
    a:hover {
	    text-decoration: underline;
	    }	
    a:visited {
        color:#5c8ca3;
    }
	
/*** Basic Structure ******************************************/
		
div#page {
	width: 890px;
	height: auto;
  border-top: 0px;
  margin: 0 auto;
	background-color: white;
	border-left:1px #333 solid;
}

div#page_plain {
	width: 890px;
	height: auto;
    border-top: 0px;
	margin: 0 auto;
	background-color: white;
	border-left:1px #333 solid;
	border-right:1px #333 solid;
}

table#content {
  width: 890px;
}
	table#content td.left {
		width: 195px;
		/*border-right: 1px solid #333;*/
	}
	table#content td.center {
		width: 694px;
		border-right: 1px solid #333;
		border-left: 1px solid #333;
	}


/** Left Column Structure**************************************/

#logo {
	background-color: white;
	display: block;
  clear: both;
	height: 35px;
  margin-bottom:8px;
	}
  #logo img {
    position: relative;
    left: 22px;
  }

div#left_content {
  margin-top:16px;
  width:100%;
}

/** Center Column Structure***********************************/

div#center_content {
  width: 470px;
  float: left;
  clear: left;
  margin: 10px;
  display: inline; /* fix ie-double-margin */
}
div#right_content {
  clear: right;
  float: right;
  width: 203px;  /*border-left: 1px solid black;*/
  padding-bottom: 9px;
}

#header { /** TODO What? Where is this? **/
	display: block;
	height: 35px;
	background-color: white;
	}

	
/** Common Styles *********************************************/
.right {float: right;}
.left {float: left;}

/** HTMLAREA CONTENT **/

div.htmlarea p 
{
	margin: 0 0 15px 0;
	padding: 0;
}
div.htmlarea h1{
	font-size: 22px;
	margin: 0 0 25px 0;
	padding: 0;
}
div.htmlarea h1 u {
    color: #0097dd;
    text-decoration: none;
}
div.htmlarea h2{
	font-size: 18px;
	margin: 0 0 20px 0;
	padding: 0;
}
    /** Override for the right column **/
    div#right_content div.htmlarea {
        font-size: 11px;
        color: #414141;
        margin: 9px 11px 9px 11px;
        border-bottom: 1px #a6a6a6 solid;
    }
    div#right_content div.htmlarea h1 {
        font-size: 18px;
        background: #fff;
        margin: 0 0 10px 0;
    }
        div#right_content div.htmlarea h1 u {
            color: #ff5e00;
            text-decoration: none;
        }

/*** NAV ***/

img#nav_left_bg, img#ctl00_nav_left_bg {
  background-image: url('../../images/navigation_bg_left.gif');
  width: 3px;
	height: 35px;
  float: left;
}

div#top_nav {
	display: block;
	height: 35px;
	/*background-color: black;*/
	background-image: url('../../images/navigation_bg.gif');
	background-repeat: repeat-x;
	padding-left: 15px;
	}

div#top_nav a {
	height: 35px; 
	display: block;
	float: left;
	}
	
div#top_nav a.topmenu_consulting {
	background-image: url('../../images/consulting.gif'); 
	width: 110px; 
	}
div#top_nav a.topmenu_consulting:hover {
	background-image: url('../../images/consulting_selected.gif'); 
	width: 110px; 
	}
	
div#top_nav a.topmenu_academy {
	background-image: url('../../images/academy.gif'); 
	width: 157px; 
	}
div#top_nav a.topmenu_academy:hover {
	background-image: url('../../images/academy_selected.gif'); 
	width: 157px; 
	}
	
div#top_nav a.topmenu_lead {
	background-image: url('../../images/lead.gif'); 
	width: 67px; 
	}
div#top_nav a.topmenu_lead:hover {
	background-image: url('../../images/lead_selected.gif'); 
	width: 67px; 
	}
	
div#top_nav a.topmenu_leaders {
	background-image: url('../../images/club.gif'); 
	width: 118px; 
	}
div#top_nav a.topmenu_leaders:hover {
	background-image: url('../../images/club_selected.gif'); 
	width: 118px; 
	}

div#top_nav a.topmenu_users,
div#top_nav a.topmenu_support {
	background-image: url('../../images/kayttotuki.gif'); 
	width: 117px; 
	}
div#top_nav a.topmenu_users:hover,
div#top_nav a.topmenu_support:hover {
	background-image: url('../../images/kayttotuki_selected.gif'); 
	width: 117px; 
	}

#page div#path_crumbs { margin-top: 3px; margin-left: 9px; float: left; display: inline; }
div#path_crumbs * { 
  color: #8d8d8c;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 10px;
  clear: left;
}
/* Logged in user / log out */
div#logged_user { 
  margin: 2px 11px;

  float: right;
  clear: right;
  margin-right: 11px; 
  color: #8d8d8c; 
  font-size: 11px;
}
span#log_out a { color: #ff5d04; }
span#log_out img { border: none; }

#user { /** TODO What? Where is this? **/
	text-align: right;
	color: #8d8d8c;
	font-size: 11px;
	background-color: white;
	width: 100%;
	padding-top: 2px;
	}
	
#user a {
	color: #ff5f00;
	padding-right:14px;
	}

#logout {
	background-image: url('../../images/logout.gif');
	background-repeat: no-repeat;
	background-position: right;
	margin-right:10px;
	}		

div.file {
	font-size: 11px;
	display: inline;
}
	div.file .filesize {
		color: #999;
	}
	
.return_file_delete 
{
	color: Red !important	;
	padding: 0 !important;
}
	
/* Footer styles */
#footer {
	text-align: center;
	color: white;
	font-size: 11px;
	background-image: url('../../images/footer_bg.gif');
	background-repeat: repeat-x;
	height: 22px;
	float: bottom;
	border-left: 1px #333 solid;
	border-right: 1px #333 solid;
	}
#copy {
	padding-top: 4px;
  }			

/** View Styles (PUBLIC) ************************************************/
/* Yleisia tyyleja */
a.internal_link {
    display:block;
    padding-left: 10px;
    background:url(../../images/bullet_arrow_orange.gif) no-repeat 0 4px;
}
img.palauta {
    float: right;
    border: 0;
    margin-right: 10px;
    }
/* Otsikkotyylit */
div#center_content h1 {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0px;
  margin-bottom: 0px;
}
/* Otsikkotekstityyli */
div#left_content h1, div#left_content h2,
div#right_content div.expandable .title,
div#right_content div.expandable .expand_ctrls a {
    height: 26px;
    margin-bottom: 0px;
    padding-left: 5px;    

    line-height: 22px;
    font-size: 12px;
    font-weight: bold;
    color: #fff; 
    text-transform: uppercase;
}

/** Otsikkotaustatyyli **/
div#left_content h1, div#left_content h2,
div#right_content h1, div#right_content h2 {
    background: url('../../images/heading_background.gif') repeat-x; 
}
div#left_content h2, div#right_content h2 {
    background-image: url('../../images/heading_background_orange.gif');
    line-height:26px;
    }


/* Tekstikappaletyylit */

div#left_content div.item, div#right_content div.expandable div.item, div#right_content div.expandable p {
  font-size: 11px;
  color: #0097dd;
  padding: 6px 6px 9px 6px;
  margin: 0px;
  clear: both;
}

div#right_content div.expandable p {
  font-size: 11px;
  color: #9b9b9b;
  padding: 6px 6px 9px 6px;
  margin: 0px;
  clear: both;
}

/* raidat */
div#left_content div.even, div#right_content div.even {
  background-color: #ebebeb;
}

div#left_content div.item div.date_range {
  color: #9e9e9e;
  clear: both;
  font-size: 10px;
}

div#center_content div.date_range {
  font-size: 14px;
  color: #666666;
  clear: both;
}


/** Oikuri / Projektitiedostot **/
/* Ei eri väriä visited linkeille saman värisiks */
div#right_content a {
    color: #0097dd;
}
div#right_content div.expandable {
  background: url('../../images/heading_background.gif') top repeat-x; 
}

div#right_content .orange {
  background: url('../../images/heading_background_orange.gif') top repeat-x !important; 
}

div#right_content div.expandable div.title {
  float: left;
  line-height: 26px;
}

div#right_content div.expandable div.expand_ctrls {
  line-height: 26px;
  height: 26px;
  margin-left: 163px;
}
div#right_content div.expandable div.expand_ctrls a {
  margin: 1px;
  font-size: 17px;
  line-height: 26px;
}

div#right_content div.expandable div.expand_ctrls a.minus {
  vertical-align: 1px;
}

div#right_content div.item a {
  display: block;
  background:url(../../images/bullet_blue.gif) no-repeat 2px 3px;
  background-repeat: no-repeat;
  padding-left: 14px;
}

div#right_content div.expanded a {
    background-image: url('../../images/bullet_blue_expanded.gif');
}

div#right_content div.item a.highlight {
    color: #ff5e00;
    font-weight: bold;
    background-image: url('../../images/bullet_orange.gif');
}

div#right_content div.expanded a.highlight {
  background-image: url('../../images/bullet_orange_expanded.gif');
}

div#right_content ul.item_files {
    margin: 0 0 0 8px;
    padding: 0;
    list-style-type: none;
}
    div#right_content ul.item_files li{
        margin: 0;
        font-size: 11px;
        padding: 0 0 0 1px;
        list-style-type: none;
        background:url(../../images/bullet_arrow_angled_blue.gif) no-repeat 2px 4px;
    }
    div#right_content ul.item_files li.hoist{
        margin: 0;
        font-size: 11px;
        padding: 0 0 0 1px;
        list-style-type: none;
        background:url(../../images/bullet_arrow_angled_orange.gif) no-repeat 2px 4px;
    }
        div#right_content ul.item_files li a{
            background: transparent;
            font-weight: normal;
            display: inline;
        }
        div#right_content ul.item_files li.hoist a{
            color: #ff5d04;
            background: transparent;
            font-weight: normal;
            display: inline;
        }
            div#right_content ul.item_files li a span.filesize{
                color: #8e8e8e;
            }

div#right_content p a.expanded_item {
  font-weight: bold;
}

/* upload, filebrowse, button */
div#right_content .upload select {
  margin-top: 5px;
  font-size:smaller;
  width:190px;
}

div#right_content .upload div.fileup {
  margin-top: 5px;
  width: 130px;
}
div#right_content .upload input.filebrowse {
  font-size: smaller;
}
div#right_content .upload input.button 
{
	/* ei tartte enää -jm (ImageButton ftw) */
}

/**************
side navigation
***************/

	ul#side_menu {
		list-style-type: none;
		marker-offset: 0;
		padding: 10px 0 0 20px;
		margin: 0 0 0 20px !important;
		text-indent: 0;
		
	}
	ul#side_menu li { 
		background: none !important;
		list-style-type: none;



	}
		ul#side_menu li a {
			display: block;
			color: #0097dd;
			text-decoration: none;
			font-weight: normal;
			font-size: 11px;
			line-height: 12px;
			margin: 4px 0;
		}
		ul#side_menu li a.inactive { color: #555; }
		ul#side_menu li a.inactive:hover { color: #0097dd; }
		ul#side_menu li a.active   { color: #0097dd; }
		ul#side_menu li a.active_parent   { color: #0097dd; }
		ul#side_menu li a.active_parent:hover   { color: #0097dd; }
		
	ul#side_menu li.level_1 { padding-left: 0px; }
		ul#side_menu li.level_1 a {
			background: url('../../images/left-menu-level1.gif') no-repeat;
			background-position: 2px 3px;
			padding-left: 11px;
		}
		ul#side_menu li.level_1 a.active {
			font-weight: bold;
		}
		ul#side_menu li.level_1 a.active_parent {
			font-weight: bold;
		}
	ul#side_menu li.level_2 { 
		padding-left: 10px; 
	}
		ul#side_menu li.level_2 a {
			background: url('../../images/left-menu-level2.gif') no-repeat;
			background-position: 2px 3px;
			padding-left: 11px;
		}
		ul#side_menu li.level_2 a.last {
			margin-bottom: 5px;
		}
	ul#side_menu li.level_3 { 
		padding-left: 20px; 

	}
		ul#side_menu li.level_3 a {
			background: url('../../images/left-menu-level2.gif') no-repeat;
			background-position: 2px 3px;
			padding-left: 11px;
		}


/* Plainin tyylit (Login jne ********************/
div#page_plain {
    color: #605b57;
}
div#page_plain h1 {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0px;
    margin-bottom: 0px;
}
div#page_plain h2 {
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0px;
    margin-bottom: 0px;
    text-transform: none;
}
div#page_plain p {
    width: 400px;
}
span.light_blue {
    color: #01a3f8;
}
div#content_plain {
    width: 400px;
}
div.form_plain {
    width: 235px;
    font-size: 11px;
}
    div.form_plain .input_text {
        width: 230px;
    }

