/* You may adapt and learn from the elements of this CSS to use in your own
projects, but you may not copy the design (the unique combination of images,
colors, sizes, typography, and positioning) since this is copyright of A Level
Beyond Solutions and may not be reproduced. Thanks!
------------------------------------------------------------------*/

@charset "utf-8";


/* General Stuff
------------------------------------------------------------------*/

html {
	font-family: 'Trebuchet MS', Trebuchet, Arial, Helvetica, sans-serif;
}

body {
	background: #fff;
	color: #333;
	margin: 0 auto;
	padding: 0;
	text-align:center;
	font-family: 'Trebuchet MS', Trebuchet, Arial, Helvetica, sans-serif;
}

h1 {
	float: left;
	background: url(../img/h1-logo.jpg) no-repeat left center;
	width: 400px;
	height: 75px;
	margin: 0;
	padding: 15px 0 0 0;
}

h1 span {
	visibility:hidden;
}

h2, h3 {
	display: none;
}

a {
	text-decoration:none;
	font-weight:bold;
	color: #336699;
	outline:none;
}

a:hover {
	color: #2e354e;
	text-decoration:underline;
}

img {
	border: none;
	outline:none;
}

/* Header
------------------------------------------------------------------*/

#headerWrap {
	background: #fff url(../img/header-bg-top.jpg) top center repeat-x;
	width: 100%;
	height: 90px;
	margin: 0 auto;
	text-align:center;
}

#header {
	width: 960px;
	margin: 0 auto;
	text-align: left;
}

#headerRight {
	float: right;
	text-align:right;
	padding: 22px 10px 0 0;
	font-size: 12px;
}

#headerRight a {
	font-weight:normal;
}

#headerRight a:hover {
	text-decoration:none;
}

.custLogin {
	background: url(../img/key.jpg) no-repeat right center;
	font-size: 16px;
	display:block;
	height: 20px;
	padding: 2px 24px 5px 0;
}

.headerLinks {
	padding: 0 32px 0 0 ;
}

/* Menu Items
------------------------------------------------------------------*/

#menuWrap {
	background: #fff url(../img/menu-bg.jpg) top center repeat-x;
	width: 100%;
	height: 70px;
	margin: 0 auto;
	text-align:center;
	overflow: hidden;
}

#mainmenu ul {
	margin: 0 auto;
	padding: 0;
	white-space: nowrap;
	height: 70px;
	width: 960px;
	background: url(../img/telefono.jpg) no-repeat right center;
}

#mainmenu li {
	display: block;
	list-style-type:none;
	float: left;
	height: 70px;
}

#mainmenu ul li a {
	height: 70px;
	display: block;
	text-indent:-9999px;
	margin: 0 10px 0 0;
}

.home {
width: 70px;
height: 70px;
background:url(../img/menu-1-tab.jpg) top center no-repeat;
}

.home a:hover {
background:url(../img/menu-1-tab.jpg) bottom center  no-repeat;
}

.homeactive {
width: 70px;
height: 70px;
background:url(../img/menu-1-active.jpg) bottom center no-repeat;
}

.aboutus {
width: 100px;
height: 70px;
background:url(../img/menu-2-tab.jpg) top center no-repeat;
}

.aboutus a:hover {
background:url(../img/menu-2-tab.jpg) bottom center  no-repeat;
}

.aboutusactive {
width: 100px;
height: 70px;
background:url(../img/menu-2-active.jpg) bottom center no-repeat;
}

.articles {
width: 90px;
height: 70px;
background:url(../img/menu-3-tab.jpg) top center no-repeat;
}

.articles a:hover {
background:url(../img/menu-3-tab.jpg) bottom center  no-repeat;
}

.articlesactive {
width: 90px;
height: 70px;
background:url(../img/menu-3-active.jpg) bottom center no-repeat;
}

.solutions {
width: 100px;
height: 70px;
background:url(../img/menu-4-tab.jpg) top center no-repeat;
}

.solutions a:hover {
background:url(../img/menu-4-tab.jpg) bottom center  no-repeat;
}

.solutionsactive {
width: 100px;
height: 70px;
background:url(../img/menu-4-active.jpg) bottom center no-repeat;
}

