/*------------------------------------------------------------- USVI / Film USVI ------------------------------------------------------------ Description: Stylesheet for the Film USVI website Filename: styles.css -------------------------------------------------------------*/ /* ========================================================================// Index of styles used in specific elements and components for the project within this CSS. 1. ELEMENTS 2. COMMON 3. HEADER 4. FOOTER 5. CONTAINED 6. OUR ISLANDS 7. ACCOMMODATIONS 8. PROD RESOURCES 9. LOCATIONS 10. HOME 11. CONTACT US Used in: article01.html, article02.html, article03.html, article04.html, article05.html, article06.html, article07.html, article08.html, article09.html, article10.html ========================================================================// /* ========================================================================// 1. ELEMENTS: These selectors are only applied to the elements mentioned below. ========================================================================// */ /* ========================================================================// 2. COMMON: These selectors are applied to elements throughout the whole page. ========================================================================// */ body {font-family:Arial, Helvetica, sans-serif;} #lyo_common {background:#056597 url(../images/common/bg_main.gif) no-repeat;} #cntr_main {margin:0;width:1024px;position:absolute;left:0;} #cntr_contained {margin:0;width:1024px; float:left;display:block;height:auto /*background:#999933*/} #cntr_stage {background:url(../images/common/bg_stage.gif); padding:15px 34px 22px 0; width:990px; float:left} .breakeronly {clear:both;height:0;font-size:0;margin:0;padding:0;} .txt_common {font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:15px; color:#FFFFFF; margin-bottom: 20px} .txt_common a{color:#FFFFFF; text-decoration:none} .txt_common a:hover {color:#FFFFFF; text-decoration:underline} .txt_home {font-family:Arial, Helvetica, sans-serif; text-align:justify; font-size:13px; line-height:14px; color:#FFFFFF;} .txt_home a{color:#FFFFFF; text-decoration:none} .txt_home a:hover {color:#FFFFFF; text-decoration:underline} .txt_medium {font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:20px; color:#FFFFFF;margin-bottom: 3px} .txt_medium a{color:#FFFFFF; text-decoration:none} .txt_medium a:hover {color:#FFFFFF; text-decoration:underline} .txt_small {font-family:Arial, Helvetica, sans-serif; font-size:10px; line-height:14px; color:#FFFFFF;margin-bottom: 2px} .txt_small a{color:#FFFFFF; text-decoration:none} .txt_small a:hover {color:#FFFFFF; text-decoration:underline} .txt_big {font-family:Arial, Helvetica, sans-serif; font-size:19px; line-height:34px; color:#FFFFFF; margin-bottom: 5px} .txt_big a{color:#FFFFFF; text-decoration:none} .txt_big a:hover {color:#FFFFFF; text-decoration:underline} .ttl_big {font-family:Arial, Helvetica, sans-serif; font-size:19px; line-height:20px; color:#FFFFFF; margin-bottom: 3px} .ttl_big a{color:#FFFFFF; text-decoration:none} .ttl_big a:hover {color:#FFFFFF; text-decoration:underline} .txt_common_landing {font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:15px; text-align:justify; color:#FFFFFF; margin-bottom: 20px} .txt_common_landing a{color:#FFFFFF; text-decoration:none} .txt_common_landing a:hover {color:#FFFFFF; text-decoration:underline} .lnk_common {font-size:13px; line-height:15px; color:#7BCAF1; font-weight:bold; margin-bottom:10px} .lnk_common a {color:#7BCAF1; text-decoration:none} .lnk_common a:hover {color:#FFFFFF; text-decoration:none} .lnk_common_b {font-size:13px; line-height:15px; color:#FFFFFF; font-weight:bold;} .lnk_common_b a {color:#FFFFFF; text-decoration:none} .lnk_common_b a:hover {color:#FFFFFF; text-decoration:underline} #cntr_main h2 {font-weight:normal;font-family:Arial, Helvetica, sans-serif; font-size:19px;color:#7BCAF1; margin-bottom: 10px} /*.subttl_common {font-family:Arial, Helvetica, sans-serif; font-size:19px;color:#7BCAF1; margin-bottom: 10px}*/ .subttl_common_b {font-family:Arial, Helvetica, sans-serif; font-size:13px;/*line-height:22px;*/color:#7BCAF1; margin-bottom: 18px} #subttl_islands_landing h2 {font-weight:normal;font-family:Arial, Helvetica, sans-serif; font-size:19px;/*line-height:22px;*/color:#7BCAF1; margin-bottom: 10px; text-align:right} .subttl_common_d {font-family:Arial, Helvetica, sans-serif; font-size:19px;/*line-height:22px;*/color:#7BCAF1; margin-bottom: 10px; text-align:left;} /*TEST*/ #bg_box_highlight_common_top {background:url(../images/common/bg_box_top.gif) no-repeat top;min-height:13px !important;} #bg_box_highlight_common_bottom {background:url(../images/common/bg_box_bottom.gif) no-repeat bottom;padding:6px;min-height:13px !important;} #box_highlight_common {width:393px;float:left; margin:15px 0 0 1px;} #box_highlight_common h1, p, h2 {color:#FFFFFF;} #box_highlight_main {background:url(../images/common/bg_opaque27.png); min-height:250px;/*padding:23px;*/} #box_highlight_main div, #box_highlight_main h2, #box_highlight_main p, #box_highlight_main p b, #box_highlight_common_landing ul,#box_highlight_common ul, #box_highlight_common_landing h1, #box_highlight_common h1, #box_highlight_common_landing h2,#box_highlight_common h2,#box_highlight_common_landing h3, #box_highlight_common h3 {background:url(../images/common/bg_opaque0.png)} #box_highlight_main div {padding:23px;} #box_highlight_common h1 {background:url(../images/common/cross2.gif) left top no-repeat; font-family:Arial, Helvetica, sans-serif; font-size:17px; line-height:19px; margin-bottom: 12px; padding-left:31px; color:#FFFFFF;} #box_highlight_common h2 {background:url(../images/locations/rhombus1.gif) left top no-repeat; font-family:Arial, Helvetica, sans-serif; font-size:17px; line-height:19px; padding:4px 0 8px 31px; color:#FFFFFF; font-weight:bold} #box_highlight_common h3 {background:url(../images/locations/landmarks2.gif) left top no-repeat; font-family:Arial, Helvetica, sans-serif; font-size:17px; line-height:19px; padding:0px 0 12px 31px; color:#FFFFFF; font-weight:bold} #box_highlight_common ul {list-style-type:disc; margin:0; list-style-position:inside} .test_inactive {display:none} /*TEST*/ /* ========================================================================// 3. HEADER: These selectors are only applied to the header selectors mentioned below. ========================================================================// */ #hdr_main {background:url(../images/common/bg_hdr.gif) no-repeat top left;height:142px; width:1024px; float:left; /*background:#006633*/} /*#hdr_logo {background:url(../images/common/bg_logo.gif) no-repeat top left;margin:21px 0 0 49px;width:217px;height:101px;float:left;}*/ #hdr_logo {background:url(../images/common/bg_logo.gif) no-repeat top left;margin:7px 0 0 44px;width:344px;height:135px;float:left;} #hdr_logo span {display:none;} /*#hdr_menu {font-size:8px;margin:21px 0 0 126px;width:206px;height:101px;float:left;}*/ #hdr_menu {font-size:8px;margin:21px 0 0 4px;width:206px;height:101px;float:left;} #hdr_menu ul li {width:100%;height:20px;margin:0;float:left;} #hdr_menu a {text-decoration:none;} #hdr_menu li a span {display:none;} #hdr_menu ul li ul {padding:0 0 0 3px;display:none;position:absolute;left:598px;} #hdr_menu ul li:hover ul {display:inline;} #hdr_menu ul li ul li {height:20px;display:inline;} #hdr_menu ul li ul li a {height:20px;float:left;} #hdr_menu_home, #hdr_menu_locations, #hdr_menu_production, #hdr_menu_islands, #hdr_menu_accommodations {width:206px;height:20px;display:block;} #hdr_menu_home {background:url(../images/common/btn_menu_home.gif) no-repeat top left;} #hdr_menu_locations {background:url(../images/common/btn_menu_locations.gif) no-repeat top left;} #hdr_menu_production {background:url(../images/common/btn_menu_production.gif) no-repeat top left;} #hdr_menu_islands {background:url(../images/common/btn_menu_islands.gif) no-repeat top left;} #hdr_menu_accommodations {background:url(../images/common/btn_menu_accommodations.gif) no-repeat top left;} #hdr_smenu_locations {position:absolute;top:43px;} #hdr_smenu_islands {position:absolute;top:83px;} #hdr_smenu_accommodations {position:absolute;top:105px;} #hdr_smenu_locations_landmarks {width:84px;background:url(../images/common/btn_smenu_locations_landmarks.gif) no-repeat top left;} #hdr_smenu_locations_shore {width:90px;background:url(../images/common/btn_smenu_locations_sea.gif) no-repeat top left;} #hdr_smenu_locations_scenic {width:93px;background:url(../images/common/btn_smenu_locations_scenic.gif) no-repeat top left;} #hdr_smenu_locations_other {width:92px;background:url(../images/common/btn_smenu_locations_other.gif) no-repeat top left;} #hdr_smenu_locations_events {width:60px;background:url(../images/common/btn_smenu_locations_events.gif) no-repeat top left;} #hdr_smenu_islands_stcroix {width:67px;background:url(../images/common/btn_smenu_islands_stcroix.gif) no-repeat top left;} #hdr_smenu_islands_stjohn {width:67px;background:url(../images/common/btn_smenu_islands_stjohn.gif) no-repeat top left;} #hdr_smenu_islands_stthomas {width:85px;background:url(../images/common/btn_smenu_islands_stthomas.gif) no-repeat top left;} #hdr_smenu_accommodations_stcroix {width:67px;background:url(../images/common/btn_smenu_accommodations_stcroix.gif) no-repeat top left;} #hdr_smenu_accommodations_stjohn {width:67px;background:url(../images/common/btn_smenu_accommodations_stjohn.gif) no-repeat top left;} #hdr_smenu_accommodations_stthomas {width:85px;background:url(../images/common/btn_smenu_accommodations_stthomas.gif) no-repeat top left;} /*.hdr_menu_over {background-position:bottom left;}*/ /*.hdr_smenu_over {display:block;}*/ #hdr_contact {margin:0 0 0 289px;background:url(../images/common/btn_menu_contact_us.gif) no-repeat top left;width:136px;height:29px;float:left;} #hdr_contact a {width:136px;height:29px;display:block;} #hdr_contact a span {display:none;} /* ========================================================================// 4. FOOTER: These selectors are only applied to the footer selectors below. ========================================================================// */ /* ========================================================================// 5. CONTAINED: These selectors are only applied to the contained selectors below. ========================================================================// */ /* ========================================================================// 6. OUR ISLANDS: These selectors are only applied to the Our Islands section selectors below. ========================================================================// */ /* LANDING OUR ISLANDS */ #cntr_islands_landing {min-height:390px;width:990px; float:left; background: url(../images/common/bg_islands.gif) 53px 81px no-repeat } #col_islands_left_landing {margin-right:32px; width:565px; display:inline; float:left;} #col_islands_right_landing {padding-top:43px;width:393px; float:left;} #ttl_islands_landing { width:565px; height:75px;background: url(../images/our_islands/ttl_1.gif) right no-repeat} #ttl_islands_landing h1 {display:none;} #subttl_islands_landing { width:346px; min-height:58px; padding-left:219px;} /* THREE LEVEL OUR ISLANDS */ #cntr_islands_threelevel {padding-top:14px; width:1024px; float:left} #col_islands_left {margin-right:23px; width:440px; display:inline; float:left;} #col_islands_right {padding-top:43px;width:527px; float:left; text-align:justify;} #ttl_islands_stcroix { width:440px; height:90px;background:url(../images/our_islands/ttl_st_croix.gif) right no-repeat} #ttl_islands_stcroix h1 {display:none;} #ttl_islands_stjohn { width:440px; height:90px;background:url(../images/our_islands/ttl_st_john.gif) right no-repeat} #ttl_islands_stjohn h1 {display:none;} #ttl_islands_stthomas { width:440px; height:90px;background:url(../images/our_islands/ttl_st_thomas.gif) right no-repeat} #ttl_islands_stthomas h1 {display:none;} .img_islands_threelevel {width:440px; text-align: right} /* ========================================================================// 7. ACCOMMODATIONS: These selectors are only applied to the accommodations section selectors below. ========================================================================// */ /* LANDING ACCOMMODATIONS */ #ttl_accomm_landing {width:847px; height:77px;background:url(../images/accomodations/ttl_thats_a_wrap_for_the_day.gif) no-repeat right top;} #ttl_accomm_landing h1 {display:none;} #col_accomm_landing_right{margin-left:422px;/*padding-top:5px;*/width:426px; float:left;} #bg_accomm_landing {min-height:390px;width:990px;background:url(../images/accomodations/bg_islands.gif) no-repeat right top;background-position:62px 38px; float:left} .subnav_landing{margin-bottom:5px;} /* THREE LEVEL ACCOMMODATIONS*/ #cntr_accomm_threelevel {padding-top:14px; width:1024px; float:left} #col_accomm_left {margin-right:23px; width:440px; display:inline; float:left;} #col_accomm_right {padding-top:43px;width:527px; float:left;} #col_accomm_right_first {margin-right:13px;width:247px; float:left;} #col_accomm_right_second {width:247px; float:left;} #ttl_accomm_stcroix { width:440px; height:90px;background:url(../images/our_islands/ttl_st_croix.gif) right no-repeat} #ttl_accomm_stcroix h1 {display:none;} #ttl_accomm_stjohn { width:440px; height:90px;background:url(../images/our_islands/ttl_st_john.gif) right no-repeat} #ttl_accomm_stjohn h1 {display:none;} #ttl_accomm_stthomas { width:440px; height:90px;background:url(../images/our_islands/ttl_st_thomas.gif) right no-repeat} #ttl_accomm_stthomas h1 {display:none;} #subttl_accomm { width:440px; height:90px;background:url(../images/our_islands/ttl_st_croix.gif) right no-repeat} .img_accomm_threelevel {width:440px; text-align: right} /* ========================================================================// 8. PROD RESOURCES: These selectors are only applied to the Prod Resources section selectors below. ========================================================================// */ #cntr_resour_threelevel {padding-top:14px; width:1024px; float:left} #col_resour_left {margin-right:23px; width:425px; display:inline; float:left;} #col_resour_right {padding-top:43px;width:527px; float:left;} #ttl_resour { width:425px; height:90px;background:url(../images/production_resources/ttl_1.gif) right no-repeat} #ttl_resour h1 {display:none;} #subttl_resour {padding-left:130px; width:295px; text-align:justify; font-size:13px; line-height:15px; color:#FFFFFF; margin-bottom:30px} .img_resour {width:425px; text-align: right} /* ========================================================================// 9. LOCATIONS: These selectors are only applied to the Locations section selectors below. ========================================================================// */ #cntr_locations_threelevel {padding-top:14px;width:1024px;float:left} #col_locations_left {margin-right:32px; width:565px; display:inline; float:left;} #col_locations_right {width:393px; float:left;} #ttl_locations_other {width:393px; height:153px;background:url(../images/locations/ttl_other_sites.gif) right no-repeat} #ttl_locations_scenic {width:395px; height:126px;background:url(../images/locations/ttl_scenic_sites.png) left no-repeat} #ttl_locations_event {width:393px; height:100px;background:url(../images/locations/ttl_events.gif) right top no-repeat} #sbttl_locations_other {width:360px; margin:7px 0 10px 33px;} #cntr_list_location_other {width:360px; margin:15px 0 2px 33px;} #cntr_list_location_other li {margin:1px 0 4px 0px;} #sbttl_locations_scenic {width:360px; margin:7px 0 10px 33px;} #cntr_list_location_scenic {width:360px; margin:15px 0 0 33px;} #cntr_list_location_scenic li {margin:1px 0 4px 0px;} .lnk_rhombus_active a {background:url(../images/locations/rhombus2.gif) left no-repeat; text-decoration:none; padding-left:30px;color:#FFFFFF;} .lnk_landmarks_active a {background:url(../images/locations/landmarks1.gif) left no-repeat; text-decoration:none; padding-left:30px;color:#FFFFFF;} .lnk_cross a {padding-left:30px; text-decoration:none; color:#FFFFFF;} .lnk_cross a:hover { text-decoration:underline; color:#FFFFFF;} .lnk_cross_active a {background:url(../images/common/cross.gif) left no-repeat; text-decoration:none; padding-left:30px;color:#FFFFFF;} .lnk_cross, .lnk_cross_active, .lnk_rhombus_active, .lnk_landmarks_active {font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:15px;} #ttl_locations_landing {width:566px; height:95px;background:url(../images/locations_events/ttl_open_on_a_beautiful.gif) no-repeat right top; float:left; display: inline;} #ttl_locations_landing h1 {display:none;} #col_locations_landing_left{margin-left:343px; padding-top:15px;width:223px; float:left;} #col_locations_landing_right{padding-top:38px;width:402px; float:right; display:inline;} #bg_locations_landing {min-height:390px;width:990px;background:url(../images/locations_events/bg_islands.gif) no-repeat right top;background-position:16px 57px; float:left;} .img_locations_subnav1_landing{background:url(../images/locations_events/landmarks.gif) no-repeat left top; padding-left:28px;min-height:15px;padding-top:2px;display:block;} .img_locations_subnav2_landing{background:url(../images/locations_events/sun.gif) no-repeat left top;padding-left:28px;min-height:18px;padding-top:3px;display:block;} .img_locations_subnav3_landing{background:url(../images/locations_events/rhombus.gif) no-repeat left top; padding-left:28px;min-height:24px;padding-top:2px;display:block;} #box_highlight_common_landing {width:393px;float:left; margin:15px 0 0 1px;} #box_highlight_common_landing h4 {background:url(../images/common/sun2.gif) left top no-repeat; font-family:Arial, Helvetica, sans-serif; font-size:17px; line-height:27px; margin-bottom: 12px; padding-left:31px; color:#FFFFFF;} #box_highlight_common_landing h1, p, h2 {color:#FFFFFF;} #box_highlight_common_landing h1 {background:url(../images/common/cross2.gif) left top no-repeat; font-family:Arial, Helvetica, sans-serif; font-size:17px; line-height:19px; margin-bottom: 12px; padding-left:31px; color:#FFFFFF;} #box_highlight_common_landing h2 {background:url(../images/locations/rhombus1.gif) left top no-repeat; font-family:Arial, Helvetica, sans-serif; font-size:19px; line-height:19px; padding:4px 0 8px 31px; color:#FFFFFF; font-weight:bold} #box_highlight_common_landing h3 {background:url(../images/locations/landmarks2.gif) left top no-repeat; font-family:Arial, Helvetica, sans-serif; font-size:17px; line-height:19px; padding:0px 0 12px 31px; color:#FFFFFF; font-weight:bold} #box_highlight_common_landing ul {list-style-type:disc; margin:0; list-style-position:inside} /* ========================================================================// 10. HOME: These selectors are only applied to the Home selectors below. ========================================================================// */ /* THREE LEVEL HOME*/ #cntr_banner {width:1024px; height:390px; float:left; margin-top:17px} #cntr_home_threelevel {padding-top:14px; width:1024px; float:left} #col_home_left {width:425px; display:inline; float:left; margin-right:40px} #col_home_right {padding-top:48px;width:525px; float:left;} #col_home_right_first {width:150px; float:left; margin-right:9px} #col_home_right_second {width:365px; float:left;} #ttl_home { width:425px; height:100px;background:url(../images/home/ttl_1.gif) top right no-repeat;} #ttl_home h1 {display:none;} #ttl_home h2 {display:block;margin:73px 0 5px 10px; text-align:right} #subttl_home h2 {font-weight:normal;font-family:Arial, Helvetica, sans-serif; font-size:19px;color:#7BCAF1; margin-top:-30px; margin-bottom: 10px; text-align:right; padding-left:60px;} #text_home {padding-left:115px; width:310px; text-align:justify; font-size:13px; line-height:15px; color:#FFFFFF; margin-bottom:30px} #text_home a {color:#FFFFFF; text-decoration:none; font-weight: bold} #text_home a:hover {color:#FFFFFF; text-decoration:underline; font-weight: bold} /*TEST HOME*/ #bg_box_home1_common_top {background:url(../images/common/bg_box_home1_top.gif) no-repeat top;min-height:13px !important;} #bg_box_home1_common_bottom {background:url(../images/common/bg_box_home1_bottom.gif) no-repeat bottom;padding:6px;min-height:13px !important;} #box_home_main {background:url(../images/common/bg_opaque27.png);padding:23px;} #box_home_main div, #box_home_main h2,h3,h4, #box_home_main p, {background:url(../images/common/bg_opaque0.png)} #box_home1_common {width:150px;float:left;} #bg_box_home2_common_top {background:url(../images/common/bg_box_home2_top.gif) no-repeat top;min-height:13px !important;} #bg_box_home2_common_bottom {background:url(../images/common/bg_box_home2_bottom.gif) no-repeat bottom;padding:6px;min-height:13px !important;} #box_home2_common {width:365px;float:left;} #box_home1_main {background:url(../images/common/bg_opaque27.png); padding:23px;} #box_home1_main div, #box_home1_main h2,h3,h4, #box_home1_main p, {background:url(../images/common/bg_opaque0.png);} #label {position:absolute; left:785px; top:550px} #label2 {position:absolute; left:474px; top:640px} #label3 {position:absolute; left:227px; top:630px} /*TEST HOME*/ /* ========================================================================// 11. CONTACT US: These selectors are only applied to the Contact Us section. ========================================================================// */ .fld_contact_common {margin:0 0 6px 0;width:288px;height:19px;border:1px solid #9c9c9c;} .fld_contact_message {margin:0 0 7px 0;width:288px;height:122px;border:1px solid #9c9c9c;} #form_contact .cb_contact_copy {margin:0;border:0;} #col_contact_right {width:527px;float:left;} #col_contact_right h2 {margin:0 0 16px 0;} #form_contact label {margin:0 0 4px 0;display:block;} #form_contact p {margin:0 0 17px 0;} .col_contact_common {margin:43px 0 0 0;} .img_contact_left {margin:0 15px 0 0;} /* ========================================================================// 12. SHORE SEA: These selectors are only applied to the Contact Us section. ========================================================================// */ #ttl_locations_shore_sea {width:322px; height:99px;background:url(../images/locations/ttl_other_shore_sea.png) right no-repeat} .lnk_sun a {padding-left:30px; text-decoration:none; color:#FFFFFF;} .lnk_sun a:hover { text-decoration:underline; color:#FFFFFF;} .lnk_sun_active a {background:url(../images/common/sun.gif) left no-repeat; text-decoration:none; padding-left:30px;color:#FFFFFF;} .lnk_sun, .lnk_sun_active {font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:15px;} #box_highlight_common h4 {background:url(../images/common/sun2.gif) left top no-repeat; font-family:Arial, Helvetica, sans-serif; font-size:17px; line-height:27px; margin-bottom: 12px; padding-left:31px; color:#FFFFFF;} .subttl_shore_d {font-family:Arial, Helvetica, sans-serif; font-size:19px;/*line-height:22px;*/color:#7BCAF1; /*margin-bottom: 10px*/; text-align:left;}