/* CSS Document */

/*  Eric meyer reset http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/  */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	/*font-size: 100%;*/
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background:#D9D9FF;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/* end of Meyers reset*/

/*---------------------------clearfix hack ---------------------------------------------*/

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

/*---------------------------------end clearfix hack--------------------------------*/



/*TYPOGRAPHY*/


/*set 1em to 10px for ease of use*/
body {
font-size:62.5%;
font-family:Verdana, Arial, Helvetica, sans-serif;
background:	#b5c2d2 url(images/bgGrad.jpg) repeat-x;

}

p {
line-height:1.3;
font-size:1.3em;
padding-bottom:5px;
}

h2, h3, h4 {
font-size:1.6em;
font-weight:normal;
color:#617EA0;
letter-spacing:.2em;

}

h2 {
margin-bottom:30px;

}

h3{
margin-top:15px;
margin-bottom:20px;
}

h4{
margin-bottom:20px;
text-align:left;
}


h5{
font-weight:normal;
color:#617EA0;
font-size:1.5em;
margin-bottom:5px;
letter-spacing:.2em;
}


h6 {
width:100%;
color:#617EA0;
font-size:1.3em;
letter-spacing:.2em;

}

/*-----------------------------------------------------------------------------------------------------------PAGE ELEMENTS------------------------------------*/

a {
text-decoration:none;

}



/*COMMON CLASSES*/

.floatLeft{
float:left;

}


.floatRight {
float:right;
}

.clear {
clear:both;
}

.paddLeft {
padding-left:20px;
}

.width33 {
width:33%;

} 


.width400{
width:400px;
}
/*-----------------------------------------------------------PAGE LAYOUT---------------------------------------------------------------------------------------*/

#containAll {
width:900px;
margin:auto;
background:#fafafa;
}



/*------------------------------------------------------HEADER AND NAV--------------------------------------------------------------------------------------*/
#header{
height:198px;
width:900px;
background:		url(images/hederb.jpg) no-repeat;
}

#topNav{
width:900px;
height:42px;
background:	url(images/navBar.jpg) no-repeat;
margin-bottom:30px;
color:#CCCCCC;
padding-bottom:10PX;
}


#topNav ul{
padding:20px 20px;;
float:right;
}


#topNav li {
display: inline;
}


#topNav a {
font-size:1.3em;
color:#CCCCCC;
font-weight:bold;

}

#topNav a:hover {
border-bottom:1px solid #CCCCCC;
padding-bottom:2px;

}

/*------------------------------------------------------------------SERVICES---------------------------------------------------------------------------------*/

#services {
margin-bottom:30px;
height:140px;
padding-left:20px;

}

#services ul {
width:900px;
}




#services ul li {
width:180px;
height:140px;
display:block;
float:left;
/*border:1px solid #E1E1F0;*/

}

#service1{
background:url(images/services1.jpg) no-repeat;
margin-right:46px;

}

#service2{
background:url(images/services2.jpg) no-repeat;
margin-right:46px;
}

#service3{
background:url(images/services3.jpg) no-repeat;
margin-right:46px;
}

#service4{
background:url(images/services4.jpg) no-repeat;
}

#services li a{
display:block; 
width:180px;
color:#333333;
text-align:center;
padding:120px 0 10px 0;
font-weight:bold;
font-size:1.1em;
}

#services li a:hover {
border-bottom:1px solid #617EA0;
border-width:5px;
padding-bottom:4px;
}

.lineSpace {
height:15px;
width:378px;
border-top:1px solid #617EA0;
margin:auto;
clear:both;
}


#whoWe  {
width :280px;
float:left;
min-height:171px;   /*height of people imamge */
padding:0 0 15px 20px;
}

#whoWe p {
width:260px;
font-size:1.3em;
float:left;
padding-bottom:5px;
}

#people {
height:171px;
width:270px;
background:	url(images/people.jpg) no-repeat;
float:left;
text-indent:-1200px;
padding-right:20px;
margin-top:20px;

}


blockquote {
float:right;
width:250px;
padding:20px 20px;
}

