@import url(reset.css);

html { font: normal 62.5% "Helvetica Neue", Helvetica, Arial, sans-serif;;
       background: #363c58 url(/images/interface/top_gradient_repeat.png) left top repeat-x; }
a { color: #0f5d34; }
a:hover { color: #961D1B; }

body { font-size: 1.35em; line-height: 1.3; }

/* CCS styles */
#content h1 { font-size: 2.0em; line-height: 1.3em; font-weight: bold; }
#content h2 { font-size: 1.7em; line-height: 1.3em; font-weight: bold; }
#content h3 { font-size: 1.3em; line-height: 1.3em; font-weight: bold; }
#content h4 { font-size: 1.1em; line-height: 1.3em; font-weight: bold; }
#content h5 { font-size: 1.0em; line-height: 1.3em; font-weight: bold; }
#content p { }
#content strong, #content b { font-weight: bold; }
#content .news ul { list-style-type: disc; list-style-position: outside; font-size: 1.2em; line-height: 1.4em; margin: 0 0 10px 25px; }
#content .news li { margin-bottom: 5px; }

#main { }
#main h2 { font-family: Georgia, Times, serif; color: #182048; margin-bottom: 20px; text-transform: uppercase; }
#main h3 { color: #363C58; text-transform: uppercase; font-size: 1.2em; margin-bottom: 20px; }
#main p { color: #47342d; margin-bottom: 20px; }

#main ul { list-style-type: disc; list-style-position: outside; font-size: 1.1em; line-height: 1.3em; margin: 5px 40px 10px 40px; }
#main li { margin-bottom: 5px; }

#main .article-sidebar { width: 260px; float:right; margin: 0 0 20px 0; background-color: #e9e1d6; padding: 20px; }
#main .article-sidebar h3 { font-size: 14px; text-transform: uppercase; color: #fff; background-color: #c0af95; margin-bottom: 10px; padding: 5px; border-bottom: none; }

#main-content { float: left; width: 420px; margin-right: 20px; }
#sidebar { font-size: 0.9em; padding: 10px; float: left; width: 160px; background-color: #e5e6e7; }
#sidebar ul, #sidebar ol { margin: 0 0 0 20px; }
#main-content .right-photo { float: right; border: solid 2px #686C81; margin: 0 0 20px 20px; }
#main-content .left-photo { float: left; border: solid 2px #686C81; margin: 0 20px 20px 0; }
#main-content table.data { border: solid 3px #686C81; }
#main-content td.data { background-color: #bdc5cb; line-height: 3px; }

#main-content table.data2 { border-top: 3px solid #686C81; }
#main-content tr.data2 { border-bottom: 2px solid #686C81; }
#main-content td.data2 { background-color: #bdc5cb; line-height: 3px; }

.column ul { list-style-image: url('/images/interface/bullet_green.png'); padding: 0 10px 0 10px; }

.schedule tr { border-bottom: 1px solid #686C81; }

.clearer { clear: both; }

.column { width: 190px; float: left; }
.column h3 { font-family: Georgia, Times, serif; text-transform: uppercase; font-weight: normal; color: #363C58; font-size: 1.7em; }

#background { background: url(/images/backgrounds/background_home.png) center top no-repeat; }
body.about_us #background    { background-image: url(/images/backgrounds/background_about.png); }
body.attractions #background { background-image: url(/images/backgrounds/background_attractions.png); }
body.auctions #background    { background-image: url(/images/backgrounds/background_auctions.png); }
body.highlights #background  { background-image: url(/images/backgrounds/background_highlights.png); }
body.support #background     { background-image: url(/images/backgrounds/background_support.png); }

#container { width: 978px; margin: 0 auto; position: relative; left: -28px; }
#pole-top { width: 54px; height: 43px; margin-top: 11px; float: left;
            background: url(/images/interface/pole_top.png) left top no-repeat; }
#pole-left { width: 224px; height: 25px; margin-top: 20px; float: left;
             background: url(/images/interface/pole_repeat.png) left top repeat-x; }
#pole-right { width: 50%; height: 25px; margin-top: 20px; right: 0; position: absolute;
              background: url(/images/interface/pole_repeat.png) left top repeat-x; }

#header { width: 676px; height: 460px; float: right; padding: 20px 12px 0;
          background: url(/images/interface/banner_top.png) right top no-repeat; }

#quick-links { float: right; font-size: 1em; height: 24px; margin: -2px 6px 0 0; color: #e4bf85; }
#quick-links a { display: inline-block; margin: 0 6px; color: #e4bf85;  }
#quick-links #facebook-link { width: 24px; height: 0; padding-top: 24px; overflow: hidden; margin-left: 0;
                              position: relative; top: 7px;
                             background: url(/images/interface/btn_facebook.png) left top; }
