/*

	iamcares stylesheet 
	by: linda kurniawan
	
	
	COLOUR PALETTE
	
    blue    3A4694
    orange  E8573D
    grey    C6C7C8
	dark blue 162E76
    dark orange E8573D
    pastel blue bfdcff
	
*/

* { padding: 0; margin: 0; } 

html {
	border-top: 2px solid #9cb700;
	text-align: center;
	}

	body {
		/*font: 12px/19px "Lucida Grande", tahoma, sans-serif;*/
		font: 11px/16px "Lucida Grande", verdana, sans-serif;		
		background: #fff;
		color: #333;
		width: 810px;
		margin: 0 auto;
		text-align: left;
		}
				
		body.sub { background: #fff top center repeat-y; }
		body.home { background: #fff top center repeat-y; }
	
	.reset {
		display: block; 
		clear: both; 
		font-size: 1px; 
		height: 1px; 
		line-height: 0.1;
		}
	
	
	
	
	
	
	
	
	
/* interface
-------------------------------------------------------- */
#header, #content, #subcontent, #masthead, #footer {
	float: left;
	position: relative;
	width: 100%;
	}	
	
	#topheader {
	    height: 97px;
	}
	
	#content {
	    background: #fff url('../src/back-3cols.gif') top center repeat-y;
	}
	
	#subcontent {
	    background: #fff url('../src/back-2col.gif') top center repeat-y;
	    width: 810px;
	}	
	
	#mastinfo {
	    float: left; 
	    /*background-color: #C6C7C8;*/
	    background: url("../src/title-mi.gif") top center no-repeat;
	    width: 285px; 
	    height: 335px;
	    position: relative;
	    top: 20px;
	    left: 0px;	    
	}
	
	.submastinfo {
	    float: left; 	    	    
	    width: 263px;	    
	    height: 140px;
	    position: relative;
	    top: 20px;
	    left: 0px;	    
	}
	
	#micontactus {
	    background: url("../src/title-contactus.gif") top center no-repeat;	
	}
	
	#mijobseeker {
	    background: url("../src/title-jobseeker.gif") top center no-repeat;	
	}
	
	#mijobsearch {
	    background: url("../src/title-jobsearch.gif") top center no-repeat;	
	}	
	
	#miaboutus {
	    background: url("../src/title-aboutus.gif") top center no-repeat;	
	}	
	
	#masthead {
		border-top: 0px solid #E8573D;
		border-bottom: 0px solid #E8573D;
		top: 20px;
		width: 525px;
		left: 0px;
		float: right;
		position: relative;		
		}

	#submasthead {
		border-top: 0px solid #E8573D;
		border-bottom: 0px solid #E8573D;				
		float:right;
		position: relative;	
		/*padding: 0 0 0 0;*/
		/*margin: 0 0 0 0;*/
		width: 544px;
		top: 20px;		
		left: 0px;			
		}			
					
		#main {
			float: left;
			width: 540px;
			margin: 30px 0;
			}
		
		.col {
			float: left;
			width: 270px;
			margin: 60px 0;			
			}
			
		.colbutton {
			float: left;
			width: 270px;
			margin: 30px 0;			
			}			
			
		.colSlogan {
			float: left;			
			margin: 20px 0 0 20px;			
			}
			
        .colsub {			
			float: left;			
			/*width: 566px;*/
			width: 530px;
			margin: 20px 0 0 0;				
			padding: 0 0 0 0;
			}
			
        .colsub p {			
			padding-top: 15px;
			}			
										
        .colsubsidebar {
			float: left;
			width: 232px;
			margin: 60px 0;	
			padding: 0 0 0 0;	
			position: relative;	
			}	
			
        .colsubsidebarfooter {			
			position: relative;
			float: right;
			width: 232px;
			margin: 400px 20px 0 0;							
			}	
			
			.colsubsidebarfooter p {			    				    
			    text-align: right;				    			
			    padding: 0 5px 0 0;	
			    }
			    
			.colsubsidebarfooter p a {
			    color: #E8573D;	
			    text-decoration: none;
			    }				    		
			
								
            #subnav {
	            /*border-bottom: 3px solid #000;*/
	            /*margin-bottom: 10px;*/
	            padding: 0 0 0 0;
	            margin: 0 0 0 0;	            
	            }
	            
	            #subnav li {
	                /*color: #fff;*/
	                font: 11px/1.3 "Lucida Grande", tahoma, sans-serif;
                    font-weight: bold;
                    text-align: right;
                    padding: 0 0 0 0;
                    margin: 3px 3px 3px 3px;
	            }
	            
	            #subnav li a {
	                color: #fff;
	                text-decoration:none;	                
	            }	
	            
	            #subnav li a:hover {
	                color: #E8573D;	 
	                text-decoration:none;               
	            }	
	            
	            #subnav li a.active {
	                color: #bfdcff;	 
	                text-decoration:none;               
	            }	                                    
	               
		        #subnav img{		            
		            padding: 0;
		            margin: 0;
		        }
		        
            #subnav1 {
	            /*border-bottom: 3px solid #000;*/
	            /*margin-bottom: 10px;*/
	            padding: 0 0 0 0;
	            margin: 0 0 0 0;	            
	            }
	            
	            #subnav1 li {
	                /*color: #fff;*/
	                font: 9px/1.3 "Lucida Grande", tahoma, sans-serif;
                    font-weight: bold;
                    text-align: right;
                    padding: 0 0 0 0;
                    margin: 3px 3px 3px 3px;
	            }
	            
	            #subnav1 li a {
	                color: #fff;
	                text-decoration:none;	                
	            }	
	            
	            #subnav1 li a:hover {
	                color: #E8573D;	 
	                text-decoration:none;               
	            }
	            
	            #subnav1 li a.active {
	                color: #E8573D;	 
	                text-decoration:none;               
	            }	                        
	               
		        #subnav1 img{		            
		            padding: 0;
		            margin: 0;
		        }
             
        .colsubfooter {							
            position: relative;
            float: right;
            margin: 220px 10px 0 238px;
        }
        
	#footer {
		margin-top: 120px;
		}
	
	
	
	
	
	
	
	
	
	
	
	
