/* structure.css are the styles for the DIVs in a website and should not contain
any typographic or content-related styles for a site. The styles within are strictly
used to create the layout/structure of the website and, as such, this style sheet 
will (almost) never need to be altered by the client or back-end programmers. */

/* ----- comment styles well for better reference later! ----- */
/* ----- try to lay this out in the following sections and from top to bottom on pages ----- */

/* --- STYLES FOR ALL PAGES --- */
/* the main holder container that floats in the centre of a browser window */
#uber {width:942px; margin:auto;}
#warning {color: #FF0000; font-size: 10pt;}

/* items in the headers div on both index and content pages */
#logo {width:265px; height:118px; position: absolute; top:0; left:0; overflow:hidden;}
#weather_date {width:700px; height:23px; position:absolute; top: 9px; right:22px; text-align:right; color: #333; font: 11px Arial, Helvetica, Verdana, sans-serif; padding-top:4px;}
#search {position:absolute; top:40px; right:22px; text-align: right; color: #666; font: 11px Arial, Helvetica, Verdana, sans-serif;}

/* footer on all pages */
#footer {width: 920px; position: relative; padding:18px 0px 0px 22px;font: 11px/20px Arial, Helvetica, Verdana, sans-serif; color:#2d2d2d;}
#footer a {padding: 0px 5px;}
#econsec { width:360px; height:28px; position: absolute; right: 22px; top: 22px; padding: 0px; overflow:hidden; }/*border: 1px dashed red;}*/

/* --- STYLES HOME PAGE ONLY --- */
/* the home page header area is les tall than the content pages and has a background image in the lower right */
#header_index {width:942px; height:118px; position: relative; background: url(../images/bkgnd/header_index.gif) top left no-repeat;}

/* main banner area under the header stuff -- image and 4 columns */
#mainbanner {
	width:942px; height: 203px; border-bottom:1px solid #FFF; background: url(../images/bkgnd/mainbanner.jpg) top left no-repeat; position: relative;
	font: 11px/14px Arial, Helvetica, sans-serif; color: #2f589d;
}

searchbtn { width: 22px; height: 17px; border: 0px; vertical-align: middle;}

/* the four absolutely positioned content areas in the mainbanner columns with links get defined next they are fixed height and width */
#col_business {position:absolute; top: 100px; left: 322px; height: 90px; width: 120px; overflow: hidden;}
#col_visiting {position:absolute; top: 100px; left: 484px; height: 90px; width: 120px; overflow: hidden;}
#col_living {position:absolute; top: 100px; left: 644px; height: 90px; width: 120px; overflow: hidden;}
#col_cityhall {position:absolute; top: 100px; left: 805px; height: 90px; width: 120px; overflow: hidden;}

#mp_business {position:absolute; top: -39px; left: 299px; height: 117px; width: 160px; overflow: hidden;}
#mp_visiting {position:absolute; top: -39px; left: 460px; height: 117px; width: 160px; overflow: hidden;}
#mp_living {position:absolute; top: -39px; left: 621px; height: 117px; width: 160px; overflow: hidden;}
#mp_cityhall {position:absolute; top: -39px; left: 782px; height: 117px; width: 160px; overflow: hidden;}

/* next we place the columns under the mainbanner columns that like the mainbanner are a fixed height per design */
#bottomcolumns {
	width:942px; height:201px; position:relative; 
	background: url(../images/bkgnd/maincolumns.gif) top left repeat-y;
	font: 11px/14px Arial, Helvetica, sans-serif; color: #000;
}

/* first we put the regional news box */
#regionalnews {position:absolute; top:44px; left:21px; width:258px; height: 138px; overflow: hidden;}

/* and the email buttons */
#contactbuttons {position: absolute; top:10px; left:10px; width:276px; height:15px; }
/*#contactbuttons { position: relative; overflow:hidden;}*/
/*#contactbuttons a img { border: 0; }*/
#contactbuttons a .large { border: 0px; display: none; }
#contactbuttons a.p1, #contactbuttons a.p1:visited { top: 0; left: 0; text-decoration: none; }
#contactbuttons a.p1:hover { text-decoration: none; }
#contactbuttons a.p1:hover .large { display: block; height: 120px; left: -20px; position: absolute; top: -120px; width: 122px; }