#quick-links #facebook-link { display: none; } /* right now there's no facebook page */
#quick-links #twitter-link { width: 24px; height: 0; padding-top: 24px; overflow: hidden; /*margin-right: 2px;*/
                             position: relative; top: 7px;
                             background: url(/images/interface/btn_twitter.png) left top; }

#header h1 { width: 100%; height: 0; padding-top: 70px; overflow: hidden; margin-top: 41px;
             background: url(/images/interface/h1_iolani_fair.gif) center top no-repeat; }
#header h2 { width: 100%; height: 0; padding-top: 22px; overflow: hidden;
             background: url(/images/interface/h2_fair_date.gif) center top no-repeat; }

#navigation-wrapper { width: 220px; position: absolute; z-index: 1; left: 58px; top: 0px;
                      background: url(/images/interface/nav_background.png) left top repeat-y; }

#navigation { padding: 20px 10px 0; text-align: center; }
ul#main-nav { padding-top: 34px; }
ul#main-nav li a.nav-item { width: 200px; height: 0; padding-top: 40px;
                            display: block; overflow: hidden;
                            background: url(/images/interface/main_navigation.png) left top no-repeat; }
ul#main-nav li#nav-home a.nav-item                { background-position: left    -12px; }
ul#main-nav li#nav-home a.nav-item:hover          { background-position: -200px  -12px; }
ul#main-nav li#nav-home.current a.nav-item        { background-position: -400px  -12px; }
ul#main-nav li#nav-support a.nav-item             { background-position: left    -52px; }
ul#main-nav li#nav-support a.nav-item:hover       { background-position: -200px  -52px; }
ul#main-nav li#nav-support.current a.nav-item     { background-position: -400px  -52px; }
ul#main-nav li#nav-attractions a.nav-item         { background-position: left    -92px; }
ul#main-nav li#nav-attractions a.nav-item:hover   { background-position: -200px  -92px; }
ul#main-nav li#nav-attractions.current a.nav-item { background-position: -400px  -92px; }
ul#main-nav li#nav-auctions a.nav-item            { background-position: left   -132px; }
ul#main-nav li#nav-auctions a.nav-item:hover      { background-position: -200px -132px; }
ul#main-nav li#nav-auctions.current a.nav-item    { background-position: -400px -132px; }
ul#main-nav li#nav-about_us a.nav-item            { background-position: left   -172px; }
ul#main-nav li#nav-about_us a.nav-item:hover      { background-position: -200px -172px; }
ul#main-nav li#nav-about_us.current a.nav-item    { background-position: -400px -172px; }
ul#main-nav li#nav-highlights a.nav-item          { background-position: left   -212px; }
ul#main-nav li#nav-highlights a.nav-item:hover    { background-position: -200px -212px; }
ul#main-nav li#nav-highlights.current a.nav-item  { background-position: -400px -212px; }
ul#main-nav li#nav-padding a.nav-item             { background-position: left   -252px;
                                                    padding-top: 3px; }

