/*=============================
		I.1. The Base Layout
=============================*/

	body{	
		text-align: center;
		font-size: 1.2em;
		font-family: Verdana, Geneva, sans-serif;
		color: #000;
	}
		
	#pgContentContainer{
		width: 960px;		
		position: relative;
		padding: 0;
		float: left;
		left: 50%;				  /*50% of the total width of the screen; not the width of div or block element*/
		margin-left: -480px;
		min-height: 720px;
	}

		
	#hdrContentContainer{
		float: left;
		width: 100%;		
		height: 100px;
		padding: 0;
		margin: 0;
	}
		
	#mnContentContainer {
		float: left;		
		height: 590px;
		width: 100%;
	}
		
		
	#ftrContentContainer{
		float: left;
		height: 30px;	
		width: 100%;
	}

/*  This CSS Style is used to preload images used throughout the entire web pages;  
The images initial attribute display were set to 'none' to load the images and let 
the browser save it in cache. */	
	div#preload { 
		display: none;
	}	
	
/*========================================================
		I.2. Layout for the Header Content Container
========================================================*/

	#triBoxes {
		width: 50px;
		height: 100px;
		position: relative;
		float: left;
	}
	
		#coyName {
		width: 410px;
		height: 100px;
		position: relative;
		float: left;
		padding: 0;
		margin: 0;		
	}
		
	#hdrContentContainer .headers {
		width: 388px;
		height: 100px;
		position: relative;
		float: left;
		padding: 0;
		margin: 0;
	}
		
	#coyLogo {
		width: 112px;
		height: 100px;
		position: relative;
		float: left;
		padding: 0;
		margin: 0;
	}
		
		
/*===================================================================
		This is the layout for the mnContentContainer
		             background: Left Column
=====================================================================*/

	#leftColumnWrapper{
		width: 353px;
		height: 100%;
		float: left;	
	}

	#rightColumnWrapper {
		width: 607px;
		height: 100%;
		float: left;		
	}
	
/*=====================================================================
		Additional Layout for the Background of the Vertical Menu	
=====================================================================*/

	#upperRowOfLeftTopDiv {
		width: 353px;
		height: 67px;
		float: left;
		position: relative;
	}

	#lowerRowOfLeftTopWrapper {
		width: 353px;
		height: 227px;
		float: left;
	}
	
	#firstColOfLeftTopDiv {
		width: 30px;
		height: 227px;
		float: left;
		position: relative;
	}
	
	#secondColOfLeftTopDiv {
		width: 293px;
		height: 227px;
		float: left;
		position: relative;
	}

	#thirdColOfLeftTopDiv {
		width: 30px;
		height: 227px;
		float: left;
		position: relative;
	}	

	#upperRowOfSecondColOfLeftTopDiv {
		width: 293px;
		height: 32px;
		float: left;
	}
	
	#lowerRowOfSecondColOfLeftTopDiv {
		width: 293px;
		height: 195px;
		float: left;
	}
	
	#leftCornerOfUpperRowOfLeftTopDiv {
		width: 32px;
		height: 32px;
		float: left;
	}
	
	#midStripOfUpperRowOfLeftTopDiv {
		width: 229px;
		height: 32px;
		float: left;
	}
	
	#rightCornerOfUpperRowOfLeftTopDiv {
		width: 32px;
		height: 32px;
		float: left;
	}

/*=========================================
	Background Images for Vertical Menu
=========================================*/

	#leftCornerOfUpperRowOfLeftTopDiv {
		background-image: url(../images/leftBgOfVertMenu.png);
		background-repeat: no-repeat;
	}
	
	#midStripOfUpperRowOfLeftTopDiv {
		background-image:  url(../images/upperBgOfVertMenu.png);
		background-repeat: repeat-x;
	}
	
	#rightCornerOfUpperRowOfLeftTopDiv {
		background-image: url(../images/rightBgOfVertMenu.png);
		background-repeat: no-repeat;
	}
	
	#lowerRowOfSecondColOfLeftTopDiv {
		background-image: url(../images/lowerBgOfVertMenu.png);
		background-repeat: repeat-x;
	}	
	
