/*
Theme Name: CPI 2015
Theme URI: http://www.binuma.com/cpi
Author: Deddy Mulyawan
Author URI: http://www.redglobe360.com/
Description: Charoen Pokphand Indonesia 2015
Version: 1
*/

body{
	font-family: 'Open Sans', sans-serif;
	font-size: 0.75em;
	margin:0px auto;
	background-color: #E5E5E5;
	padding: 0px;
	text-shadow: none;
	color: #29333C;
}

a {
	text-decoration: none;
	color: inherit;
}

p {
    padding: 0px;
    margin: 0px;
}

section {
	display: block;
	width: 100%;
}

#fordesktop{
	display: block;
}

#formobile, .hidethis, .managementcounter{
	display: none;
}

.showthis {
	display: inline-block;
}

#mainbanner, #mainbanner img, .stagebg img{
	display: block;
	width: 100%;
}

#menudesktop {
	display: block;
	width: 98.2%;
	padding: 0.9%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 4000;
	background-color: rgba(10,161,255,1);
	color: #ffffff;
	font-weight: 600;
	font-size: 150%;
}

.menuitem{
	display: inline-block;
	color: #ffffff;
	font-weight: 400;
}

.menubar {
	display: inline-block;
	color: #ffffff;
	float: right;
	padding: 0.9%;
	font-weight: 400;
}

.menuborder{
	display: inline-block;
	font-size: 125%;
	color: #ff0000;
}

#dropmenu{
	display: none;
	width: 100%;
	text-align: left;
}

#menubutton, #menubuttonmobile{
	display: inline-block;
	cursor: pointer;
}

.menuwhitebox{
	display: inline-block;
	width: 28%;
	padding: 1% 2%;
	background-color: #ffffff;
	color: #0AA1FF;
	font-size: 80%;
	vertical-align: top;
}

.menuwhiteboxcontent{
	display: inline-block;
	width: 96%;
	padding: 2%;
	background-color: #ffffff;
	color: #0AA1FF;
	font-size: 80%;
	vertical-align: top;
}

.menuwhiteboxcontent img{
	width: 45%;
	padding: 0 2% 2% 0;
	float: left;
}

.mainwhiteboxcontent50 img{
	display: inline-block;
	width: 75%;
}

.mainwhiteboxcontent100 img{
	display: inline-block;
	float: left;
	width: 34%;
	padding: 2%;
}

.menuchild{
	display: block;
	color: #29333C;
}

.menuchild:hover{
	display: block;
	color: #0AA1FF;
}

#stage{
	display: block;
	width: 100%;
	overflow: hidden;
}

.datebox {
	display: inline-block;
	width: 8%;
	padding: 2%;
	background-color: #0AA1FF;
	color: #ffffff;
	text-align: center;
}

.announcementtext {
	display: inline-block;
	width: 84%;
	padding: 2% 2%;
	font-size: 100%;
	color: #29333C;
	vertical-align: top;
}

.mainwhitebox{
	display: inline-block;
	width: 44%;
	padding: 2%;
	background-color: #ffffff;
	margin: 1%;
	float: left;
}

.mainwhiteboxtitle{
	display: inline-block;
	width: 100%;
	font-size: 150%;
	border-bottom: 1px #0AA1FF solid;
	color: #0AA1FF;
}

.mainwhiteboxcontent100{
	display: inline-block;
	width: 100%;
	padding: 2% 0%;
	color: #29333C;
	vertical-align: top;
}

.mainwhiteboxcontent100middle{
	display: inline-block;
	width: 100%;
	color: #29333C;
	vertical-align: middle;
}

.mainwhiteboxcontent50{
	display: inline-block;
	width: 50%;
	padding: 2% 0%;
	font-size: 100%;
	color: #29333C;
	vertical-align: top;
}

.mainwhiteboxlink{
	display: inline-block;
	font-size: 90%;
	color: #FF680A;
	vertical-align: top;
	font-style: italic;
}
.stage30 {
	display: inline-block;
	width: 26%;
	padding: 2% 2% 2% 0%;
}

.stage70 {
	display: inline-block;
	width: 66%;
	padding: 2% 2% 2% 0%;
	vertical-align: top;
}

#dropmenu {
	background-color: #ffffff;
	margin-top: 2%;
}

#footer {
	display: block;
	width: 96%;
	padding: 2%;
	color: #ffffff;
	background-color: #0AA1FF;
	text-align: center;
}

#subpages {
	display: block;
	width: 96%;
	padding: 2%;
	margin-top: 6%;
}

.subpagestitle {
	display: block;
	width: 100%;
	color: #0AA1FF;
	font-size: 250%;
	font-weight: 400;
}

.subpagesstage {
	width: 96%;
	padding: 2%;
	background-color: #ffffff;
}

.subpagescontent, .subpagescontentimage {
	display: inline-block;
	width: 69%;
	margin: 0 1% 0 0;
	vertical-align: top;
	font-size: 125%;
}

.subpagescontentimage img{
	display: block;
	width: 100%;
}

.subpagesmenu {
	display: inline-block;
	width: 26%;
	padding-left: 2%;
	vertical-align: top;
	margin: 0 0 0 1%;
	font-weight: 700;
}