blockquote p{
font-size:1.6em;

color:#617EA0;
/*padding-top:1.2em;*/
letter-spacing:.2em;
}

.quoteMark {
/*?*/

}




.cited {
padding:10px 20px 0 0;
font-size:1.2em;
font-weight:normal;
text-align:right;
}

/*------------------------------------------------------------------------------------------QUIK CONTACT--------------------------------------------------*/

#quickContact {
float:left;
width:400px;
padding-left:20px;
margin-top:15px;
}

#quickContact div {
width:300px;
height:120px;
background:	url(images/fongirl.jpg) no-repeat bottom left;
padding-left:200px;

}

#quickContact p {
padding-bottom:10px;
font-size:1.3em;
}


/*------------------------------------------------------------------------------------------------------------------NEWS--------------------------------------*/

#news {
float:right;
margin-top:15px;
width:360px;
margin-bottom:15px;
padding-right:20px;
font-size:1.3em;
}



#news a {
color:#333333;
}

#news a:hover {
border-bottom:1px solid #617EA0;
padding-bottom:2px;
}


#news span {
padding-left:20px;
}


/*-------------------------------------------------------------------------------------------------footer------------------------------------------------*/


#footer {
background:	url(images/footerGrada.jpg);
height:46px;
width:100%;
width:900px;
clear:both;
color:#CCCCCC;
}

* html #footer {width:920px;}   /*hack for ie6 */

#footer p {
text-align:center;
padding-top:20px;
}

/*---------------------------------------------------------------------------------------ABOUT PAGE -------------------------------*/


#about #level1 {
background: url(images/rocks.jpg) no-repeat  350px;
margin-bottom:30px;

}


#about #level1, #about #level2, #about #level3, #contact {
padding:0 20px 0 20px;
}


#about #level1 ul{
width:340px;
}

#about #level1 p {
font-size:1.3em;
padding-bottom:5px;
/*margin-right:120px;*/
width:340px;
}



#yup {
width:280px;
float:right;
/*display:block;*/
font-size:1.6em;
text-align:left;
color:#617EA0;
/*padding-top:1.2em;*/
letter-spacing:.2em;
padding-bottom:2px;
position:relative;
bottom:38px;

}

.circleList{
padding:10px 0 20px 16px;
}

.circleList li {
font-size:1.2em;
list-style:disc;
list-style-image:url(images/circle2.jpg);
padding:0 5px 5px 0;
}



#about #level2 div{
width:33%;
}



#about #level2  blockquote {
padding:50px 30px 15px 10px;
}

#about #level2 div p, 
#about #level3 p{
font-size:1.3em;
padding-bottom:5px;
}


#about #level3 {
background:url(images/world.jpg) no-repeat center;
min-height:225px;
width:860px;} 

#about #level3  div{
width:33%;

}

/*--------------------------------------------------------------------------SERVICES---------------------------------------------------------------------------*/


/*--------------------------------------------------------------------contact page-------------------------------------------------------------------------*/

#contactArea{
padding:0 0 20px 20px;
}



#contactArea  p {
margin:5px 0 10px 0;
font-size:1.3em;
}

#contactArea span{
display:block;
font-size:1.3em;
line-height:1.3em;
}
/* ---------------------------------------------------------------------CONTACT FORM-------------------------------------------------------------------*/
label {
font-size:1.2em;
display:block;
padding:5px 0 5px 0;;

}

input, textarea {
display:block;
width:16em;
background-color:#D9D9FF;
border:1px solid 	#B0B0D9;
margin-bottom:5px;
}

input:hover, textarea:hover, input:focus, textarea:focus {
background-color:	#AEAEFF;
}

textarea {
width:16.5em;
height:6em;
}

input.button {
width:4em;
/*display:block;*/
margin-top:10px;
text-align:center;
float:left;
margin-right:10px;
padding:2px;
}


/*--------------*/
.level {
padding:0 20px 0 20px;

width:860px;
}

 .circleList li {
line-height:1.5;
}

#faq .level {
margin-bottom:20px;

}

.topLink {
position:relative;
bottom:20px;
float:right;
text-indent:-1400px;
display:block;
font-size:.2em;
}

/* CSS Document */