#contact {position:absolute; top:161px; right: 0px; width:276px; height:15px; }
#contact a .large { border: 0px; display: none; }
#contact a.p1, #contact a.p1:visited { top: 0; left: 0; text-decoration: none; }
#contact a.p1:hover { text-decoration: none; }
#contact a.p1:hover .large { display: block; height: 120px; left: -20px; position: absolute; top: -120px; width: 122px; }

/* and then the four absolutely positioned columns in that area 19px down */
#bottom_business {position:absolute; top: 19px; left: 322px; height: 125px; width: 120px; overflow: hidden;}
#bottom_visiting {position:absolute; top: 19px; left: 484px; height: 125px; width: 120px; overflow: hidden;}
#bottom_living {position:absolute; top: 19px; left: 644px; height: 125px; width: 120px; overflow: hidden;}
#bottom_cityhall {position:absolute; top: 19px; left: 805px; height: 125px; width: 120px; overflow: hidden;}

/* and the four accompanying buttons to take visitors to the main pages of these site areas */
#btn_business {position:absolute; width:119px; height:22px; top:156px; left:320px;}
#btn_visiting {position:absolute; width:119px; height:22px; top:156px; left:481px;}
#btn_living {position:absolute; width:119px; height:22px; top:156px; left:641px;}
#btn_cityhall {position:absolute; width:119px; height:22px; top:156px; left:801px;}

/* --- STYLES FOR CONTENT PAGES ONLY --- */
/* the header area for the content pages is slightly taller than the home page header area */
#header {width:942px; height:128px; position: relative; background: url(../images/bkgnd/header.gif) top left repeat-x;}

/* nav menu, styles to create rollover using CSS are at bottom */
#nav {position:absolute; right:0; bottom:0; width:644px; height:49px; overflow:hidden; margin:0; padding:0;}

/* set up the two columns under the header area */
#content {width:942px; float:left; border-bottom:1px solid #b8dcdc; background: url(../images/bkgnd/content.gif) top left repeat-y; margin:0; padding:0;}
#menu {float:left; width:204px; font:12px Arial, Helvetica, sans-serif; color:#004747; margin:0; padding:0; padding-bottom:15px;}
#right {float:left; width:704px; margin-left:16px; font:12px/15px Arial, Helvetica, sans-serif; color:#333; padding-top:12px; position:relative;}

/* left menu LI styles -- two level menu here with a highlighted state for a 2nd level ON link */
/*
original- Newly created
B8DCDC 	- BADDDD
		- C7E4E4
D7EDED 	- D5EAEA
		- E4F1F1
		- F1F8F8
FFFFFF	- FFFFFF
*/

#left1 a {display: block; color: #004747; background-color: #BADDDD; border-bottom: 1px solid #FFF; width: 186px; padding: 4px 4px 3px 14px; text-decoration: none;}
#left2 a {display: block; color: #004747; background-color: #C7E4E4; border-bottom: 1px solid #FFF; width: 172px; padding: 4px 4px 3px 28px; text-decoration: none;}
#left3 a {display: block; color: #004747; background-color: #D5EAEA; border-bottom: 1px solid #FFF; width: 158px; padding: 4px 4px 3px 42px; text-decoration: none;}
#left4 a {display: block; color: #004747; background-color: #E4F1F1; border-bottom: 1px solid #FFF; width: 144px; padding: 4px 4px 3px 56px; text-decoration: none;}
#left5 a {display: block; color: #004747; background-color: #F1F8F8; border-bottom: 1px solid #FFF; width: 130px; padding: 4px 4px 3px 70px; text-decoration: none;}

