/* CSS Document */ /* The Wyke-Switch - by Charlie Wyke-Smith - switch your left and center columns in your layout to have the center column first in the markup! Putting the content first in your markup can significantly improve your search engine rankings. This demo shows the CSS required to switch the left and center column - the center column (content - div "column2") is first in the markup but appears after the left column (navigation - div "column1") in the layout. Without the margin-left properties on columns 1 and 2, they appear in the browser in the order shown in the markup - 2, 1, 3. This arrangement is achieved by the use of a negative left margin on column 1 to move it to the left and a a positive left margin on column 2 to move it to the right, which exchanges the position of the two columns. Note that left margins on left floats get doubled in IE unles you apply the Steve Caslon hack of adding display:inline to the element, in this case column 2. More on this bug at http://www.positioniseverything.net/explorer/doubled-margin.html This example also uses a floated wrapper (named div#contentarea) around the three columns - this forces the wrapper to enclose the three columns so that the footer is always below whichever column is longest. */ body {font: 0.8em verdana, arial, sans-serif; background-color:#FFFFFF;} * {margin:0px; padding:0px;} p {font-family:verdana, arial, sans-serif; color: #000;} a {color:#5E5287;} a:hover {text-decoration: none;} table#center {margin-left: auto; margin-right: auto;} option {font-family:arial,helvetica; font-size:11px; color:#000000; font-weight:normal; padding-right:15px;} select {font-family:arial,helvetica; font-size:11px; color:#000000; font-weight:normal;} input {font-family:arial,helvetica; font-size:12px; color:#000000; font-weight:normal;} textarea {font-family:arial,helvetica; font-size:12px; color:#000000; font-weight:normal;} .body {font-family:verdana,arial,helvetica; font-size: 11px; color:#000000; font-weight:normal; line-height:125%;} .bodyb {font-family:verdana,arial,helvetica; font-size: 11px;; color:#000000; font-weight:bold; line-height:125%;} .bodyl {font-family:verdana,arial,helvetica; font-size:0.9em; color:#000000; font-weight:normal;} .head1 {font-family:verdana,arial,helvetica; font-size:15px; font-weight:bold; color:#5E5287;} .head1b {font-family:verdana,arial,helvetica; font-size:15px; font-weight:bold; color:#000000;} .head2 {font-family:verdana,arial,helvetica; font-size:12px; font-weight:bold; color:#000000;} .head3 {font-family:verdana,arial,helvetica; font-size:17px; font-weight:bold; color:#000000;} .head4 {font-family:verdana,arial,helvetica; font-size:14px; font-weight:bold; color:#5E5287;} .errorbb {font-family:verdana,arial,helvetica; font-size:13px; color:#990000; font-weight:bold;} .errorb {font-family:verdana,arial,helvetica; font-size:11px; color:#990000; font-weight:bold;} .error {font-family:verdana,arial,helvetica; font-size:11px; color:#5E5287;} .accent {font-family:verdana,arial,helvetica; font-size:14px; color:#5E5287; font-weight:bold;} .path {font-family:verdana,arial,helvetica; font-size:11px; font-weight:bold;} .menu {font-family:verdana,arial,helvetica; font-size:11px; color:#000000; line-height:135%;} .action {font-family:verdana,arial,helvetica; font-size:0.8em; color:#FF0000; font-weight:bold;} .notice {font-family:verdana,arial,helvetica; font-size:12px; color:#FF6600; font-weight:bold;} .noticelg {font-family:verdana,arial,helvetica; font-size:16px; color:#FF6600; font-weight:bold; line-height:125%;} .noticel {font-family:verdana,arial,helvetica; font-size:11px; color:#FF6600; font-weight:normal;} .dtitle {font-family:verdana,arial,helvetica; font-size:14px; font-weight:bold; color:#5E5287;} .music_body {color:#FF6600; font-weight:bold;} .movies_body {color:#FF3300; font-weight:bold;} .games_body {color:#FFCC00; font-weight:bold;} .memlinks {position:absolute; left: 84px; margin-top:-70px; line-height:145%;} .memlinksp {position:absolute; left: 90px; margin-top:-12px;} /* structural CSS */ div#header {width:780px; background-color:#fff; line-height: 2px; margin-bottom: 20px;} div#contentarea {width:800px; background-color:#fff;} .clearthis {clear: both; height: 0; line-height: 0;} /* actual column width are 130, 514 and 130 pixels */ div#column1 {float:left; width:110px; margin-left:0px; margin-top: 21px; padding: 0 10px;} div#column1_media {float:left; width:110px; margin-left:0px; margin-top: 20px; padding: 0 10px;} div#column1_oscar {float:left; width:110px; margin-left:-644px; margin-top: -105px; padding: 0 10px;} div#column1_oscar_lo {float:left; width:110px; margin-left:-644px; margin-top: -342px; padding: 0 10px;} /* column 1 box model hack for IE5s */ * html div#column1 /* this selector recognized by IE only */ {width: 130px; /* total width (only for IE5.x/Win) */ w\idth: 110px; /* content width (for other IE) */ } div#column1 {width:110px; /* content width (for other browsers) */} /*end column 1 box model hack */ div#column2 {float:left; width:485px; margin-left:0px; display:inline; padding: 0 10px 0 0; overflow:hidden;} div#column2_list {float:left; width:490px; margin-left:0px; display:inline; padding: 0 10px 0 0;} /* column 2 box model hack for IE5s */ * html div#column2, div#column2_list /* this selector recognized by IE only */ {width: 514px; /* total width (only for IE5.x/Win) */ w\idth: 504px; /* content width (for other IE) */ } div#column2, div#column2_list {width: 504px; /* content width (for other browsers) */} /*end column 2 box model hack */ div#column3 {float:left; width:110px; margin-top: 21px; padding:0 0px; overflow:hidden;} div#column1_home {float:left; width:110px; margin-left:1px; margin-top: 17px; padding: 0 10px;} div#column2_home {float:left; width:615px; margin-left:0px; display:inline; padding: 0 0 0 0; overflow:hidden;} div#column3_home {float:left; width:5px; margin-top: 17px; padding:0 0px; overflow:hidden;} div#column1_sub {float:left; width:5px; margin-left:-754px; margin-top: 8px; padding: 0 10px;} div#column1_sub_on {float:left; width:110px; margin-left:1px; margin-top: 17px; padding: 0 10px;} div#column2_sub {float:left; width:645px; margin-left:0px; display:inline; padding: 0 10px 0 0;} div#column2_admin {float:left; width:745px; margin-left:0px; display:inline; padding: 0 10px 0 0;} div#column3_sub {float:left; width:5px; overflow:hidden; margin-top: 17px; padding:0 0px;} div#column3_sub_on {float:left; width:5px; overflow:hidden; margin-top: 17px; padding:0 0px;} /* column 3 box model hack for IE5s */ * html div#column3 /* this selector recognized by IE only */ {width: 130px; /* total width (only for IE5.x/Win) */ w\idth: 129px; /* content width (for other IE) */ } /* 1 pixel removed to fix rounding error in IE5.2Mac */ div#column3 {width: 129px; /* content width (for other browsers) */} /*end column 3 box model hack */ div#footer {width:774px; float:left; text-align: center; margin: 15px 0 0 0;} /* here follows the brillant "no-extra-markup" clearing method devised by Tony Aslett - www.csscreator.com */ /* simply add the clearfix class to any containter that must enclose floated elements */ /* read the details of how and why this works at http://www.positioniseverything.net/easyclearing.html */ .clearfix:after { content: "."; /* the period is placed on the page as the last thing before the div closes */ display: block; /* inline elements don't respond to the clear property */ height: 0; /* ensure the period is not visible */ clear: both; /* make the container clear the period */ visibility: hidden; /* further ensures the period is not visible */ } .clearfix {display:block;} /* a fix for IE Mac */ /* next a fix for the dreaded Guillotine bug in IE6 */ /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ /* end of "no-extra-markup" clearing method */ /* end structural CSS */ /*header elements*/ #hdr_lnks {position:absolute; left: 240px; top:47px; margin-top: 2px;} #hdr_lnks_hm {position:absolute; left: 240px; top:47px; margin-top: 2px;} #hdr_lnks_lo {position:absolute; left: 470px; top:47px; margin-top: 2px;} #hdr_lnks_hm_lo {position:absolute; left: 557px; top:47px; margin-top: 2px;} #trade_honey {position:absolute; left:10px; margin-top:70px;} #hdr_lnks a, #hdr_lnks_lo a {font:0.9em verdana, arial, sans-serif; color: #333; font-weight:bold;} #hdr_lnks_hm a, #hdr_lnks_hm_lo a {font:0.9em verdana, arial, sans-serif; color: #333; font-weight:bold;} #hdr_lnks_hm a:hover, #hdr_lnks a:hover #hdr_lnks_hm_lo a:hover, #hdr_lnks_lo a:hover {color: #000;} #home {position: absolute; width: 145px; height: 55px; top: 8px; left: 8px; z-index: 5;} #home a {display: block; width: 145px; height: 55px; text-decoration: none; z-index: 5;} .sec_tabs {width: 635px; height: 25px; border: 0; margin: 1px 0 0 26px;} #basic_tabs {position:absolute; left: 110px; top: 94px; } #basic_tabs a {font:0.9em verdana, arial, sans-serif; font-weight: bold; text-decoration: none;} #basic_tabs a.sec_lnk_on {color: #000;} #basic_tabs a.sec_lnk_off {color: #666;} #basic_tabs a:hover {color: #000;} #hdr_mus_lnk {position: absolute; top: 6px; left: 379px; } #hdr_mov_lnk {position: absolute; top: 6px; left: 486px; } #hdr_gam_lnk {position: absolute; top: 6px; left: 585px; } #hdr_mus_lnk a, #hdr_mov_lnk a, #hdr_gam_lnk a {font:0.9em verdana, arial, sans-serif; color:#333; font-weight:bold;} /*column 1 elements*/ #column1 p, #column1_home p, #column1_sub_on p, #column1_media p, #column1_oscar p, #column1_oscar_lo p {margin-left: 6px;} #column1 p.small, #column1_home p.small, #column1_sub_on p.small, #column1_media p.small, #column1_oscar p.small, #column1_oscar_lo p.small {font-size: 0.9em;} #column1 ul, #column1_home ul, #column1_sub_on ul, #column1_media ul, #column1_oscar ul, #column1_oscar_lo ul {margin-left: 6px; list-style-type: none;} #column1 li, #column1_home li, #column1_sub_on li, #column1_media li, #column1_oscar li, #column1_oscar_lo li {margin-bottom: 3px;} #column1 ul a, #column1_home ul a, #column1_sub_on ul a, #column1_media ul a, #column1_oscar ul a, #column1_oscar_lo ul a {font:1.1em verdana, arial, sans-serif; color: #000;} #column1 a.member, #column1_home a.member, #column1_sub_on a.member, #column1_media a.member, #column1_oscar a.member, #column1_oscar_lo a.member {font:0.9em verdana, arial, sans-serif; color: #000; line-height: 15px;} .lft_bar {font:0.8em verdana, arial, sans-serif; color: #fdcc12; font-weight: bold; text-indent: 3px; padding: 2px 0 2px 0; background-color: #000;border-right: 3px solid #000;} .lft_bar_form {font-size:11px; font-family: verdana, arial, sans-serif; color: #000; border: 1px solid #000; margin-left: 6px;} .lft_cont {font:0.8em verdana, arial, sans-serif; color: #000; border-right: 3px solid #000;} a.lft_cont_em {font:1.1em verdana, arial, sans-serif; font-style: italic; font-weight:bold; color: #FF5400;} p.lft_cont_em {font-size:1.1em; color:#FF5400; font-weight:bold; font-weight:bold;margin-top:10px;} a.lft_cont {font:1.1em verdana, arial, sans-serif; color: #000; font-weight: bold; background-color: #fff;} a.go {font:1.0em verdana, arial, sans-serif; color: #FF6600; font-weight:bold; margin-left: 80px;} div.hr {height: 6px; color: #fff; background-color: #fff;} div.hr hr {display: none;} /*column 2 elements*/ .home_wrap {clear: both; margin-left: 30px;} .home_secs {width: 179px; border-right: 1px solid; margin-right: 15px; min-height: 430px; float: left;} .home_sec_img {width: 179px; height: 37px; margin-bottom: 10px;} .cont_wrap {margin: 10px 0 0 6px; clear: both;} .div_img_home {width: 140px; text-align: right; margin: 4px 4px 4px 5px;} .div_img_lg {width: 27%; text-align: left; margin: 3px 25px 2px 5px; float:left;} .div_img_med {width: 22%; text-align: left; margin: 11px 8px 2px 6px; float:left;} .div_img_sm {width: 80px; text-align: left; margin: 11px 8px 2px 0px; float:left;} * html .div_img_med {margin-top: 6px;} * html .div_img_sm {margin-right: 4px;} .img_home, .img_lg, .img_med, .img_sm {padding: 0 3px 0 0; border: 0;} .img_home {width: 106px;} .img_lg {width: 126px;} .img_med {width: 90px;} .img_sm {width: 60px;} .sec_head {width: 504px; height:56px; border: 0;} #column2, #column2_list {font-size: 0.8em; line-height: 15px;} #column2_home {font-size: 0.8em;} #column2 a, #column2_list a, #column2_home a {font:1.0em verdana, arial, sans-serif; color: #5E5287; font-weight: bold;} #column2 a.mus, #column2_list a.mus, #column2_home a.mus {font:1.0em verdana, arial, sans-serif; color: #5E5287; font-weight: bold;} #column2 a.pts, #column2_list a.pts, #column2_home a.pts {font:0.9em verdana, arial, sans-serif; color: #ff5400; text-decoration: none; cursor: default;} #copy {font-size: 1.2em; color: #ff5400;} #copyh {font-size: 1.1em; color: #ff5400;} #copy a {font-size: 1.0em; font-weight: bold; color: #ff5400;} .red {color: #ff0000;} a.action { color: #ff0000; } #lnk_wrp {position: relative;} #lnk_wrp a {font:1.2em verdana, arial, sans-serif; display: block; font-weight: 700; margin-top: 4px; text-decoration: none;} #lnk_wrp a.sec_lnk_on {color: #000;} #lnk_wrp a.sec_lnk_off {color: #666;} #lnk_wrp a:hover {color: #000;} #lower_lnk_wrp {position: absolute; width: 400px; top:125px; left: 399px;} #lower_lnk_wrp_oscar {position: absolute; width: 400px; top:253px; left: 399px;} #lower_lnk_wrp_lo {position: absolute; width: 400px; top:242px; left: 399px;} #lower_lnk_wrp_lo_oscar {position: absolute; width: 400px; top:370px; left: 399px;} #lower_lnk_wrp a, #lower_lnk_wrp_lo, #lower_lnk_wrp_lo_oscar a, #lower_lnk_wrp_oscar a {font-size: 1.0em; color: #000;} #lower_lnk_wrp_srch {position: absolute; width: 400px; top:125px; left: 535px;} #lower_lnk_wrp_srch a {font-size: 1.0em; color: #000000;} #mus_lnk, #mov_lnk, #gam_lnk {position: absolute; top: 1px; width: 90px; height: 14px; text-align:center;} #mus_lnk {left: 200px;} #mov_lnk {left: 303px;} #gam_lnk {left: 406px;} #lnk_wrp a {font:1.2em verdana, arial, sans-serif; display: block; font-weight: 700; margin-top: 4px; text-decoration: none;} #lnk_wrp a.sec_lnk_on {color: #000;} #lnk_wrp a.sec_lnk_off {color: #666;} #lnk_wrp a:hover {color: #000;} #column2_sub {font-size: 0.8em; line-height: 15px;} #column2_sub a {font:1.0em verdana, arial, sans-serif; font-weight: bold;} #column2_sub ol {font-size: 1.0em; color: #000; line-height: 15px; margin-left: 35px;} #column2_sub h2 {margin-top: 12px;} #column2_sub p {line-height: 15px; margin: 4px 0 3px 0;} #column2_sub p.hdr {font-weight: bold;} .indent {margin-left:30px;} #column2_sub a.action {color:#ff0000;} /*column 3 elements*/ #column3 p {font-weight: bold;} #column3 p.list {text-indent: 0px; font-weight: 500;} #column3 .music_top, .movies_top, .games_top {border-top: 7px solid;} #column3 .movies_top {border-top-color: #ff6600;} #column3 .music_top {border-top-color: #ff9900;} #column3 .games_top {border-top-color: #ffcc00;} #column3 .home_top {border-top-color: #dac200;} #column3 ul {font:0.8em verdana, arial, sans-serif; color: #000; list-style-type: none;} #column3 li {margin-bottom: 4px;} #column3 ul a{font:0.9em verdana, arial, sans-serif; color: #000;} #movies, #music, #games, #home {margin:0 6px 0 6px;} #movies ul, #music ul, #games ul{margin-left:0px;} #movies ul a:hover {color: #666666;} #movies ul {color: #5E5287;} #music ul a:hover {color: #666666;} #music ul {color: #5E5287;} #games ul a:hover {color: #666666;} #games ul {color: #5E5287;} a.rgt_cont_em {margin-left: 6px; font:0.8em verdana, arial, sans-serif; font-weight: bold; color: #FF5400;} /*footer elements*/ #footer {font:0.8em verdana, arial, sans-serif;} #footer a {font:inherit; color: #000; font-weight: bold; text-decoration: none;} #footer a.copy {font:0.8em verdana, arial, sans-serif; color: #000; font-weight: 500; text-decoration: none;} #footer a:hover {text-decoration:underline} .mailfooter, .mailfooter a {color: #000; font-weight:bold; font-size:11px; font-family:verdana,arial,sans-serif; text-decoration: none;} .mailfooter a:hover {text-decoration:underline}