html,body{
	height:100%;
	width:100%;
}
body{
	margin: 0 0 0 0;
	font-family: Kalinga, Helvetica, "Trebuchet MS", Arial;
	font-size:11px;
	white-space:nowrap;
}
a{
	text-decoration:none;
	color:#000;
}
a:hover{
	text-docoration:underline;
}

.main-color{
	color:#ffde17;
}

.button{
	background-color:#ffde17;
	color:#000;
	padding:8px 20px 8px 20px;
	margin:5px;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.button:hover{
	background-color:#333333;
	color:#fff;
}

#logo{
	width:84px;
	height:84px;
	background:url(../img/topbar/logo.png) center center no-repeat;
	position:absolute;
	left:0;
	top:10;
	z-index:999999;
}
#top{
	width:100%;
	background-color:#373838;
}
#top_bar{
	display:block;
	background:url(../img/topbar/top_intranet.png) left top no-repeat;
	background-color:#373838;

	height:24px;
	padding-left:200px;
	padding-top:6px;
	margin-left:70px;
	width:1040px;

	color:#fff;
	font-size:12px;
}
#top_bar_greeting{
	display:inline-block;
	background:url(../img/topbar/ico_arrow-down-round.png) left center no-repeat;
	padding-left:30px;
	width:655px;
	border-right:1px solid #fff;
}
#top_bar_time{
	display:inline-block;
	width:110px;
	padding-left:10px;
	padding-right:10px;
	color:#ccc;
	text-align:right;
	border-right:1px solid #fff;
}
#top_bar_date{
	display:inline-block;
	width:200px;
	padding-left:5px;
	color:#ccc;
}
.content-left{
	display:inline-block;
	width:245px;
	height:90%;
	vertical-align:top;
	z-index:0;
}

.content-right{
	display:inline-block;
	margin-left:10px;
	margin-top:15px;
	margin-right:0;
	vertical-align:top;
	width:78%;
}
.content-right-left{
	float:left;
	width:700px;
}
.content-right-right{
	display:inline-block;
	/* width:290px;
	width:35%; */
	width: calc(100% - 710px);
	padding-left:5px;
	margin-left:5px;
}

/* Fieldset */
.formtitle{
	/* display:none; */
}
fieldset{
	border:none;
	margin-top:5px;
}
fieldset legend{
	background:#ffde17;
	color:#000;
	text-align:center;
	padding:5px;
	font-weight:bold;
	width:100%;
	margin-top:5px;
}
input, textarea, select{
	padding:5px;
	margin:3px;
	border:solid 1px #ccc;
}

fieldset.frmuser_personal{
	background:url(../img/bg/bg_frmuser_personal.png) no-repeat 5% 50%;
}
fieldset.frmuser_contact{
	background:url(../img/bg/bg_frmuser_contact.png) no-repeat 5% 50%;
}
fieldset.frmuser_emergency{
	background:url(../img/bg/bg_frmuser_emergency.png) no-repeat 5% 50%;
}
fieldset.frmuser_job{
	background:url(../img/bg/bg_frmuser_job.png) no-repeat 5% 50%;
}
fieldset.frmuser_access{
	background:url(../img/bg/bg_frmuser_access.png) no-repeat 5% 50%;
}

/* Icon */
.btn-edit {
	background: url("../img/icon/ico_edit.png") no-repeat;
}
.btn-delete {
	background: url("../img/icon/ico_delete.png") no-repeat;
}

.ico_plane{
	background:url(../img/icon/ico_plane.svg) center center no-repeat;
}
.ico_chat{
	background:url(../img/icon/ico_chat.svg) center center no-repeat;
}

.icon_15x15{
	display:block;
	width:15px;
	height:15px;
	background-size: 15px 15px;
}