.portfolio {
width: 100px;
height: 70px;
background:url(../img/menu-5-tab.jpg) top center no-repeat;
}

.portfolio a:hover {
background:url(../img/menu-5-tab.jpg) bottom center  no-repeat;
}

.portfolioactive {
width: 100px;
height: 70px;
background:url(../img/menu-5-active.jpg) bottom center no-repeat;
}

.contactus {
width: 110px;
height: 70px;
background:url(../img/menu-6-tab.jpg) top center no-repeat;
}

.contactus a:hover {
background:url(../img/menu-6-tab.jpg) bottom center  no-repeat;
}

.contactusactive {
width: 110px;
height: 70px;
background:url(../img/menu-6-active.jpg) bottom center no-repeat;
}

/* Main Content
------------------------------------------------------------------*/

#mainWrap {
	background: #acafb5;
	width: 100%;
	margin: 0 auto;
	text-align:center;
}

#mainContent {
	width: 960px;
	margin: 0 auto;
	text-align:left;
	background: #acafb5;
	color: #2e354e;
}

#mainContent .error {
	display: block;
	background: url(../img/error-cone.jpg) no-repeat left center;
	font-size: 42px;
	height: 120px;
	padding: 70px 0 0 200px;
	margin: 0 0 0 100px;
}

#mainflash {
	width: 960px;
	height: 260px;
	margin: 0;
	padding: 0;
	display:block;
	background: #acafb5;
}

#secWrap {
	background: #dedede;
	width: 100%;
	margin: 0 auto;
	text-align:center;
}

#secContent {
	width: 960px;
	margin: 0 auto;
	padding: 20px 0 0 0;
}

#leftContent {
	float: left;
	width: 700px;
	margin: 0 28px 0 0;
	padding: 0 28px 0 0;
	border-right: 3px solid #d4d4d4;
	text-align: justify;
}

#leftContent a:hover {
	border-bottom: 1px solid #2e354e;
}

#leftContent p {
	font-size: 15px;
	line-height: 22px;
	text-align:justify;
	margin: 8px 0 0 0;
	padding: 0;
}

#leftContent p span {
	font-size: 18px;
	color: #2e354e;
	font-weight:bold;
	line-height: 26px;
}

#leftContent p strong {
	color: #336699;
}

#custFeedback {
	clear:left;
	background:url(../img/comments-bg.jpg) bottom center no-repeat;
	height: 110px;
	width: 700px;
	padding: 20px 0 0 0;
}

#custFeedback ul {
	padding: 15px 0 0 65px;
	margin: 0;
	width: 575px;
}

#custFeedback ul li {
	list-style-type:none;
	font-size: 14px;
	line-height:23px;
	color: #333;
}

#custFeedback span {
	font-size: 13px;
	color: #2e354e;
	font-weight:bold;
}

#articlesMain {
	margin: 20px 0 0 0px;
}

#articlesLeft {
	width: 342px;
	float: left
}

.cat {
	font-size: 18px;
	color: #2e354e;
	font-weight:bold;
	display:block;
	margin: 5px 0 5px 0;
	padding: 0 0 3px 0;
	border-bottom: 2px solid #336699;
}

#articlesLeft ul {
	margin: 0;
	padding: 0;
	width: 342px;
}

#articlesLeft ul li {
	list-style-type:none;
	color: #333;
	width: 170px;
	float: left;
	height: 25px;
}

#articlesLeft ul li a {
	display: block;
	font-weight:normal;
	color: #666;
	font-size: 14px;
	padding: 0 0 0 20px;
	background:url(../img/article-li.jpg) left top no-repeat;
}

#articlesLeft ul li a:hover {
	color: #2e354e;
	text-decoration: none;
	border:0;
	background: #c9c9c9 url(../img/article-li.jpg) left bottom no-repeat;
}

#articlesRight {
	width: 342px;
	float: left;
	margin: 0 16px 0 0;
}

#articlesRight p {
	font-size: 14px;
}

.articleTitle {
	font-size: 16px;
	font-weight: normal;
	}

.articleTitle:hover {
	border-bottom: 2px solid #2e354e;
}
	
.articleMore {
	font-size: 12px
	}

#rightContent {
	float: left;
	width: 200px;
}

