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

/* REV March 20120
adjusted menu so as to have items equally spaced  */

/* REV Sept 2012 
Edit the background color in BODY  from white to #F3E7BD tan in order to account for IE7,8 not showing mutli background */


/* REV October 2012
Add social media badges, edit headers to incorporate */

/* Rev October 2014 
for client-login page and mobile setup


/* Content notes

ww3c validation service and DOCTYPE
*/

 

/*  COLOR PALETTE
nice sandstone red  								#BF5C3F 
gold text    										#D49F10
more tan color, old tan section color bg 			#F0E4AF
red of the orig header background  					#B72816
nav background, stonier tan  						#F3E7BD
another tan ....header link, little less gold		#D4AD63  
neutral gray that works  							#D2D2D2
a blue grayish lavendar  							#645D6F
even stonier										#F0E8C5
TRU GOLD from compass rose							#D5A00F
gentle box drop gold								#E2BD60

New Colors
blue gray, medium saturation, new footer			#647680
a tan from orig pallette, darker than tan section	#e5c78d
light white/beige for red header "white-ish" letters#F1EFDA
body lightness of gray								#efeee9												


to consider 
orange red   #CC3300 
a gold   #CC8600
a nice gold found on another site  #C39833
*/

/* vertical compass photo  340px by 611px  */


body{
margin:0;
padding:0;
width: 100%;
font-size: 100%;
background-image: url(Images-Compass-Wealth/left-map-strip.jpg), url(Images-Compass-Wealth/right-map-strip.jpg);
background-position: left top, right top;
background-repeat:repeat-y, repeat-y;
background-color: #F3E7BD;  
min-width: 995px;  
}

#header{
width: 100%;
margin: 0 auto;
background-image:url(Images-Compass-Wealth/Final-logo-Compass-investment-advisor-logo.png);
background-repeat:no-repeat;
background-position: 12% 30%;
height: 9em;
background-color:#b72816;    
padding-top: 15px;
}


#shortHeader{
width: 85%;
margin: 0 auto;
background-image:url(Images-Compass-Wealth/Final-logo-Compass-investment-advisor-logo.png);
background-repeat:no-repeat;
background-position: 12% 30%;
height: 9em;
background-color:#b72816;    
padding-top: 15px;
border-left: 1px solid #BF5C3F;
border-right: 1px solid #BF5C3F;
}

#shortModHeader{
width: 85%;
margin: 0 auto;
background-image:url(Images-Compass-Wealth/Depth-Final-logo.png);
background-repeat:no-repeat;
background-position: 12% 30%;
height: 10em;
background-color:#b72816;    
padding-top: 20px;
border-left: 1px solid #BF5C3F;
border-right: 1px solid #BF5C3F;


}


#headerHome{  /* no longer in use */
width: 100%;
margin: 0 auto;
background-image:url(Images-Compass-Wealth/Final-logo-Compass-investment-advisor-logo.png);
background-repeat:no-repeat;
background-position: 36% 5%;
height: 9em;
background-color: #b72816;
border-left: 1px solid #BF5C3F;
border-right: 1px solid #BF5C3F;   
padding-top: 15px;
} 


#flashingSlogan{
float: left;
width: 315px;
height:60px;
margin-left:18%;
margin-top: 2.6em;   /* was 2.4 for recent headers before social media */
}


#flashingSloganHome{
float: left;
width: 330px;
height:60px;
margin-left:35%;
margin-top: 2.4em;
}

#companyTitle {
height:auto;
width: auto;
font-family: "Times New Roman", Times, serif;
font-size: 2em;
color: #D5A00F;     
margin-left: 18%;
margin-bottom:0px;
border:0px;
text-shadow: 1px 1px 1px #000000; 
}





#LouTitle{
height: auto;
width: auto;
color:  #D5A00F;    /* subtle less gold #D4AD63;  */
font-family: "Times New Roman", Times, serif;
font-size: 1.0em;
line-height: 1.3em;
margin-left: 65%;
margin-bottom: 0px;
padding:0px;
margin-top: 3em;
font-weight: normal;
}

#socialMediaDiv{
height:75px;
width: auto;
color:  #D5A00F;    /* subtle less gold #D4AD63;  */
font-family: "Times New Roman", Times, serif;
font-size: 1.2em;
text-shadow: 1px 1px 1px #333;
float:right;
padding:0px;
font-weight:bold;
text-align:left;
/*  background-color: #751413;  */
margin-right:2%;

clear:right;
}

.raiseMeUp{
position:relative;
top: -1.0em;
}

.SocialHello{
font-size:18px;
text-align:left;
color:#FFFFFF;
}

.MorningstarQuote{
font-size:14px;
line-height: 14px;
font-style:italic;
color:#FFF;
}

#navBlock{      /* this is for the 100% across header   */
width:100%;
height: 1.8em;
margin: 0 auto;
padding: 10px 0 0 0;
border-bottom: 1px solid gray;   /*  the reddish sandstone from before  #BF5C3F;  */
border-top:0px;
background-color:#F0E8C5;
border-left: 1px solid #BF5C3F;
border-right: 1px solid #BF5C3F;
}