.sbn_ico-search{
	background:url(../img/icon/ico_search-bg.png) bottom no-repeat;
	border:none;
	width:28px;
	height:22px;
	margin-left:2px;
}
/* Notice */
#div_notice{
	background:url(../img/icon/ico_notice.jpg) left center no-repeat;
	background-color:#999999;
	height:30px;
	margin-bottom:5px;
	padding-left:30px;
}
.tickercontainer { /* the outer div with the black border */
	width: 650px;
	height: 20px;
	margin: 0;
	padding: 0
	overflow: hidden;
}
.tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
	position: relative;
	left: 10px;
	top: 8px;
	width: 650px;
	height:15px;
	overflow: hidden;
}
ul.newsticker { /* that's your list */
	position: relative;
	left: 750px;
	font: 14px Verdana;
	color:#fff;
	list-style: none;
	list-style-type:none;
	margin: 0;
	padding: 0;
}
ul.newsticker li {
	float: left;  /* important: display inline gives incorrect results when you check for elem's width */
	margin-right: 150px;
	padding: 0;
	list-style:none;
	white-space: nowrap;
	display:block;
}

/* News Announcement */
#section_news{
	background-color:#000407;
	margin-top:20px;
}
.section_title{
	background-color:#ffde17;
	padding:3px 10px 3px 10px;
	color:#373838;
	font-size:14pt;
	font-weight:bold;
}
#section_news_content{
	height:300px;
	overflow:auto;
	padding:20px;
}
.box_news{
	clear:both;
	padding-top:25px;
}
	.box_news_photo,.box_news_title, .box_news_postbydate, .box_news_postby, .box_news_date, .box_news_content{
		vertical-align:top;
	}

	.box_news_photo{
		width:160px;
		height:100px;
		margin-right:10px;
		float:left;
	}
	.box_news_photo img{
		height:100px;
		width:auto;
	}
	.box_news_title{
		color:#fff;
		font-size:12pt;
		font-weight:bold;
	}

	.box_news_postbydate{
		padding:2px;
	}
	.box_news_postby, .box_news_date{
		color:#ffde17;
		font-weight:bold;
	}
	.box_news_date{
		float:right;
		margin-right:5px;
	}
	.box_news_content{
		width:100%;
		color:#EFEFEF;
		white-space: pre-line;
	}
		.box_news_content a{
			color:#ffde17;
			float:right;
			padding-right:5px;
		}
.box_newslist{
	clear:both;
	display:block;
}
	.box_newslist_photo,.box_newslist_title, .box_newslist_postbydate, .box_newslist_postby, .box_newslist_date, .box_newslist_content{
		vertical-align:top;
	}

	.box_newslist_photo{
		width:160px;
		height:100px;
		margin-right:10px;
		float:left;
	}
	.box_newslist_photo img{
		height:100px;
		width:auto;
	}
	.box_newslist_title{
		font-size:13pt;
		font-weight:bold;
		clear:both;
		width:60%;
		display:inline-block;
	}

	.box_newslist_postbydate{
		padding:2px;
		margin:0;
	}
	.box_newslist_postby, .box_newslist_date {
		font-weight:bold;
	}
	.box_newslist_postbydate .box_news_postby, .box_newslist_postbydate .box_news_date{
		color:#666;
	}
	.box_newslist_date{
		float:right;
	}
	.box_newslist_content{
		white-space: pre-line;
		height:70px;
		text-align:left;
		width:80%;
		display:block;
	}
	.box_newslist_readmore{
		float:right;
		margin-top:20px;
	}

#section_profile{
	background-color:#999999;
	height:70px;
	border:1px solid #999999;
}
#section_profile_namebox{
	background-color:#666;
}
#section_profile_name{
	color:#fff;
	text-align:center;
	font-size:11px;
	text-transform : uppercase;
	padding:4px;
}
#section_profile_tick{
	background:url(../img/svg/arrow_white-down.svg) no-repeat #333 center center;
	height:21px;
	width:21px;
	float:right;
	cursor:pointer;
}
#section_profile_linkbox{
	background-color:#000;
	padding:10px;
	width:110px;
	position:absolute;
	top:0;
	right:0;
	display:none;
}
#section_profile_linkbox a{
	color:#fff;
	text-decoration:none;
}
#section_profile_linkbox a:hover{
	color:#ffde17;
	text-decoration:none;
}

#section_profile_jobtitle{
	text-align:center;
	padding-top:12px;
	color:#fff;
	font-weight:bold;
	font-size:12px;
	white-space:normal;
}