#left1on a {display: block; color: #BADDDD; background-color: #004747; border-bottom: 1px solid #FFF; width: 186px; padding: 4px 4px 3px 14px; text-decoration: none;}
#left2on a {display: block; color: #BADDDD; background-color: #004747; border-bottom: 1px solid #FFF; width: 172px; padding: 4px 4px 3px 28px; text-decoration: none;}
#left3on a {display: block; color: #BADDDD; background-color: #004747; border-bottom: 1px solid #FFF; width: 158px; padding: 4px 4px 3px 42px; text-decoration: none;}
#left4on a {display: block; color: #BADDDD; background-color: #004747; border-bottom: 1px solid #FFF; width: 144px; padding: 4px 4px 3px 56px; text-decoration: none;}
#left5on a {display: block; color: #BADDDD; background-color: #004747; border-bottom: 1px solid #FFF; width: 130px; padding: 4px 4px 3px 70px; text-decoration: none;}

#left1 a:hover {background-color: #FFF; color: #004747;}
#left2 a:hover {background-color: #FFF; color: #004747;}
#left3 a:hover {background-color: #FFF; color: #004747;}
#left4 a:hover {background-color: #FFF; color: #004747;}
#left5 a:hover {background-color: #FFF; color: #004747;}
#lefton a:hover {background-color: #FFF; color: #004747;}

/* all of the styles for the content in the right column of the content page 704px wide */
#banner {width:704px; height:127px; overflow: hidden; margin-bottom: 21px; border:0;}
#calendar { display: block; float: right; top: 20px; right: 0px; vertical-align: top; }

/* --- TYPOGRAPHY AND LINKS in specific divs that differ from the base.css styles --- */
#search input {border: 1px solid #848484; padding: 2px; font:11px Arial, Helvetica, sans-serif; color:#666; margin: 0px 5px;}
#search select {padding: 2px; font:11px Arial, Helvetica, sans-serif; color:#666; margin: 0px 5px;}

#mainbanner a {font: 11px/14px Arial, Helvetica, sans-serif; color: #2f589d; text-decoration: none;}
#mainbanner a:hover {text-decoration: underline;}

