/* ======= Styles for Phil Edgett Web Site philedgett.com. ======= */

body  {
    margin: 0;
    padding: 0;
    background: #221 url(images/screen.gif) repeat;
    font: 1em verdana, arial, helvetica, tahoma, sans-serif;
    }
#container {
    background: #FFF url(images/sidebar.png) repeat-y -81px 0;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 54em !important;
    min-width: 800px;
    max-width: 1200px;
    border: 2px solid #000;
    border-width: 0 2px;
    }

/* =======================================================
        Header Section 
========================================================= */
#header {
    background: #E01 url("images/headerbackground.png") repeat-x;
    }
#logoleft {
    float: left;
    background: #E01 url("images/header.png") no-repeat;
    width: 100%;
    height: 115px;
    }
#logoleft h1,
#logoleft h2 {
    margin-left: 30px;
    background-color: transparent;
    color: #000;
    }
#logoleft h1 span,
#logoleft h2 span {
    display: none;
    }

#mainofficelink {
    position: absolute;
    top: 0;
    right: 12px;
    width: 101px;
    height: 115px;
    }
#mainofficelink img {
    border: none;
    }
#mainofficelink a {
    text-decoration: none;
    }

#topnav {
    padding: 4px 30px;
    background-color: #221;
    color: #FFF;
    font: 100% verdana, arial, helvetica, tahoma, sans-serif;
    clear: both;
    border-top: 4px solid #210;
    border-bottom: 2px solid #000;
    }
#topnav p {
    margin: 0 0 10px 0;
    background-color: #221;
    color: #FFF;
    }
#topnav a:link,
#topnav a:visited {
    padding: 1px 4px 3px 4px;
    background-color: #221;
    color: #FFF;
    text-decoration: none;
    border: 1px solid #221;
    border-color: #221 #221 #FFF #221;
    }
#topnav a:hover,
#topnav a:active {
    padding: 1px 4px 3px 4px;
    background: #221 url("images/screen.gif") repeat;
    color: #FFF;
    border: 1px solid #666;
    border-color: #666 #000 #000 #666;
    }


/* =======================================================
        Left Sidebar 
========================================================= */

#leftcolumn {
    background: #FFC url(images/sidebar.png) repeat-y 100% 0;
    float: left;
    margin: 0;
    padding: 0;
    color: #000;
    width: 260px;
    text-align: center;
    }
	
#menu {
    margin: 26px;
    padding: 1px;
    background-color: #FFC;
    color: #000;
    font: 80% verdana, arial, helvetica, tahoma, sans-serif;
    text-align: left;
    border: 3px solid #DD7;
    border-color: #DD7 #663 #330 #AA5;
    }
ul.spcssmenu {
    margin: 0;
    padding: 0;
    }
ul.spcssmenu li {
    display: block;
    margin: 0;
    padding: 0;
    background-color: #CC9;
    color: #000;
    list-style-type: none;
    border: 1px solid #FFF;
    }
ul.spcssmenu li:hover {
    background-color: #EEE;
    color: #999;
    border: 1px solid #888;
    }
ul.spcssmenu li a {
    display: block;
    margin: 0;
    padding: 3px 8px;
    text-decoration: none;
    }
ul.spcssmenu li a:link {
    color: #000;
    }
ul.spcssmenu li a.new:link {
    color: #F00;
    }
ul.spcssmenu li a:visited {
    color: #000;
    }
ul.spcssmenu li a.new:visited {
    color: #F00;
    }
ul.spcssmenu li a:hover {
    color: #999;
    }
.tiny {
    font-size: 85%;
    }
.red {
    color: #F00;
}

#connectbox {
    margin-top: 32px;
    }
#connectbox img {
    border: none;
    }
#connectbox h3 {
    margin-bottom: 5px;
    background-color: transparent;
    color: #000;
    font: 90% georgia,times,"times new roman",serif;
    font-weight: bold;
    text-align: center;
    letter-spacing: 1px;
    line-height: 120%;
    }