#latestProject {
	background:url(../img/Sticky-Note.png) center top no-repeat;
	width: 198px;
	height: 207px;
	margin: 5px 0 25px 0;
	text-align: left;
	padding: 0 0 0 2px;
}

/* Footer
------------------------------------------------------------------*/

#footerWrap {
	clear: both;
	width: 100%;
	background: #fff url(../img/footer-bg.jpg) center top repeat-x;
	margin: 0 auto;
	height: 35px;
	text-align: center;
}

#footer {
	width: 960px;
	height: 110px;
	margin: 0 auto;
	padding: 35px 0 0 0;
	text-align: left;
	font-size:12px;
	color: #333;
	background: url(../img/footer-bg2.jpg) center bottom no-repeat;
	line-height:150%;
}

#footerRight {
	float: right;
	text-align:right;
}

#footerWrap a {
	font-size:13px;
}

#footerWrap a:hover {
	color: #2e354e;
	text-decoration:underline;
	border-bottom: 1px solid #2e354e;
}

/* About Us 
------------------------------------------------------------------*/

.aboutUsTop {
	display: block;
	font-weight:normal;
	font-size: 28px;
	height: 65px;
	padding: 25px 0 0 85px;
	margin: 0;
	background:url(../img/about-us.jpg) no-repeat left center;
}

#aboutUsNav {
	float: left;
	width: 225px;
	margin: 0 40px 0 0;
}

#aboutUsContent {
	float: left;
	width: 650px;
}


/* Portofolio
------------------------------------------------------------------*/

.portfolioTop {
	display: block;
	font-weight:normal;
	font-size: 28px;
	height: 65px;
	padding: 25px 0 0 85px;
	margin: 0;
	background:url(../img/portfolio.jpg) no-repeat left center;
}

ul.portfolioListing {
	margin: 0 auto;
	padding: 0;
	text-align:center;
}

ul.portfolioListing li {
	float: left;
	list-style-type:none;
	margin: 1px 0 0 0;
	padding:0;
}

#portfolioListing {
	text-align:center;
	margin: 0 auto;
	width:875px;
}

#portfolioListing a:hover {
	text-decoration:none;
	border-bottom: 0px;
}

.pf-block {
	height: 110px;
	width: 175px;
	text-indent:-9999px;
	display:block;
	background-position: top;
}

.pfblock:hover {
	background-position: bottom;
}
	
.pf-iidh {
	background:url(../img/pf-iidh.jpg);
}

.pf-wet {
	background:url(../img/pf-wet.jpg);;
}

.pf-ri {
	background:url(../img/pf-ri.jpg);
}

.pf-apc {
	background:url(../img/pf-apc.jpg);
}

.pf-dhisa {
	background:url(../img/pf-dhisa.jpg);
}

.pf-fcfa {
	background:url(../img/pf-fcfa.jpg);
}

.pf-ami {
	background:url(../img/pf-ami.jpg);
}

.pf-cfs {
	background:url(../img/pf-cfs.jpg);
}

.pf-excursions {
	background:url(../img/pf-excursions.jpg);
}

.pf-gary {
	background:url(../img/pf-gary.jpg);
}

.pf-if {
	background:url(../img/pf-if.jpg);
}

.pf-black {
	background:url(../img/pf-black.jpg);
}

.pf-js {
	background:url(../img/pf-js.jpg);
}

.pf-sl {
	background:url(../img/pf-sl.jpg);
}

.pf-pan {
	background:url(../img/pf-pan.jpg);
}

.highslide-caption {
	text-align:left;
}

.highslide-caption h4 {
	display:block;
	padding: 2px 0 0 5px;
	margin: 0;
	background: #2c2f39 url(../img/pf-h4bg.jpg) center center repeat-x ; 
	color: #fff;
	height: 20px;
	width: 95%;
	font-size: 14px;
	text-align: left;
	font-weight: normal;
}

.highslide-caption p {
	color: #333;
	font-size: 12px;
	text-align: left;
	padding: 0 20px 15px 0px;
	margin: 0;
}

.highslide-caption ul {
	margin:0;
	padding:0;
	width:290px;
}

.highslide-caption ul li {
	width:125px;
	float: left;
	list-style-type: none;
	font-size:12px;
	text-align: left;
	height: 25px;
	background: url(../img/pf-list.jpg) left center no-repeat;
	padding: 5px 0 0 20px;
}