#navBlockShort{    /* This is for the less than 100% length header  */
width:85%;
height: 1.8em;
margin: 0 auto;
padding: 10px 0 0 0;
border-bottom: 1px solid gray;   /*  the reddish sandstone from before  #BF5C3F;  */
border-left: 1px solid #BF5C3F;
border-right: 1px solid #BF5C3F;
border-top:0px;
background-color:#F0E8C5;
clear: right;  /*  to add space after newsletter signup creeping downward  */
}


ul#nav{
list-style:none;
background-color: #f3e7bd;
margin:0 0 0 3%;   /* was 5%, need smaller for IE11  */
padding-left:0%;  /*  half of the leftover from the 100%-maincontetn%  for the full width use 7% */
}

ul#nav  li {
display:inline;
font-family: "Times New Roman", Times, serif;
font-size:1.3em;   /*  client login needed more space was 1.3em  */
font-variant:small-caps;
/* this is change for getting equal spacing menu items */
float:left;
padding-right: 3.5%;    /* must not have lenght defined elsewhere, such as in "a" */
/*  padding-right was 5% but after adding the client login need more space   */

}

ul#nav  li a {
text-decoration:none;
padding:0;
/*   if width then no padding vice versa  width:190px;*/
 
color:#4D4D4D;
text-align: center;   /* was center */
/* border-left:1px solid #fff;  IF want line between Selections put this back in  */

/* below taken out to equally space menu components */
/* float:left;  
width: 120px;  */

/* transition */
-webkit-transition: color  .3s ease;
  -moz-transition: color  .3s ease;
  -ms-transition: color  .3s ease;
  -o-transition: color  .3s ease;
  transition: color  .3s ease;
}


/* Duplicate NAV for home page due to big margin shift into the center  */
#NavCenterMe{
margin-left:5%;
}



ul#navHome{    /* This was how to center the Home NAV itels because I knew the width  */
list-style:none;
background-color: #f3e7bd;
width: 910px;  
height: auto;
margin:0 auto;
padding-left:0%;  /*  half of the leftover from the 100%-maincontetn%  */
}

ul#navHome  li {
display:inline;
font-family: "Times New Roman", Times, serif;
font-size:1.0em;
font-variant:small-caps;
}

ul#navHome  li a {
text-decoration:none;
padding:0;
width: 130px;
/*   if width then no padding vice versa  width:190px;*/
float:left;   
color:#4D4D4D;
text-align: center;   /* was center */
/* border-left:1px solid #fff;  IF want line between Selections put this back in  */
}

/* End of duplicate NAV for home page  */

.currentPage{
color: #D49F10;
text-decoration:underline;
}

.currentParentPage{
color: #D49F10;
}


ul#nav li a:hover{
color: #D4AD63;     
text-decoration:underline;
}

img{
border: none;
}

blockquote{
color: #666666;
line-height: 1.3em;
font-size: 1.2em;
font-style: italic;
}

.noIndent{
margin:0;
padding:0;
}

.extraTab{
margin-left: 100px;
}

#mainContent{
width:85%;
height: auto; 
margin: 0px auto;
background-image:url(Images-Compass-Wealth/sidebar-filler.gif);
background-position:left;
background-repeat:repeat-y;
background-color: #FFF;


border-left: 1px solid #BF5C3F;
border-right: 1px solid #BF5C3F;
overflow: hidden;
/* box-shadow: 6px 0px 10px -7px #888, -6px 0px 10px -7px #888;  */
/* box-shadow: 3px 0px 3px #BBB;
-moz-box-shadow: 3px 0px 3px #BBB;
-webkit-box-shadow: 3px 0px 3px #BBB;  */
}


/* removing width and float made this balance out perfectly  */
/* width of sidebar plus the padding required for main text */



#mainText{                     
background-color: #ffffff;
/* border-left: 1px solid #D8AB55;  */
margin-left: 360px; 
 /* this moves mainText to right of the sdiebar that is 340 pixels wide  360/20/20 worked before  */
padding-right: 20px;
padding-top: 20px;
height: 100%;
}



 /* for total liquid  31%; and 65% for main content max-width:340px; */
 
 
 
#sideBarLeft{           /* Has COMPASS Background Photo */
width: 340px;                  
height: 100%;
float: left;
background-image:url(Images-Compass-Wealth/vertical-compass-photo.jpg);
background-repeat:no-repeat;
background-color: #F0E8C5;  /* try not to use padding in sidebar as will be added to lenght in ns browsers  */
padding-top: 20px;
}



/* mucho sidebar options, basically the div sets the font size and other divs inherit so as to avoid multiplying */
/* This sidebars job is to provide the background image down the column */
#sidebarList{     /* Small Cap lists to go below pages with (companies) with short secondary nav  */
width: 340px;
height: 100%;
background-color:#F0E8C5;
color: #3E354A;
font-size: 1.2em;
font-family: "Times New Roman", Times, serif;
text-align: center;
font-variant: small-caps;
margin-top:535px;
margin-left:0;
margin-right:0;
margin-bottom:0;
line-height: 1.6em;
background-image:url(Images-Compass-Wealth/opacity-compass-rose.png);
background-position:center top;
		background-repeat: repeat-y;
		
}