/* image replacement
-------------------------------------------------------- */
.button {
	position: relative;
	width: 86px; height: 27px;
	margin-left: 30px;
	margin-top: 30px;
	}

.home .button {
	margin-top: -60px;
	}

	.button span, .button a {
		display: block;
		width: 86px; height: 27px;
		text-indent: -9999px;
		background: none;
		text-decoration: none;
		} 
	
	.button a.readmore {
		background: url("../src/button-readmore.gif") no-repeat;
		}

	.button a.seeall {
		background: url("../src/button-seemore.gif") no-repeat;
		}

	.button a.applynow {
		background: url("../src/button-applynow.gif") no-repeat;
		}
		
		
		.button a:hover {
			background-position: 0 -27px;
			}

#replacemap {
    float: right; 
    position: relative; 
    padding: 10px 30px 0 0;       
}

.replacemap {
    float: right; 
    position: relative; 
    padding: 0px 30px 0 0;       
}
 
#replacelogo {
    float: left;
}

h3.contentheader {    
    font: 13px/1.3 "Lucida Grande", tahoma, sans-serif;
    font-weight: bold;
}

h3 {
	padding: 0 30px;
	}
			
	h3 span {
		position: relative;
		display: block;
		height: 40px; width: 209px;
		text-indent: -9999px;
		color: #333;
		}
		
		h3.mastinfotextheader span {		    
		    font-size: 25px;
		    font-family: "Times New Roman";		    
		    text-indent: 0px;
		    line-height: 28px;
		    color: #aaa;		    
		}
		
		p.mastinfotext {
		    font-size: 16px;
		    font-family: "Times New Roman";		    
		    text-indent: 0px;
		    line-height: 18px;
		    color: #aaa;		    
		}		
		
		h3 span.full {
			width: 480px !important;
			}
        		
		h3.program span 				{ background: url("../src/title-program.gif") no-repeat; }		
		h3.latestnews2 span 			    { background: url("../src/title-latestnews2.gif") no-repeat; }		
		h3.whoweare span 				{ background: url("../src/title-whoweare.gif") no-repeat; }	    
	
								