/* Contact Us 
------------------------------------------------------------------*/

#contactForm {
	margin: 20px 0 0 40px;
	padding: 0;	
	color: #2e354e;
}

#contactForm span {
	color: #cc0000;
	font-weight: bold;
	font-size:14px;
}

#contactForm table {
	border-spacing: 0;
	border-collapse:collapse;
	border-top: 1px #ccc solid;
}

#contactForm table td {
	border-bottom: 1px #ccc solid;
	padding: 8px 30px 8px 10px;
	font-size:14px;
}

#contactForm table tr:hover {
	background: #acafb5;
}

.required {
	font-size: 12px;
	color: #666;
}

.required span {
	color: #cc0000;
}

.submit {
	width: 305px;
}

.contactUsTop {
	display: block;
	font-weight:normal;
	font-size: 28px;
	height: 65px;
	padding: 25px 0 0 85px;
	margin: 0;
	background:url(../img/contact-us.jpg) no-repeat left center;
}

.contactUsH3Info, .contactUsH3Jobs {
	display: block;
	color: #2e354e;
	padding: 0 0 0 28px;
	margin: 40px 0 0 0;
	text-align:left;
	font-size: 16px;
	border-bottom: 2px solid #999;
}

.contactUsH3Info {
	background: url(../img/contactUsInfo.jpg) left center no-repeat;
}

.contactUsH3Jobs {
	background: url(../img/contactUsJobs.jpg) left center no-repeat;
}
	
#rightContactUs {
	text-align: right;
	font-size: 13px;
	margin: -20px 0 0 0;
}

#rightContactUs p {	
	margin: 5px 0 5px 0;
	padding: 0;
}

#rightContactUs p span {
	color: #336699;
	font-size:11px;
	font-weight:bold;
}
/* Image Classes and Random Stuff
------------------------------------------------------------------*/

.imgLeft {
	float: left;
	margin: 0 15px 0 0;
}

.imgLeftB {
	float: left;
	margin: 3px 15px 0 0;
	border: 3px solid #ccc;
}

/* Tooltip Stuff 
------------------------------------------------------------------*/

#downtip { 
    display:none; 
    background:transparent url(../img/white_arrow2.png); 
    font-size:12px; 
    height:75px; 
    width:170px; 
    padding:30px 20px 15px 20px; 
    color:#333;
	text-align:center;
}

#uptip { 
    display:none; 
    background:transparent url(../img/white_arrow.png); 
    font-size:12px; 
    height:90px; 
    width:180px; 
    padding:15px; 
    color:#333;
	text-align:center;
}

#formtip {
	display:none; 
    background: url(../img/form-arrow.png) left center no-repeat; 
    font-size:12px; 
	font-weight: bold;
    height:23px; 
    width:300px; 
    padding: 5px 0 0 16px;
    color:#336699;
	text-align: left;
}

#textareatip {
	display:none; 
    font-size:12px; 
	font-weight: bold;
	height: 100px;
    width:125px; 
    padding: 5px 0 0 16px;
    color:#336699;
	text-align: left;
}


/* Scrollable Stuff 
------------------------------------------------------------------*/


.scrollable {
	float:left;
	position:relative;
	overflow:hidden;
	width: 134px;
	height:76px;
	margin: 90px 0 0 0;
	padding: 0;	
}

.scrollable .items {
	width:20000em;
	position:absolute;
	clear:both;
}

.scrollable img {
	float:left;
	cursor:pointer;
	width:Con134px;
	height:76px;
	margin: 0;
	padding: 0;
}

.scrollable .active {
	border:2px solid #000;
	z-index:9999;
	position:relative;
}

a.browse {
	background:url(../img/hori_large.png) no-repeat;
	display:block;
	width:30px;
	height:30px;
	float:left;
	cursor:pointer;
	font-size:1px;
	margin: 120px 0 0 0;
}

/* right */
a.right 				{ background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover 		{ background-position:-30px -30px; }
a.right:active 	{ background-position:-60px -30px; } 


/* left */
a.left				{ margin-left: 0px; } 
a.left:hover  		{ background-position:-30px 0; }
a.left:active  	{ background-position:-60px 0; }


/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}