ul#sub-nav { margin-bottom: 20px; padding: 0 20px; font-family: Georgia, serif; font-size: 1.1em; line-height: 1.1; }
ul#sub-nav li { margin: 0 0 10px; }
ul#sub-nav a { color: #91806b; text-decoration: none; }
ul#sub-nav li.current a { color: #b4130f; background: url(/images/interface/nav_selected.png) right center no-repeat; padding-right: 10px; }
ul#sub-nav a:hover { color: #b4130f; text-decoration: underline; }

#navigation-bottom { width: 220px; height: 280px; position: absolute; z-index: -1; bottom: -80px;
                     background: url(/images/interface/nav_bottom.png) left top no-repeat; }

#content-wrapper { width: 700px; float: right; background: url(/images/interface/content_repeat.png) left top repeat-y; }
#content { position: relative; width: 620px; min-height: 540px; margin: -278px 10px 0; padding: 0 30px 25px;
           background: url(/images/interface/stamp_home.png) bottom right no-repeat; }
body.about_us #content    { background-image: url(/images/interface/stamp_about.png); }
body.attractions #content { background-image: url(/images/interface/stamp_attractions.png); }
body.auctions #content    { background-image: url(/images/interface/stamp_auctions.png); }
body.highlights #content  { background-image: url(/images/interface/stamp_highlights.png); }
body.support #content     { background-image: url(/images/interface/stamp_support.png); }

#footer-wrapper { width: 700px; float: right; position: relative;
                  background: url(/images/interface/footer_divider.png) left top no-repeat; }
#footer { width: 620px; margin: 10px auto 0; padding: 10px 40px 5px; color: white; line-height: 1.2em;
          background: url(/images/interface/footer_repeat.png) left top repeat-y; }
#footer h3 { width: 100%; height: 0; padding-top: 23px; overflow: hidden; margin: 0 0 24px;
             background: url(/images/interface/h3_corporate_sponsors.png) center top no-repeat; }
#footer a { color: white; }
#footer #sponsor-logos { height: 90px; }
#footer #sponsor-logos a { display: block; float: left; margin-right: 20px; }
#footer #sponsor-list { float: left; }
#footer #sponsor-list ul { font-size: .9em; display: block; float: left; width: 200px; }
#footer #sponsor-list li { padding-left: 12px; text-indent: -12px; line-height: 1.1em; margin-bottom: 4px; }
#footer #sponsor-list ul li.head { font-weight: bold; font-size: 1.2em; margin-bottom: 6px; }
#footer #site-info { width: 440px; font-size: .9em; margin: 0 auto; background: url(/images/interface/seal_small.png) left top no-repeat; padding-left: 75px; }
#footer .nav { font-size: 1.05em; float: left; border-top: solid 1px #0191C7; margin-top: 10px; }
#footer .nav li { display: inline; text-transform: uppercase; font-weight: bold; }
#footer .nav li a { font-weight: bold; line-height: 20px; }

#footer-bottom { width: 700px; height: 20px; position: absolute; bottom: -20px;
                 background: url(/images/interface/footer_bottom.png) left top no-repeat; }

#site-info { width: 626px; float: right; margin: 30px auto; padding-left: 64px;
             font-size: .85em; color: #aab0cd;
             background: url(/images/interface/seal_iolani.png) left top no-repeat; }
#site-info a { color: #aab0cd; }


/* [=features]
****************************************/
#features { z-index: 2 !important; width: 620px; height: 300px; position: relative; margin-bottom: 30px; }
#features .nav { z-index: 4; position: absolute; display: inline; top: 305px; }
#features .nav a { display: block; width: 12px; height: 12px; line-height: 12px; text-align: center; text-decoration: none; background: url('/images/interface/feature_marker_hollow.png') left top no-repeat; text-indent: -9999em; }
#features .nav a:hover,
#features .selected a { background-image: url('/images/interface/feature_marker_selected.png'); }
#features .feature { position: absolute; bottom: 0; left: 0; }
#features .selected { z-index: 10; }


