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

/* ===============================
			 COLOR GUIDE
==================================

#282828 : Body Background
#007236 : Green
#414040 : Grey - Contact Box
#6d6d6d : Grey - Nav Text
#707070 : Grey - Nav Bar Text
#353f47 : Footer Box


==================================

  To jump to a specific section search for the unique character pair at the front of each TOC section 
<<<tip, highlight the special character and use the shortcut for Find Selection Cntr/Cmd + Shift + G >> 

==================================
        TABE OF CONTENTS
     ---------------------
		^00 Resets
		^01 Fonts & Text
		^02 Global constants
		^03 Navigation
	  	^04 Detroit
        ^05 Social
        ^07 About Us
        ^08 Staff
        ^09 Investments
        ^10 Insurance
        ^11 Philathropy
        ^12 Contact
==================================
*/



/*
==================================
^00           RESETS
================================== */

html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, h7, p, pre, form, fieldset, input, textarea, blockquote, th, td { 
	margin:0;
	padding:0;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

fieldset,img { 
	border:0;
}

h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}


/*
==================================
^01        FONTS & TEXT
================================== */

h1, h2, h3, h4, h5, h6, h7 {
    font-family: 'lato', 'Source Sans Pro', sans-serif;
}

h1 {
    color: #fff;
    font-weight: 300;
    font-size: 3em;
}

h2 {
    color: #fff;
    font-weight: 200;
    font-size: 2em;
}

h3 {
    color: #6d6d6d;
    font-weight: 400;
    font-size: 1em;
}

h4 {
    color: #007236;
    font-weight: 400;
    font-size: 1em;
}

h5 {
    color: #6d6d6d;
    font-weight: 200;
    font-size: .95em;
}

h6 {
    color: #000;
    font-weight: 300;
    font-size: .8em;
}

h7 {
    color: #fff;
    font-weight: 200;
    font-size: .9em;
}

p {
    font-family: 'roboto', 'Source Sans Pro', sans-serif;
    font-weight: 200;
}

a {
    font-family: 'roboto', 'Source Sans Pro', sans-serif;
    font-weight: 200;
}


/*
==================================
^02      GLOBAL CONSTANTS
================================== */

a[name] {
    padding-top: 135px;
    margin-top: -135px;
    display: inline-block; /* required for webkit browsers */
}

/*
==================================
^03         NAVIGATION
================================== */

#header {
    display: block;
    background-color: #ffffff;
    margin: 0;
    padding: 0;
	width: 100%;
    position: fixed;
    top: 0;
}

#headerContent {
    width: 900px;
    height: 115px;
    margin: 0 auto 0 auto;
    padding: 10px 0 0 0;
    background-color: #fff;
}

#logo img {
    float: left;
    clear: right;
}

#navBar {
    margin-top: 35px;
}

#navBar a {
    text-decoration: none;
    float: right;
    font-family: 'lato', 'Source Sans Pro', sans-serif;
    font-weight: 200;
    font-size: 1.1em;
    color: #6d6d6d;
    transition: 0.25s;
}

#navBar a:hover {
    font-weight: 200;
    color: #00a04c;
}

/*
==================================
^04          DETROIT
================================== */

#detroit {
    background-color: #736f70;
    margin-top: 105px;
}

#detroitContent {
    display: block;
    margin: 0 auto;
    width: 1024px;
    height: 395px;
    background-image: url(../_images/detroit.jpg);
}

#detroitText {
    display: block;
    width: 600px;
    margin: 0 auto;
    padding-top: 80px;
}

#detroit p {
    color: #fff;
    margin-top: 20px;
}

#detroitButton {
    width: 160px;
    height: 40px;
    margin-top: 10px;
    background-color: #ffffff;
    border: none;
    font-family: 'roboto', 'Source Sans Pro', sans-serif;
    color: #414040;
    font-weight: 200;
    font-size: .95em;
    transition: .25s;
}

#detroitButton:hover {
    width: 160px;
    height: 40px;
    margin-top: 10px;
    background-color: transparent;
    border: 1px solid #ffffff;
    font-family: 'roboto', 'Source Sans Pro', sans-serif;
    color: #fff;
    font-weight: 200;
    font-size: .95em;
}


/*
==================================
^05           SOCIAL
================================== */

#social {
    background-color: #fff;
}

#socialContent {
    width: 840px;
    height: 170px;
    margin: 0 auto 0 auto;
    padding: 30px 0 0 0;
}