#section_topic{
	background-color:#000;
	border:1px solid #999999;

	margin-top:10px;
}
	#section_topic_content{
		color:#fff;
		padding:10px;
		height:475px;
		overflow:auto;
	}
		.topic_box{
			clear:both;
			margin-bottom:20px;
		}
		.topic_nicknamebox{
			padding:0;
			margin:0;
			color:#fff;
			font-weight:bold;
			font-size:12px;
			white-space:normal;
			background-color:#ffde17;
		}
		.topic_nickname{
			display:inline-block;
			width:95px;
			padding:3px 0 3px 5px;
		}
		.topic_categorynamebox{
			float:right;
			background-color:#999;
			width:73px;
			font-size:10;
			display:inline-block;
			text-align:center;
			padding:3px 0 3px 5px;
		}
		.topic_msgbox{
			background-color:#666;
			padding:5px;
			height:40px;
			overflow:auto;
			overflow-x:hidden;
		}
			.topic_msg{
				white-space:normal;
			}
			.topic_image{
				width:150px;
				height:auto;
			}
			.svg_clip{
				background:url(../img/svg/clip.svg) no-repeat;
			}
.input_grey{
	background:#666;
	color:#fff;
	border:none;
	font-size:11px;
	padding:3px 6px 3px 6px;
}
.input_grey_submit{
	background:#666;
	color:#fff;
	border:none;
	font-size:11px;
}

.formsearch div, .formcolumn div{
	white-space : normal;
}
/* Intranet */
h1.title{
	font-size:12pt;
	background-color:#ffde17;
	text-align:center;
	font-weight:3;
	color:#000;
	padding:3px;
	vertical-align:middle;
}
/* Icon */
.ico_filetype_pdf{
	background:url(../img/icon/ico_filetype_pdf.png) center center no-repeat;
}
.ico_hr_organizationchart{
	background:url(../img/svg/organizationchart.svg) no-repat bottom left;
	display:block;
	text-indent: -9999px;
	width:100px;
	height:100px;
	background-size: contain;
}

/* Form & Policies Department Menu List */
#menu8 {
	width:200px;
	margin-top: 10px;
}

#menu8 li a {
	text-decoration: none;
	height: 32px;
  	voice-family: "\"}\"";
  	voice-family: inherit;
  	height: 24px;
}

#menu8 li a:link, #menu8 li a:visited {
	color: #fff;
	display: block;
	background: url(../img/bg/bg_menu_department.gif);
	padding: 8px 0 0 20px;
}

#menu8 li a:hover {
	color: #257EB7;
	background: url(../img/bg/bg_menu_department.gif) 0 -32px;
	padding: 8px 0 0 25px;
}

#menu8 li a.active {
	color: #fff;
	background: url(../img/bg/bg_menu_department.gif) 0 -64px;
	padding: 8px 0 0 25px;
}

#menu8 ul {
	width:200px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.searchtitle{
	/*color:#ffde17;*/
	font-weight:bold;
}

/* Acordeon styles */
.tab {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  color: #fff;
  overflow: hidden;
}
.tab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.tab label {
  position: relative;
  display: block;
  padding: 0 0 0 1em;
  background: #47433E;
  font-weight: bold;
  line-height: 3;
  cursor: pointer;
}
.tab-content {
  max-height: 0;
  overflow: hidden;
  background: #A9A9A9;
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
}
.tab-content p {
  margin: 1em;
}
/* :checked */
.tab input:checked ~ .tab-content {
  max-height: 100vh;
}
/* Icon */
.tab label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3;
  text-align: center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}
.tab input[type=checkbox] + label::after {
  content: "+";
}
.tab input[type=radio] + label::after {
  content: "\25BC";
}
.tab input[type=checkbox]:checked + label::after {
  transform: rotate(315deg);
}
.tab input[type=radio]:checked + label::after {
  transform: rotateX(180deg);
}
.tab a{
	text-decoration:none;
	color:#fff;
}
.tab label{
	text-align:left;
	width:100%;
}

/* Modal */
.modal-window {
  position: fixed;
  background-color: rgba(200, 200, 200, 0.75);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.modal-window:target {
  opacity: 1;
  pointer-events: auto;
}

.modal-window>div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 2rem;
  background: #fff;
  color: #444;
}

.modal-window header {
  font-weight: bold;
}

.modal-close {
  color: #aaa;
  line-height: 50px;
  font-size: 80%;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 70px;
  text-decoration: none;
}

.modal-close:hover {
  color: #000;
}

.modal-window h1 {
  font-size: 150%;
  margin: 0 0 15px;
}