/*=====================================================================
		This is the layout for the mnContentContainer
		             background: Right Column
=====================================================================*/

	#rightColumnTopDiv {
		width: 607px;
		height: 33px;
		float: left;
	}

	#rightColumnMidDivWrapper {
		width: 607px;
		height: 365px;
		float: left;			
	}

	#rightColumnBottomDiv {
		width: 607px;
		height: 192px;
		float: left;	
	}
	
	#firstColumnDiv {
		width: 16px;
		height:	100%;
		position: relative;
		float: left;			
	}
	
	#secondColumnDivWrapper {
		width: 575px;
		height: 100%;
		position: relative;
		float: left;
	}
				
	#thirdColumnDiv {
		width: 16px;
		height: 100%;
		position: relative;
		float: left;
	}
	
	#upperRowOfSecColDiv {
		width: 100%;
		height: 20px;
		position: relative;
		float: left;
	}
	
	#lowerRowOfSecColDiv {
		width: 100%;
		height: 345px;
		position: relative;
		float: left;	
	}
	
	#leftCornerOfUpperRow {
		width: 20px;
		height: 20px;
		position: relative;
		float: left;	
	}
	
	#midStripOfUpperRow {
		width: 535px;
		height: 20px;
		position: relative;
		float: left;		
	}
	
	#rightCornerOfUpperRow {
		width: 20px;
		height: 20px;
		position: relative;
		float: left;
	}
	
/*=========================================
		I.3. Background Images 
=========================================*/

	#pgContentContainer{
		background-color: #FFF;
	}

	#hdrContentContainer{
		background-image: url(../images/hdrBgGradient.png);
		background-repeat: repeat-y;		
	}
		
	#coyLogo {
		background-image:url(../images/coyLogo.png);
	}
	
	#rightColumnBottomDiv {
		background-image: url(../images/shadow_BgSydney.png);
		background-repeat: no-repeat;
	}	
	
	#firstColumnDiv{
		background-image: url(../images/rtCol_leftOutermostFrm.png);
		background-repeat: no-repeat;
	}
	
	#thirdColumnDiv {
		background-image: url(../images/rtCol_rightOutermostFrm.png);
		background-repeat: no-repeat;
	}
	
	#leftCornerOfUpperRow {
		background-image: url(../images/rtCol_leftOutermostCorner.png);
		background-repeat: no-repeat;
	}
	
	#midStripOfUpperRow {
		background-image: url(../images/rtCol_TopFrameBg.png);
		background-repeat: repeat-x;		
	}
	
	#rightCornerOfUpperRow {
		background-image: url(../images/rtCol_rightOutermostCorner.png);
		background-repeat: no-repeat;
	}	

	#lowerRowOfSecColDiv {
		background-image: url(../images/rtCol_rightFrameBg.png);
		background-repeat: repeat-x;
	}
	
	#ftrContentContainer {
		background-image: url(../images/footerBg.png);
		background-repeat: no-repeat;		
	}	


/*=========================================================
		I.4. Styles Formatting for the Footer Content
=========================================================*/

	#ftrContentContainer ul{
		font-size: 55%;
		clear: left;
		float: left;
		list-style: none;
		margin: 0;
		padding: 0;
		position: relative;
		left: 65%;			/* pushes the whole ul element to the left equal to half the width of the screen width */
		text-align: center;
		margin-top: 10px;
	}

	#ftrContentContainer ul li{
		display: block;
		float: left;
		list-style: none;
		margin: 0;
		padding: 0;
		position: relative;
		right: 50%;				/* pulls the whole list items back to the right equal to half the width of ul element */
	}

	#ftrContentContainer ul li a{
	   	display: block;
	  	margin: 0 0 0 1px;
		padding: 0px 10px;
	   	color: $666;
	   	text-decoration: none;
	}

	#ftrContentContainer ul li a:hover, #ftrContentContainer ul li a:visited, #ftrContentContainer ul li a:link {
 	  color: #666;
	}

	#ftrContentContainer li+li{
		border-left: 2px solid #A3AAC6;
	}