#facebook:link, #twitter:link, #linkedIn:link, #eMail:link {
    display: block;
    float: left;
    clear: right;
    margin: 0 15px;
    width: 180px;
    height:144px;
    -webkit-transition: background-image 0.25s ease-in-out;
    -moz-transition: background-image 0.25s ease-in-out;
    -ms-transition: background-image 0.25s ease-in-out;
    -o-transition: background-image 0.25s ease-in-out;
    transition: background-image 0.25s ease-in-out;
} 

/* #facebook:hover, #twitter:hover, #linkedIn:hover, #eMail:hover {} */

#facebook:link {
    background: url('../_images/_buttons/facebook.png') center top no-repeat;
}

#facebook:hover {
    background-image: url('../_images/_buttons/facebookHover.png');
}

#twitter:link {
    background: url('../_images/_buttons/twitter.png') center top no-repeat;
}

#twitter:hover {
    background-image: url('../_images/_buttons/twitterHover.png');
}

#linkedIn:link {
    background: url('../_images/_buttons/linkedIn.png') center top no-repeat;
}

#linkedIn:hover {
    background-image: url('../_images/_buttons/linkedInHover.png');
}

#eMail:link {
    background: url('../_images/_buttons/eMail.png') center top no-repeat;
}

#eMail:hover {
    background-image: url('../_images/_buttons/eMailHover.png');
}


/*
==================================
^06          ABOUT US
================================== */

#about {
    background-color: #007236;
}

#aboutContent {
    padding: 50px 0;
    display: block;
    margin: 0 auto;
    width: 840px;
}

#aboutContent p {
    margin-top: 20px;
    color: #fff;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    -ms-column-count: 2;
    -o-column-count: 2;
    column-count: 2;
}


/*
==================================
^07            STAFF
================================== */

#staff {
    background-color: #fff;
}

#staffContent {
    display: block;
    margin: 0 auto;
    padding: 50px 0;
    width: 840px;
    height: 534px;
}

#staffContent h2, #staffContent p {
    color: #6d6d6d;
}

#staffPerson {
    margin-top: 30px;
    height: 230px;
}

#staffLeft {
    display: block;
    float: left;
    width: 180px;
}

#staffRight {
    display: block;
    float: left;
    width: 630px;
    height: 230px;
    margin-left: 30px;
    overflow: auto;
}

#staffRight h3, #staffRight h6 {
    float: left;
    clear: right;
    vertical-align: bottom;
}

#staffRight h6 {
    padding-top: .5em;
}

.staffSocial {
    margin-left: 22px;
}

.littleLinkedin:link, .littleEmail:link, .littlePhone:link {
    display: block;
    float: left;
    clear: right;
    margin: 0 5px;
    width: 34px;
    height: 31px;
    -webkit-transition: background-image 0.25s ease-in-out;
    -moz-transition: background-image 0.25s ease-in-out;
    -ms-transition: background-image 0.25s ease-in-out;
    -o-transition: background-image 0.25s ease-in-out;
    transition: background-image 0.25s ease-in-out;
} 

.littleLinkedin:link {
    background: url('../_images/_buttons/littleLinkedin.gif') center top no-repeat;
}

.littleLinkedin:hover {
    background-image: url('../_images/_buttons/littleLinkedinHover.gif');
}

.littleEmail:link {
    background: url('../_images/_buttons/littleMail.gif') center top no-repeat;
}

.littleEmail:hover {
    background-image: url('../_images/_buttons/littleMailHover.gif');
}

.littlePhone:link {
    background: url('../_images/_buttons/littlePhone.gif') center top no-repeat;
}

.littlePhone:hover {
    background-image: url('../_images/_buttons/littlePhoneHover.gif');
}


/*
==================================
^08           INVESTMENTS
================================== */

#investments {
    background-color: #6c6868;
}

#investmentsContent {
    display: block;
    margin: 0 auto;
    padding: 50px 0;
    width: 840px;
	background-image: url(../_images/services.jpg);
}

#investmentsContent h2 {
    color: #fff;
}

#investmentsContent p {
    color: #fff;
}

#investmentsContent ul {
    margin: 5px 0 5px 25px;
    color: #fff;
    font-family: 'Lato', 'Source Sans Pro', sans-serif;
    font-size: .80em;
    font-weight: 200;
    list-style: disc;
}

#investmentsContent li {
	margin: 20px 0;
}

#investmentsContent a:link, #investmentsContent a:visited {
    color: #fff;
    font-family: 'Roboto', 'Source Sans Pro', sans-serif;
}