/*  Eric meyer reset http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/  */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	/*font-size: 100%;*/
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background:#D9D9FF;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/* end of Meyers reset*/

/*---------------------------clearfix hack ---------------------------------------------*/

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

/*---------------------------------end clearfix hack--------------------------------*/



/*TYPOGRAPHY*/


/*set 1em to 10px for ease of use*/
body {
font-size:62.5%;
font-family:Verdana, Arial, Helvetica, sans-serif;
background:	#b5c2d2 url(images/bgGrad.jpg) repeat-x;

}

p {
line-height:1.3;
font-size:1.3em;
padding-bottom:5px;
}

h2, h3, h4 {
font-size:1.6em;
font-weight:normal;
color:#617EA0;
letter-spacing:.2em;

}

h2 {
margin-bottom:30px;

}

h3{
margin-top:15px;
margin-bottom:20px;
}

h4{
margin-bottom:20px;
text-align:left;
}


h5{
font-weight:normal;
color:#617EA0;
font-size:1.5em;
margin-bottom:5px;
letter-spacing:.2em;
}


h6 {
width:100%;
color:#617EA0;
font-size:1.3em;
letter-spacing:.2em;

}

/*-----------------------------------------------------------------------------------------------------------PAGE ELEMENTS------------------------------------*/

a {
text-decoration:none;

}



/*COMMON CLASSES*/

.floatLeft{
float:left;

}


.floatRight {
float:right;
}

.clear {
clear:both;
}

.paddLeft {
padding-left:20px;
}

.width33 {
width:33%;

} 


.width400{
width:400px;
}
/*-----------------------------------------------------------PAGE LAYOUT---------------------------------------------------------------------------------------*/

#containAll {
width:900px;
margin:auto;
background:#fafafa;
}



/*------------------------------------------------------HEADER AND NAV--------------------------------------------------------------------------------------*/
#header{
height:198px;
width:900px;
background:		url(images/hederb.jpg) no-repeat;
}

#topNav{
width:900px;
height:42px;
background:	url(images/navBar.jpg) no-repeat;
margin-bottom:30px;
color:#CCCCCC;
padding-bottom:10PX;
}


#topNav ul{
padding:20px 20px;;
float:right;
}


#topNav li {
display: inline;
}


#topNav a {
font-size:1.3em;
color:#CCCCCC;
font-weight:bold;

}

#topNav a:hover {
border-bottom:1px solid #CCCCCC;
padding-bottom:2px;

}

/*------------------------------------------------------------------SERVICES---------------------------------------------------------------------------------*/

#services {
margin-bottom:30px;
height:140px;
padding-left:20px;

}

#services ul {
width:900px;
}




#services ul li {
width:180px;
height:140px;
display:block;
float:left;
/*border:1px solid #E1E1F0;*/

}

#service1{
background:url(images/services1.jpg) no-repeat;
margin-right:46px;

}

#service2{
background:url(images/services2.jpg) no-repeat;
margin-right:46px;
}

#service3{
background:url(images/services3.jpg) no-repeat;
margin-right:46px;
}

#service4{
background:url(images/services4.jpg) no-repeat;
}

#services li a{
display:block; 
width:180px;
color:#333333;
text-align:center;
padding:120px 0 10px 0;
font-weight:bold;
font-size:1.1em;
}

#services li a:hover {
border-bottom:1px solid #617EA0;
border-width:5px;
padding-bottom:4px;
}

.lineSpace {
height:15px;
width:378px;
border-top:1px solid #617EA0;
margin:auto;
clear:both;
}


#whoWe  {
width :280px;
float:left;
min-height:171px;   /*height of people imamge */
padding:0 0 15px 20px;
}

#whoWe p {
width:260px;
font-size:1.3em;
float:left;
padding-bottom:5px;
}

#people {
height:171px;
width:270px;
background:	url(images/people.jpg) no-repeat;
float:left;
text-indent:-1200px;
padding-right:20px;
margin-top:20px;

}


blockquote {
float:right;
width:250px;
padding:20px 20px;
}

blockquote p{
font-size:1.6em;

color:#617EA0;
/*padding-top:1.2em;*/
letter-spacing:.2em;
}