/*========================================================
		I.5.  Formatting Style for ABN
========================================================*/

	#bmsABN {
		font: bold 55% "Times New Roman", Times, serif;
		color: #333;
		float: right;
		margin: -25px 15px 0 0;
	}

	
/*============================================================
		I.6.	The Layout of the Main Content Cotnainer
============================================================*/
	
	#mnDynamicContentsContainer {
		width: 960px;
		height: 590px;
		position: absolute;
		background-color: transparent;
		left: 0px;
		top: 100px;
	}
	
	#leftColContentWrapper {
		width: 353px;
		height: 100%;
		float: left;
	}		
	
	#leftColumnTopDiv {
		width: 100%;
		height: 294px;
		float: left;
		position: relative;
	}

	#leftColumnMidDiv {
		width: 100%;
		height: 182px;
		float: left;
		position: relative;
	}

	#leftColumnBottomDiv {
		width: 100%;
		height: 114px;
		float: left;
		position: relative;
	}
	
	.rightColContentWrapper	{
		width: 607px;
		height: 100%;
		position: relative;
		float: left;
	}
	
/*=====================================================
			I.5. Header Formatting
=====================================================*/	

	#triBoxes img {
		margin-top: 1.1em;
	}
	#coyName h3 {
		font:  bolder 150% "Trajan pro", Georgia, Times, serif;
		text-transform: capitalize;
		text-shadow: 1px 1px 3px #323232;    /* This is the text drop shadow effect; works w/ browsers supporting CSS3 and HTML5 */
		color: #F1680D;
		margin-top: .5em;
		text-align: left;
		letter-spacing: 2px;
	}
	
	#coyName h3 a {
		color: #F1680D;
		text-decoration: none;
	}
	
	
	#coyName h6 {
		font: 1.2em "Trajan pro", Georgia, Times, serif;
		text-transform: capitalize;
/*		text-shadow: 1px 1px 3px #323232;
*/		color: #F1680D;
		text-align: left;
		letter-spacing: 15px; 
	}
	
/*==============================================
		II.3. Formatting the Menu Services
==============================================*/

	#mnuVertServicesNav {
		font: 500 70% Verdana, Geneva, sans-serif;
/*		color: #239DD8;
*/		letter-spacing: .1em;
		text-align: left;
		width: 251px;
		height: auto;
		margin: 7.5em auto;
	}
	
	#mnuVertServicesNav ul {
		list-style: none;
		margin: 0px;
		padding: 0px;
	}

	#mnuVertServicesNav li {
		padding-bottom: 2px;
	}
	
	#mnuVertServicesNav li a {
		padding: .2em;
/*		border: 1px solid #000;
*/	}
	
	#mnuVertServicesNav li a:link, #mnuVertServicesNav li a:visited {
		font-size: 85%;
		font-weight: 600;
		display: block;
		padding: 0.4em 0 0.4em 0.5em;
		background-color: transparent;
		color: #0C0;
		text-decoration: none;
	}
	
	#mnuVertServicesNav li #current {
		font-weight: 600;
		font-size: 88%;	
		padding-left:14px;
		padding-bottom: 14px;
		background-image:  url('/images/nav_hover.png');
		background-repeat: no-repeat;
		background-position: left bottom;
		color: #0C0;
	}
	
	
/*======================================================
		I.6. Layout and Styles Formatting
				for Home Content
======================================================*/

	.bmsMotto {
		font-size: 80%;
		width: 383px;
		height: 150px;
		float: left;
/*		top: 150px;
		border: 1px solid #F00;
*/	}
	
	.bmsImages {
		width: 280px;
		height: 144px;
		position: absolute;
		margin-top: 145px;
/*		border: 1px solid #F00;	
*/			
	}
	
	#boxMarker {
		width: 29px;
		height: 32px;
		float: right;