#sidebarListRaise{  /*  Small Cap List goes raised up due to offset caused by a longer breadcrumb nav, (individuals uses this)  */
width: 340px;
height: auto;
background-color:#F0E8C5;
color: #3E354A;
font-size: 1.2em;
font-family: "Times New Roman", Times, serif;
text-align: center;
font-variant: small-caps;
margin-top:450px;
margin-left:0;
margin-right:0;
margin-bottom:0;
line-height: 1.6em;
background-image:url(Images-Compass-Wealth/opacity-compass-rose.png);
background-position:center top;
		background-repeat: repeat-y;
}

#sidebarLeftPlain{    /*    FOR PLAIN SIDEBARS , NO PHOTO OF COMPASS, maybe an inserted image, centered text  */
width: 340px;
height: auto;
float: left;
background-color:#F0E8C5;
margin-top: 20px;
/* line-height: 1.6em; */
color:#3E354A;
/*  font-variant:small-caps; */
/* font-size: 1.1em; */
text-align:left;
background-image:url(Images-Compass-Wealth/opacity-compass-rose.png);
background-position:center top;
		background-repeat: repeat-y;
}



#sideBarLeftNoPic{  /*   for pages with no COMPASS photo but still have secondary nav    ABOUT/TEAM  PAGE  */
width:  340px;                   /* for total liquid  31%; and 65% for main content max-width:340px; */
height: 100%;
float: left;
background-color: #F0E8C5;  /* try not to use padding in sidebar as will be added to lenght in ns browsers  */
padding-top: 20px;
background-image:url(Images-Compass-Wealth/opacity-compass-rose.png);
background-position:center top;
background-repeat:repeat-y;
text-align:center;  
}





p.sidebarListCap {
color:#3E354A;
font-size: 1.5em;
font-family: "Times New Roman", Times, serif;
text-align: center;
font-variant: small-caps;
line-height: 1.0em;
padding:0;
margin:0;
}

p.sidebarListNormal{
color:#3E354A;
font-size: 1.2em;
font-family: "Times New Roman", Times, serif;
text-align: center;
font-variant: normal;
line-height: 1.2em;
padding:0;
margin:0;
padding:10px;
}


p.sidebarListNormalInset{
color:#3E354A;
font-size: 1.2em;
font-family: "Times New Roman", Times, serif;
text-align: center;
font-variant: normal;
line-height: 1.2em;
padding:0;
margin:0;
padding:0 30px 0;
}




#breadcrumbDiv {
-moz-border-radius: 15px;
border-radius: 15px;  
width: 189px;
height: auto;
background-color:  #F0E8C5;
font-family:"Times New Roman", Times, serif;
line-height: 1.9em;
margin-left: 50px;
margin-top: 20px;
padding-top: 8px;
padding-left: 20px;
padding-bottom: 10px;
border: 1px solid white;
opacity:.8;
filter:alpha(opacity=90);  
font-variant:small-caps;
font-weight:normal;
box-shadow: 3px 3px 3px #E2BD60;
-moz-box-shadow: 2px 2px 3px #E2BD60;
-webkit-box-shadow: 2px 2px 3px #E2BD60;

}

#breadcrumbDiv ul {
list-style: none;
margin:0px;     /* inset these guys from header of the nav   */
padding:0px;
padding-left:10px;
opacity:1.0;
filter:alpha(opacity=100);
}



.light{
font-size: 90%;
font-style:italic;
padding:0;
margin:0;
}

p, h1 {
line-height: 1.4em;
}

p{
font-family:"Times New Roman", Times, serif;
font-size: 1.2em;
color: #666666;  /* was 444444 */
}

h1{
font-family:"Times New Roman", Times, serif;
color: #D49F10;
font-size: 1.4em;
text-align:center; 
font-weight:normal;
letter-spacing: 1.0px;
/*  text-shadow: 1px 1px 1px #BBBBBB; */
margin-top: 0px;
/* display:inline-block;   only for IE to get "layout" so shadow will work 
filter: Shadow(Color=#BBBBBB, 	
			Direction=135, 
			Strength=8);  */
			
}


h2{
font-family: Georgia, "Times New Roman", Times, serif;
color: #D49F10;
font-size: 1.2em;
font-weight:lighter;
}


h3{
font-family: "Times New Roman", Times, serif;
color: #D49F10;
font-size: 1.2em;
font-weight: lighter;
text-decoration:none;
}

h4{
font-family: Georgia, "Times New Roman", Times, serif;
color: #D49F10;
font-size: 1.6em;
text-align: left;
margin:0;
text-shadow: 2px 2px 2px #BBBBBB; 
}

