HTML { height: 100%; }
BODY { margin: 0; background-color: #FFF; color: #000; font-size: 12px; font-family: Arial, sans-serif; height: 100%; }
FORM { margin: 0 0 0 0; }
IMG, TABLE { border: 0; }
TABLE TD { font-size: 12px; vertical-align: top; }
H1 { margin: 0 0 20px 0; }

a:link { color: #213F9A; }
a:visited { color: #213F9A; }
a:active { color: #00C; }
a:active, a:focus { outline: 0; }
.infoBox A { text-decoration: none !important; }

.b { font-weight: bold; }
.nb { font-weight: normal; }
.lc { text-transform: lowercase; }
.taC { text-align: center; }
.taR { text-align: right; }
.vaM { vertical-align: middle; }
.m0 { margin: 0 !important; }
.bm5 { margin-bottom: 5px; }
.bm10 { margin-bottom: 10px; }
.tm5 { margin-top: 5px; }
.tm10 { margin-top: 10px; }
.tm20 { margin-top: 20px; }
.med { font-size: 14px; }
.subG { font-size: 14px; border-bottom: 1px solid #DDD; padding-bottom: 2px; }
.subG A { font-weight: normal; }
.big { font-size: 16px; }
.p10 { padding: 10px; }
.full { width: 100%; }
.nobr { white-space: nowrap; }
.none { display: none; }
.icons { border: 1px solid #999; }
.clear { clear: both; }
.clear0 { clear: both; height: 0px; }
.lineDiv { height: 1px; border-top: 1px solid #CCC; }
.leftTitle { color: #333; font-weight: bold; font-size: 14px; }
.greyTitle { font-size: 12px; font-weight: normal; color: #666; background-color: #EFEFEF; padding: 5px; }
.red { color: #F00; }
.blue { color: #00F; }
.titleSubtleBG { clear: both; font-size: 11px; font-weight: normal; color: #666; background-color: #EFEFEF; margin-bottom: 10px; padding: 5px; }

.br3 { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.br5 { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.brTop5 { -moz-border-radius-topright: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-top-left-radius: 5px; border-top-right-radius: 5px; border-top-left-radius: 5px; }
.brBot5 { -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; }
.bs225x333 { -moz-box-shadow: 2px 2px 5px #333; -webkit-box-shadow: 2px 2px 5px #333; box-shadow: 2px 2px 5px #333; }
.w250 { width: 250px; }

#cityDataTitle { width: 306px; height: 32px; background: url(http://icons.wxug.com/i/wxmap/titleBars.png) repeat-x; background-position: 0 0; color: #FFF; font-size: 14px; text-align: center; line-height: 32px; }
#alertTitle { width: 306px; height: 32px; background: url(http://icons.wxug.com/i/wxmap/titleBars.png) repeat-x; background-position: 0 -32px; color: #FFF; font-size: 14px; text-align: center; line-height: 32px; }

#cityDataTitle #lockButton { float: left; display: block; width: 30px; height: 30px; overflow:hidden; margin-top: 1px; margin-left: 5px; }
#cityDataTitle #lockButton.unlock { background: url(http://icons.wxug.com/i/wxmap/titleIcons.png) no-repeat; background-position: 0px 0px; }
#cityDataTitle #lockButton.lock { background: url(http://icons.wxug.com/i/wxmap/titleIcons.png) no-repeat; background-position: 0px -30px; }

#cityDataTitle #sideSelect { float: right; display: block; width: 30px; height: 30px; margin-top: 1px; margin-left: 5px; }
#cityDataTitle #sideSelect A { display: block; width: 30px; height: 30px; overflow: hidden; }
#cityDataTitle #sideSelect SPAN.left { display: block; width: 30px; height: 30px; background: url(http://icons.wxug.com/i/wxmap/titleIcons.png) no-repeat; background-position: 0px -150px; }
#cityDataTitle #sideSelect SPAN.right { display: block; width: 30px; height: 30px; background: url(http://icons.wxug.com/i/wxmap/titleIcons.png) no-repeat; background-position: 0px -120px; }

.balanceBox { float: left; margin-top: 1px; margin-left: 5px; display: block; width: 30px; height: 30px; }
.minMax { float: right; margin-top: 1px; margin-right: 5px; }
.minMax A { display: block; width: 30px; height: 30px; text-decoration: none; }

.minMax #expandConditions.expanded SPAN.plus { display: none; }
.minMax #expandConditions.expanded SPAN.minus { display: block; width: 30px; height: 30px; background: url(http://icons.wxug.com/i/wxmap/titleIcons.png) no-repeat; background-position: 0px -90px; }
.minMax #expandConditions SPAN.plus { display: block; width: 30px; height: 30px; background: url(http://icons.wxug.com/i/wxmap/titleIcons.png) no-repeat; background-position: 0px -60px; }
.minMax #expandConditions SPAN.minus { display: none; }

.minMax #expandAlerts.expanded SPAN.plus { display: none; }
.minMax #expandAlerts.expanded SPAN.minus { display: block; width: 30px; height: 30px; background: url(http://icons.wxug.com/i/wxmap/titleIcons.png) no-repeat; background-position: 0px -90px; }
.minMax #expandAlerts SPAN.plus {display: block; width: 30px; height: 30px; background: url(http://icons.wxug.com/i/wxmap/titleIcons.png) no-repeat; background-position: 0px -60px; }
.minMax #expandAlerts SPAN.minus { display: none; }

.stormBalloon .stormTable TD { font-size: 11px; padding: 2px; border-bottom: 1px solid #EFEFEF; color: #333; }

.hotelBalloon { width: 350px; min-height: 150px; }
.hotelBalloon .imagePane { width: 120px; min-height: 150px; float: left; text-align: center; }
.hotelBalloon .imagePane IMG { margin-top: 10px; border: 1px solid #000; }
.hotelBalloon .textPane { margin-top: 10px; font-size: 14px; }
.hotelBalloon .textPane .hotelDirections { margin-top: 10px; text-transform: capitalize; }

.camsBalloon { width: 350px; min-height: 280px; }
.camsBalloon .camImage IMG { width: 348px; margin-top: 10px; margin-bottom: 10px; border: 1px solid #333; }

.fodorBalloon { min-height: 280px; }
.fodorBalloon .fodorPhoto { float: right; width: 120px; padding: 10px; }
.fodorBalloon .fodorPhoto IMG { margin: 5px 0 2px 0; border-top: 1px solid #999; border-right: 1px solid #333; border-bottom: 1px solid #333; border-left: 1px solid #999; }
.fodorBalloon .fodorPhoto .photoNav A { text-decoration: none; font-weight: bold; font-size: 16px; }

.tornadoPhoto { float: left; width: 120px; padding: 10px; }
.tornadoPhoto IMG { margin: 5px 0 2px 0; border-top: 1px solid #999; border-right: 1px solid #333; border-bottom: 1px solid #333; border-left: 1px solid #999; }
.tornadoPhoto .photoNav A { text-decoration: none; font-weight: bold; font-size: 16px; }

.closeButton { background: url(http://icons.wxug.com/i/wxmap/close.png) right no-repeat; display: block; color: #000; font-size: 14px; font-weight: bold; width: 24px; height: 24px; line-height: 24px; position: absolute; top: -15px; right: -15px; float: right; text-decoration: none; }
.toggleBox { padding: 10px; min-width: 300px; max-width: 350px; border: 3px solid #FFF; background: #DDD url(http://icons.wxug.com/i/wxmap/background.gif) repeat-x top left; -moz-border-radius: 5px; -webkit-border-radius: 5px; -webkit-box-shadow: 2px 2px 5px #888; z-index: 2147483646; }

.contentFooterPad { font-size: 11px; padding: 0 10px; height: 33px; line-height: 33px; background: #EFEFEF url(http://icons.wxug.com/i/wu/nowBarBG.png) repeat-x top; border-top: 1px solid #999; white-space: nowrap; overflow: hidden; }

#refreshButton { display: block; width: 16px; height: 16px; float: right; margin-right: 10px; }

#WunderMap { margin: 0; height: 100%; }
#WunderMap #mapOptions { width: 387px; overflow: hidden; font-size: 11px; border: 1px solid #000; margin-bottom: 10px; position: absolute; top: 7px; left: 375px; white-space: nowrap; }
#WunderMap #mapOptions .noRadar { white-space: nowrap; }
#WunderMap #mapOptions .noRadar A { color: #DDD; font-weight: normal; text-decoration: none; display: block; width: 125px; padding: 1px; text-align: center; float: left; background-color: #F5F5F5; border-top: 1px solid #FFF; border-right: 1px solid #BEBEBE; border-bottom: 1px solid #BEBEBE; border-left: 1px solid #FFF; }
#WunderMap #mapOptions .active { white-space: nowrap; }
#WunderMap #mapOptions .active A { color: #000; font-weight: bold; text-decoration: none; display: block; width: 125px; padding: 1px; text-align: center; float: left; background-color: #FFF; border-top: 1px solid #356D98; border-right: 1px solid #70B1E7; border-bottom: 1px solid #70B1E7; border-left: 1px solid #356D98; }
#WunderMap #mapOptions .inactive { white-space: nowrap; }
#WunderMap #mapOptions .inactive A { color: #000; text-decoration: none; display: block; width: 125px; padding: 1px; text-align: center; float: left; background-color: #FFF; border-top: 1px solid #FFF; border-right: 1px solid #BEBEBE; border-bottom: 1px solid #BEBEBE; border-left: 1px solid #FFF; }
#WunderMap #mapOptions .full { text-align: right; padding: 0 3px; }
#WunderMap #mapOptions .loading A { background: #FFF url(http://icons.wxug.com/i/wxmap/loading.gif) right no-repeat; }

#WunderMap #animateMap { position: absolute; top: 30px; left: 394px; width: 350px; height: 34px; white-space: nowrap; background: url(http://icons.wxug.com/i/wxmap/transparent.png) repeat; border: 1px solid #DDD; }
#WunderMap #animateMap A { display: block; width: 34px; height: 34px; float: left; cursor: pointer; text-decoration: none; }
#WunderMap #animateMap A IMG { margin: 7px 0 0 7px; }
#WunderMap #animateMap .layerKey { margin-left: 7px; }

#WunderMap #optionLinks { font-size: 11px; border: 1px solid #000; margin-bottom: 10px; position: absolute; top: 7px; left: 100px; width: 252px; overflow: hidden; white-space: nowrap; background: #FFF; }
#WunderMap #optionLinks #setMyPrefs { background: #FFF url(http://icons.wxug.com/i/wxmap/prefs.png) right no-repeat; color: #000; text-decoration: none; display: block; width: 80px; padding: 1px; text-align: center; float: left; border-top: 1px solid #FFF; border-right: 1px solid #BEBEBE; border-bottom: 1px solid #BEBEBE; border-left: 1px solid #FFF; }
#WunderMap #optionLinks #linkButton { background: #FFF url(http://icons.wxug.com/i/wxmap/link.png) right no-repeat; color: #000; text-decoration: none; display: block; width: 80px; padding: 1px; text-align: center; float: left; border-top: 1px solid #FFF; border-right: 1px solid #BEBEBE; border-bottom: 1px solid #BEBEBE; border-left: 1px solid #FFF; }
#WunderMap #optionLinks #moreButton { color: #000; text-decoration: none; display: block; width: 80px; padding: 1px; text-align: center; float: left; border-top: 1px solid #FFF; border-right: 1px solid #BEBEBE; border-bottom: 1px solid #BEBEBE; border-left: 1px solid #FFF; }
#WunderMap #optionLinks .loading A { background: #FFF url(http://icons.wxug.com/i/wxmap/loading.gif) right no-repeat; }

#WunderMap #linkPanel { background-color: #FFF; padding: 10px; width: 210px; position: absolute; top: 30px; left: 184px; border: 1px solid #BEBEBE; }
#WunderMap #linkPanel DIV A { color: #213F9A; }
#WunderMap #linkPanel INPUT { width: 200px; }
#WunderMap #linkPanel #socialButtons #fbButton { width: 70px; float: left; }
#WunderMap #linkPanel #socialButtons #twitButton { width: 70px; float: left; margin-top: 1px; }

#WunderMap #morePanel { padding: 7px 5px 5px 5px; width: 130px; background-color: #FFF; position: absolute; top: 30px; left: 268px; border: 1px solid #BEBEBE; }
#WunderMap #morePanel DIV { margin-bottom: 2px; }

#WunderMap #configure { padding: 10px; width: 200px; background-color: #FFF; position: absolute; top: 30px; left: 100px; border: 1px solid #BEBEBE; z-index: 10;  }
#WunderMap #configure TABLE { margin-left: 10px; }
#WunderMap #configure TD { white-space: nowrap; vertical-align: middle; }

#WunderMap #page { position: relative; width: 100%; height: 100%; z-index: 0; }
#WunderMap #map { position: relative; height: 100%; z-index: 0; }
#WunderMap .mapBalloon { font-size: 11px; width: 380px; }
#WunderMap .mapBalloon .mapStationInfo { padding: 5px; background-color: #F5F5F5; border: 1px solid #CCC; width: 150px; margin: 10px 0 5px 0; }
#WunderMap .mapBalloon .mapStationInfo A { color: #00F; }

#cityData { width: 306px; background-color: #FFF; z-index: 5; }
#cityData.leftSide { position: absolute; bottom: 35px; left: 35px; }
#cityData.rightSide { position: absolute; bottom: 20px; right: 20px; }

#cityDataContentWrapper { background: #DDD url(http://icons.wxug.com/i/wxmap/background.gif) repeat-x top left; width: 300px; margin: 0 3px 3px 3px; }
#cityDataContentWrapper #wuLogo { text-align: center; padding: 5px 0; }
#cityDataContentWrapper #wuLogoSmall { width: 53px; height: 25px; vertical-align: bottom; }
#cityDataContent { overflow-y: scroll; overflow-x: hidden; }
#cityDataContentWrapper .adbox { height: 250px; }

#cityData SPAN.ico { border-top: 1px solid #999; border-right: 1px solid #333; border-bottom: 1px solid #333; border-left: 1px solid #999; display: block; width: 42px; height: 42px; margin: 0 auto; }
#cityData SPAN.ico IMG { border: 1px solid #FFF; background-color: #FFF; }
#cityData #adMiniBox { margin-top: 0px; }
#cityData #current { padding: 10px; }
#cityData #current #condsTable { margin-top: 5px; }
#cityData #current #condsTable #temp { font-size: 28px; line-height: 25px; color: #333; font-weight: bold; padding-left: 10px; }
#cityData #current #condsTable #condition { clear: both; font-size: 15px; color: #333; font-weight: bold; padding-left: 10px; }
#cityData #conditions { padding: 0 10px 0 10px; }
#cityData #conditions #obsTable { color: #666; }
#cityData #conditions #obsTable .obType { padding: 2px 5px 2px 0; font-size: 13px; text-transform: capitalize; }
#cityData #conditions #obsTable .b { padding: 2px 5px; font-size: 13px; color: #333; }
#cityData #conditions #observed { padding-top: 10px; color: #666; font-size: 12px; width: 305px; overflow-x: hidden; white-space: nowrap; }
#cityData #conditions #dataSource SELECT { width: 210px; }
#cityData #forecast { padding: 10px 0; }
#cityData #forecast #dayRow { margin-top: 5px; }
#cityData #forecast #dayRow TD { vertical-align: top; width: 25%; }
#cityData #forecast #dayRow TD A { text-decoration: none; display: block; width: 100%;  }
#cityData #forecast #dayRow TD A .bm5 { color: #666; }
#cityData #forecast #dayRow TD A:hover { background-color: #F4F4F4; border: 1px solid #CCC; }

#cityData #searchForm { padding: 10px 10px 0 10px; }
#cityData #searchForm #wuSearchCity { width: 200px; }
#cityData #searchForm .textInactive { border: 1px solid #DDD; font-weight: bold; font-size: 16px; margin-right: 5px; }
#cityData #searchForm .submitInactive { border: 1px solid #DDD; color: #DDD; background-color: #FFF; font-size: 16px; }
#cityData #searchForm .textActive { border: 1px solid #000; font-size: 16px; margin-right: 5px; }
#cityData #searchForm .submitActive { border: 1px solid #000; color: #000; font-size: 16px; }

#alertBox { width: 306px; background-color: #FFF; z-index: 5; }
#alertBox.leftSide { position: absolute; bottom: 35px; left: 360px; }
#alertBox.rightSide { position: absolute; bottom: 20px; right: 345px; }

#alertBox #alertContent { background: #DDD url(http://icons.wxug.com/i/wxmap/background.gif) repeat-x top left; width: 300px; margin: 0 3px 3px 3px; }
#alertBox .alertTitle { font-weight: bold; font-size: 14px; color: #F00; }
#alertBox UL { margin: 0 0 0 10px; padding-top: 10px; padding-left: 20px; }
#alertBox UL LI { margin: 0; padding: 5px; }
#alertBox UL LI A { color: #213F9A; }
#alertBox UL LI A SPAN { font-weight: bold; }
#alertBox P A { color: #213F9A; }

#infoPane { position: absolute; padding: 10px; width: 350px; border: 3px solid #FFF; background: #DDD url(http://icons.wxug.com/i/wxmap/background.gif) repeat-x top left; -moz-border-radius: 5px; -webkit-border-radius: 5px; -webkit-box-shadow: 2px 2px 5px #888; z-index: 2147483646; }
#infoPane #infoPaneClose { background: url(http://icons.wxug.com/i/wxmap/close.png) right no-repeat; display: block; color: #000; font-size: 14px; font-weight: bold; width: 24px; height: 24px; line-height: 24px; position: absolute; top: -15px; right: -15px; float: right; text-decoration: none; }
#infoPane #infoPaneContent { max-height: 400px; overflow-y: auto; overflow-x: hidden; clear: both; }
#infoPane .mapBalloon .mapStationInfo { padding: 5px; white-space: nowrap; background-color: #F5F5F5; border: 1px solid #DDD; margin-top: 20px; margin-bottom: 10px; }
#infoPane .mapBalloon .mapStationInfo DIV:first-child { margin-bottom: 5px; }
#infoPane .mapBalloon .mapStationInfo DIV A { font-weight: bold; }
#infoPane .mapBalloon .infoPaneGraph { background: #FFF url(http://icons.wxug.com/i/wxmap/loading.gif) center no-repeat; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
#infoPane .mapBalloon TABLE TABLE { margin: 10px 0; color: #666; }
#infoPane .mapBalloon TABLE TABLE TD.full { font-weight: bold; color: #333; }

#infoPane .tornadoBalloon TABLE { color: #666; }
#infoPane .tornadoBalloon TABLE TD.full { font-weight: bold; color: #333; }

#searchBox { position: absolute; top: 30%; left: 30%; min-width: 350px; padding: 10px; border: 3px solid #FFF; background: #DDD url(http://icons.wxug.com/i/wxmap/background.gif) repeat-x top left; -moz-border-radius: 5px; -webkit-border-radius: 5px; -webkit-box-shadow: 2px 2px 5px #888; }
#searchBox #wuSearch { width: 250px; margin-right: 5px; }
#searchBox #searchContent { padding: 10px; background: url(http://icons.wxug.com/i/wxmap/logo.gif) bottom right no-repeat; }
#searchBox INPUT { font-size: 16px; }
#searchBox UL { margin: 0; padding-left: 20px; }
#searchBox UL LI { margin: 0; padding: 3px; }
#searchBox UL LI A { font-size: 11px; color: #213F9A; }
#searchBox UL LI A SPAN { font-weight: bold; }
#searchBox #newVisitor { width: 200px; }
#searchBox #locate { font-size: 16px; }

#cityList { position: absolute; top: 30%; left: 30%; padding: 10px; border: 3px solid #FFF; background: #DDD url(http://icons.wxug.com/i/wxmap/background.gif) repeat-x top left; -moz-border-radius: 5px; -webkit-border-radius: 5px; -webkit-box-shadow: 2px 2px 5px #888; z-index: 2147483646; }
#cityList #searchContent { max-height: 390px; overflow-y: auto; overflow-x: hidden; padding: 10px; }
#cityList #searchContent TABLE THEAD TR TD { font-weight: bold; border-bottom: 1px solid #DDD; }
#cityList #searchContent TABLE TBODY TR TD { white-space: nowrap; }
#cityList #searchContent TABLE TBODY TR:hover TD { background-color: #FFF; }

#adTower { position: absolute; top: 50px; right: 20px; width: 300px; height: 600px; }
#footer { position: absolute; bottom: 8px; left: 75px; font-size: 11px; color: #213F9A; }

.infoTable { font-size: 11px !important; width: 100% !important; }
.infoTable TD { padding: 7px 10px !important; }
.infoTable TD SPAN { color: #333 !important; }

.nonList { margin: 0; padding: 0; list-style-type: none; }
.nonList LI { margin: 0; padding: 0; list-style-type: none; }

.grt { background: url(http://icons.wxug.com/i/wu/gradDownBG.png) repeat-x top; }
.dtr { background: url(http://icons.wxug.com/i/wu/tickDownSmall.png) no-repeat top right; }
.dtl { background: url(http://icons.wxug.com/i/wu/tickDownSmall.png) no-repeat top left; }

.closebutton { font-size: 16px; background-color: #FFF; border: 1px solid #000; padding: 2px; }

.ui-autocomplete { background-color: #FFF; width: 250px; border-right: 2px solid #DDD; border-bottom: 2px solid #DDD; border-left: 2px solid #DDD; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; margin: 0; padding: 0; list-style-type: none; position: absolute; cursor: default; }
.ui-autocomplete-loading { background: #FFF url(http://icons.wxug.com/i/wxmap/loading.gif) right no-repeat !important; }
.ui-autocomplete-term { font-weight: bold; }
.ui-autocomplete .ui-menu-item { padding: 3px; list-style-type: none; }
.ui-autocomplete .ui-menu-item A { display: block; font-size: 12px; }
.ui-autocomplete .ui-menu-item A.ui-state-hover { background-color: #CDD9FF; }