/*		border: 1px solid #F00;
*/		margin-right: 30px;
		margin-top: -15px;
	}

	.bmsMotto h1 {
/*		font: bolder 1.75em  "Bella Donna", Palatino, serif;     No Bella Donna font style  */
		font:  bolder 1.5em "Trajan pro", Georgia, Times, serif;
		text-transform: capitalize;
		letter-spacing: 3px;
		line-height: 1.5em; 
		color: #F1680D;
		text-shadow: 1px 1px 3px #323232;    /* This is the text drop shadow effect */		
		text-align: right; 
		margin-right: 2.5em;
		margin-top: 2.5em;	
	}
	
	.bmsImages {
		background-image:  url(../images/family.png);
		background-repeat: no-repeat;
	}

	#boxMarker {
		background-image: url(../images/boxes2.png);
		background-repeat: no-repeat;
	}
	
	.overviewHome {
		width: 555px;
		height: 450px;
		float: left;
		margin-top: 20px;
		margin-left: 20px;	
	}
	
	
/*=======================================================
	IV.1. Styles Format for Main Contents of all Pages
=======================================================*/

	.overviewHome p {
		position: relative;
		font: 80% Verdana, Geneva, sans-serif;
		color: #666;
		line-height: 1.5em;
		text-align: justify;
		margin-top: 2.2em;
		margin-left: .6em;	
	}

	.overviewStudent, .overviewFamily, .overviewBusiness, .overviewGeneral, .overviewOthers {
		width: 545px;
		height: 475px;
		position: relative;		
		color: #F00;
		margin-top: 50px;
		margin-left: 34px;
		padding: 0 0.5em 0 0;
		overflow: auto;
	}
	
	.overviewStudent h1, .overviewFamily h1, .overviewBusiness h1, .overviewGeneral h1, .overviewOthers h1 {
		font: bold 120%  "Trajan Pro", Georgia, Times, serif;
		color: #F1680D;
		margin-bottom: 1.2em;
		text-align: left;
		text-decoration: underline;
	}				
	
	.overviewStudent p, .overviewFamily p, .overviewBusiness p, .overviewGeneral p, .overviewOthers p{
		font: 75%/1.5em  Verdana, Geneva, sans-serif;
		color: #666;
		text-align: justify;
		margin-top: 0.8em;
	}
	
	.overviewStudent h6, .overviewFamily h6, .overviewBusiness h6, .overviewGeneral h6, .overviewOthers h6 {
		font: 75% Verdana, Geneva, sans-serif;
		color: #666;
		margin-top: 1.2em;
		text-align: left;
		font-weight: bold;
	}
	
	.overviewFamily ul {
		font-size: 75%;
		color: #666;
		line-height: 1.2em;
		text-align: justify;
		list-style: disc;
		margin: 1.2em;
		padding: 5px;	
	}
	
	.overviewBusiness table {
		border: 0.2em solid transparent;
		font: 0.7em Verdana, Geneva, sans-serif; 
		line-height: 1.5em;		
		color: #666;
		background: #FFCC00;
		background: rgba(255,254,0,0.2);
		border-spacing: 2px;
		text-align: left;
	}

	.overviewBusiness table th {
		font-weight: bold;
	}

	.overviewBusiness table td, .overviewBusiness table th {
		border: 0.2em solid white;
		padding: 0.5em;	
		margin: 2px;
		border-spacing: 2px;
	}
	
	.overviewBusiness table .darker {
		background: rgba(255,153,0,0.2)	;
	}	
	
	
/*========================================================
		III.1. Layout for Contacts Content
========================================================*/
	
	#contactUsInstructions {
		width: 350px;  /* the out div width is 338px */
		height: 200px;
		float: left;
	}
	
	#ringUsInstructions {
		width: 350px;
		height: 94px;
		float: left;
	}	
	
	#frmPersonalInfoAndResumeUpload {
		font-size: 70%;
		width: 545px;   /* outer container frame is 547px  */
		height: 310px;
		float: left;
		margin-top: 60px;
		margin-left: 32px;
		color: green;
		overflow: visible;
	}
	
	
	.group:before, .group:after {
		content: "\0020"; display: block; height: 0; overflow: hidden; 
	}  
	
	.group:after {
		clear: both;
	}  
	
	.group {
		zoom: 1; 
	} 	
	
	#bmsDetails {
		width: 100%;
		height: 80px;
		margin-top: 40px;
		float: left;
		overflow: auto;
	}
	
	#lineVertical {
		width: 10px;
		height: 100%;
		float: left;
		position: relative;
	}
	
	#agentName {
		width: auto;
		height: 100%;
		float: left;
	}
	
	#bmsContactDetails {
		width: 100%;
		height: 100px;
		float: left;
		overflow: auto;
		font: 0.9em Verdana, Geneva, sans-serif;
		line-height: 1.5em;
		color: #666;
		text-align: justify;
		font-weight: normal;
	}
	
	#phoneEmail{
		width: auto;
		height: auto;
		position: relative;
		float: left;
		padding-top: .5em;
		margin-left: 3.25em;	
	}	

	#bmsAddress {
		width: auto;
		height: auto;
		position: relative;
		float: right;
		padding-top: .5em;
		margin-left: 2em;
		font: 0.9em Verdana, Geneva, sans-serif;
		line-height: 1.5em;
		color: #666;
		text-align: justify;
		font-weight: normal;
	}
	
	