#nav_aux {
 width: 100px;
 height: 12px;
 padding: 0;
 margin: 65px 0 0 0;
 position: relative; 
 float: right; 
}

ul#nav li {
	float: left;
	list-style: none;
}
/* Navigation - Aux
---------------------------------*/

ul.bulletpoints li {
    margin: 0 0 0 0;
    list-style-type:disc;
    list-style-position: inside;
} 

#nav_aux li {margin: 0; padding: 0; list-style: none; display: block; position: absolute;}

#nav_aux a {display: block; text-decoration:none;}

#aux_tab1 {left: 0px; top: -105px; width: 45px; height: 12px;}
#aux_sep1 {left: 33px; top: -105px; width: 59px; height: 12px;}
#aux_tab2 {left: 45px; top: -105px; width: 72px; height: 12px;}


#aux_tab1 a {height: 12px;}
#aux_tab2 a {height: 12px;}
#aux_tab3 a {height: 12px;}

ul#nav {
	position: relative;
	height: 34px; width: 830px;
	background: url("../src/iamcaresnavbar.gif") no-repeat;
	}

	ul#nav li {
		float: left;
		list-style: none;
		}
	
	ul#nav li a {
		position: absolute;
		text-indent: -9999px;
		text-decoration: none;
		border: none !important;
		top: 0; height: 34px;
		}

		ul#nav li#nav-logo a { 
			left: 0; width: 378px;
			background: url("../src/iamcaresnavbar.gif") no-repeat;
			}
		ul#nav li#nav-jobsearch a { 
			left: 378px; width: 144px; 
			background: url("../src/iamcaresnavbar.gif") -378px 0 no-repeat;
			}
		ul#nav li#nav-jobseeker a { 
			left: 522px; width: 144px; 
			background: url("../src/iamcaresnavbar.gif") -522px 0 no-repeat;
			}		
		ul#nav li#nav-aboutus a { 
			left: 666px; width: 144px; 
			background: url("../src/iamcaresnavbar.gif") -666px 0 no-repeat;
			}
			
ul#nav li#nav-jobsearch a:hover  		{ background-position: -378px -34px; }
ul#nav li#nav-jobseeker a:hover  		{ background-position: -522px -34px; }
ul#nav li#nav-aboutus a:hover  		    { background-position: -666px -34px; }


/* Navigation - Top Banner
---------------------------------*/

ul#topbanner {
	position: relative;
	height: 97px; width: 811px;
	background: url("../src/title-lg.gif") no-repeat;
	}

	ul#topbanner li {
		float: left;
		list-style: none;
		}
	
	ul#topbanner li a {
		position: absolute;
		text-indent: -9999px;
		text-decoration: none;
		border: none !important;
		top: 0; height: 97px;
		}

		ul#topbanner li#topbanner-logo a { 
			left: 0; width: 696px;
			background: url("../src/title-lg.gif") no-repeat;
			}
		ul#topbanner li#topbanner-home a { 
			left: 696px; width: 61px; 
			background: url("../src/title-lg.gif") -696px 0 no-repeat;
			}
		ul#topbanner li#topbanner-contactus a { 
			left: 759px; width: 54px; 
			background: url("../src/title-lg.gif") -759px 0 no-repeat;
			}				
			
ul#topbanner li#topbanner-home a:hover  		{ background-position: -696px -97px; }
ul#topbanner li#topbanner-contactus a:hover  		{ background-position: -759px -97px; }


/* ------------------------- */

ul#footer-nav {
	position: relative;
	height: 30px; width: 810px;
	top: 10px;
	left: 36px;
	}

.home ul#footer-nav {
	background: url("../src/footer-home.gif") no-repeat;
	}
	
.sub ul#footer-nav {
	background: url("../src/footer-sub.gif") no-repeat;
	}

	ul#footer-nav li {
		float: left;
		list-style: none;
		}
	
	ul#footer-nav li a {
		position: absolute;
		text-indent: -9999px;
		text-decoration: none;
		border: none !important;
		top: 0; height: 30px;
		}

		ul#footer-nav li#nav-privacy a { 
			left: 685px; width: 80px; 
			background: url("../src/footer-home.gif") -685px 0 no-repeat;
			}
			

