@charset "UTF-8";
/* CSS Document */



/* ~~ basic reset ~~ */



* {
	margin: 0;
	padding: 0;
}



/* ~~ body ~~ */



body {
	background-color: #a4afc0;
}



/* ~~ page wrapper ~~ */



#page-wrapper {
	margin: 20px auto 20px;
	width: 1000px;
	height: 1350px;
	background-color: #FFF;
	position: relative;
	z-index: 0;
}



/* HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags properly. */



header, section, footer, aside, nav, figure {
	display: block;
}



/* ~~ element/tag selectors ~~ */



h1, h2, h3, h4, h5, h6, p, small, i, a, li, blockquote {
	font: 100%/1.4 Gotham, Verdana, Arial, sans-serif;
	margin-top: 0;	  /* removing the top margin gets around an issue where margins can escape from their containing block. The remaining bottom margin will hold it away from any elements that follow. */
	text-decoration: none;
	color: #FFF;
}

ul { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	list-style: none;
}

a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}



/* ~~ font definitions ~~ */



p {
	font-size: 9pt;
	line-height: 15pt;
	font-weight: 300;
}

h1 {
	font-size: 28pt;
	line-height: 25pt;
	font-weight: 900;
	margin-bottom: 23px;
	text-transform: uppercase;
}

h2 {
	font-size: 26pt;
	font-weight: 800;
}


h3 {
	font-size: 16pt;
	font-weight: 800;
}

h4 {
	font-size: 12pt;
	font-weight: 600;
}

h5 {
	font-size: 10pt;
	font-weight: 300;
}

h6 {
	font-size: 9pt;
	font-weight: 300;
}

small {
	font-size: 8pt;
	font-weight: 100;
}

blockquote {
	color: #7687a2;
}

i{
	color: #1b3764;
}
	

.dark-blue {
	color: #1b3764;
}

.medium-blue {
	color: #7687a2;
}

.uppercase {
	text-transform: uppercase;
}



/* ~~ header ~~ */



header {
	height: 100px;
	background: url(images/campak_masthead_background.png) no-repeat;
}

#header-logo {
	position: relative;
	width: 190px;
	height: 40px;
	top: 30px;
	left: 50px;
}



/* ~~ main navigation ~~ */



#main-nav-bar {
	height: 80px;
	margin-bottom: 10px;
	background: url(images/campak_main_nav_bar.png) no-repeat;
}

#main-nav-bar li {
	height: 80px;
	width: 205px;
	background: url(images/campak_main_nav_bar_tab.png);
	margin: 0px -33px 0px 0px;
	display: inline;
	float: left;
}

#main-nav-bar li:hover {
	background-position: 0 -164px;
}



/* ~~ main navigation typesetting~~ */



#main-nav-bar li h4 {
	margin: 4px 0px 3px 24px;
	line-height: 14pt;
}

#main-nav-bar li p {
	margin: 0px 0px 0px 56px;
	line-height: 11pt;
}

#main-nav-bar li.main-nav-selected {
	background-position: 0 -82px;
}



/* ~~ main image banner ~~ */



#main-image-banner {
	height: 290px;
	width: 620px;
	position: relative;
	margin-bottom: 10px;
	z-index: 91;
}

#main-image-banner img {
	position: absolute;
	top: 3px;
}

#main-image-banner-text {
	height: 225px;
	width: 420px;
	position: relative;
	top: 20px;
	left: 50px;
}

#main-image-banner-text h2 {
	font-size: 22pt;
	line-height: 20pt;
	text-transform: uppercase;
	margin-bottom: 10px;
}


/* ~~ main image banner text ~~ */



.main-image-banner-text {
	font-weight: 100;
	line-height: 16pt;
}



/* ~~  button definitions  ~~ */



.button {
	height: 30px;
	width: 230px;
	background: url(images/campak_read_more_tab.png) no-repeat;
	position: absolute;
	bottom: 0px;
	left: 0px;
}

.button-next {
	height: 30px;
	width: 130px;
	background: url(images/campak_next_tab.png) no-repeat;
	position: absolute;
	bottom: 0px;
	left: 300px;
}

.button-menu {
	height: 30px;
	width: 162px;
	background: url(images/campak_back_to_menu_tab.png) no-repeat;
	position: absolute;
	bottom: 0px;
	left: 134px;
}

.button-previous {
	height: 30px;
	width: 130px;
	background: url(images/campak_previous_tab.png) no-repeat;
	position: absolute;
	bottom: 0px;
	left: 0px;
}

.button:hover, .button-next:hover, .button-menu:hover, .button-previous:hover {
	background-position: 0px -60px;
}