#connectbox p {
    margin: 10px 30px 30px 30px;
    background-color: transparent;
    color: #000;
    font: 90% georgia,times,"times new roman",serif;
    letter-spacing: 1px;
    line-height: 120%;
    text-align: center;
    }
	
/* =======================================================
        Main - Right Content on Home Page
========================================================= */

#homerightcolumn {
    margin-left: 260px;
    padding-left: 20px;
    padding-bottom: 1px;		/* keeps white in space below calculator and weather */
    background-color: #FFF;
    width: 56%;
    }

#picture {
    padding: 0;
    background: #00F url("comoxpix/rotator.php") no-repeat;
    color: #FFF;
    width: 476px;
    height: 280px;
    min-height: 280px;
    border: 2px solid #000;
    border-width: 0 2px 2px 2px;
    }
#picture img {
    position: absolute;
    top: 156px;
    left: 264px;
    border: 2px solid #000;
    }
#picture p {
    font: 80% verdana, arial, helvetica, tahoma, sans-serif;
    color: #000;
    text-align: center;
    }

/* Surround to position names and email next to figures. */
#surround {
    margin-left: 50px;
    width: 334px;
    }
p.leftside {
    float: left;
    font: 80% verdana, arial, helvetica, tahoma, sans-serif;
    }
p.rightside {
    float: right;
    font: 80% verdana, arial, helvetica, tahoma, sans-serif; 
    }	
#assistant img {
    position: absolute;
    top: 200px;
    left: 206px;
    z-index: 2;
    border: none;
    }	
#phil img {
    position: absolute;
    top: 190px;
    left: 670px;
    z-index: 2;
    border: none;
    }
#description {
    margin: 55px 0 0 17px;
    padding: 10px 20px 10px 20px;
    background-color: #FFF;
    color: #000;
    width: 400px;
    }
#description p {
    margin: 0;
    padding: 0;
    font: 0.9em verdana, arial, helvetica, tahoma, sans-serif;
    width: 380px;
    }	
#description p.next {
    margin: 12px;
    padding: 0;
    font: 0.9em verdana, arial, helvetica, tahoma, sans-serif;
    width: 400px;
    }	
#inserts {
    background: #FFF url(images/weather.png) no-repeat center right;
    margin: 10px 0 0 30px;
    width: 428px;
    height: 112px;
    min-height: 112px;
    font-size: 0.7em;
    text-align: left;
    border: 1px dashed #369;
    }
#calculator p {
    float: left;
    margin: 0;
    padding: 10px;
    color: #369;
    line-height: 1.6em;
    width: 220px;
    border-right: 1px dashed #369;
    }
#inserts object {
    float: right;
    background-color: #369;
    }

/* =======================================================
        Footer Section
========================================================= */

#footer {
    background: #221 url(images/redband.png) repeat-x;
    margin: 0;
    padding: 0 30px;
    color: #FFF;
    clear: both;
    height: 92px;
    border: 2px solid #210;
    border-width: 2px 0;
   }

#footerleft {
    float: left;
    width: 48%;
    }
#design {
    padding-left: 35px;
    background: transparent url("images/twinkle.gif") no-repeat;
    background-position: 0 4px;
    width: 80%;
    height: 35px;
    min-height: 35px;
    }
#design p {
    margin: 0;
    font-size: 0.7em;
    line-height: 140%;
    }
#design a {
    color: #FFF;
    background-color: transparent;
    }
#design a:hover,
#design a:active {
    background-color: #FFC;
    color: #360;
    text-decoration: none;
    }

#footerright {
    float: left;
    width: 48%;
    }
#rlpaddress p {
    margin: 0;
    font-size: 0.7em;
    text-align: right;
    }

/* =======================================================
        Main - Right Content on All Other Page
========================================================= */

#rightcolumn {
    margin-left: 270px;
    background-color: transparent;
    color: #000;
    }
#words {
    padding: 20px;
    background-color: #FFF;
    color: #000;
    }
/*
#words img {
    float: right;
    }
#words img.alt {
    margin-left: 350px;
    }
*/
.entry h1,
#words h1 {
    font: 1em verdana, arial, helvetica, tahoma, sans-serif;
    font-weight: bold;
    }
