@charset "UTF-8";

/*	Project:			The Post Publishing Public Company Limited
	Version:			2.0 (iPostToday)
	Author:				Samart Ya-Hyaman
	Department:			Post Digital
	copyright:			since 2009 The Post Publishing Public Company Limited
	
	modified by:		radiz
	latest updated on:	20 May 2009
	
	......................................................................... */


/*	RESET:
	......................................................................... */
	* {margin: 0; padding: 0; outline: none;}

	body {
		font-family: "Lucida Grande", Arial, Helvetica;
		font-size: 13px;
		color: rgb(102,102,102);
	}

	a {color: rgb(65,92,158);}
	a:hover {color: rgb(65,92,158); text-decoration: none;}

	img, fieldset {border: none;}	
	p {line-height: 20px; margin-bottom: 18px;}
	em {color: rgb(153,153,153); font-style: normal;}
	strong {color: rgb(85,85,85);}
	ul {list-style:  none; line-height: 18px;}
	ol {margin-left: 22px;}	
	
	h2 {
		color: rgb(65,92,158); 
		font-size:20px; 
		font-weight: normal; 
		padding: 5px 0 5px;
		text-transform: uppercase;
		border-bottom: 2px solid #415c9e;  
		margin-bottom: 15px;
	}
	h2.underline { border-bottom: 2px solid #415c9e; padding-bottom: 5px; margin-bottom: 15px;}
	
	h3 {color: rgb(85,85,85); font-size: 13px;}
	h4 {color: rgb(85,85,85); font-size: 15px; font-weight: normal;}
	
	.noBorder { border: none !important;}

/*	DEFAULT STRUCTURE CONTROL: 
	......................................................................... */
	
	#wrapper {margin: 18px auto; width: 950px;}
	#wrapper #headerWrapper {margin-bottom: 54px; width: 950px;}	
	#wrapper #container {margin-bottom: 36px; width: 950px;}
	
	#container #mainNavigation {
		border-top: 1px solid rgb(207,207,207);
		float: left;
		width: 224px;
	}
	
	#container #toc {
		/*border-top: 1px solid rgb(207,207,207);*/
		float: right;
		/*padding-top: 10px;*/
		width: 708px;
		overflow: hidden;
	}
	#container .overline { border-top: 1px solid rgb(207,207,207); padding-top: 10px;}
	
	#wrapper #footerWrapper {
		border-top: 1px solid rgb(207,207,207);
		padding-top: 10px;
		width: 950px;
		clear: both;
	}