#regionalnews a {text-decoration: none;}
#regionalnews a:hover {text-decoration: underline;}
.regionaltitle {font: 14px Arial, Helvetica, sans-serif; color: #2d2d2d; border: none;}
.regionalmore {position:absolute; top:1px; left:200px;}
.regionalmore a {text-decoration: none;}
#regionalnews p {font: 11px/14px Arial, Helvetica, sans-serif; color: #000; border-top: 1px dotted #2d2d2d; width: 100%; padding: 4px 0px 4px 0px;}

.businesstitle {font: 13px Arial, Helvetica, sans-serif; color:#5e410a; padding-bottom:11px;}
#bottom_business a {font: 11px/14px Arial, Helvetica, sans-serif; color: #5e410a; text-decoration: none;}
#bottom_business a:hover {text-decoration: underline;}
.visitingtitle {font: 13px Arial, Helvetica, sans-serif; color:#34126a; padding-bottom:11px;}
#bottom_visiting a {font: 11px/14px Arial, Helvetica, sans-serif; color: #34126a; text-decoration: none;}
#bottom_visiting a:hover {text-decoration: underline;}
.livingtitle {font: 13px Arial, Helvetica, sans-serif;color:#0e6161; padding-bottom:11px;}
#bottom_living a {font: 11px/14px Arial, Helvetica, sans-serif; color: #0e6161; text-decoration: none;}
#bottom_living a:hover {text-decoration: underline;}
.cityhalltitle {font: 13px Arial, Helvetica, sans-serif; color:#3e5e15; padding-bottom:11px;}
#bottom_cityhall a {font: 11px/14px Arial, Helvetica, sans-serif; color: #3e5e15; text-decoration: none;}
#bottom_cityhall a:hover {text-decoration: underline;}

/* --- 2 Column display for Local Accomodations --- */
#col2 { float:left; width:345px; font:12px/15px Arial, Helvetica, sans-serif; color:#333; position:relative; border: 0px dashed #333; padding-right: 4px; }
#col2 img { padding: 0px 4px 20px 0px; } /* top right bottom left*/
#col2 .small { padding: 0px;}

/* --- 3 Column display --- */
#col3 { float:left; width:234px; font:12px/15px Arial, Helvetica, sans-serif; color:#333; position:relative; border: 0px dashed #333; padding-right: 0px; }

/* --- 4 Column display --- */
#col4 { float:left; width:170px; font:12px/15px Arial, Helvetica, sans-serif; color:#333; position:relative; border: 0px dashed #333; padding-right: 2px; }

/* --- Office of the Mayor Classes --- */
.otm { width: 375px; border: solid black 1px; text-align: left; padding: 5px;}
#otmBio { width: 525px; margin:auto auto; text-align: left; padding: 5px; position: relative; }
#otm_news { width: 700px; border: 0px; text-align: left; padding: 5px;}

#otm_record { width: 500px; }
#otm_record td { padding-left: 10px; padding-right: 10px; border-bottom: 1px solid #333333; }


/* --- CSS NAVIGATION STYLES using DaveyJJ's method of moving background images --- */
#nav1 a { display: block; width: 162px; height: 49px; margin: 0; padding: 0; float: left; background: url(../images/btn/nav1.gif) 0 0 no-repeat; text-decoration: none; }
#nav1 a:hover { background-position: 0px -49px; margin: 0; padding: 0; }
#nav1on, #nav1on a, #nav1on a:hover { display: block; width: 162px; height: 49px; margin: 0; padding: 0; float: left; background: url(../images/btn/nav1.gif) 0 -49px no-repeat; text-decoration: none; }

#nav2 a { display: block; width: 161px; height: 49px; margin: 0; padding: 0; float: left; background: url(../images/btn/nav2.gif) 0 0 no-repeat; text-decoration: none; }
#nav2 a:hover {background-position: 0px -49px; margin: 0; padding: 0;}
#nav2on, #nav2on a, #nav2on a:hover { display: block; width: 161px; height: 49px; margin: 0; padding: 0; float: left; background: url(../images/btn/nav2.gif) 0 -49px no-repeat; text-decoration: none; }

#nav3 a { display: block; width: 161px; height: 49px; margin: 0; padding: 0; float: left; background: url(../images/btn/nav3.gif) 0 0 no-repeat; text-decoration: none; }
#nav3 a:hover {background-position: 0px -49px; margin: 0; padding: 0;}
#nav3on, #nav3on a, #nav3on a:hover { display: block; width: 161px; height: 49px; margin: 0; padding: 0; float: left; background: url(../images/btn/nav3.gif) 0 -49px no-repeat; text-decoration: none; }

#nav4 a { display: block; width: 160px; height: 49px; margin: 0; padding: 0; float: left; background: url(../images/btn/nav4.gif) 0 0 no-repeat; text-decoration: none; }
#nav4 a:hover {background-position: 0px -49px; margin: 0; padding: 0;}
#nav4on, #nav4on a, #nav4on a:hover { display: block; width: 160px; height: 49px; margin: 0; padding: 0; float: left; background: url(../images/btn/nav4.gif) 0 -49px no-repeat; text-decoration: none; }

#wellness_btn {float: left; width: 153px; background-color: #f0f0f0; border: 1px solid #000000; text-align: center; padding: 10px 10px 10px 10px;  }

/* Style for eLocalLink */
#regionalnewsE {position:absolute; top:44px; left:21px; width:258px; height: 310px; overflow: hidden;}
#eLocalImg { width: 400px; height: 150px; position: absolute; right: 22px; top: 22px; padding: 0px; overflow:hidden; border: 0px solid #000000; z-index: 2; }
#eLocalLink { width: 190px; height: 140px; position: absolute; left: 305px; top: 22px; padding: 5px; overflow:hidden; border: 0px solid #000000; text-align: center; }
#footerA {width: 920px; position: relative; padding:18px 0px 0px 22px;font: 11px/20px Arial, Helvetica, Verdana, sans-serif; color:#2d2d2d;}
/* next we place the columns under the mainbanner columns that like the mainbanner are a fixed height per design */
#bottomcolumnsE {
	width:942px; height:201px; position:relative; 
	background: url(../images/bkgnd/maincolumnsE.gif) top left repeat-y;
	font: 11px/14px Arial, Helvetica, sans-serif; color: #000000;
}
#NewsOutline {
	width: 299px; height: 374px;
	position: relative; padding: 0px;
	border-left: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc; 
	border-right: 1px solid #cccccc;
}

/* next we place the columns under the mainbanner columns that like the mainbanner are a fixed height per design */

/* ----- end template ----- */