.quoteMark {
/*?*/

}




.cited {
padding:10px 20px 0 0;
font-size:1.2em;
font-weight:normal;
text-align:right;
}

/*------------------------------------------------------------------------------------------QUIK CONTACT--------------------------------------------------*/

#quickContact {
float:left;
width:400px;
padding-left:20px;
margin-top:15px;
}

#quickContact div {
width:300px;
height:120px;
background:	url(images/fongirl.jpg) no-repeat bottom left;
padding-left:200px;

}

#quickContact p {
padding-bottom:10px;
font-size:1.3em;
}


/*------------------------------------------------------------------------------------------------------------------NEWS--------------------------------------*/

#news {
float:right;
margin-top:15px;
width:360px;
margin-bottom:15px;
padding-right:20px;

}



#news ul a {
font-size:1.3em;
color:#333333;
}

#news ul a:hover {
border-bottom:1px solid #617EA0;
padding-bottom:2px;
}


#news span {
padding-left:20px;
}


/*-------------------------------------------------------------------------------------------------footer------------------------------------------------*/


#footer {
background:	url(images/footerGrada.jpg);
height:46px;
width:100%;
width:900px;
clear:both;
color:#CCCCCC;
}

* html #footer {width:920px;}   /*hack for ie6 */

#footer p {
text-align:center;
padding-top:20px;
}

/*---------------------------------------------------------------------------------------ABOUT PAGE -------------------------------*/


#about #level1 {
background: url(images/rocks.jpg) no-repeat  350px;
margin-bottom:30px;

}


#about #level1, #about #level2, #about #level3, #contact {
padding:0 20px 0 20px;
}


#about #level1 ul{
width:340px;
}

#about #level1 p {
font-size:1.3em;
padding-bottom:5px;
/*margin-right:120px;*/
width:340px;
}



#yup {
width:280px;
float:right;
/*display:block;*/
font-size:1.6em;
text-align:left;
color:#617EA0;
/*padding-top:1.2em;*/
letter-spacing:.2em;
padding-bottom:2px;
position:relative;
bottom:38px;

}

.circleList{
padding:10px 0 20px 16px;
}

.circleList li {
font-size:1.2em;
list-style:disc;
list-style-image:url(images/circle2.jpg);
padding:0 5px 5px 0;
}



#about #level2 div{
width:33%;
}



#about #level2  blockquote {
padding:50px 30px 15px 10px;
}

#about #level2 div p, 
#about #level3 p{
font-size:1.3em;
padding-bottom:5px;
}


#about #level3 {
background:url(images/world.jpg) no-repeat center;
min-height:225px;
width:860px;} 

#about #level3  div{
width:33%;

}

/*--------------------------------------------------------------------------SERVICES---------------------------------------------------------------------------*/


/*--------------------------------------------------------------------contact page-------------------------------------------------------------------------*/

#contactArea{
padding:0 0 20px 20px;
}



#contactArea  p {
margin:5px 0 10px 0;
font-size:1.3em;

}


/* ---------------------------------------------------------------------CONTACT FORM-------------------------------------------------------------------*/
label {
font-size:1.2em;
display:block;
padding:5px 0 5px 0;;
}

label.error{
color:red;
}

input, textarea {
display:block;
width:16em;
background-color:#D9D9FF;
border:1px solid 	#B0B0D9;
margin-bottom:5px;
}

input:hover, textarea:hover, input:focus, textarea:focus {
background-color:	#AEAEFF;
}

input.error{
background:#fafafa;
}

textarea {
width:16.5em;
height:6em;
}

input.button {
width:4em;
/*display:block;*/
margin-top:10px;
text-align:center;
float:left;
margin-right:10px;
padding:2px;
}

#errors{
text-align:center;
padding:20px;
font-size:1.3em;
}
/*--------------*/
.level {
padding:0 20px 0 20px;

width:860px;
}

 .circleList li {
line-height:1.5;
}

#faq .level {
margin-bottom:20px;

}

.topLink {
position:relative;
bottom:20px;
float:right;
text-indent:-1400px;
display:block;
font-size:.2em;
}