.button a h4, .button-next a h4, .button-previous a h4 {
	padding: 4px 0px 0px 35px;
}

.button-menu a h4 {
	padding-top: 4px;
	text-align: center;
}



/* ~~ main image banner text ~~ */



#main-content-container {
	width: 715px;
	margin-top: 10px;
	float: right;
}



/* ~~ our projects menu  ~~ */



.our-projects-menu-list {
	padding-top: 11px;
}



/* ~~ side bar and main content images  ~~ */



#main-content-images {
	width: 260px;
	float: right;
	overflow: hidden;
	margin-left: 20px;
}

#main-content-images img {
	height: 150px;
	margin-bottom: -3px;
	border-bottom: #FFF 1px solid;
}



/* ~~ content body text  ~~ */



#content-body-text-full-page {
	height: 610px;
	position: relative;
}

#content-body-text-full-page h3 {
	color: #7687a2;
	line-height: 17pt;
	/* text-transform: uppercase; */
	margin-bottom: 10px;
}

#content-body-text-full-page h5.dark-blue {
	color: #1b3764;
	line-height: 16pt;
	margin-bottom: 2px;
	font-weight: 800;
	text-transform: uppercase;
}

#content-body-text-full-page h5 {
	color: #7687a2;
	font-weight: 600;
}

#content-body-text-full-page p {
	color: #0f1f38;
	margin-bottom: 9px;
}



/* ~~ projects menu ~~ */



#projects-menu {
	width: 695px;
	height: 610px;
	overflow: scroll;
}

#projects-menu ul {
	
}

#projects-menu li {
	height: 150px;
	position: relative;
	overflow: hidden;
	margin-bottom: 15px;
}

#projects-menu li a img {
	
	
}

#projects-menu li a img:hover {
	margin-top: -150px;
}

#projects-menu li h3 {
	position: absolute;
	top: 86px;
	left: 30px;
	color: #FFF;
	line-height: 16pt;
}



/* ~~ organisational chart ~~ */



#organisation-chart {
	margin: 5px 0px 0px 25px;
}



/* ~~ side bar ~~ */



#side-bar {
	height: 610px;
	width: 250px;
	margin: 10px 0px 0px 20px;
}



/* ~~ side bar nav ~~ */



#side-bar-nav {
	height: 367px;
	margin: 20px 0px;
	background: url(images/campak_side_bar_background.png) center no-repeat;
}

#side-bar-menu {
	margin-top: 3px;
}

#side-bar-menu li {
	height: 50px;
	padding-left: 55px;
	margin-bottom: -12px;
}

#side-bar-menu li:hover {
	background: url(images/campak_side_bar_tab.png) no-repeat;
	background-position: 0px -100px;
}

#side-bar-menu li.side-bar-selected {
	background: url(images/campak_side_bar_tab.png) no-repeat;
}

#side-bar-menu li.side-bar-selected h6 {
	font-weight: 600;
}

#side-bar-menu li.side-bar-selected:hover {
	background: url(images/campak_side_bar_tab.png) no-repeat;
	background-position: 0px -100px;
}



/* ~~ side bar nav header ~~ */



#side-bar-nav-header {
	padding: 4px 0px 2px 30px;
	font-size: 22pt;
	font-weight: 800;
}

#side-bar-nav-header:hover {
	color: #d1d7e0;
}



/* ~~ side bar type formats ~~ */



.side-bar-menu-double-tab {
	padding-top: 3px;
	line-height: 11pt;
}

.side-bar-menu-tab {
	padding-top: 11px;
}



/* ~~ side bar logos  ~~ */



#side-bar-logos {
	height: 150px;
	margin-left: 15px;
}

.members {
	font-weight: 700;
	text-transform: uppercase;
	color: #7687a2;
}



/* ~~ footer  ~~ */



footer {
	height: 220px;
	width: 100%;
	background: url(images/campak_footer_background.png) no-repeat;
	position: absolute;
	bottom: 0;
	left: 0;
}

#footer-4-column-grid {
	margin: 20px 0px 0px 120px;
}

#footer-4-column-grid li {
	height: 100%;
	width: 170px;
	display: inline;
	float: left;
}

#footer-4-column-grid li.footer-margin-right-large {
	margin-right: 42px;
}

#footer-4-column-grid li.footer-margin-right-small {
	margin-right: 22px;
}

#dkreative {
	height: 10px;
	width: 75px;
	background: url(images/dkreative_logo.png) no-repeat;
	float: right;
}

#dkreative:hover {
	background-position: 0px -10px;
}




/* ~~ footer typesetting  ~~ */



