﻿/*
	main.css
	----------
*/

/* ---------- some universal basics ---------- */

BODY {  font-family: arial, sans-serif; color: #7b848b; margin: 0; } /*  */

BODY { font-size: 13px; }
*:first-child+HTML BODY { font-size: 75%; }
* HTML BODY { font-size: 75%; }

IMG, FIELDSET { border: 0; }

P, BLOCKQUOTE, DL { margin: 0; }
P { line-height: 17px; margin-bottom: 15px; }
LI, DL { margin: 0; }

H1, H2, H3, H4, H5, H6 { font-size: 1em; margin: 0 0 0.1em; }
LI H2, LI H3, LI H4, LI H5, LI H6 { margin: 0; }

A {
	text-decoration: none;
}

UL { margin: 0; padding: 0; list-style: none; }
LI LI { font-size: 1em; }
DT { font-weight: bold; }
DD { margin: 0; }

.clear {clear: both; background: #fff;}

/* ---------- main layout ---------- */

body {
	text-align: center;
}

#PageWrapper {
	width: 970px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 63px;
}

#Header {
	height: 55px;
	padding-bottom: 13px;
}

#Logo {
	float: left;
}

#TopNav {
	padding-top: 25px;
	float:right;
}

#TopNav li {
	display: inline;
	list-style-type: none;
	padding-right: 3px;
	padding-left: 3px;
}

#TopNav a {
	color: #FFFFFF;
	font-family: Eurostile;
	font-size: large;
}

#TopNav a:hover {
	color: #CCCCCC;
}

#BottomNav {
	float:left;
	font-size:small;
	list-style:none;
}

#BottomNav li {
	display: inline;
	list-style-type: none;
	padding-right: 5px;
	padding-left: 5px;
}

#BottomNav a:hover {
	color: #CCCCCC;
}


#Main {
	padding: 1px;
}

#Footer {
	padding-top: 8px;
}

#Footer .vcard {
	float:right;
	text-align: right;
}

#Footer .vcardimage {
	float:left;
	text-align: left;
}

/* ---------- display ---------- */

/* general */

body {
	background-color: #345778;
}

#Main {
	background-color: #fff;
	text-align: left;
}

#Footer {
	color: #ccc;
	font-size: 11px;
	line-height: 15px;
	letter-spacing: .5px;
}

h1 {
	padding-bottom: 22px;
}

h2, h3 {
	color: #0d6196;
	font-size: 15px;
	padding: 0;
	margin: 0;
	line-height: 16px;
}

/* sectional */

#Main.home,
#Main.our-vision {
	height: 328px;
}

#Main.our-vision object {
	float:left;
}

#Main.our-vision div {
	float: right;
	width: 45%;
	padding: 31px 5px 0px 5px;
	margin: 0 15px 0 5px;
}

#Main.our-vision h1 {
	height: 19px;
}

div.locations { /* see comment for div.contact ... didnt test if that bug also applied here */

}

#Main.locations div {
    /* padding-top: 26px; !THIS IS THE STUPID LINE THAT MAKES THE BLADE BORDER ON THE MOV FILE!  I MOVE IT TO #Main.locations div.right */
}

#Main.locations div.left {
    width: 590px;
    float: left;
    padding-left: 26px;
    padding-right: 25px;
}

#Main.locations div.right {
    float: right;
	width: 300px;
	text-align:right;
	padding-top:26px;
	padding-right:20px;
}

#Main.locations h1 {
    text-indent: -9999px;
    height: 67px;
    background-image: url(../images/logo_islamorada.gif);
    background-repeat: no-repeat;
    margin-top: 12px;
}

#Main.locations h2, h3 {
    font-size: 14px;
}
#Main.locations h3, #Main.locations p {
    padding-bottom: 16px;
    margin-bottom: 0px;
}

#Main.locations a {
    color: #5db0e3;
}

#Main.locations img {
    padding-bottom: 15px;
}

div.executive-team { /* selector problems with IE ... and over-riding other #Main defs (from above)*/
	padding: 31px !important;
}

#Main.executive-team .exec {
	margin-left: 35px;
	margin-right: 35px;
}

#Main.executive-team .bio {
	overflow: hidden;
	padding-top: 3px;
	margin-bottom: 20px;
}

#Main.executive-team .action span {
	color: #5db0e3;
	font-weight: bold;
	cursor: pointer;
}

div.contact {  /* for some reason #Main.contact did not work with IE */
	height: 488px;
}

#Main.contact div.left {
	padding: 37px 0 0 32px;
	width: 356px;
	float: left;
}

#Main.contact div.right {
	margin: 74px 0 0 0;
	padding: 0 81px 0 20px;
	width: 400px;
	float: right;
	border-left: 1px solid #5db0e3;
}

#Main.contact h1 {
	height: 19px;
}

#Main.contact div.vcard {
	padding-bottom: 1.5em;
}

#Main.contact span {
	line-height: 17px;
}

/* ---------- form ---------- */

#Main.contact fieldset {
	margin: 0;
	padding: 0;
}

#Main.contact .form-item {
	padding-bottom: 10px;
}

#Main.contact fieldset label {
	float: left;
	width: 98px;
	padding-top: 1px;
}

#Main.contact fieldset label,
#Main.contact span.status {
	color: #0d6196;
	font-weight: bold;	
}

#Main.contact fieldset input.form-text,
#Main.contact fieldset textarea {
	width: 255px;
}

#Main.contact fieldset select {
	width: 260px;
}

#Main.contact fieldset textarea {
	height: 143px;
}

#Main.contact input.form-image {
	padding-left: 98px;
}