#investmentsContent a:hover {
    color: #414040;
}


/*
==================================
^09         INSURANCE
================================== */

#insurance {
    background-color: #007236;
}

#insuranceContent {
    display: block;
    margin: 0 auto;
    padding: 50px 0;
    width: 840px;
}

#insuranceContent h2 {
    color: #fff;    
}

#insuranceContent p {
    color: #fff;
}

#insuranceContent a:link, #insuranceContent a:visited {
    color: #fff;
    font-family: 'Roboto', 'Source Sans Pro', sans-serif;
}

#insuranceContent a:hover {
    color: #414040;
}

#insuranceContent a:link, #investmentsContent a:visited {
    color: #fff;
    font-family: 'Roboto', 'Source Sans Pro', sans-serif;
}

#insuranceContent a:hover {
    color: #414040;
}


/*
==================================
^10         PHILANTHROPY
================================== */

#philanthropy {
    background-color: #fff;
}

#philanthropy h2, #philanthropy p {
    color: #6d6d6d;
}

a.clickMe {
    font-family: 'roboto', 'Source Sans Pro', sans-serif;
    color: #6d6d6d;
    text-decoration: none;
    -webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    -ms-transition: 0.25s ease-in-out;
    -o-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
} 

a.clickMe:hover {
    color: #00a04c;
}

#philanthropyContent {
    display: block;
    width: 840px;
    height: 550px;
    margin: 0 auto;
    padding: 50px 0;
}

#philanthropyLeft {
	display: block;
	float: left;
	clear: right;
	width: 375px;
	margin-top: 25px;
}

#philanthropyRight {
    display: block;
    float: right;
    clear: right;
    width: 375px;
    margin: -9px 0 50px 0;
}

.philanthropyBox table {
    width: 375px;
    height: 86px;
    margin-top: 10px;
}


/*
==================================
^11           CONTACT
================================== */

#contact {
    background-color: #414040;
}

#contact h7 {
    float: left;
    margin: 0 0px 0 8px;
}

#contact a {
    font-family: 'roboto', 'Source Sans Pro', sans-serif;
    color: #fff;
    text-decoration: none;
}

#contactContent {
    display: block;
    margin: 0 auto;
    padding: 50px 0;
    width: 840px;
    height: 450px;
}

#contactForm a {
    float: left;
    clear: both;
    margin-top: ;
    color: #fff;
    font-family: 'roboto', 'Source Sans Pro', sans-serif;
    font-size: 1em;
}

.contactFloat {
    float: right;
    color: #fff;
    font-family: 'roboto', 'Source Sans Pro', sans-serif;
    font-size: 1em;
}

input[type=text] {
    margin: 0 100px 20px 0;
    border: 1px solid #fff;
    background-color: #414040;
    width: 250px;
    height: 3em;
}

input[type=email] {
    margin: 0 100px 20px 0;
    border: 1px solid #fff;
    background-color: #414040;
    width: 250px;
    height: 3em;
}

input[type=submit] {
    float: left;
    margin-left: 20px;
    background-color: #fff;
    border: none;
    height: 3em;
    width: 200px;
    color: #414040;
    transition: .25s;
}

input[type=submit]:hover {
    float: left;
    margin-left: 20px;
    background-color: #414040;
    border: 1px solid #fff;
    height: 3em;
    width: 200px;
    color: #fff;
}


#message.contactFloat {
    margin: 0 25px 20px 0px;
    border: 1px solid #fff;
    background-color: #414040;
    width: 800px;
    height: 10em;
}

#maps {
    margin-top: 25px;
}

#mapsText {
    float: right;
    clear: right;
    padding-left: 15px;
}

#mapsText p {
    color: #fff;
}

#mapsMap {
    float: right;
}


/*
==================================
^12           FOOTER
================================== */

.footer {
    background-color: #353f47;
}

.footerContent {
    display: block;
    margin: 0 auto;
    padding: 20px 0;
    width: 1024px;
    height: 50px;
}

.footer a {
    text-decoration: none;
}

.footer h7 {
    color: #fff;
}

.footer h7:hover {
    color: #fff;
}

.footerLeft {
    display: block;
    float: left;
    margin: 15px 0 0 -16em;
}

.footerLeft a {
    margin: 0 10px;
}

.footerRight {
    float: right;
    margin: 15px 10px 0 10px;
}

.footerCenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 840px;
	height: 0px;
	text-align: center;
	padding: 15px 0 0 0;
}

.footerContents {
	height: 50px;
}