/* [=forms]
*******************************************************************************************************/
#content form.form fieldset { padding: 0 20px 8px 147px; }
#content form.form fieldset * { vertical-align: middle; }
#content form.form label { font-family: Helvetica, Arial, sans-serif; float: left; width: 137px; font-weight: bold; line-height: 24px; margin-right: -100%; margin-left: -137px; color: #424242; }
#content form.form div.separator { border-bottom: 1px solid #dedede; height: 1px; margin: 5px 0 6px 0; text-indent: -9999em; }
#content form.form fieldset div.separator { margin-left: -147px; margin-right: -16px; }
#content form.form div.required { width: 25px; text-align: right; float: right; font-size: 10px; font-style: italic; }
#content form.form select,
#content form.form input.text,
#content form.form textarea { background-color: #eeeeee; border: 0; height: 20px; padding: 3px 3px 0; width: 100%; font-size: 15px; }
#content form.form textarea { vertical-align: text-top; }
#content form.form input.submit { margin: 8px auto 0; display: block; width: 132px; height: 35px; }
#content form.form select { padding: 4px; height: 30px; }
#content form.form .checkbox-pair { position: relative; padding-left: 25px; }
#content form.form .checkbox-pair input { position: absolute; top: -1px; left: 0; }
#content form.form label.checkbox { float: none; margin-left: 0; margin-right: 0; line-height: 1.5; }
#content form.form .form-notice { padding: 10px; border: solid 3px #dedede; font-size: 110%; }

#content .error { font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: bold; color: red; margin: 0 0 10px 0; border-top: dotted red 1px; border-bottom: dotted red 1px; padding: 10px; }
#content .notice { font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: bold; color: #0e7b15; margin: 0 0 10px 0; border-top: dotted #0e7b15 1px; border-bottom: dotted #0e7b15 1px; padding: 10px; }


/* [=slideshow]
*******************************************************************************************************/
.slideshow { padding: 0; background-color: #343434; }
.slideshow-images { width: 560px; height: 340px; margin: 15px; margin-left: 30px; }
.slideshow-image { width: 560px; height: 340px; position: absolute; }
.slideshow-thumbs { width: 594px; margin-top: 10px; margin-left: 15px; }
.slideshow-thumb { float: left; border-width: 5px; border-style: solid; margin: 0 5px 5px 0; cursor: pointer; }
.slideshow-nav { margin-left: 190px; width: 243px; }
.slideshow-nav-button { cursor: pointer; color: white; background-color: #343434; }
.slideshow-caption { width: 520px; height: 80px; margin: 0 auto 40px; overflow: auto; font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 14px; line-height: 18px; padding: 0; text-align: center; color: #fff; }
.slideshow-close { position: absolute; top: -20px; right: -20px; }
.slideshow cite { font-size: 140%; text-transform: uppercase; font-style: normal; font-weight: bold; color: #F17130; }


/* manpower database */
th { text-align: left; }
tr.highlight-on-hover { cursor: pointer; }
tr.highlight-on-hover:hover { background-color: #fff8c6; }
tr.highlight-on-hover a { text-decoration: none; font-weight: normal; color: black; }
tr.highlight-on-hover a:hover { text-decoration: underline; }

#manpower-nav { width: 200px; padding: 10px; border: 2px solid gray; margin: -20px 0 20px; }
#manpower-nav a { font-weight: normal; }
#manpower-nav a.current { font-weight: bold; }
#manpower-wrapper form.form input { margin-bottom: 2px; }
#manpower-wrapper form.form label.checkbox { font-weight: normal; }
#manpower-wrapper ul { list-style-type: disc; list-style-position: outside; margin: 0 0 15px 20px; }
#manpower-wrapper ol { list-style-type: decimal; list-style-position: outside; margin: 0 0 15px 20px; }
#manpower-wrapper form.form select { height: 23px; padding: 2px; margin-bottom: 2px; }