footer h5 {
	font-weight: 600;
	line-height: 10pt;
	margin-bottom: 7px;
}

footer p {
	font-size: 8pt;
	line-height: 9.5pt;
	margin-bottom: 6px;
}

.details p {
	font-size: 8pt;
	line-height: 9pt;
}

footer a h5:hover, footer a p:hover {
	color: #a4afc1; 
}



/* ~~ WOW slider css  ~~ */



@import url("http://fonts.googleapis.com/css?family=Ledger&subset=latin,latin-ext,cyrillic");
#wowslider-container1 { 
	zoom: 1; 
	position: relative; 
	max-width: 585px;
	margin: 13px auto 0px;
	z-index: 90;
	border: none;
	text-align: left; /* ~~ reset align=center  ~~ */
	position: absolute;
	left: 415px;
}

* html

#wowslider-container1 {
	width: 585px
}

#wowslider-container1 .ws_images ul {
	position: relative;
	width: 10000%; 
	height: auto;
	left: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	border-spacing: 0;
	overflow: visible;
	/* ~~ table-layout:fixed;  ~~ */
}

#wowslider-container1 .ws_images ul li {
	width: 1%;
	line-height: 0; /* ~~ opera  ~~ */
	float: left;
	font-size: 0;
	padding: 0 0 0 0 !important;
	margin: 0 0 0 0 !important;
}

#wowslider-container1 .ws_images {
	position: relative;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#wowslider-container1 .ws_images a {
	width: 100%;
	display: block;
	color: transparent;
}

#wowslider-container1 img {
	max-width: none !important;
}

#wowslider-container1 .ws_images img {
	width: 100%;
	border:none 0;
	max-width: none;
	padding: 0;
}

#wowslider-container1 a { 
	text-decoration: none; 
	outline: none; 
	border: none; 
}

#wowslider-container1  .ws_bullets { 
	font-size: 0px; 
	float: left;
	position: absolute;
	z-index: 70;
}

#wowslider-container1  .ws_bullets div {
	position: relative;
	float: left;
}

#wowslider-container1  .wsl {
	display: none;
}

#wowslider-container1 sound, #wowslider-container1 object {
	position: absolute;
}

#wowslider-container1  .ws_bullets { 
	padding: 10px; 
}

#wowslider-container1 .ws_bullets a { 
	margin-left: 4px;
	width: 15px;
	height: 15px;
	background: url(images/bullet.png) left top;
	float: left; 
	text-indent: -4000px; 
	position: relative;
	color: transparent;
}

#wowslider-container1 .ws_bullets a.ws_selbull, #wowslider-container1 .ws_bullets a:hover{
	background-position: 0 100%;
}

#wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev {
	position: absolute;
	display: block;
	top: 50%;
	margin-top: -20px;
	z-index: 60;
	width: 37px;	
	height: 40px;
	background-image: url(images/arrows.png);
}

#wowslider-container1 a.ws_next{
	background-position: 100% 0;
	right: -21px;
}

#wowslider-container1 a.ws_prev {
	background-position: 0 0; 
	left:-21px;
}



/* ~~ playpause  ~~ */



#wowslider-container1 .ws_playpause {
	display: none;
    width: 33px;
    height: 33px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -16px;
    margin-top: -16px;
    z-index: 59;
}

#wowslider-container1:hover .ws_playpause {
	display: block;
}

#wowslider-container1 .ws_pause {
    background-image: url(images/pause.png);
}

#wowslider-container1 .ws_play {
    background-image: url(images/play.png);
}

#wowslider-container1 .ws_pause:hover, #wowslider-container1 .ws_play:hover {
    background-position: 100% 100% !important;
}



/* ~~ bottom center  ~~ */



#wowslider-container1 .ws_bullets {
	bottom:-5px;
	left:50%;
}

#wowslider-container1 .ws_bullets div {
	left:-50%;
}



/* ~~ default  ~~ */



#wowslider-container1 .ws-title {
	position: absolute;
	bottom: 25px;
	left: 0;
	margin-right: 5px;
	z-index: 50;
	padding: 12px;
	color: #FFFFFF;
	text-transform: none;
	background: #313131;
    font-family: Ledger,Georgia,serif;
	font-size: 24px;
	line-height: 26px;
}

#wowslider-container1 .ws-title div {
	padding-top:5px;
	font-size: 16px;
	line-height: 18px;
}

#wowslider-container1 .ws_images ul {
	animation: wsBasic 144s infinite;
	-moz-animation: wsBasic 144s infinite;
	-webkit-animation: wsBasic 144s infinite;
}