a.footerlink:link {color: #999999;  font-weight: normal; text-decoration:underline; font-size:1.0em; display:inline;}
a.footerlink:active {color: #999999;  font-weight: normal; text-decoration:underline; font-size:1.0em; display:inline;}
a.footerlink:visited {color: #999999; font-weight: normal;text-decoration:underline; font-size:1.0em; display:inline; }
a.footerlink:hover {color:#FFFFFF;  font-weight: normal; text-decoration:underline; font-size:1.0em; display:inline;
-webkit-transition: color  .4s ease;
  -moz-transition: color  .4s ease;
  -ms-transition: color  .4s ease;
  -o-transition: color  .4s ease;
  transition: color  .4s ease;}



a.footerlinkSmall:link {color: #999999;  font-weight: normal; text-decoration:underline; font-size:.8em; display:inline;}
a.footerlinkSmall:active {color: #999999;  font-weight: normal; text-decoration:underline; font-size:.8em; display:inline;}
a.footerlinkSmall:visited {color: #999999; font-weight: normal;text-decoration:underline; font-size:.8em; display:inline; }
a.footerlinkSmall:hover {color:#FFFFFF;  font-weight: normal; text-decoration:underline; font-size:.8em; display:inline;}



a.mainWhite:link {color: #D5A00F;  font-weight: normal; text-decoration:underline; font-size: inherit;}
a.mainWhite:active {color: #D5A00F;  font-weight: normal; text-decoration:underline; font-size:inherit}
a.mainWhite:visited {color: #D5A00F; font-weight: normal;text-decoration:underline; font-size:inherit }
a.mainWhite:hover {color:#BF5C3F ;  font-weight: normal; text-decoration:underline; font-size:inherit;
-webkit-transition: color  .3s ease;
  -moz-transition: color  .3s ease;
  -ms-transition: color  .3s ease;
  -o-transition: color  .3s ease;
  transition: color  .3s ease;



}


a.breadcrumbLink:link {color: #000000;  font-weight: normal; text-decoration:none; font-size:1.3em;}
a.breadcrumbLink:active {color: #000000;  font-weight: normal; text-decoration:underline;font-size:1.3em; }
a.breadcrumbLink:visited {color: #000000; font-weight:normal;text-decoration:none;font-size:1.3em;}
a.breadcrumbLink:hover {color:#D4AD63;  font-weight:normal; text-decoration:underline; font-size:1.3em;
-webkit-transition: color  .2s ease;
  -moz-transition: color  .2s ease;
  -ms-transition: color  .2s ease;
  -o-transition: color  .2s ease;
  transition: color  .2s ease;


}


/*  These are for the links in header, company contact emmail etc  */ 
a.headerLink:link {color: #D4AD63;  font-weight: normal; text-decoration:none; font-size:1em;}
a.headerLink:active {color: #D4AD63;  font-weight: normal; text-decoration:underline; font-size:1em}
a.headerLink:visited {color: #D4AD63; font-weight: normal;text-decoration:none; font-size:1em }
a.headerLink:hover {color:#D4AD63;  font-weight: normal; text-decoration:underline; font-size:1em}

a.pdfLink:link {color: #000000;  font-variant:normal; font-weight: normal; text-decoration:none; font-size:.9em }
a.pdfLink:active {color: #000000;  font-variant:normal ;font-weight: normal; text-decoration:underline; font-size:.9em}
a.pdfLink:visited {color: #000000; font-variant:normal; font-weight:normal;text-decoration:none; font-size:.9em}
a.pdfLink:hover {color:#D4AD63;  font-variant:normal; font-weight:normal; text-decoration:underline; font-size:.9em}


a.siteWhite:link {color: #666666;  font-weight: normal; text-decoration:none; font-size: inherit;}
a.siteWhite:active {color: #666666;  font-weight: normal; text-decoration:none; font-size:inherit}
a.siteWhite:visited {color: #666666; font-weight: normal;text-decoration:none; font-size:inherit }
a.siteWhite:hover {color:#D4AD63;  font-weight:normal; text-decoration:underline; font-size:inherit}

a.bioLink:link {color: #3E354A;  font-weight: normal; text-decoration:none; }
a.bioLink:active {color: #3E354A;  font-weight: normal; text-decoration:underline; }
a.bioLink:visited {color: #3E354A; font-weight:normal;text-decoration:none;}
a.bioLink:hover {color:#D4AD63;  font-weight:normal; text-decoration:underline;}

a.prefooterLink:link {color: #555;  font-weight: normal; text-decoration:none; }
a.prefooterLink:active {color: #555;  font-weight: normal; text-decoration:underline; }
a.prefooterLink:visited {color: #555; font-weight:normal;text-decoration:none;}
a.prefooterLink:hover {color:#000000;  font-weight:normal; text-decoration:underline;}


#preFooter{
clear:both;
}

#footer {
    margin: 0 auto; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	background-color: #E3D4A7;  /* #F0E8C5;  */ /* this was a blur gray from photo  #647680;	 this is ?#4D4D4D; */
	
    clear: both;
	width: 85%;
    height: 9em;
    text-align: center;
	color: #666666;
	font-size: 1em;
	padding-top: 1em;
	border-right: 1px solid #BF5C3F;
	border-left: 1px solid #BF5C3F; 
	/* box-shadow: 3px 0px 3px #BBB;
-moz-box-shadow: 3px 0px 3px #BBB;
-webkit-box-shadow: 3px 0px 3px #BBB; */
	
	}
	
#DeeperFooter{
 margin: 0 auto; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	background-color: #E3D4A7;  /* #F0E8C5;  */ /* this was a blur gray from photo  #647680;	 this is ?#4D4D4D; */
	
    clear: both;
	width: 85%;
    height: 11em;
    text-align: center;
	color: #666666;
	font-size: 1em;
	padding-top: 1em;
	border-right: 1px solid #BF5C3F;
	border-left: 1px solid #BF5C3F; 
	/* box-shadow: 3px 0px 3px #BBB;
-moz-box-shadow: 3px 0px 3px #BBB;
-webkit-box-shadow: 3px 0px 3px #BBB; */
	
	}
	
	
	
#footerHome {
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	background-color: #E3D4A7;  /* #F0E8C5;  */ /* this was a blur gray from photo  #647680;	 this is ?#4D4D4D; */
	
    clear: both;
	width: 100%;
    height: 9em;
    text-align: center;
	color: #666666;
	font-size: 1em;
	padding-top: 1em;
	border-top: 1px solid #BF5C3F;
	}	
	
#footerTest{
margin: 0 auto; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	background-color: #333333;/* #E3D4A7;*/  /* #F0E8C5;  */ /* this was a blur gray from photo  #647680;	 this is ?#4D4D4D; */
	
    clear: both;
	width: 85%;
    height: 4em;
    text-align: center;
	color: #ffffff;
	font-size: .8em;
	padding-top: 1em;
	border-right: 1px solid #BF5C3F;
	border-left: 1px solid #BF5C3F;
	box-shadow: 3px 0px 3px #BBB;
-moz-box-shadow: 3px 0px 3px #BBB;
-webkit-box-shadow: 3px 0px 3px #BBB; 
}
	
	
#footer-inner {
	position:relative;
	top: 2em;
	left: 9em;
	width: 10em;
	height: auto;
	text-align: left;
	color: #FFFFFF;
	}
	
#footercenter{
	float:right;
	margin-right: 13%;
	width: 70%;
	height: auto;
	display: inline;
	}
	




#footer a:hover {
    text-decoration: underline;
	
}



.cleanImage{
border:0;
padding:0;
margin:0;
}


   


.footerFla{
font-family:"Times New Roman", Times, serif;
font-size: 1em;
color: #B3B3B3;
padding-left: 150px;
padding-right: 150px;
line-height: 1em;
}

.floatRight{
float: right;
}

.floatLeft{
float: left;
}

.floatLeftPad{
float: left;
padding:15px;
}

.floatRightPad{
float: right;
padding-left: 15px;
padding-right: 15px;
}


.newsletterImages{
border: 1px solid #DDD;
float: left;
padding: 2px;
display:inline;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 40px;
margin-top: 20px;
box-shadow: 3px 3px 3px #DDD;
-moz-box-shadow: 2px 2px 3px #DDD;
-webkit-box-shadow: 2px 2px 3px #DDD;
}


.smaller{
font-size: 90%;
}


/* notes that apply to all these boxes -
box-shadow not show on ipad, moz does */




#boxOne{
float: left;
margin-left: 0%;   /* 18%;  */
width: 220px;
height: 425px;
background-color:  #F3E7BD;  
background-image:url(Images-Compass-Wealth/opacity-compass-rose.png);
background-repeat:no-repeat;
background-position: bottom center; 
border: 1px solid #BF5C3F; 
/* border: 1px solid #E2D28D; */
 /*  background-image:url(images/vertical-compass-photo.jpg);
background-repeat:no-repeat;   */
display: inline; /* IE double float margin bug  */
cursor: pointer;
/* box-shadow: 3px 3px 3px #BBBBBB;  */

box-shadow: 3px 3px 3px #E2BD60;
-moz-box-shadow: 2px 2px 3px #E2BD60;
-webkit-box-shadow: 2px 2px 3px #E2BD60;
/* -moz-border-radius: 15px;
border-radius: 15px;  */
}


#boxTwo{
float: left;
margin-left: 25px;
background-color: #F3E7BD;/* #F3E7BD;   */ 
background-image:url(Images-Compass-Wealth/opacity-compass-rose.png);
background-repeat:no-repeat;
background-position:bottom center;
border: 1px solid #BF5C3F;
cursor: pointer;
width: 220px;
height: 425px;
box-shadow: 3px 3px 3px #E2BD60;
-moz-box-shadow: 2px 2px 3px #E2BD60;
-webkit-box-shadow: 2px 2px 3px #E2BD60;
}




#boxThree{
float: left;
margin-left: 25px;
background-color: #F3E7BD;
background-image:url(Images-Compass-Wealth/opacity-compass-rose.png);
background-repeat:no-repeat;
background-position:bottom center; 
border: 1px solid #BF5C3F;
cursor: pointer;
width: 220px;
height: 425px;
box-shadow: 3px 3px 4px #E2BD60;
-moz-box-shadow: 2px 2px 3px #E2BD60;
-webkit-box-shadow: 2px 2px 3px #E2BD60;
}


#boxOneB{
float: left;
clear:both;
margin-left: 18%;
margin-top: 1%;
width: 20%;
height: auto;
display: inline; /* IE double float margin bug  */
border-top: 1px solid #BF5C3F;
}


#boxTwoB{
float: left;
margin-left: 2.5%;
margin-top: 1%;
width: 20%;
height: auto;
display: inline;
border-top: 1px solid #BF5C3F;
/* background-image:url(images/thin-gray-line.png);
background-repeat:no-repeat;  */
}


#boxThreeB{
float: left;
margin-left: 2.5%;
margin-top: 1%;
width: 20%;
height: auto;
display: inline;
border-top: 1px solid #BF5C3F;
background-color: none;
/* background-image:url(images/thin-gray-line.png);
background-repeat:no-repeat;   */
}


#welcomeMain{
background-color: #FFFFFF; /* #F3E7BD;  */
width: 100%;
height: auto;
padding-top: 20px;
margin: 0px auto;
border: 1px solid #F1F1F1;

}

.welcomeRectText{
color: #808080;
font-family:"Times New Roman", Times, serif;
font-size: .9em;
line-height: 1.4em;
padding-left: 15px;
padding-right: 15px;
text-align:left;
}

#topBox{
background-color:#FFFFFF;
width: 45%;
height: auto;
margin: 0 auto;
text-align:center;
/* border-top: 1px solid gray;
border-bottom: 1px solid gray; */

}

#bottomBox{
width: 100%;
height: auto;
float:left;
background-color: #F3E7BD;
background-image: url(Images-Compass-Wealth/opacity-compass-rose-half-large.png);
background-repeat:no-repeat;
background-position:center bottom;
margin: 0px auto 0px auto;
clear: both;
padding-top: 20px;
}



.boxText{
font-family:"Times New Roman", Times, serif;
color:#555555;
font-size: .9em;
padding: 0 20px;
line-height: 1.2em;
}

h5{
font-family:"Times New Roman", Times, serif;
color:#555555;
font-size: .9em;
padding: 0 20px;
line-height: 1.2em;
}


.skinnyLine{
padding:0;
margin:0 0;
color: gray;
width: 80%;
background-color: gray;
height: .1em;
line-height: .5em;
}

.copyright{
color:#999999;
font-size: .5em;
}

.formSmall{
font-size: .8;
color:#CCCCCC;
}

.formDark{
font-size: 1.2em;
font-weight:bold;
}

#contactForm{
margin: 20px 20px;
background-color:#F7F2DC;
padding:40px;
border: 1px solid #F1F1F1;
}

.center{
text-align:center;
}

.formTabbed{
margin-left:130px;
}


#quoteBox{
/* background-image: url(images/gray-quote-box.png);
background-repeat:no-repeat; */
width: 61%;
height: auto;
background-color: #D4AD63;
border: 1px solid #BF5C3F;
-moz-border-radius: 15px;
border-radius: 15px;
box-shadow: 3px 3px 3px #E2BD60;
-moz-box-shadow: 2px 2px 3px #E2BD60;
-webkit-box-shadow: 2px 2px 3px #E2BD60;
float: left;
display: inline;
font-family:"Times New Roman", Times, serif;
text-align: center;
font-size: 1.1em;
line-height: 1.3em;
margin: 10px 19.25% 0px;
color: #95A0A6;
padding-top: 10px;
padding-right: 2%;
text-shadow: 2px 2px 2px #999999;
text-weight: bold;
cursor: pointer;
}

.quoteMark{
font-size: 2.2em;
font-family:Arial, Helvetica, sans-serif;
}

.floatmeinthemiddle{
float: left;
display:inline;
margin-left: 20%;
}

.upphoto{
margin-top: 0px;
margin-left: 130px;
padding: 5px;
float:left;
}

.newbackground{
background-color: #000000;
}

.headlines{
font-size: 1em;
font-weight: bold;
font-family: "Times New Roman", Times, serif;
text-transform:uppercase;
}

.boxOneTitle{
background-image:url(Images-Compass-Wealth/underline-arrow.png);
background-position:center;
background-repeat:no-repeat; 
text-align:center;
font-family:"Times  New Roman", Times, serif;
font-size:1.6em;
color: #D49510;
margin: 0px;
margin-bottom: 0px;
padding-bottom: 5px;
padding-left: 0;
font-weight:lighter;
background-color: #FFFFFF;
line-height: 3em;

}

.boxTwoTitle{
background-image:url(Images-Compass-Wealth/underline-arrow.png);
background-position:center;
background-repeat:no-repeat; 
text-align:center;
font-family:"Times  New Roman", Times, serif;
font-size:1.6em;
color: #D49510;
margin:0;
padding-bottom: 5px;
padding-left: 0;
font-weight:lighter;
background-color: #FFFFFF;
line-height: 3em;
}

.boxThreeTitle{
background-image:url(Images-Compass-Wealth/underline-arrow.png);
background-position:center;
background-repeat:no-repeat; 
text-align:center;
font-family:"Times  New Roman", Times, serif;
font-size:1.6em;
color: #D49510;
margin:0;
padding-bottom: 5px;
padding-left: 0;
font-weight:lighter;
background-color: #FFFFFF;
line-height: 3em;
}

.divLink{
text-decoration:none;
}

.colorChangeText{
color: #BF5C3F;
}

/* http://css-tricks.com/snippets/css/css-box-shadow/  */

.innerShadow{
-moz-box-shadow:inset 0 0 10px #000000;
   -webkit-box-shadow:inset 0 0 10px #000000;
   box-shadow:inset 0 0 10px #000000;
}



/* #newsletterBox{
margin-top: 20px;
} */

#newsletterBox{
-moz-border-radius: 15px;
border-radius: 15px;  
width: 65%;
height: auto;
background: #D4AD63; 
margin: 0 auto;
box-shadow: 3px 3px 3px #E2BD60;
-moz-box-shadow: 2px 2px 3px #E2BD60;
-webkit-box-shadow: 2px 2px 3px #E2BD60;
border: 1px solid white;
padding: 10px;
text-align:center;
}

.newsletterText{
/*  font-size: 1.2em;  */  /* this was reducing the em of sidebars (1.2 as of writing) by another 1.2 */

margin: 0px;
font-variant:normal;
font-family:"Times New Roman", Times, serif;
text-align:center;
color: #FFFFFF;
font-size: 1.3em;
line-height: 1.3em;
}

.smallInheritColor{
font-size: .8em;
}

.makemeWhite{
color: #FFFFFF;
}

.sitemapText{
line-height: 1.6em;
padding-left: 30px;
margin: 0 0;
}

.blockquotePlain{
font-style:normal;
}

#mapBox{
background-image: url(Images-Compass-Wealth/nautical-map-cropped-more-beige.jpg);
/* like just above the amercia, drop box at top  */
background-position:center top;
background-repeat:no-repeat;
background-color: #f2ebca;   /*#f8f5e0;  nice tan from darker map was this color...#f6efc4;  */
width: 100%;
height: auto;
margin: 0 0;
}

#homeTitle{
background-image: url(Images-Compass-Wealth/semi-transparent-80.png);
font-family:"Times New Roman", Times, serif;
color: #D49F10;
font-size: 1.4em;
width: 60%;
height: auto;
text-align:center;
font-weight:normal;
letter-spacing: 1.0px;
margin: 5px auto 20px;
padding: 15px;
border: 1px solid #E2BD60;
/* border: 1px solid #BF5C3F;  */
-moz-border-radius: 15px;
border-radius: 15px;
box-shadow: 3px 3px 3px #E2BD60;
-moz-box-shadow: 2px 2px 3px #E2BD60;
-webkit-box-shadow: 2px 2px 3px #E2BD60;
text-shadow: 1px 1px 2px #FFFFFF;
/* display:inline-block;   only for IE to get "layout" so shadow will work 
filter: Shadow(Color=#BBBBBB, 	
			Direction=135, 
			Strength=8);  */
			
}


/* wrapper encloses the main 3 boxes on the home page  */
#wrapper{
width: 85%;   /* was 900 pixels for the original homepage */
height: 670px;
margin: 0px auto 0px;
border-left: 1px solid #BF5C3F;
border-right: 1px solid #BF5C3F;
border-bottom: 1px solid #BF5C3F;
background-color:#FFF;
/*  old beige border is below...
border-left: 5px solid #F3E7BD;
border-right: 5px solid #F3E7BD;
border-bottom: 5px solid #F3E7BD;

*/
}

#wrapper-shadow{
width: 910px;
/* background-image: url(Images-Compass-Wealth/shadow-back.png);
background-repeat:repeat-y; */
height:600px;
margin:5px auto 0;
background-color:#F3E7BD;
}

.noLineBreak{
margin: 0 0 5px 0;
padding: 0 0 0 0;
}

.textAlignRight{
text-align:right;
}

.superscriptMe{
vertical-align:super;
font-size: .6em;
}

.goldMe{
color: #D49F10;
}


.indentLeft{
margin-left: 30px;
color:#666666;
display:block;
}

#mapwrapper{
width:100%;
height: 100%;
background-image: url(Images-Compass-Wealth/nautical-map-big-crop.jpg);

}

hr {
width: 65%;
height: 1px;
margin: 0 auto;
border:0;
padding:0;
color:#BF5C3F;
background-color:#BF5C3F;
}

ul.diamond {
	list-style-type: disc;
	list-style-image: url(Images-Compass-Wealth/diamond-bullet.png); 
	list-style-position: outside;
	font-family:"Times New Roman", Times, serif;
	font-size: 1.2em;
	color: #666666;  /* was 444444 */
	line-height: 1.4em;
	}
	
	
.tempText{
color:#990000;
}
	
#centerMeDiv{
width: 725px;
height: 700px;
padding: 25px 30px 0px;
margin: 0 auto;
/* background-image: url(Images-Compass-Wealth/zoom.jpg);
background-repeat:no-repeat;
background-position:center top;  */
}



/* this is for the AI graphs, to be inset a bit but not truly centered,  they wont center well on skinny ipad if placed center for chrome so used 10% */
.imageCenter{
margin: 0 10% 0;
}

.imageTruCenter{
margin: 0 auto 0;
}

.alignLeft{
text-align:left;
}


/** Accordian funciton below here **/

.arrowlistmenu{
width: 180px; /*width of accordion menu*/
}

.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px "Times New Roman";
color: white;
background: #D4AD63 url(Images-Compass-Wealth/titlebargold.png) repeat-x center left;  
/* orig background with black metallic
background: black url(http://chappellstudiob.info/Images-Compass-Wealth/titlebar.png) repeat-x center left;  */
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: smallcaps;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}

.arrowlistmenu .menuheaderDiff{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px "Times New Roman";
color: white;
background: #D4AD63 url(Images-Compass-Wealth/titlebargold-dark.png) repeat-x center left;  
/* orig background with black metallic
background: black url(http://chappellstudiob.info/Images-Compass-Wealth/titlebar.png) repeat-x center left;  */
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: smallcaps;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}






.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(Images-Compass-Wealth/titlebar-active.png);
}

.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color: #A70303;
/*background: url(Images-Compass-Wealth/diamond-bullet.png) no-repeat center left; custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}

.arrowlistmenu ul li a:visited{
color: #A70303;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}

.centerThatAccordian{
margin-left:80px;
}

.leftThatAccordian{
margin: 0 auto 0;
}

.WhyButtonAction{
display: block;
width: 100px;
height: 100px;
position:absolute;
top: 293px;
left: 74%;
background: url(Images-Compass-Wealth/css-hover-why.png) no-repeat bottom;
background-position:bottom;
	text-indent: -99999px;
}


.WhyButtonAction:hover {
	background-position:top;
}

.inputNL {
    border: 1px solid #BF5C3F;
	padding: 4px 7px;
    background: #fff;
	color:#333333;
	font-style:normal;
	font-family:Arial, Helvetica, sans-serif;
	box-shadow: 3px 3px 3px #751413;
-moz-box-shadow: 2px 2px 3px #751413;
-webkit-box-shadow: 2px 2px 3px #751413;
}
.inputNL:hover {
    border: 1px solid #D49F10;
    background: #fff;
}

#SocialMediaButtons{
float:right;
width: 148px;
height: 45px;
}

.SocialImg{
}

.SocialImg:hover {
}

.phoneSpan{
letter-spacing: 2.3px;
line-height: 1.8em;
}

.DirectionsDiv {
width: 70%;
color: #666666;
}

p.DirectionsDiv {
font-family:"Times New Roman", Times, serif;
font-size: 1.2em;
}

.DirectionsDiv ul li{
font-family:"Times New Roman", Times, serif;
font-size: 1.2em;
}

#mainContentPlain {
width: 85%;
height: auto;
padding-top: 20px;
margin: 0px auto;
background-color: #FFF;
border-left: 1px solid #BF5C3F;
border-right: 1px solid #BF5C3F;
overflow: hidden;
}

#BoxLRWrapper{
width: 700px;
height: 450px;
background-image: url(Images-Compass-Wealth/opacity-compass-rose-half-b.png);
background-position: bottom center;
background-repeat: no-repeat;
background-size: 60%;
margin: 50px auto  0;
}

#BoxQualities{
width: 310px;
height:200px;
border: 1px solid #BF5C3F;
/*border-radius: 10px;
 box-shadow: 2px 2px 6px #D49F10; */
box-shadow: 3px 3px 3px #E2BD60;
-moz-box-shadow: 2px 2px 3px #E2BD60;
-webkit-box-shadow: 2px 2px 3px #E2BD60;
background-color: #F3E7BD;
background-image:url(Images-Compass-Wealth/opacity-compass-rose.png);
background-repeat:no-repeat;
background-position: 53% -10%;
display: inline; /* IE double float margin bug  */
}


.BoxL{
float:left;
}

.BoxR{
float: right;
}


.boxRLTitle {
margin: 0px;
margin-bottom: 0px;
padding-bottom: 5px;
padding-left: 0;
background-image:url(Images-Compass-Wealth/underline-arrow-290.png);
background-position:center;
background-repeat:no-repeat; 
text-align:center;
font-family:"Times  New Roman", Times, serif;
font-size:1.5em;
color: #D49510;
font-weight:lighter;
background-color: #FFFFFF;
line-height: 3em;

}

@media only screen and (max-device-width: 1180px) {

ul#nav li {
font-size: 1.2em;
}
ul#nav {
margin: 0 0 0 1%;

}
}


@media only screen and (max-device-width: 770px) {


#navBlockShort{
height: 2.8em;
}

ul#nav {
margin: 0 0 0 1%;

}

ul#nav li {
font-size: 1.2em;

}

.boxRLTitle {
font-size: 1.2em;
}


}