/*========================================================
		III.2. Formatting Styles For Contacts Page
					Left Column
========================================================*/
	
	#contactUsInstructions p{
		font: bold 90% Verdana, Geneva, sans-serif;
		color: #0D8004;
		margin-top: 3em;
		margin-right: 1em;
	}
	
	#ringUsInstructions p {
		font: bold 90% Verdana, Geneva, sans-serif;
		color: #0D8004;
		margin-top: .5em;
		margin-right: 1em;
	}
	
	
	
/*========================================================
		III.3. Formatting Styles For Contacts Page
					Right Column
========================================================*/

	#lineVertical {
		//background-image: url(../images/verticalGreenBar.png);
		background-repeat: no-repeat;
		background-position: center;
		padding-right: 0em;
		margin-left: 2.0em;
	}

	#agentName p{ 
		font: bold 55%/1.2em Verdana, Geneva, sans-serif;;
		letter-spacing: .1em;
		padding: 0;
		margin: 0;
	}
	
		#agentName .ownerName {
		font:  bold 115% Verdana, Geneva, sans-serif;;
		color: #056D05;
		text-align: left;		
		letter-spacing: .2em;
		padding-top: 0.6em;
	}
	
	#phoneEmail p, #bmsAddress p{
		font:  1em Verdana, Geneva, sans-serif;;
/*		color: #056D05;
*/		letter-spacing: .1em;
		padding: 0;
	}

	#agentName p, #phoneEmail p {
		text-align: left;
	}
	
	#bmsAddress p{
		text-align: right;
		margin-right: 5em;
	}	

/*========================================================
   		 Formatting of Email Form for Contacts Page	
========================================================*/
	
	form div {
		width: 100%;
		float: left;
		margin: 0;
		margin-right: 5px;
		padding: 0.3em 0;
	}
	
	#nameContainer, #ageContainer {
		width: auto;
	}
		
	form div label {
		font: 0.9em Werdana, Geneva, sans-serif;
		float: left;
	}		  
	
	#lblName {
		margin-right: 40px;
	}

	#txtAge {
		width: 50px;
	}
	
	#lblAge{
		margin: 0 10px 0 20px;
	}
	
	#txtCountrycode{
		width: 45px;
		margin-left: 10px;
	}
	
	#txtAreacode {
		width: 35px;
	}
	
	#txtEmail {
		width: 200px;
	}
	
	#txtPhone {
		margin-left: 5px;
		width: 257px;
	}
	
	#lblAddress {
		margin-right: 25px;
	}
	
	#lblEmail {
		margin-right: 38px;
	}
		
	#lblQueries {
		margin-right: 26px;
	}
	
	#lblUpload {
		margin: 0 10px 0 75px;
	}
	
	#txtUploadedfile {
		width: 150px;
		padding: 0;
		margin:	0;
	}
	
	#browseFileContainer {
		width: 546px;
		border: 1px solid red;
	}
	#btnUpload {
		float: left;
		margin: 0;
		padding: 0;
	}
	
	#btnSubmit {
		float: right;
		margin-right: 40px;
		margin-top: -20px;
	}
	

