/**
 * Formats everything outside the visible page.  This includes the
 * grey background.
 */
body
{
	margin: 0;
	padding: 0;
	height: 100%;
	background-color: #FBF5E9;
}

body, td, li
{
	font-family: Helvetica, Arial, san-serif;
	font-size: 11px;
}
a
{
	color: #6B3217;
}
a:hover
{
	color: #729A3D;
}

.adjustedZIndex
{
	display: block;
	background:#FFE4B5;
	padding: 4px 10px;
	z-index: 1;
}
	 
#city-of-rexburg
{
	background: url(   '/images/layout/bg-top-page.gif' ) repeat-x;
	height: 116px;
	width: 100%;
}
#city-of-rexburg .logo
{
	background: url(   '/images/layout/img-city-of-rexburg3.jpg' ) no-repeat center center;
	width: 925px;
	height: 116px;
	margin: auto;
}
#city-of-rexburg .back-home
{
	display: block;
	height: 116px;
	width: 185px;
}
#flash-header
{
	margin: -4px auto 0;
	padding: 9px 9px 0px;
	width: 887px;
	height: 230px;
}
#menu
{
	width: 887px;
	margin: 0 auto;
}
/**
 * The navigate class is used to format the menubar located below the banner
 * image near the top of the page.
 */
.navigate a:link, .navigate A:visited
{
	background-image: url(   "/images/layout/bg-nav.gif" );
	color: white;
	display: block;
	font: bold 11px;
	height: 38px;
	line-height: 38px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	padding: 0 10px;
}
/**
 * Sets the image and border for the dynamic navigation menu
 */
.navigate a:hover, .navigate A:visited:hover, .navigate a.hover:link, .navigate A.hover:visited
{
	background: url(   '/images/layout/bg-nav-hover.gif' );
}
/**
 * The navigate class is used to format the menubar located below the banner
 * image near the top of the page.
 */
.navigate a.active:link, .navigate A.active:visited
{
	background: url(   '/images/layout/bg-nav-active.gif' ) repeat-x;
	text-decoration: underline;
}
/**
 * Styles the submenus of the dynamic menu
 */
.navigateChild a:link, .navigateChild A:visited
{
	display: block;
	background: #C5B8B2;
	color: #505B63;
	font: normal 11px;
	text-align: left;
	text-indent: 0px;
	text-decoration: none;
	padding: 4px 10px;
}

/**
 * Styles the links in the submenus.
 */
.navigateChild a:hover, .navigateChild A:visited:hover
{
	background: #745545;
	color: white;
}