.managementtab {
	display: none;
}

.management{
	width: 96%;
	padding: 2%;
	margin: 2% 0%;
	background-color: #e5e5e5;
	overflow: hidden;
}

.managementpic  {
	display: inline-block;
	width: 20%;
	float: left;
	padding: 0 2% 0% 0;
}

.managementpic  img{
	display: block;
	width: 100%;
}

.managementname {
	width: 96%;
	padding: 1% 2% 0% 2%;
	font-size: 100%;
	color: #29333C;
	text-align: left;
}

.managementtitle {
	width: 96%;
	padding: 0% 2% 1% 2%;
	font-size: 75%;
	color: #29333C;
	text-align: left;
}

.managementcontent {
	display: block;
	padding: 1% 2% 2% 2%;
	font-size: 75%;
	color: #29333C;
}

.financialreportlist {
	display: inline-block;
	width: 98%;
	padding: 1%;
	overflow: hidden;
	font-size: 100%;
}

.financialreportlist img{
	width: 10%;
	height: auto;
	padding: 0 2% 0 0;
	vertical-align: middle;
}

@media screen and (max-width: 1000px){

#fordesktop{
	display: none;
}

#formobile {
	display: block;
}

#menubuttonmobile {
	font-size: 100%;
}

.showthis {
	display: inline-block;
}

#mobilemainbanner, #mobilemainbanner img{
	display: block;
	width: 100%;
}

.mobilemenubar1 {
	display: block;
	width: 96%;
	padding: 2%;
	background-color: #0AA1FF;
	color: #ffffff;
	overflow: hidden;
	font-weight: 600;
	font-size: 100%;
}

.mobilemenubar {
	display: block;
	width: 96%;
	padding: 2%;
	background-color: #0AA1FF;
	color: #ffffff;
	overflow: hidden;
	font-weight: 600;
	font-size: 200%;
}

.mobilemenubar  img, .mobilemenubar1  img{
	display: inline-block;
	width: 8%; 
	height: auto;
}

.menutitle{
	display: inline-block;
}

#dropmenumobile{
	display: none;
	width: 100%;
	text-align: left;
}

.mobilemenuchild {
	display: none;
	width: 96%;
	padding: 2%;
	color: #29333C;
	background-color: #ffffff;
}

.mainwhitebox{
	width: 44%;
	margin: 1% 1%;
	float: left;
}

.mainwhiteboxtitle {
	font-size: 125%;
}

.datebox {
	width: 12%;
	font-size: 125%;
}

.announcementtext {
	width: 74%;
	font-size: 100%;
}

.mobilemenutext{
	display: inline-block;
	float: left;
}

.menuchild{
	font-size: 200%;
}

.tabpointer {
	display: inline-block;
	color: #ffffff;
	float: right;
	padding: 0.9%;
	font-weight: 400;
}

#subpages {
	margin-top: 3%;
}

.subpagesmenu {
	width: 96%;
}

.subpagescontent, .subpagescontentimage {
	width: 99%;
}

.management{
	width: 94%;
	padding: 2%;
}

.managementpic  {
	display: inline-block;
	width: 20%;
	float: left;
	padding: 0 2% 2% 0;
}

.managementpic  img{
	display: block;
	width: 100%;
}

.managementname {
	width: 96%;
	padding: 1% 2% 0% 2%;
	font-size: 100%;
	color: #29333C;
	text-align: left;
}

.managementtitle {
	width: 96%;
	padding: 0% 2% 1% 2%;
	font-size: 75%;
	color: #29333C;
	text-align: left;
}

.managementcontent {
	display: block;
	padding: 1% 2% 2% 2%;
	font-size: 75%;
	color: #29333C;
}
}

@media screen and (max-width: 600px){

.menubar {
	font-size: 125%;
}

.mobilemenubar  img, .mobilemenubar1 img{
	width: 10%; 
}

.datebox {
	width: 8%;
	font-size: 125%;
}

.mobilemenubar {
	font-size: 150%;
}

.mainwhitebox{
	width: 90%;
	margin: 1.5% 3%;
}

.menuchild{
	font-size: 150%;
}

}

@media screen and (max-width: 400px){

.mobilemenubar  img, .mobilemenubar1  img{
	width: 12.5%; 
}

.mobilemenubar {
	font-size: 150%;
}

.menubar {
	font-size: 100%;
}

.announcementtext {
	width: 80%;
	font-size: 100%;
}

.datebox {
	width: 12%;
	font-size: 100%;
}

.mobilemenutext{
	display: none;
	float: left;
}

.mainwhitebox{
	width: 90%;
	margin: 1.5% 3%;
}

.menuchild{
	font-size: 125%;
}

.subpagestitle {
	font-size: 150%;
}

.managementcontent {
	padding: 1% 2% 5% 2%;
}

.datebox {
	display: inline-block;
	width: 18%;
	padding: 2%;
	background-color: #000000;
	color: #ffffff;
	text-align: center;
	font-size: 80%;
}

.announcementtext {
	display: inline-block;
	width: 74%;
	padding: 2% 2%;
	color: #29333C;
	font-size: 80%;
	vertical-align: top;
}

.menutitle{
	display: none;
}
	
}