/*	DEFAULT CONTENTS CONTROL:
	......................................................................... */	
	
	#wrapper .productContent h3 {color: rgb(85,85,85); font-size: 18px; font-weight: normal;}
	#wrapper .infoContent h3 {color: rgb(70,93,156); font-size: 13px;}
	#wrapper .noBold { font-weight: lighter!important;}
	#wrapper #toc ul, #wrapper #toc ol {margin-bottom: 18px;}
	#wrapper #toc ul.list { overflow: hidden; padding-left: 30px;}
	#wrapper #toc ul.list li { padding-bottom: 10px; list-style: outside;}
	
	#wrapper .marginRightNone {margin-right: 0 !important;}
	#wrapper .floatLeft {float: left; margin-right: 18px; margin-top: 5px;}
	#wrapper .boderTop {border-top: 1px solid rgb(207,207,207);}
	#wrapper .paddingBottom {padding-bottom: 18px;}
	p.thumbnail { float: left;}
	.latestNews p.readmore,.newsReleaseList p.readmore { float: right; margin-bottom: 5px;}


	/*	=defined for #header
		................................................................. */
		
		#headerWrapper h1 {
			background: url(../images/thePost_logo.gif) no-repeat;
			border-top: 1px solid rgb(207,207,207);
			float: left;
		}
		
		#headerWrapper h1 a {
			display: block;
			height: 100px;
			text-decoration: none;
			width: 345px;
		}
		
		#headerWrapper h1 a span {visibility: hidden;}
		
		#headerWrapper p {
			border-top: 1px solid rgb(207,207,207);
			float: right;
			font-family: "Helvetica Neue", Arial;
			font-size: 17px;
			/font-weight: bold;
			padding: 40px 0 0 18px; 
			width: 569px;
		}


	/*	=defined for #content
		................................................................. */								
		#mainNavigation li {width: 224px; overflow: hidden; border-bottom: 1px solid rgb(207,207,207);}
		#mainNavigation li a {
			width: 214px;		
			color: rgb(34,34,34);
			display: block;
			font-weight: bold;
			height: 13px;
			padding: 10px 5px;			
			text-decoration: none;
			outline: none;
			_overflow: hidden;
		}
		
		#mainNavigation li a:hover {color: rgb(65,92,158);}
		#mainNavigation li a.active {width: 214px; background: rgb(65,92,158); color: rgb(255,255,255);}
		#mainNavigation li a.active:hover {color: rgb(255,255,255);}
		
		#mainNavigation li span { color: #768ec8; font-size: 11px; margin-left: 5px;}
		#mainNavigation li ul {list-style: none;}
		#mainNavigation li ul li a {width: 189px; color: rgb(85,85,85); padding-left: 30px; font-weight: normal;}
		#mainNavigation li ul li a.active {width: 189px; /*background: none; color: rgb(65,92,158);*/ padding-left: 30px;}
		/*#mainNavigation li ul li a.active:hover {color: rgb(65,92,158);}*/

		#mainNavigation li ul.subNavigation li ul li { background: url(../images/icon/icon-second-subNav.png) no-repeat 93px 14px; padding-left: 40px; width: 224px; margin-left: -40px;}
		#mainNavigation li ul.subNavigation li ul li a { padding-left: 70px;}
		#mainNavigation li ul.subNavigation li ul li a.active { background: url(../images/icon/icon-second-subNav.png) no-repeat 53px 14px rgb(65,92,158);}
	/*	=defined for Panel is multiple
		#productCategory, #newspaperSection, #weeklySections,
		#threeMainSections, #navigationTab
		................................................................. */		
		
		#productCategory ul, #newspaperSection, .threeMainSectionsList, 
		#weeklySections, .digitalMediaList, .pocketBooksList ul, 
		.latestNews, .newsReleaseList, .newsReleaseList ul {
			width: 708px;
		}

		#productCategory ul li, #newspaperSection li, .threeMainSectionsList li, 
		.pocketBooksList ul li {
			float: left; margin: 0 18px 0 0; width: 224px;
		}
		
		.list-of-contents {list-style: disc outside; margin-left: 15px;}



	/*	=set h3 
		for panel need use ONLY
		................................................................. */	
		
		#container #toc h3 { margin-bottom: 5px; font-size: 18px; font-weight: normal; line-height: 22px;}
		#weeklySections h3, #threeMainSections h3 {
			border-bottom: 1px solid rgb(207,207,207);
			font-size: 15px !important;
			font-weight: normal;
			float: left;
			height: 25px;
		}

		#weeklySections h3 {width: 363px;}
		#weeklySections p {font-size: 12px; margin-bottom: 8px;}
		#threeMainSections h3 {width: 318px;}
			

	/*	=set #naviationTap 
		for panel need use ONLY
		................................................................. */
		
		#weeklySections #navigationTab {float: right; width: 345px;}
		#threeMainSections #navigationTab {float: right; width: 390px;}
		#internationalSections #navigationTab {float: right; width: 690px; padding-left: 18px;}


	/*	=defined for Panel is fix property
		#productCategory, #newspaperSection, #weeklySections,
		#threeMainSections, #navigationTab, #businessContact
		................................................................. */
		
		#productCategory {border-top: 1px solid rgb(207,207,207); padding-top: 10px; overflow: hidden;}
		#productCategory ul li a {color: rgb(51,51,51); text-decoration: none;}
		#productCategory ul li a img {border: 1px solid rgb(207,207,207); padding: 6px;}
		#productCategory ul li a:hover img {border: 1px solid rgb(73,125,170); padding: 6px;}

		#newspaperSection h3 {font-size: 15px !important; font-weight: normal;}

		#weeklySections dl, #internationalSections dl {clear: both; padding: 18px 0 36px; width: 708px;}
		#weeklySections dl dt, #internationalSections dl dt {float: left; margin-right: 18px;}

		#threeMainSections {clear: both;}
		#threeMainSections h4 {clear: both; padding-top: 18px;}
		
		.threeMainSectionsList {clear: both; margin-bottom: 0 !important;}
		.threeMainSectionsList li {font-size: 12px; margin-bottom: 0 !important;}
		.threeMainSectionsList li.threeCollumn {margin:0; width:708px;}

		#navigationTab {
			background: url(../images/bg/bg_border.gif) 0 100% repeat-x;
			height: 26px; 
			margin-bottom: 0 !important;
		}
		
		#navigationTab li {float: left;}
		#navigationTab li.borderRight {border-right: 1px solid rgb(207,207,207);}
		#navigationTab li a {
			border-color: rgb(207,207,207); 
			border-style: solid;
			border-width: 0 0 1px 1px; 
			color: rgb(85,85,85); 
			display: block; 
			padding: 3px 10px 4px; 
			text-decoration: none;
		}
		
		#navigationTab li a:hover {color: rgb(65,92,158);}
		#navigationTab li a.active {
			border-color: rgb(207,207,207) rgb(207,207,207) rgb(255,255,255) rgb(207,207,207) ;
			border-style: solid;
			border-width: 1px 0 1px 1px; 
			color: rgb(65,92,158);
			padding-bottom: 3px;
		}
		
		.vdoPresentation {
			background: url(../images/bg/bg_tv-radio.jpg) no-repeat; 
			height: 271px; 
			margin-bottom: 18px; 
			position: relative;
			width: 708px;
		}
		
		.vdoPresentation p {
			background: rgb(0,0,0); 
			height: 240px; 
			left: 20px; 
			position: relative; 
			top: 20px; 
			width: 300px;
		}
		
		.digitalMediaList {margin-bottom: 0 !important;}
		.digitalMediaList li {float: left; margin-right: 18px; width: 345px;}		
		
		.pocketBooksList h3 {
			border-top: 1px solid rgb(207,207,207); 
			clear: both; 
			color: rgb(65,92,158) !important; 
			font-size: 15px !important; 
			padding: 10px 0;
			width: 708px;
		}
		
		.pocketBooksList h4 {color: rgb(51,51,51) !important; font-size: 13px;}
		.pocketBooksList ul {clear: both; margin-bottom: 0 !important;}
		
		dl#contactInformation {border-bottom: 1px solid rgb(207,207,207);}
		
		dl#contactInformation dt {			
			color: rgb(70,93,156);
			display: block;
			padding: 10px 0;
			border-top: 1px solid rgb(207,207,207);
			cursor: pointer;
		}
		
		dl#contactInformation dt:hover {background: rgb(241,241,241);}
		
		dl#contactInformation dd {width: 708px;}
		dl#contactInformation dd h3 {color: rgb(85,85,85) !important;}
		dl#contactInformation dd h3 span {display: block;}
		dl#contactInformation dd ul {padding-left: 30px;}
		
		.latestNews h2, .newsReleaseList h2 {
			font-size: 15px !important; 
			margin-bottom: 10px; 
			padding: 0; 
			text-transform: none;
		}
		
		/*.latestNews h3, .newsReleaseList h3 {color: rgb(85,85,85) !important; font-weight: normal;}*/
		.latestNews h3 {font-size: 18px !important;}
		
		.latestNews h3 a, .newsReleaseList h3 a { /*color: rgb(85,85,85);*/ text-decoration: none;}
		.latestNews h3 a:hover, .newsReleaseList h3 a:hover {color: rgb(70,93,156); text-decoration: underline;}
		
		.latestNews .abbildungSubLevel1 {width: 345px; float: left; margin: 0 18px 0 0;}
		.latestNews .abbildungSubLevel1  img {width: 345px;}
		.latestNews .abbildungSubLevel2 {width: 224px; float: right; margin: 0 0 0 18px;}
		.latestNews .abbildungSubLevel2 img {width: 224px;}
		
		.abbildungMain em, .abbildungSubLevel1 em, .abbildungSubLevel2 em {font-style: italic; font-size: 12px;}
		p.abbildungMain img {width: 708px; margin-bottom: 7px;}
		p.abbildungMain em { font-size: 13px; font-style: normal; border-bottom: 1px solid #CCC; display: block; padding-bottom: 10px; margin-bottom: 12px;}
		
		.newsReleaseList h3 {font-size: 18px !important;}
		.newsReleaseList ul {border-top: 1px solid rgb(207,207,207);}
		.newsReleaseList ul li {width: 708px; border-bottom: 1px solid rgb(207,207,207); padding-top: 15px;}
		
		.pageNavigation {text-align: center;}
		.pageNavigation a {border: 1px solid rgb(207,207,207); margin: 0 1px; padding: 1px 5px; text-decoration: none;}
		.pageNavigation a:hover { background: rgb(65,92,158); color: rgb(255,255,255);}
		.pageNavigation a.active {background: none; border: none; color: rgb(85,85,85);}
		
		#businessContact {
			border-color: rgb(207,207,207);
			border-style: solid;
			border-width: 1px 0;
			padding-top: 5px;
		}
		
		#businessContact h3 {color: rgb(65,92,158) !important; font-size: 13px !important;}
	
	
	/*	=defined for address
		................................................................. */	
		address {font-style: normal; margin-bottom: 0 !important; padding-bottom: 10px;}
		address span {display: block;}

		#corpateMap {_display: inline;}				
		#corpateMap a {cursor: pointer; text-decoration: underline;}
		#corpateMap a:hover {text-decoration: none;}
		#corpateMap span {text-align: center;}
		
		
	/*	=defined for form
		................................................................. */	
		form label {
			color: rgb(65,92,158); 
			display: block; 
			font-size: 15px; 
			margin-bottom: 6px;
		}
		
		form select {width: 224px;}
		form textarea {width: 466px;}
		form img {margin-top: 6px;}	
		
		form #e-mail, form #code, form textarea {border: 1px solid rgb(65,92,158); padding: 2px;}
		form #e-mail:focus, form #code:focus, form textarea:focus {border: 2px solid rgb(65,92,158); padding: 1px;}
		
		#e-mail {width: 345px;}
		#code {width: 220px;}
					
		form .submit, form .reset {
			border: none; 
			cursor: pointer; 
			height: 21px; 
			width: 47px;
		}
		
		.submit {background: url(../images/button/btn_send.gif) no-repeat;}
		.reset {background: url(../images/button/btn_clear.gif) no-repeat;}
		
		
	/*	=defined for Clear
		................................................................. */		
		
		#headerWrapper:after, #container:after, #newspaperSection:after, 
		#weeklySections:after, #weeklySections dl:after, #threeMainSections:after, 
		.threeMainSectionsList:after, #internationalSections dl:after, .digitalMediaList:after, 
		.pocketBooksList ul:after, .latestNews:after, .newsReleaseList:after, 
		.newsReleaseList ul li:after {			
			content: '.';
			clear: both;
			display: block;
			height: 0;
			visibility: hidden;
		}
		
	/*	=defined for jQuery Effects
		................................................................. */
		
		.subNavigation {display: none; border-top: 1px solid #CFCFCF;}
		.toggle .subNavigation {display: block;}
		
		.err{color:red;}
		
	/* New modify 16 / 7 / 2012 by Ty */	
	
	#wrapper .newspaper ul { width: 708px; overflow: hidden;}
	#wrapper .newspaper ul li { width: 162px; height: 295px; padding: 0 20px 0 0; float: left;}
	#wrapper .newspaper ul li.last { padding: 0;}
	#wrapper .newspaper ul li a { display: block; text-align: center;}
	#wrapper .newspaper ul li a.thumbnail { height: 249px; width: 162px; margin-bottom: 10px; position: relative;}
	#wrapper .newspaper ul li a.thumbnail img { position: absolute; bottom: 0; left: 0;}
	
	#wrapper #container ul.active ul{ display: block;}
	
	#wrapper #footerWrapper p { margin-top: 15px;}
	
	#mainNavigation li.follow-facebook { border: none; padding-top: 8px;}
	#mainNavigation li.follow-facebook a { background: url(../images/icon/icon-facebook.png) no-repeat 5px center; padding: 0 8px; height: 26px; line-height: 12px; width: 95px;}
	#mainNavigation li.follow-facebook a span { padding-left: 23px; width: 75px; color: #999; display: block; padding-top: 1px;}
	#productCategory ul { clear: both;}
	#productCategory ul li { height: 200px;}
	#productCategory h2 { float: left;}
	#productCategory p.seeMore { float: left; width: 100px; margin: 8px 0 0 18px;}
	#productCategory p.seeMore a { background: url(../images/icon/icon-arrow.png) no-repeat right center; color: #666; width: 60px; display: block; text-decoration: none;}
	
	#wrapper #toc ul.achievement li { float: left; width: 340px;}
	#wrapper #toc ul.readmore, #wrapper #toc ul.listStyle { overflow: hidden;}
	#wrapper #toc ul.readmore li { width: 335px; float: left; background: url(../images/bg/list-style.gif) no-repeat left 12px; padding: 5px 0 5px 12px;}
	#wrapper #toc ul.listStyle li { background: url(../images/bg/list-style.gif) no-repeat left 12px; padding: 5px 0 5px 12px;}
	#wrapper #toc table.finance-HL tr th { color: #415c9e; width: 120px; padding: 10px 0; border-bottom: 1px solid #415c9e;}
	#wrapper #toc table.finance-HL tr th span { display: block;}
	#wrapper #toc table.finance-HL tr td { padding: 12px 25px 12px 0; border: none; text-align: right; border-bottom: 1px solid #eee;}
	#wrapper #toc table.finance-HL tr th.first, #wrapper #toc table.finance-HL tr td.first { width: 240px!important; text-align: left; padding-right: 0;}
	#wrapper #toc table.finance-HL tr.last td {border-bottom: 2px solid #415c9e; padding-bottom: 15px;}
	
	#financial-statement ul#navigationTab { padding-left: 50px;}
	div#tab1, div#tab2 { margin-top: 20px;}
	
	.annual-report, .executive-management, .board-director { overflow: hidden;}
	.annual-report li { width: 156px; float: left; padding: 0 50px 0 30px; height: 300px; overflow: hidden;}
	.annual-report li p.thumbnail { margin-bottom: 5px;}
	.annual-report li p { margin-bottom: 0px; text-align: center;}
	
	.executive-management li { width: 190px; float: left; padding: 0 31px 0 15px; height: 330px; overflow: hidden;}
	.executive-management li p, .board-director li p { margin-bottom: 0px; text-align: center; clear: both;}
	.executive-management li p.thumbnail { float: none;}
	.executive-management li p span, .board-director li p span { display: block;}
	
	.board-director li { width: 160px; float: left; padding: 0 50px 0 26px; height: 350px; overflow: hidden;}
	
	.history { float: right; width: 490px;}
	.history h3 { color: #415c9e; font-size: 18px;}
	#toc div p.thumbnail { margin-left: 30px;}
	.history p.intro { margin-bottom: 22px;}
	.history p { margin-bottom: 10px;}
	.history p span { color: #415c9e; text-transform: uppercase;}
	.history ul.listStyle { margin: -10px 0 10px 10px !important;}
	.history ul.listStyle li { padding-bottom: 0px !important;}
	
	ul.award-detail { overflow: hidden; margin: 10px 0 50px!important;}
	ul.award-detail li { width: 229px; float: left; padding: 0 5px; height: 300px;}
	ul.award-detail li.first { padding-left: 0px;}
	ul.award-detail li.last { padding-right: 0px;}
	ul.award-detail li p.thumbnail { margin-bottom: 5px;}
	ul.award-detail li p strong { color: #415c9e;}
	
	ul.award-detail.two-col li {width: 348px; height: auto; padding: 0;}
	ul.award-detail.two-col li.first {margin: 0 12px 0 0;}
	ul.award-detail.two-col li .thumbnail {float: none;}
	
	ul.csr-detail li { margin-bottom: 40px;}
	ul.csr-detail li.smallList { width: 349px; float: left; margin-right: 10px;}
	ul.csr-detail li.last { margin-right: 0;}
	ul.csr-detail li p { margin-bottom: 3px;}
	ul.csr-detail li p strong { color: #415c9e; display: block;}
	
	ul.csr-detail .two-col .thumbnail {float: left; width: 229px;}
	ul.csr-detail .two-col div {float: left; width: 465px; margin: 0 0 0 14px;}
	#container #toc ul.csr-detail li.last { border: none;}
	#container #toc .highlight {color: #415c9e; font-weight: bold;}
	#container #toc ul.csr-detail .two-col,#container #toc ul.csr-detail .three-col {padding: 0 0 20px; border-bottom: 1px solid #e7e5e5; overflow: hidden; margin: 0 0 25px;}
	#container #toc ul.csr-detail .two-col div h3,#container #toc ul.csr-detail .three-col div h3 {color:#425d9c; font-size: 13px; font-weight: bold; margin: 0 0 5px; line-height: 18px; }
	
	#container #toc ul.csr-detail .three-col .thumbnail {float: left; width: 470px;}
	#container #toc ul.csr-detail .three-col div {float: left; width: 225px;}
	
	.latestNews p.headline, .newsReleaseList p.headline { font-size: 15px; color: #415c9e; margin-bottom: 13px;}
	.latestNews em, .newsReleaseList em { margin-bottom: 5px; display: block;}
	#wrapper .latestNews { margin-bottom: 20px;}
	#wrapper .newsReleaseList { overflow: hidden;}
	#wrapper .newsReleaseList .floatLeft { height: 85px; overflow: hidden; margin: 0 10px 5px 0;}
	#wrapper .latestNews .floatLeft { height: 130px; overflow: hidden; margin: 0 10px 5px 0;}
	#wrapper .newsReleaseList div { width: 1416px;}
	#wrapper .newsReleaseList div ul { float: left; width: 708px; overflow: hidden;}
	
	#container #toc p.updated { color: #768EC8; margin-bottom: 30px;}
	.event-2015 {margin: -10px 0 0;}
	.event-2015 > p{float: left; width: 230px;}
	.event-2015 ul{ float: right; width: 445px; padding: 0;}
	.event-2015 .updated {clear: both; float: none; width: 100%;}
	
	.contain-blue {background:#f1f7fd; overflow:hiden; padding: 15px 15px 0; margin: 0 0 20px;}
	#container #toc .contain-blue h3 {font-size: 13px; font-weight: bold; color: #425d9c; margin: 0;}
	.contain-blue address {line-height: 18px; padding: 0 0 20px;}
	.contain-blue h4 {color: #666666; font-size: 13px; font-weight: bold; padding: 10px 0 0;}
	.contain-blue span {display: block;}
	.contain-blue p {padding: 12px 0 0;}
	.contain-blue p span:first-child {display: inline; font-weight: bold;}
	.contain-blue p span {display: block; font-weight: normal;}
	.contain-blue p:last-child {padding: 12px 0 15px;}
	#wrapper #toc ul.listStyle-default { overflow: hidden;}
	#wrapper #toc ul.listStyle-default li {padding: 3px 0; color: #666666; list-style: disc inside none; line-height: 18px;}
	
	/*headline*/
	.detail-hd {font-size: 14px!important; color:#333!important;font-weight: bold!important; text-decoration: none!important;}
	/*headline link*/
	#container #toc .hd-link a{font-size: 14px; color:#415c9e;font-weight: bold; text-decoration: underline;}
	#container #toc .hd-link a:hover{text-decoration:none;}
	#container #toc .event-2015 h3{float:left; padding:0 0 10px 20px;}
	#container #toc .listing-award li {width:708px; overflow:hidden; height:auto; padding:20px 0; border-bottom:1px solid #e6e6e6;}
	#container #toc .listing-award li.first {padding-top:0;}
	#container #toc .listing-award li.last {border-bottom:0; padding-bottom:0;}
	#container #toc .listing-award li p {width:423px; overflow:hidden; margin:0; float:left;}
	#container #toc .listing-award li p.thumbnail {width:270px; overflow:hidden; padding-right:15px; float:left;}
	#container #toc .listing-award li p.right {padding-left:15px; padding-right:0; text-align:right;}
	#container #toc .listing-award li p.thumbnail-last {width:430px;}
	#container #toc .listing-award li p.col-last {width:260px;}
	/*CSR 2015*/
	#container #toc ul.csr-list .two-col,
	#container #toc ul.csr-list .three-col {border-bottom:0; margin:0; padding: 0 0 20px;}
	#container #toc ul.csr-list .two-col .thumbnail,
	#container #toc ul.csr-list .three-col .thumbnail {float:none; width:auto; overflow:hidden; margin:0;}
	#container #toc ul.csr-list .two-col div {width:210px; padding-right:10px; margin:0;}
	#container #toc ul.csr-list .two-col div.last {width:430px; overflow:hidden; padding-right:0;}
	#container #toc ul.csr-list .three-col div {width:210px; padding-right:10px;}
	#container #toc ul.csr-list .three-col div.last {padding-right:0;}