@keyframes wsBasic {0%{left:-0%} 3.47%{left:-0%} 5%{left:-100%} 8.47%{left:-100%} 10%{left:-200%} 13.47%{left:-200%} 15%{left:-300%} 18.47%{left:-300%} 20%{left:-400%} 23.47%{left:-400%} 25%{left:-500%} 28.47%{left:-500%} 30%{left:-600%} 33.47%{left:-600%} 35%{left:-700%} 38.47%{left:-700%} 40%{left:-800%} 43.47%{left:-800%} 45%{left:-900%} 48.47%{left:-900%} 50%{left:-1000%} 53.47%{left:-1000%} 55%{left:-1100%} 58.47%{left:-1100%} 60%{left:-1200%} 63.47%{left:-1200%} 65%{left:-1300%} 68.47%{left:-1300%} 70%{left:-1400%} 73.47%{left:-1400%} 75%{left:-1500%} 78.47%{left:-1500%} 80%{left:-1600%} 83.47%{left:-1600%} 85%{left:-1700%} 88.47%{left:-1700%} 90%{left:-1800%} 93.47%{left:-1800%} 95%{left:-1900%} 98.47%{left:-1900%} }
@-moz-keyframes wsBasic {0%{left:-0%} 3.47%{left:-0%} 5%{left:-100%} 8.47%{left:-100%} 10%{left:-200%} 13.47%{left:-200%} 15%{left:-300%} 18.47%{left:-300%} 20%{left:-400%} 23.47%{left:-400%} 25%{left:-500%} 28.47%{left:-500%} 30%{left:-600%} 33.47%{left:-600%} 35%{left:-700%} 38.47%{left:-700%} 40%{left:-800%} 43.47%{left:-800%} 45%{left:-900%} 48.47%{left:-900%} 50%{left:-1000%} 53.47%{left:-1000%} 55%{left:-1100%} 58.47%{left:-1100%} 60%{left:-1200%} 63.47%{left:-1200%} 65%{left:-1300%} 68.47%{left:-1300%} 70%{left:-1400%} 73.47%{left:-1400%} 75%{left:-1500%} 78.47%{left:-1500%} 80%{left:-1600%} 83.47%{left:-1600%} 85%{left:-1700%} 88.47%{left:-1700%} 90%{left:-1800%} 93.47%{left:-1800%} 95%{left:-1900%} 98.47%{left:-1900%} }
@-webkit-keyframes wsBasic {0%{left:-0%} 3.47%{left:-0%} 5%{left:-100%} 8.47%{left:-100%} 10%{left:-200%} 13.47%{left:-200%} 15%{left:-300%} 18.47%{left:-300%} 20%{left:-400%} 23.47%{left:-400%} 25%{left:-500%} 28.47%{left:-500%} 30%{left:-600%} 33.47%{left:-600%} 35%{left:-700%} 38.47%{left:-700%} 40%{left:-800%} 43.47%{left:-800%} 45%{left:-900%} 48.47%{left:-900%} 50%{left:-1000%} 53.47%{left:-1000%} 55%{left:-1100%} 58.47%{left:-1100%} 60%{left:-1200%} 63.47%{left:-1200%} 65%{left:-1300%} 68.47%{left:-1300%} 70%{left:-1400%} 73.47%{left:-1400%} 75%{left:-1500%} 78.47%{left:-1500%} 80%{left:-1600%} 83.47%{left:-1600%} 85%{left:-1700%} 88.47%{left:-1700%} 90%{left:-1800%} 93.47%{left:-1800%} 95%{left:-1900%} 98.47%{left:-1900%} }

#wowslider-container1 .ws_bullets  a img {
	text-indent: 0;
	display: block;
	bottom: 16px;
	left: -50px;
	visibility: hidden;
	position: absolute;
    border: 2px solid #000000;
	max-width: none;
}
#wowslider-container1 .ws_bullets a:hover img {
	visibility: visible;
}

#wowslider-container1 .ws_bulframe div div {
	height: 48px;
	overflow: visible;
	position: relative;
}

#wowslider-container1 .ws_bulframe div {
	left: 0;
	overflow: hidden;
	position: relative;
	width: 100px;
	background-color: #000000;
}

#wowslider-container1 .ws_bullets .ws_bulframe {
	display: none;
	bottom: 22px;
	overflow: visible;
	position: absolute;
	cursor: pointer;
    border: 2px solid #000000;
}

#wowslider-container1 .ws_bulframe span {
	display: block;
	position: absolute;
	bottom: -9px;
	margin-left: -2px;
	left: 50px;
	background: url(images/triangle.png);
	width: 15px;
	height: 8px;
}