/*  Link styles */
a {text-decoration: none; }
a:link {color: #56A9FC; }
a:visited {color: #56A9FC;}
a:hover {color: #989898; }
a:active {color: #6A6A6A; }
a:focus {color: #989898;}
#nav a:link {color: #B5CDE0;}
#nav a:visited {color: #B5CDE0;}
#nav a:hover {color: #56A9FC;}
#nav a:active {color: #6A6A6A; }
#nav a:focus {color: #56A9FC;}
#contact a {color: white; }
#contact a:visited {color: white; }
#contact a:focus {color: yellow; }
#contact a:hover {color: yellow; }

#main {height: 580px; width: 900px; background-color: #B5CDE0; overflow: auto; } /* The #main ID is used only on the index.htm page. It creates the div in which the 2 main inline frames sit. The 2 iframes are top and nav. The div is sized to exactly wrap around both the frames.  It is centred vertically on the page by embedding the div in a single table cell that is 100% width and height. The default vertical cell alignment is to be "middle" so no css required for vertical alignment.         */
#index {text-align: center; width: 880px; height: 485px; position: absolute;top: 10px; left: 10px; }/* The index ID sets a table that is the same size as the image.  The table has is a single cell that is by default vertically aligned in the middle.  h1 and h3 font styles are designated accordingly. Could use short hand "font" for all fonts styles.... */
iframe {background-color: white; }/*  All iframes have background color white.  IE doesn't need this color, but other browsers do. */


body {font: 300 13pt/1.1 helvetica, arial, sans-serif; }
/*body {font: 300 13pt/1.2 helvetica, arial, sans-serif; color: black; font-size: 23pt; }*/
h1 {font: 200 45pt dakota, handwriting-dakota, Lucida Calligraphy ; color: white; } /* Used on index page for main title */
h2 {font: italic 900 12pt dakota, handwriting-dakota, Lucida Calligraphy, sans-serif; color: #56A9FC; } /* Used for captions */
h3 {font: italic 500 13pt Helvetica, HelveticaNeue, arial; letter-spacing: 2px; color: white; } /* Used on index page for subordinate title and contact page */
h4 {font: italic 900 16pt dakota, handwriting-dakota, Lucida Calligraphy, sans-serif; color: gray; } /* Used for visitor reviews */
h5 {font: 100 13pt/1.4  HelveticaNeue, Helvetica, arial, sans-serif; color: gray; } /* About the villa font style  */
h6 {font: 100 7pt arial, sans-serif; } /* The calendar font style */

#nav {text-align: center; width: 880px; } /* Nav bar iframe contains a single table row with the 6 main nav links. */
#caption {position: absolute; top: 485px; right: 0px; width: 100%; height: 45px; line-height: 1.4; vertical-align: middle; text-align: right; } /* The caption ID styles the single table cell that contains the caption below all the main photos. It's absolute positioned directly below the picture which is 485px high, and 0px from the right margin of the frame. */
#left {position: absolute; top: 0px; left: 0px; width: 285px; height: 485px; background-color: #D9EAE9; }/* Left panels....  */
#left td {padding: 0px 10px 0px 10px; color: gray;} /* About the villa font color */
#right {position: absolute; top: 10px; right: 10px; width: 595px; height: 485px; }/* Right panels....  */
#galleryleft {text-align: center; padding: 10px 10px; position: absolute; top: 0px; left: 0px; width: 285px; height: 485px; background-color: #D9EAE9; }/* Left gallery panel....  */
#galleryleft img {border: none; } /* Prevent left gallery panel picture links from showing borders */
#visitor {text-align: center; position: relative; top: 0px; right: 0px; width: 595px; height: 485px; background-color: #C1C0C0; }/* Right visitor panel....  */
#visitor td {padding: 0px 50px; } /* Visitors comments cell padding */
#contact {text-align: center; width: 880px; height: 485px; position: absolute;top: 10px; left: 10px;} /* Contact us */
#contact td {padding: 0px 150px; /*font: 500 13pt/1.5 HelveticaNeue, Helvetica, arial, sans-serif; color: white; */ } 
#about {vertical-align: top; }