.entry h3,
#words h3 {
    margin: 10px 0 0 0;
    color: #3A0;
    font: 1em georgia, times, "times new roman", serif;
    font-weight: bold;
    }
#words p {
    font: 0.9em verdana, arial, helvetica, tahoma, sans-serif;
    line-height: 140%;
    }
#words p.small {
    font: 0.8em verdana, arial, helvetica, tahoma, sans-serif;
    line-height: 130%;
    }
#words a {
    background-color: transparent;
    color: #000;
    text-decoration: none;
    border-bottom: 1px solid #F00;
    }
#words a:hover,
#words a:active {
    background-color: transparent;
    color: #3A0;
    text-decoration: none;
    border-bottom: 1px solid #3A0;
    }
#words ul {
    margin-right: 80px;
    }
#words ul li {
    padding: 7px 0;
    font: 0.8em verdana, arial, helvetica, tahoma, sans-serif;
    list-style-image: url("images/arrow.gif");
    }
#words ul ul {
    font: 1.2em verdana, arial, helvetica, tahoma, sans-serif;   /* Keeps child list same font size as parent list */
    }
#words ul li:hover {
    list-style-image: url("images/arrowover.gif");
    }
#words ul a {
    background-color: transparent;
    color: #000;
    text-decoration: none;
    border-bottom: 1px solid #F00;
    }
#words ul a:hover,
#words ul a:active {
    background-color: transparent;
    color: #3A0;
    text-decoration: none;
    border-bottom: 1px solid #3A0;
    }
#words sup.tiny {
   font-size: 0.6em;
   }


/* =======================================================
        Style for Client Services Form
========================================================= */

#formcontainer {
    line-height: 170%;
    }
form {
    margin: 0;
    padding: 0;
    }
fieldset {
    margin: 0.7em 0;
    border: none;
    border-top: 1px solid #CCC;
    }
legend {
    margin: 0.7em 0;
    padding: 0 .5em;
    color: #036;
    background: transparent;
    font-size: 1em;
    font-weight: bold;
    }
label {
    float: left;
    width: 130px;
    padding: 0 1em;
    font-size: 0.8em;
    text-align: right;
    }
fieldset div {
    margin-bottom: 0.5em;
    padding: 0;
    display: block;
    }
fieldset div input,
fieldset div textarea {
    padding: 1px;
    color: #333;
    width: 350px;
    border: 1px solid #555;
    border-color: #555 #555 #CCC #CCC;
    }
fieldset div select {
    padding: 1px;
    }
div.fm-multi div {
    margin: 5px 0;
    }
div.fm-multi input {
    width: 1em;
    }
div.fm-multi label {
    display: block;
    width: 200px;
    padding-left: 5em;
    text-align: left;
    }
#fm-submit {
    clear: both;
    padding-top: 1em;
    text-align: center;
    }
#fm-submit input {
    padding: 2px 1em;
    background-color: #555;
    color: #fff;
    font-size: 0.9em;
    border: 1px solid #333;
    }
input:focus,
textarea:focus {
    background: #EEE;
    color: #000;
    }
/* required fields - does not work in IE */
fieldset div.fm-req {
    font-weight: bold;
    }
fieldset div.fm-req label:before {
    content: "* "; /* does not work in IE */
    }


/* ==============================================
   THICKBOX and POPUP STYLING
================================================= */
.pivot-image,
.pivot-popupimage {
    margin: 0;
    border: 10px solid #000;
    }
.pivot-popuptext{
    padding: 0;
    margin: 0;
    }
a.thickbox {
    background: none!important;
    display: inline;
    }
.message p {
    margin-bottom:5px;
    }
#photos p {
    text-align: center;
    }
#photos table.gallery {
    margin: 0;
    padding: 0;
    background-color: #555;
    width: 543px;
    border: 1px solid #000;
    }
#photos table td {
    width:100%;
    }
#photos table td img {
    margin: 0 5px 7px 0;
    }

.map img {
    margin: 0 0 7px 7px;
    }