.container
{
	width: 900px;
	background: #FBF5E9 url(   '/images/layout/bg-body2.gif' ) repeat-y center center;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

/**
 * Holds everything located below the site navigation menu (breadcrumbs).
 */
.mainContainer
{
	margin: 5px 5px 5px 5px;
}

/**
 * Holds all the content wrapped in the outermost brown border.  In other
 * words, all the page content excluding the header and footer.
 */
.masterContainer
{
	width: 887px;
	margin: 0 auto;
	padding: 15px 0 0 0;
}
/**
 * Used to hold menus on the left hand side of the page.
 */
.leftMenuContainer
{
	float: left;
	width: 208px;
	margin-right: 35px;
}

/**
* The menu on the left.
*/
.leftMenu
{
	border: solid 2px #E9E8E0;
	background-color: #F9F5E9;
	font: normal 11px;
	line-height: 18pt;
	margin: 0px 0px 8px 0px;
	text-align: center;
}
.leftMenu img
{
	margin: -2px 0px 0pc -2px;
}
/**
* Formats links in the left menu.
*/
.leftMenu > a:link, .leftMenu > A:visited
{
	color: #6B3318;
	display: block;
	padding: 0px 0px 0px 20px;
	text-align: left;
	text-decoration: none;
}

/**
* Changes the color of links when you hover over them.
*/
.leftMenu > a:hover, .leftMenu > A:visited:hover
{
	color: #739A3F;
	text-decoration: underline;
}

/**
* This is a shortcut for adding a line to seperate the header image from
* the rest of the menu.
*/
.leftMenu > img
{
	border-bottom: solid 1px red;
}


/**
 * This class is used to format the site map path located just below the menu
 * near the top of the page.
 */
.siteMapPath
{
	background-color: #EAF3C6;
	color: #333333;
	font: normal 11px Helvetica, Arial, san-serif;
	line-height: 11px;
	text-align: left;
	text-decoration: none;
	width: 874px;
	margin: 0 auto;
	padding: 5px 0 5px 13px;
}
.siteMapPath .currentNode
{
	color: #739A3F;
	font-weight: bold;
	font-style: normal;
}
/**
 * Makes sure visited links look normal.
 */
.siteMapPath a:link, .siteMapPath A:visited
{
	color: #333333;
	text-decoration: none;
}

/**
 * Create hover effect.
 */
.siteMapPath a:hover, .siteMapPath A:visited:hover
{
	text-decoration: underline;
}

/**
 * Styles the dot used as a separator in the sitemap path
 */
.pathDot
{
	color: #577170;
	font: bold 12px Helvetica, Arial, san-serif;
	text-align: center;
	vertical-align: middle;
	line-height: 11px;
	padding: 5px 2px;
}

/**
 * Used to format the footer.
 */
.pageFooter
{
	background: url(   '/images/layout/bg-bottom-page.gif' ) repeat-x;
	font: bold 11px Helvetica, Arial, san-serif;
	text-align: left;
	color: #7C848B;
	height: 83px;
	width: 100%;
}

/**
 * Formats links in the footer.
 */
.pageFooter a:link, .pageFooter A:visited
{
	color: white;
	text-decoration: none;
}
.pageFooter .content
{
	background: url(   '/images/layout/bg-footer2.gif' ) no-repeat center center;
	width: 925px;
	margin: auto;
	padding: 30px 0px 0px 0px;
}
.pageFooter .content div
{
	margin-top: 4px;
	padding: 0px 0px 0px 32px;
}

/**
 * Justifies text and adds appropriate spacing to <p> tags.
 */
p
{
	margin: 0px 0px 10px 0px;
	text-align: left;
	font: normal normal normal medium normal Garamond;
	color: #333333;
}

.content-area .button
{
	margin: 8px 8px;
}
.content-area
{
	width: 100%;
}
.content-area.half
{
	width: 70%;
	float: left;
}
.content-area.small
{
	width: 25%;
	float: right;
}
.content-area .image
{
	padding: 1px;
	border: solid 1px #D6CDBE;
	background: #FAF2D3;
	float: left;
	margin: 0 15px 5px 0;
}

.content-area h2, .topicHeader
{
	font: normal 25px Georgia, serif;
	color: #F99D2D;
	text-align: left;
	padding: 0;
	margin: 2px 0 8px 0;
	font-variant: small-caps;
}
.content-area.alt h2, .topicHeader
{
	color: #739A3F;
}
.content-area p
{
	font: normal 11px Helvetica, Arial, san-serif;
	color: #333333;
}
.content-area .action
{
	background: url(   '/images/layout/btn-content-blank-hover.jpg' ) no-repeat;
}
.content-area .action a
{
	height: 24px;
	width: 151px;
	display: block;
	font: normal 11px Helvetica, Arial, san-serif;
	color: #211C18;
	background: url(   '/images/layout/btn-content-blank.jpg' ) no-repeat;
	float: left;
	line-height: 24px;
	text-align: center;
	text-decoration: none;
}
.content-area .action a:hover
{
	background: url(   '/images/layout/btn-content-blank-hover.jpg' ) no-repeat;
}
.content-area hr
{
	clear: both;
	width: 90%;
	border-top: solid 1px #A1A1A1;
	border-left: none;
	border-right: none;
	border-bottom: none;
}
.content-area .itemList ul
{
	margin: 0;
	padding: 0 0 0 22px;
	list-style-image: none;
	list-style-type: none;
}
.content-area .itemList li
{
	font: normal 11px;
	border-bottom: dotted 2px #A1A1A1;
	margin: 0;
	padding: 4px 0px 4px 10px;
	width: 200px;
	background-image: url(   '/images/layout/bg-list-bullet.gif' );
	background-repeat: no-repeat;
	background-position: 0px 11px;
}
.content-area .itemList li.last
{
	border-bottom: none;
}

.content-area .itemList li a
{
	text-decoration: none;
}
#upcoming-events
{
	clear: both;
	background: #DFECC1;
	border: solid 1px #999999;
	padding: 8px;
}
#upcoming-events table tbody td
{
	font: normal 11px Helvetica, Arial, san-serif;
}
#upcoming-events table tbody th
{
	font: bold 11px Helvetica, Arial, san-serif;
	text-transform: uppercase;
	color: #333333;
}
#upcoming-events .calendar
{
	float: right;
	height: 144px;
	width: 150px;
	margin: 8px 4px 0 0;
	background: url(   '/images/layout/calendar.gif' ) no-repeat;
}
/**
 * Holds the main content of each page.  In other words, everything below
 * the sitemap and to the right of the left menu.  Sets the default font
 * for the page.
 */

/*This is for the masterpage content container*/
.mainContentContainer
{
	color: #333333;
	float: left;
	font-family: arial;
	font-size: 10pt;
	line-height: 14pt;
	margin: 5px 5px 5px 5px;
	width: 550px;
}

/*This is for the three column content container*/
.middleContentContainer
{
	color: #333333;
	float: left;
	font-family: arial;
	font-size: 10pt;
	line-height: 14pt;
	margin: 5px 5px 5px 5px;
	width: 425px;
}

/*This is for the one column content container*/
.onlyContentContainer
{
	color: #333333;
	float: left;
	font-family: arial;
	font-size: 10pt;
	line-height: 14pt;
	margin: 5px 5px 5px 5px;
	width: 100%;
}

.subContentContainer
{
	text-align: center;
}

/**
 * Holds the items in the right menubar.  Every item is displayed on its own
 * line inside the right menu
 */
.rightMenuContainer
{
	/*border-left: solid 1px #E9E8E0;*/
	text-align: center;
	width: 135px;
	clear: both;
	float: right;
	padding-left: 10px;
}

/**
 * Items inside the right menu are displayed on their own line and centered.
 */
.rightMenuContainer td
{
	vertical-align: middle;
}
.rightMenuContainer .ad
{
	width: 150px;
}
.rightMenuContainer .ad > *
{
	margin: auto;
	display: block;
}

.come-out-and-play
{
	display: block;
	margin: 0 2px;
}

.farmers-market
{
	display: block;
	margin: 0 2px;
}

.uvp
{
	display: block;
	margin: 0 2px;
}

.election-results
{
	display: block;
	margin: 0 2px;
}


.art-council, .come-out-and-play, .community-profile, .community-videos, .online-bill-pay, .rexburg-map, .streetlight, .report-issue, .winter-recreation, .email-alert, .farmers-market, .uvp, .election-results
{
	display: block;
	height: 76px;
	width: 206px;
	margin-top: 3px;
}

.art-council
{
	background: url(   '/images/layout/img-art-council.gif' ) no-repeat;
}
.art-council:hover
{
	background: url(   '/images/layout/img-art-council-hover.gif' ) no-repeat;
}
.come-out-and-play
{
	background: url(   '/images/layout/img-come-out-and-play.gif' ) no-repeat;
}
.come-out-and-play:hover
{
	background: url(   '/images/layout/img-come-out-and-play-hover.gif' ) no-repeat;
}
.community-profile
{
	background: url(   '/images/layout/img-community-profile.gif' ) no-repeat;
}
.community-profile:hover
{
	background: url(   '/images/layout/img-community-profile-hover.gif' ) no-repeat;
}
.community-videos
{
	background: url(   '/images/layout/img-community-videos.gif' ) no-repeat;
}
.community-videos:hover
{
	background: url(   '/images/layout/img-community-videos-hover.gif' ) no-repeat;
}
.online-bill-pay
{
	background: url(   '/images/layout/img-bill-pay.gif' ) no-repeat;
}
.online-bill-pay:hover
{
	background: url(   '/images/layout/img-bill-pay-hover.gif' ) no-repeat;
}
.rexburg-map
{
	background: url(   '/images/layout/img-rexburg-map.gif' ) no-repeat;
}
.rexburg-map:hover
{
	background: url(   '/images/layout/img-rexburg-map-hover.gif' ) no-repeat;
}
.streetlight
{
	background: url(   '/images/layout/img-streetlight.gif' ) no-repeat;
}
.streelight:hover
{
	background: url(   '/images/layout/img-streetlight-hover.gif' ) no-repeat;
}
.winter-recreation
{
	background: url(   '/images/layout/recreation_allseason.gif' ) no-repeat;
}
.winter-recreation:hover
{
	background: url(   '/images/layout/recreation_allseason_hover.gif' ) no-repeat;
}
.email-alert
{
	background: url(   '/images/layout/img-email.gif' ) no-repeat;
}
.email-alert:hover
{
	background: url(   '/images/layout/img-email-hover.gif' ) no-repeat;
}
.report-issue
{
	background: url(   '/images/layout/img-report-issue.gif' ) no-repeat;
}
.report-issue:hover
{
	background: url(   '/images/layout/img-report-issue-hover.gif' ) no-repeat;
}
.farmers-market
{
	background: url(   '/images/layout/img-farmers-market.gif' ) no-repeat;
}
.election-results
{
	background: url(   '/images/layout/election-results.gif' ) no-repeat;
}
.uvp
{
	background: url(   'images/UVP_button.jpg' ) no-repeat;
}
div.preload
{
	position: absolute;
	top: -9999;
	left: -9999;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.links-section
{
	width: inherit;
	clear: both;
}
.links-section .image
{
	float: left;
	width: 50%;
}
.links-section .links
{
	float: left;
	width: 50%;
	position: relative;
}
.links-section .links ul
{
	margin: 0;
	padding: 0 0 0 5px;
	list-style-image: none;
	list-style-type: none;
}
.links-section .links li
{
	font: normal 11px;
	border-bottom: dotted 2px #A1A1A1;
	margin: 0;
	padding: 4px 0px 4px 10px;
	width: 200px;
	background-image: url(   '/images/layout/bg-list-bullet.gif' );
	background-repeat: no-repeat;
	background-position: 0px 11px;
}
.links-section .links li p
{
	line-height: 1em;
	font-size: 10px;
	color: gray;
	padding-left: 7px;
}
.links-section .links li.last
{
	border-bottom: none;
}

.links-section .links li a
{
	text-decoration: none;
}

.links-section .links .text
{
	font: normal 16px Georgia, serif;
	text-decoration: underline;
	color: #739A3F;
	text-align: left;
}

.communityCalendar
{
	border-color: #68652E;
	background-color: #DAD7BD;
	color: #577170;
}

.communityCalendar a:link, .communityCalendar A:visited
{
	color: #577170;
	font-size: 9pt;
	font-family: Arial;
	text-align: left;
	text-decoration: none;
	line-height: 18pt;
}

.communityCalendar a:hover, .communityCalendar A:visited:hover
{
}

.news a:link, .news A:visited
{
	color: blue;
	font-weight: normal;
	font-size: 10pt;
	font-family: Arial;
	text-align: center;
}

.news a:hover, .news A:visited:hover
{
	color: #68652E;
}

.newsDate
{
	color: #A9A792;
	font-size: 8pt;
	font-family: Arial;
}

.seperateHeader
{
	color: #577170;
	font-size: 15pt;
	font-weight: bold;
	font-family: Times New Roman;
	font-variant: small-caps;
}

.weather
{
	color: #000000;
	font-family: arial;
	font-size: 10pt;
}


.minutesLeft
{
	border-bottom: solid 1px gray;
	border-top: solid 1px gray;
	border-left: solid 1px gray;
}

.minutesMiddle
{
	border-bottom: solid 1px gray;
	border-top: solid 1px gray;
}

.minutesRight
{
	border-bottom: solid 1px gray;
	border-top: solid 1px gray;
	border-right: solid 1px gray;
}

/**
 * The main container which holds all visible aspects of the page.
 */

/**
     * Formats the header.
     */
.pageHeader
{
	color: White;
	font-family: Arial;
	font-size: 8pt;
	padding-bottom: 3px;
	text-align: right;
}

/**
     * Styles links in the header.
     */
.pageHeader > a
{
	color: White;
	text-decoration: none;
}

/**
     * Syles links when hovered over.
     */
.pageHeader > a:hover
{
	text-decoration: underline;
}

.header-links
{
	float: right;
	position: relative;
	top: -25px;
	right: 35px;
	font: bold 11px Helvetica, Arial, san-serif;
	color: #7C848B;
}
.header-links > a
{
	color: White;
	text-decoration: none;
}
.header-links > a:hover
{
	text-decoration: underline;
}

/**
       * The seperator in the left menu.  This class should be used with a div, NOT
       * an <hr /> tag.  <hr /> tags cause problems in IE.
       */
.hbarLeftMenu
{
	border-top: dotted 1px tan;
	clear: both;
	height: 0px;
	margin: 1px 0px 1px 0px;
	width: 100%;
}

/**
     * This is the generic horizontal rule (<hr>) used throughout the site in the
     * main content area.  
     */
.hbar
{
	clear: both;
	color: #cccccc;
	height: 1px;
	text-align: left; /* The text-align was set to left to make the "Contact Us" look nice */
	width: 98%; /* The width was set to 98% to make the "Contact Us" look nice */
}


/**
     * The seperator in the right menu.  This class should be used with a div,
     * NOT an <hr /> tag.  <hr /> tags are not universally displayed the same and 
     * it can cause problems with IE.
     */
.hbarRightMenu
{
	border-top: solid 1px #DEDBDB;
	background-color: #DEDBDB; /*color: #591F00;*/
	color: #DEDBDB;
	height: 1px;
	margin: 5px 5px 5px 5px;
	text-align: left;
	width: 98%;
}

/*--------------------------------------------------------------------------*/
/**  * This the header to be used with every news article on the website.  */
.newsHeader
{
	font-family: Times New Roman;
	font-size: 28pt;
	line-height: 28pt;
	padding-bottom: 10px;
}

/**
 * This is the subheader used in conjunction with the news header.
 */
.newsSubHeader
{
	font-family: Arial;
	font-size: 16pt;
	line-height: 16pt;
	margin-bottom: 10px;
}

/**
 * This is the author formatting for a news article.
 */
.newsAuthor
{
	font-family: Times New Roman;
	font-size: 16pt;
	font-style: italic;
	margin-bottom: 10px;
}

/**
 * Used to create a single indented column.  It is generally used to create
 * pictures with links and descriptions in a single column.  Use the
 * pictureLink and the pictureLinkDescription to create this effect.
 */
.column90
{
	clear: both;
	float: left;
	margin: 0px auto 10px auto;
	padding-left: 5%;
	width: 90%;
}

/**
 * Used to create a two column layout.  It is generally used to create
 * pictures with links and descriptions in a side-by-side columns.  
 * Use the pictureLink and the pictureLinkDescription to create this effect.
 */
.column50
{
	float: left;
	margin-bottom: 10px;
	width: 49.99%;
	height: 146px;
}

/**
 * Used to create two column as Department Employees section without
 * any padding (margin-bottom and heights).
 */
.column50nopad
{
	font-family: Helvetica, Arial, san-serif;
	font-size: 11px;
	float: left;
	width: 49.99%;
}

/**
 * Used to create a three column layout.  It is generally used to create
 * pictures with links and descriptions in a side-by-side columns.  
 * Use the pictureLink and the pictureLinkDescription to create this effect.
 */
.column33
{
	float: left;
	padding-top: 10px;
	text-align: center;
	width: 33%;
}

/**
 * This ensures that when three columns exist the link and description will
 * appear below the picture
 */
.column33 > .pictureLink
{
	clear: both;
	float: none;
}

/**
 * Formats pictures to float left and adds padding to the right.  This is
 * used to create a picture with a link and description.  See column90 or
 * column50 for more info.
 */
.pictureLink
{
	float: left;
	margin-right: 10px;
	width: 125px;
}

/**
 * Provides formatting for the description associated with a pictureLink.
 */
.pictureLinkDescription
{
	margin-right: 10px;
	padding-top: 10px;
}

/**
 * Formats links in a picture link description.  This should only format the
 * first link, but IE has a bug which causes the 1st decendant CSS not to work
 * correctly.
 */
.pictureLinkDescription > a
{
	color: Black;
	display: block;
	font-weight: bolder;
	text-decoration: none; /*     Removed this because text went below the picture     height: 42px;     width: 255px;     */
}

/**
 * This should be used to display images on their own line or anything
 * else which needs to be centered and on its own line.
 */
.banner
{
	clear: both;
	display: block;
	margin: 5px auto 5px auto;
	width: 100%;
	text-align: center;
}

/**
 * This is a special class used to force a <div> tag to contain floats.
 * DO NOT MODIFY!
 */
.clear
{
	clear: both;
	width: 100%;
	height: 0px;
}

/**
 * This is a multipurpose header.  It is intended to head faq sections, but
 * has become a commonly used header when no other appropriate header exists.
 */
.faqHeader
{
	font-weight: bolder;
	margin-bottom: 10px;
}

/**
 * To be used with a label column.  Creates a column which displays information
 * to the right of a label column.  MAKE SURE YOU FULLY UNDERSTAND THIS TAG
 * BEFORE USING.  It can seem buggy if you don't know how to use it.
 */
.infoColumn
{
	clear: right;
	float: right;
	margin-bottom: 5px;
	width: 75%;
}

/**
 * A container used to hold a list of items.  All items must be contained
 * in a tag to display properly.  For general text lists use the <span> tag
 */
.itemList
{
	font-size: smaller;
	margin-bottom: 10px;
}

/**
 * Makes sure that all items in the container are displayed on their own line.
 */
.itemList > *
{
	display: block;
}

/**
 * To be used with an info column.  Creates a column which displays information
 * to the left of an info column.  MAKE SURE YOU FULLY UNDERSTAND THIS TAG
 * BEFORE USING.  It can seem buggy if you don't know how to use it.
 */
.labelColumn
{
	clear: left;
	float: left;
	font-weight: bolder;
	margin-bottom: 5px;
	width: 25%;
}


/**
 * The messageHeader provides the formatting for headers similar to the ones
 * on the default page (see Mayor's Message).
 */
.messageHeader
{
	color: #577170;
	display: block;
	font-size: 15pt;
	font-weight: bold;
	font-family: Times New Roman;
	font-variant: small-caps;
	margin-bottom: 10px;
}

/**
 * image-right and image-left are used to move images to one side or other of 
 * their containing area.
*/
.image-right
{
	padding: 1px;
	border: solid 1px #D6CDBE;
	background: #FAF2D3;
	float: right;
	margin: 10px 0px 5px 15px;
	clear: both;
}
.image-left
{
	padding: 1px;
	border: solid 1px #D6CDBE;
	background: #FAF2D3;
    float:left;
    margin: 10px 15px 5px 0;
    clear: both;
}