/*=======================================================
			IV.1. Formatting of FAQs Page
=======================================================*/

	.bmsFaqs {
		width: 540px;
		height: 483px;
		margin-top: 50px;
		margin-left: 20px;
		padding: 0 .5em;
		overflow: auto;
	}
	.bmsFaqs h1 {
		font: bold 120%  "Trajan Pro", Georgia, Times, serif;
		color: #F1680D;
		text-align: left;
		margin-bottom: 1.2em;
		text-decoration: underline;
	}				
	
	.bmsFaqs p {
		font: 0.7em  Verdana, Geneva, sans-serif;
		line-height: 1.5em;
		color: #666;
		text-align: justify;
		margin-top: 0.8em;
	}
	
	.bmsFaqs .question {
		color: #666;
		margin-top: 1.5em;
	}
	
	.bmsFaqs ul {
		text-align: justify;
		list-style: disc;
		margin: 1.2em;
		padding: 5px;			
	}
	
	.bmsFaqs ul li {
		font: 0.7em  Verdana, Geneva, sans-serif;
		color: #666;		
	}


/*=======================================================
		IV.1. Layout and Formatting of FAQs Page
=======================================================*/

	.bmsScenery1 {
		width: 191px;
		height: 90px;
		position: absolute;
		top: 90px;
	}
	
	.bmsScenery2 {
		width: 143px;
		height: 89px;
		position: absolute;
		top: 55px;	
		left: 118px;	
	}	
	
	.bmsScenery3 {
		width: 124px;
		height: 123px;
		position: absolute;
		top: 125px;
		left: 210px;
		z-index: 1;		
	}
	
	.bmsBoxes1 {
		width: 29px;
		height: 29px;
		position: absolute;
		top: 20px;
		left: 97px;		
	}

	.bmsBoxes2 {
		width: 29px;
		height: 29px;
		position: absolute;
		top: 55px;
		left: 81px;		
	}
	
	.bmsBoxes3 {
		width: 29px;
		height: 29px;
		position: absolute;
		top: 90px;	
		left: 305px;
		z-index: 1;	
	}
	
	.bmsBoxes4 {
		width: 29px;
		height: 29px;
		position: absolute;
		top: 255px;	
		left: 305px;
		z-index: 1;	
	}	


	.bmsScenery1 {
		background-image: url(../images/blueMountains.png);
		background-repeat: no-repeat;
	}
	
	.bmsScenery2 {
		background-image: url(../images/canberra.png);
		background-repeat: no-repeat;
	}	
	
	.bmsScenery3 {
		background-image: url(../images/sydneyCBD.png);
		background-repeat: no-repeat;		
	}
	
	.bmsBoxes1 {
		background-image: url(../images/boxes3.png);
		background-repeat: no-repeat;
	}

	.bmsBoxes2 {
		background-image: url(../images/boxes3.png);
		background-repeat: no-repeat;
	}
	
	.bmsBoxes3 {
		background-image: url(../images/boxes3.png);
		background-repeat: no-repeat;
	}
	
	.bmsBoxes4 {
		background-image: url(../images/boxes4.png);
		background-repeat: nono-repeat;
	}	
	
	
/*========================================================
		II.4. Formatting Styles For Contacts Page
					Right Column
========================================================*/

	#mnuServicesNav {
		font: 600 190% "Microsoft PhangsPa", "Arial", sans-serif;
		color: green;
		letter-spacing: .1em;
		text-align: center;
		width: 607px;
		height: auto;
		float: left;
		margin-top: 1.5em;
		margin-left: 0em;
	}
	
	#mnuServicesNav ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	#mnuServicesNav li {
		padding: .4em;
/*		background-color: #0FF;
*/	}
	
	#mnuServicesNav ul li a {
		color: green;       /* List elements Font Colors */
	}
	
	.mnuHighlight {
/*		color: #FFF;
*/	}
	
	#mnuServicesNav li a:link, #mnuServicesNav li a:visited {
		font-size: 95%;
		display: block;
		padding: 0.2em 0em 0.2em 0em;

/*		border-left: 12px solid #06F;
		border-right: 1px solid #F00;
/*		background-color: #CF9;
/*		opacity: 10%;
		color: #390;
*/		text-decoration: none;
	}
	
	#mnuServicesNav .listHighlight {
		background-color: white;   /*  Background color of list elements  */
	}