ul#footer-nav li#nav-privacy a:hover  		{ background-position: -685px -30px; }
	
	
	
	
	
	
	
	
/* non-navigation links
-------------------------------------------------------- */
a, a:link, a:active, a:visited {
    color: #162E76;			
    }

a:hover {
	color: #E8573D;
	}








/* content area
-------------------------------------------------------- */
#masthead img {
	float: right;
	height: 335px;	
	width: 518px;
	}
	
	
#submasthead img {
	float: right;
	height: 120px;	
	width: 544px;
	}	
	
	
	
	
	
	
	
	
	
/* text
-------------------------------------------------------- */
p {
	padding: 0 30px;
	margin-bottom: 21px;
}

h4 {
	padding: 15px 30px;
	font-size: 14px;
	}
	
	p.edit {
		font-size: 9px;
		}

#main  ul {
	padding-bottom: 21px;
	}
	
	#main li {
		background: url("../src/li.gif") 0 6px no-repeat;
		margin-left: 30px;
		padding-left: 12px;
	}

li {
	list-style: none;
	padding: 0 30px;
	}	


	
p.testimonialtext {
	color: #ccc;
	margin: 0 30px 15px 30px; !important;
	background: #333;
	padding: 15px !important;
	}
	
	
	


/*subnavigational menu
-------------------------------------------------------- */	
  #jsVanEPsubmenu {
    float: right;
    position: relative;
    border-top: 1px solid #646567;
    border-bottom: 2px solid #646567;
    background: #CCC;
    height: 20px;
    width: 573px;
    padding: 5px 0 0 0;
    margin: 0 0 0 0;
    font: 10px/13px "Lucida Grande", tahoma, sans-serif;    
  }	
  
  #jsSurreyEPsubmenu {
    float: right;
    position: relative;
    border-top: 1px solid #646567;
    border-bottom: 2px solid #646567;
    background: #CCC;
    height: 30px;
    width: 573px;
    padding: 5px 0 0 0;
    margin: 0 0 0 0;
    font: 10px/13px "Lucida Grande", tahoma, sans-serif;    
  }	  
  
  #navt {
    position:relative;
    height: 10px;    
  }
  
  #navt td {
    padding-left: 10px;   
  }  
   
  #navt td a{
    font-weight: bold;        
    color: #162E76;
    text-decoration: none;    
  }
  #navt td a:hover{
    color: #E8573D;    
    text-decoration: underline;
  }  
  #navt td a.active{
    font-weight: bold;        
    color: #E8573D;
    text-decoration: underline;
  }  
  
    #navt .mSplit{      
      border-right: 1px solid #fff;
      padding-left: 20px;
    }  
    
    
    
/*grid
-------------------------------------------------------- */	    
.colsubcontent {
    position: relative;
    padding: 30px 0 0 30px;
    margin: 0 0 0 0;
    float:left;
}

.grid td{
    border: solid 1px #ccc;
    padding: 3px 10px 3px 10px;       
}


.gridsmall td{
    border: solid 1px #ddd;
    padding: 2px 5px 2px 5px;
    width: 50px; 
    text-align:center;      
}

.gridmid td{
    border: solid 1px #ddd;
    padding: 2px 5px 2px 5px;
    /*width: 170px; */
    width: 100%;
    text-align:left;      
}

.gridmid td.resourcesname{
    font-weight:bold;
    color:Maroon;
} 


/* serif font
------------------------------------------------------- */
.contentheaderserif {        
  font-family: georgia, serif;  
	font-size: 12px;
	line-height: 21px;
	font-style:italic;	
	color: #162E76;
}

.alternate {
    color: #555;
}

.tooltip {
    font-size: 9px;
    line-height: 12px;
}
    
    
.tooltipsection {
    padding: 0 0 0 0; 
    margin: 0 0 0 0; 
    border: solid 1px #ddd;
}
