/* MJW layout as of 12-07 */ /* ----------------------------------------------------------------------*/ /* ----------------------------------- RESET first ---------------------------------------*/ /* ----------------------------------------------------------------------*/ html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; } h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { font-size: 1em; font-weight: normal; font-style: normal; } ul,ol { list-style: none; } fieldset,img { border: none; } caption,th { text-align: left; } table { border-collapse: collapse; border-spacing: 0; } /* ----------------------------------------------------------------------*/ /* BASIC BEHAVIORS */ /* ----------------------------------------------------------------------*/ body { background: #6a7fe0; color: #eee; } .clear { clear:both; } .clearer { clear: both; display: block; margin: 0; padding: 0; height: 0; line-height: 1px; font-size: 1px; } img { behavior: url(../scripts/iepngfix.htc); } img.framed { border: 1px solid #000; margin: 12px; } img.left { float: left; margin: 8px 20px 16px 0; } img.right { float: right; margin: 8px 0 16px 20px; } img.center { margin: 12px auto; } img.full { width: 95%; margin: 2% auto; } img.more { margin: 4px 0 -8px 0; } embed.left { float: left; margin: 8px 20px 16px 0; } embed.right { float: right; margin: 8px 0 16px 20px; } #container { background: transparent; color: #ddebe0; width: 932px; margin: 0 auto; position: relative; } #main { width:100%; position: relative; } #content { padding: 18px 20px; position: relative; color: #333; } /* ----------------------------------------------------------------------*/ /* LAYOUT */ /* ----------------------------------------------------------------------*/ .column { float: left; } .layout2col, .layout2cola, .layout2colb, .layout2colc, .layout2cold, .layout2cole, .layout2colf, .layout3col, .layout3cola, .layout4col, .layout5col, .layout6col, .layout7col { width: 100%; } /* ----------------------------------------------------------------------*/ /* ------------------- 1-COLUMN DEFAULT LAYOUT ---------------*/ .layout1col { float: left; width: 850px; margin-left: 4.5%; } /* ----------------------------------------------------------------------*/ /* ------------------- 2-COLUMN (EQUAL SIZE) ---------------*/ .layout2col .column { width: 49%; } .layout2col .layout2col .column { width: 47.8%; } /* ----------------------------------------------------------------------*/ /* ----------------------------------------------------------------------*/ .layout3col .layout2col .column { width: 46%; } /* ----------------------------------------------------------------------*/ .layout4col .layout2col .column { width: 45%; } /* ----------------------------------------------------------------------*/ /* -------------------- LEFT MAIN W RIGHT SIDEBAR --------------------------*/ .layout2cola .column.first { width: 66%; } .layout2cola .column.last { width: 32%; } /* ------------------- LEFT MAIN W RIGHT SIDEBAR (SMALLER) ----------*/ .layout2colb .column.first { width: 74.9%; } .layout2colb .column.last { width: 23%; } /* -------------------- RIGHT MAIN W LEFT SIDEBAR ----------------------------*/ .layout2colc .column.first { width: 32%; } .layout2colc .column.last { width: 66%; } /* ------------------ RIGHT MAIN W LEFT SIDEBAR (SMALLER) -------------*/ .layout2cold .column.first { width: 23%; } .layout2cold .column.last { width: 74.9%; } /* ------------------ LARGE LEFT W RIGHT SIDEBAR (SMALLEST) ----------*/ .layout2cole .column.first { width: 79%; } .layout2cole .column.last { width: 19%; } /* ----------------- LARGE RIGHT W LEFT SIDEBAR (SMALLEST) -------------*/ .layout2colf .column.first { width: 19%; } .layout2colf .column.last { width: 79%; } /* ----------------------------------------------------------------------*/ /* ------------------- 3-COLUMN (EQUAL SIZE) ---------------*/ .layout3col .column { width: 32%; margin-left: 2%; } .layout2col .layout3col .column { width: 31%; } /* ----------------------------------------------------------------------*/ /* ------ 3-COLUMN (CENTER MAIN WITH SIDEBARS BOTH SIDES) ------*/ .layout3cola .column { width: 58%; margin-left: 2%; } .layout3cola .column.first, .layout3cola .column.last { width: 19%; } /* ----------------------------------------------------------------------*/ /* ------------------- 4-COLUMN (EQUAL SIZE) ---------------*/ .layout4col .column { width: 23%; margin-left: 3%; } /* ------------------- 5-COLUMN (EQUAL SIZE) ---------------*/ .layout5col .column { width: 18.4%; margin-left: 2%; } /* ------------------- 6-COLUMN (EQUAL SIZE) ---------------*/ .layout6col .column { width: 15%; margin-left: 2%; } /* ------------------- 7-COLUMN (EQUAL SIZE - FOR CALENDAR) ---------------*/ .layout7col { width: 830px; margin: 8px auto 8px -20px ; } .layout7col .column { width: 13.87%; margin-left: .4%; } #caltop { height: 28px; background: transparent url(../media/00_primary/css_images/calendar_830/caltop830x28.gif) no-repeat; } #calinfo { background: transparent url(../media/00_primary/css_images/calendar_830/calmid830x1.gif) repeat-y; } #calsep { height: 1px; margin: -8px 0 0 0; background-color: #999; } #calbtm { height: 14px; background: transparent url(../media/00_primary/css_images/calendar_830/calbtm830x14.gif) no-repeat; } .layout7col p { margin: 4px 4px 0px 8px; } .layout7col .column.last p { margin: 4px 6px 0px 1px; } .layout7col #calinfo p { color: #eee; } /* ----------------GENERAL LAYOUT CONSTRAINTS ---------------*/ .column.first, .column.last { margin-left: 0 !important; } .column.last { float: right !important; } p.last, ul.last, ol.last, li.last { _width:auto !important; _float:none !important; } /* ---------------- CONTAINER CONSTRAINTS ---------------*/ #container:after, #content:after, .layout2col:after, .layout2cola:after, .layout2colb:after, .layout2colc:after, .layout2cold:after, .layout2cole:after, .layout2colf:after, .layout3col:after, .layout3cola:after, .layout4col:after, .layout5col:after, .layout6col:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #container, #content, .layout2col, .layout2cola, .layout2colb, .layout2colc, .layout2cold, .layout2cole, .layout2colf, .layout3col, .layout3cola, .layout4col, .layout5col, .layout6col { _zoom:1; } /* ----------------------------------------------------------------------*/ /* ------------------------- TYPE ------------------------- */ /* ----------------------------------------------------------------------*/ body { font: 12px/18px "Lucida Grande", Geneva, Arial, Verdana, sans-serif; background-color: #000; color: #ddebe0; } a { color: #3ff; } strong, b { font-weight:bold; } em, i { font-style:italic; } sup { padding-left:1px; font-size:10px !important; font-weight:normal !important; vertical-align: baseline; position: relative; bottom: 0.33em; color:#76797c; _position:static !important; } .fineprint { font-size: 10px !important; color:#76797c; } #main p { margin-bottom: 18px; color: #989898; } #main h1 { font-weight: bold; font-size: 20px; line-height: 36px; margin-bottom: 18px; } #main h2 { font-weight: bold; font-size: 16px; line-height: 18px; margin-bottom: 18px; } #main h3 { font-weight: bold; font-size: 14px; line-height: 18px; } #main h4 { font-weight: bold; font-size: 12px; line-height: 18px; } #main h5 { font-weight: normal; font-size: 10px; line-height: 18px; margin-bottom: 18px; } #main h6 { font-weight: normal; font-size: 10px; line-height: 18px; text-align: center; margin-bottom: 18px; } #main h1 { color: #ff6; } #main h2 { color: #60f; } #main h3 { color: #f60; } #main h4 { color: #60f; } #main h5 { color: #888; } #main h6 { color: #656565; } #main p.intro { font-weight: bold; } #main .more { text-align: right; } #main ul { margin-bottom: 18px; list-style: none outside; } #main ul li { margin-bottom: 12px; list-style: disc; margin-left: 2.2em; color: #ddebe0; } #main ol { margin-bottom: 18px; list-style: decimal; margin-left: 2.2em; } #main ul.square, #main ul.circle { margin-left: 2em; } #main ul.square { list-style: square outside; } #main ul.circle { list-style: circle outside; } #main ul ul.circle, #main ul ul.square { margin-top: 4px; margin-bottom: 5px; } #main ol.fineprint { margin-left: 0; padding-left: 2em; } #main p a.pdf { background: url(../media/00_primary/css_images/00_newest/icon_pdf_12x12.gif) 0 0.4em no-repeat; display: block; padding-left: 20px; } #main h3 a.pdf { background: url(../media/00_primary/css_images/icon_pdf_32x32.gif) 0 0.4em no-repeat; display: block; padding-left: 36px; } #main .sidebar { font-size: 10px; line-height: 18px; color:#686868; } #main .last { margin-bottom: 0; } /* ----------------------------------------------------------------------*/ /***** GENERAL LAYOUT *****/ /* ----------------------------------------------------------------------*/ html { *background:url(../media/00_primary/css_images/00_newest/blank.gif) fixed; } body { background: #6a7fe0; color: #000; background-image: url(../media/00_primary/css_images/mjj_dawn_gradient.jpg); background-repeat: repeat-x; } #container { overflow:visible; } .layout2cola .column.first { width:680px; } .layout2cola .column.last { width:223px; } .layout2colc .column.first { width:223px; } .layout2colc .column.last { width:680px; } .layout2colc .layout2col .column { width:336px; display:inline; } .layout2colc .layout3col .column { width:195px; margin-right:26px; } /* ----------------------------------------------------------------------*/ /* PRINT */ /* ----------------------------------------------------------------------*/ @media print { body, #main, #content { color:#000 !important; } a, a:link, a:visited { color:#000 !important; text-decoration:none !important; } #tabs, #globalheader, .noprint, .hide { display: none !important; } #main a.pdf { padding-left: 0 !important; background-image: none !important; } } /* ----------------------------------------------------------------------*/ /* ----------------------------------- (NAV CSS begins here) ---------------------------------------*/ /* ----------------------------------------------------------------------*/ /* GLOBALHEADER */ #globalheader { width: 857px; height: 32px; margin: 0 auto; position: relative; z-index: 9998; } #globalheader #globalnav { margin: 0; padding: 0; } #globalheader #globalnav li { display: inline; } #globalheader #globalnav li a { float: left; width: 107px; height: 0; padding-top: 32px; overflow: hidden; } #globalheader #globalnav li a, #globalheader { background-image: url(../media/00_primary/menugraphics/mjj_globalnavbg_857.png); _background-image: url(../media/00_primary/menugraphics/mjj_globalnavbg_857.gif); background-repeat: no-repeat; } /* ----------------------------------------------------------------------*/ /* BUTTONS */ #globalheader #globalnav li#gn-home a { background-position: 0 0; } /* --- #globalheader #globalnav li#gn-home a { background-position: 0 -104px; } ---*/ #globalheader #globalnav li#gn-news a { background-position: -107px 0; } #globalheader #globalnav li#gn-recording a { background-position: -214px 0; } #globalheader #globalnav li#gn-writing a { background-position: -321px 0; } #globalheader #globalnav li#gn-drums a { background-position: -428px 0; } #globalheader #globalnav li#gn-about a { background-position: -534px 0; } #globalheader #globalnav li#gn-contact a { background-position: -642px 0; } #globalheader #globalnav li#gn-links a { background-position: -750px 0; } /* ----------------------------------------------------------------------*/ /* OVER STATES */ #globalheader #globalnav li#gn-home a:hover { background-position: 0 -34px; } #globalheader #globalnav li#gn-news a:hover { background-position: -107px -34px; } #globalheader #globalnav li#gn-recording a:hover { background-position: -214px -34px; } #globalheader #globalnav li#gn-writing a:hover { background-position: -321px -34px; } #globalheader #globalnav li#gn-drums a:hover { background-position: -428px -34px; } #globalheader #globalnav li#gn-about a:hover { background-position: -534px -34px; } #globalheader #globalnav li#gn-contact a:hover { background-position: -642px -34px; } #globalheader #globalnav li#gn-links a:hover { background-position: -750px -34px; } /* ----------------------------------------------------------------------*/ /* PRESSED STATES */ #globalheader #globalnav li#gn-home a:active { background-position: 0 -68px; } #globalheader #globalnav li#gn-news a:active { background-position: -107px -68px; } #globalheader #globalnav li#gn-recording a:active { background-position: -214px -68px; } #globalheader #globalnav li#gn-writing a:active { background-position: -321px -68px; } #globalheader #globalnav li#gn-drums a:active { background-position: -428px -68px; } #globalheader #globalnav li#gn-about a:active { background-position: -534px -68px; } #globalheader #globalnav li#gn-contact a:active { background-position: -642px -68px; } #globalheader #globalnav li#gn-links a:active { background-position: -750px -68px; } /* ----------------------------------------------------------------------*/ /* ON STATES */ #globalheader.home #globalnav li#gn-home a { background-position: 0 -104px !important; } #globalheader.news #globalnav li#gn-news a { background-position: -107px -104px !important; } #globalheader.recording #globalnav li#gn-recording a { background-position: -214px -104px !important; } #globalheader.writing #globalnav li#gn-writing a { background-position: -321px -104px !important; } #globalheader.drums #globalnav li#gn-drums a { background-position: -428px -104px !important; } #globalheader.about #globalnav li#gn-about a { background-position: -534px -104px !important; } #globalheader.contact #globalnav li#gn-contact a { background-position: -642px -104px !important; } #globalheader.links #globalnav li#gn-links a { background-position: -750px -104px !important; } /* --------------------------------------------------------------------------------------*/ /* ------------------------- MJW STYLE-SPECIFIC CSS begins here -------------------------------*/ /* --------------------------------------------------------------------------------------*/ /***** HEADER, TOP ELEMENTS *****/ #main #localnav { padding:1em 0 .2em; border-bottom:1px solid #333; } #main #localnav h1 { font-size: 16px; width:48px; height:32px; float:left; margin:0 0 .1em 8px; color: #6cf; } #main #localnav h1 a { display:block; width:48px; height:32px; color:#858585; font-weight:normal; text-decoration:none; text-indent:-99999px; } #main #localnav h1.home { width:48px; height:24px; background:url(../media/00_primary/menugraphics/mjj_subnav_icons/home_icon_48x24.png) no-repeat; } #main #localnav h1.news { width:48px; height:24px; background:url(../media/00_primary/menugraphics/mjj_subnav_icons/news_icon_48x24.png) no-repeat; } #main #localnav h1.recording { width:48px; height:24px; background:url(../media/00_primary/menugraphics/mjj_subnav_icons/recording_icon_48x24.png) no-repeat; } #main #localnav h1.writing { width:48px; height:24px; background:url(../media/00_primary/menugraphics/mjj_subnav_icons/writing_icon_48x24.png) no-repeat; } #main #localnav h1.drums { width:48px; height:24px; background:url(../media/00_primary/menugraphics/mjj_subnav_icons/drums_icon_48x24.png) no-repeat; } #main #localnav h1.br { width:48px; height:24px; background:url(../media/00_primary/menugraphics/mjj_subnav_icons/br_icon_48x24.png) no-repeat; } #main #localnav h1.bio { width:48px; height:24px; background:url(../media/00_primary/menugraphics/mjj_subnav_icons/bio_icon_48x24.png) no-repeat; } #main #localnav h1.about { width:48px; height:24px; background:url(../media/00_primary/menugraphics/mjj_subnav_icons/about_icon_48x24.png) no-repeat; } #main #localnav h1.links { width:48px; height:24px; background:url(../media/00_primary/menugraphics/mjj_subnav_icons/links_icon_48x24.png) no-repeat; } #main #localnav h1.contact { width:48px; height:24px; background:url(../media/00_primary/menugraphics/mjj_subnav_icons/email_icon_48x24.png) no-repeat; } #main #localnav h1.tech { width:48px; height:24px; background:url(../media/00_primary/menugraphics/mjj_subnav_icons/tech_icon_48x24.png) no-repeat; } #main #localnav h1.podcasts { width:32px; height:42px; background:url(../media/00_primary/menugraphics/mjj_subnav_icons/podcast_icon_32x42.png) no-repeat; } #main #localnav h1.calendar { width:48px; height:24px; background:url(../media/00_primary/menugraphics/mjj_subnav_icons/calendar_icon_48x24.png) no-repeat; } #main #localnav h1.nav { width:42px; height:42px; background:url(../media/00_primary/menugraphics/mjj_subnav_icons/nav_icon_42x42.png) no-repeat; } #main #localnav ul { float:right; margin:0 -.3em; padding:0 0 1px; } #main #localnav ul li { display:inline; margin:0; padding:0; } #main #localnav ul li a { float:left; margin:1em 1.5em 0; padding:0; color:#0cf; text-decoration:none; } #main #localnav ul li a.activelink { float:left; margin:1em 1.5em 0; padding:0; color:#6f0; text-decoration:none; } #main #localnav ul li a:hover { color:#f90; } /* ----------------------------------------------------------------------*/ /***** BODY VARIATIONS *****/ /* ----------------------------------------------------------------------*/ body.home #main #localnav ul li#ln-home a { color:#3a3a3a; } body#home #main #localnav ul li#ln-home a { cursor:default; } /* ----------------------------------------------------------------------*/ /* ------- As more of these "body" styles as needed ------*/ /* ----------------------------------------------------------------------*/ /* ----------------------------------------------------------------------*/ /***** MAIN, CONTENT *****/ #main #content { clear:both; padding:1.6em 0; } /* ----------------------------------------------------------------------*/ /* ----------------------------------------------------------------------*/ /* -------------------------------- (MJW BIG-SCREEN CSS begins here) ------------------------------------*/ /* ----------------------------------------------------------------------*/ /* MJWMENU */ #mjwmenu { width: 600px; height: 420px; margin: 0 0 0 102px; position: relative; z-index: 9998; } #mjwmenu #mjwnav { margin: 18px 0 0 0; padding: 0; } #mjwmenu #mjwnav li { display: block; margin-top: -14px; } #mjwmenu #mjwnav li a { float: left; width: 600px; height: 0px; padding-top: 106px; overflow: hidden; } #mjwmenu #mjwnav li#mjw-music a, #mjwmenu #mjwnav li#mjw-music { width: 600px; height: 106px; background-image: url(../media/00_primary/menugraphics/menu_slices/music.png); _background-image: url(../media/00_primary/menugraphics/music.gif); background-repeat: no-repeat; overflow: hidden; } #mjwmenu #mjwnav li#mjw-webdesign a, #mjwmenu #mjwnav li#mjw-webdesign { width: 600px; height: 102px; background-image: url(../media/00_primary/menugraphics/menu_slices/webdesign.png); _background-image: url(../media/00_primary/menugraphics/webdesign.gif); background-repeat: no-repeat; overflow: hidden; } #mjwmenu #mjwnav li#mjw-graphicdesign a, #mjwmenu #mjwnav li#mjw-graphicdesign { width: 600px; height: 112px; background-image: url(../media/00_primary/menugraphics/menu_slices/graphicdesign.png); _background-image: url(../media/00_primary/menugraphics/graphicdesign.gif); background-repeat: no-repeat; overflow: hidden; } #mjwmenu #mjwnav li#mjw-aviation a, #mjwmenu #mjwnav li#mjw-aviation { width: 600px; height: 100px; background-image: url(../media/00_primary/menugraphics/menu_slices/aviation.png); _background-image: url(../media/00_primary/menugraphics/aviation.gif); background-repeat: no-repeat; overflow: hidden; } /* ----------------------------------------------------------------------*/ /*STATIC */ #mjwmenu #mjwnav li#mjw-music a { background-position: 0px 0px; } #mjwmenu #mjwnav li#mjw-webdesign a { background-position: 0px 0px; } #mjwmenu #mjwnav li#mjw-graphicdesign a { background-position: 0px 0px; } #mjwmenu #mjwnav li#mjw-aviation a { background-position: 0px 0px; } /* ----------------------------------------------------------------------*/ /* HOVER STATES */ #mjwmenu #mjwnav li#mjw-music a:hover { background-position: 0px -107px; } #mjwmenu #mjwnav li#mjw-webdesign a:hover { background-position: 0px -103px; } #mjwmenu #mjwnav li#mjw-graphicdesign a:hover { background-position: 0px -113px; } #mjwmenu #mjwnav li#mjw-aviation a:hover { background-position: 0px -101px; } /* ----------------------------------------------------------------------*/ /* ----------------------------------------------------------------------*/ /* --------------- DARK BROWN SIDEBAR ---------------*/ /* ----------------------------------------------------------------------*/ #main #subnav { margin-left:4px; position:relative; background:url(../media/00_primary/css_images/00_newest/subnav_black_bg.gif) repeat-y left; z-index:10; } /* ----------------------------------------------------------------------*/ #main #subnav h4 { display:block; margin:0; padding:1.2em 10px .8em 18px; font-size:11px; font-weight:normal; color: #ccc; background:url(../media/00_primary/css_images/00_newest/sidebar_090909_bg.png) repeat-y left bottom; _background:url(../media/00_primary/css_images/00_newest/sidebar_090909_bg.gif) repeat-y left bottom; } #main #subnav h4.intro { display:block; margin:0; padding:1.2em 10px .8em 18px; font-size:11px; font-weight:bold; color: #eee; background:url(../media/00_primary/css_images/00_newest/sidebar_090909_bg.png) repeat-y left bottom; _background:url(../media/00_primary/css_images/00_newest/sidebar_090909_bg.gif) repeat-y left bottom; } #main #subnav h4.last { display:block; margin:0; padding:1.2em 10px .8em 18px; font-weight:normal; color: #ccc; background:url(../media/00_primary/css_images/00_newest/subnav_black_bgbottom.gif) no-repeat left bottom; } #main #subnav h4 a { display:inline; color:#3ff; text-decoration:none; position:relative; outline:none; } #main #subnav h4 a:hover { color: #f90; text-decoration:underline; } #main #subnav h2 { margin:0; padding:10px 18px 8px; font-size:12px; color:#ff6; background:url(../media/00_primary/css_images/00_newest/subnav_black_bgtop.gif) no-repeat left top; *margin-top:-2px; } #main #subnav h2 a { color:#303030; text-decoration:none; } #main #subnav h2 a:hover { text-decoration:underline; } #main #subnav ul { margin:0; padding:0 2px 3px; background:url(../media/00_primary/css_images/00_newest/subnav_black_bgbottom.gif) no-repeat left bottom; } #main #subnav ul li { display:block; margin:0; padding:0 0 .3em; } #main #subnav ul li p { display:block; margin:0; padding:1.2em 10px .8em 18px; font-weight:bold; } #main #subnav ul li p img { margin:0; padding-right: 10px; } #main #subnav ul li p a { display:block; padding-right:10px; color:#595959; text-decoration:none; position:relative; outline:none; } #main #subnav ul li p a:hover { color: #f90; } /* ----------------------------------------------------------------------*/ /* ---------------- DARK BLUE SIDEBAR ----------------*/ /* ----------------------------------------------------------------------*/ #main #subnav_blue h4 { display:block; margin:0; padding: .25em 10px .8em 10px; font-size:11px; font-weight:normal; color: #ccc; background:url(../media/00_primary/css_images/00_newest/subnav_blue_mid.png) repeat-y left bottom; _background:url(../media/00_primary/css_images/00_newest/subnav_blue_mid.gif) repeat-y left bottom; } #main #subnav_blue h4.intro { display:block; margin:0; padding:.25em 10px .8em 10px; font-size:11px; font-weight:bold; color: #eee; background:url(../media/00_primary/css_images/00_newest/subnav_blue_mid.png) repeat-y left bottom; _background:url(../media/00_primary/css_images/00_newest/subnav_blue_mid.gif) repeat-y left bottom; } #main #subnav_blue h4.last { display:block; margin:0; padding:.25em 10px .8em 10px; font-weight:normal; color: #ccc; background:url(../media/00_primary/css_images/00_newest/subnav_blue_btm.png) no-repeat left bottom; } #main #subnav_blue h4 a { display:inline; color:#3ff; text-decoration:none; position:relative; outline:none; } #main #subnav_blue h4 a:hover { color: #f90; text-decoration:underline; } #main #subnav_blue h2 { margin:0; padding:6px 18px 0 8px; font-size:12px; color:#ff6; background:url(../media/00_primary/css_images/00_newest/subnav_blue_top.png) no-repeat left top; *margin-top:-2px; } #main #subnav_blue h2 a { color:#303030; text-decoration:none; } #main #subnav_blue h2 a:hover { text-decoration:underline; } #main #subnav_blue ul { margin:0; padding:0 2px 3px; background:url(../media/00_primary/css_images/00_newest/subnav_blue_btm.png) no-repeat left bottom; } #main #subnav_blue ul li { display:block; margin:0; padding:0 0 .3em; } #main #subnav_blue ul li p { display:block; margin:0; padding:.25em 10px .8em 10px; font-weight:bold; } #main #subnav_blue ul li p img { margin:0; padding-right: 10px; } #main #subnav_blue ul li p a { display:block; padding-right:10px; color:#595959; text-decoration:none; position:relative; outline:none; } #main #subnav_blue ul li p a:hover { color: #f90; } /* ----------------------------------------------------------------------*/ /* ----------------------------------- "QUICKTIP BOX (250) ------------------------------*/ /* ----------------------------------------------------------------------*/ #main #quicktip { float: right; width: 250px; margin: 8px; } #main #quicktip h4 { display:block; margin-top: -12px; padding: 4px 10px .10px 10px; font-size:11px; font-weight:normal; color: #ccc; background:url(../media/00_primary/css_images/quicktip_items/quicktip_mid.png) repeat-y left bottom; _background:url(../media/00_primary/css_images/quicktip_items/quicktip_mid.gif) repeat-y left bottom; } #main #quicktip h4.center { display:block; margin-top: -12px; padding: 4px 10px .10px 10px; font-size:11px; font-weight: normal; text-align: center; color: #ccc; background:url(../media/00_primary/css_images/quicktip_items/quicktip_mid.png) repeat-y left bottom; _background:url(../media/00_primary/css_images/quicktip_items/quicktip_mid.gif) repeat-y left bottom; } #main #quicktip h4.intro { display:block; margin-top: -12px; padding: 4px 10px 10px 10px; font-size:11px; font-weight:bold; color: #eee; background:url(../media/00_primary/css_images/quicktip_items/quicktip_mid.png) repeat-y left bottom; _background:url(../media/00_primary/css_images/quicktip_items/quicktip_mid.gif) repeat-y left bottom; } #main #quicktip h4.last { display:block; margin:0; padding: 0 10px 10px 10px; font-weight:normal; color: #ccc; background:url(../media/00_primary/css_images/quicktip_items/quicktip_btm.png) no-repeat left bottom; } #main #quicktip h4 a { display:inline; color:#3ff; text-decoration:none; position:relative; outline:none; } #main #quicktip h4 a:hover { color: #f90; text-decoration:underline; } #main #quicktip h2 { height: 32px; margin:0; padding: 6px 18px 6px; background:url(../media/00_primary/css_images/quicktip_items/quicktip_top.png) no-repeat left top; *margin-top:-2px; background:url(../media/00_primary/css_images/quicktip_items/quicktip_top.gif) no-repeat left top; *margin-top:-2px; } #main #quicktip h2 a { color:#303030; text-decoration:none; } #main #quicktip h2 a:hover { text-decoration:underline; } /* ----------------------------------------------------------------------*/ /* ----------------------------------- "PROJECT NEWS BOX (250) ------------------------------*/ /* ----------------------------------------------------------------------*/ #main #projectnews { float: right; width: 250px; margin: 0; } #main #projectnews h4 { display:block; margin-top: -12px; padding: 4px 12px .10px 10px; font-size:11px; font-weight:normal; color: #ccc; background:url(../media/00_primary/css_images/projectnews_items/projectnews_mid.png) repeat-y left bottom; _background:url(../media/00_primary/css_images/projectnews_items/projectnews_mid.gif) repeat-y left bottom; } #main #projectnews h4.center { display:block; margin-top: -12px; padding: 4px 12px .10px 10px; font-size:11px; font-weight: normal; text-align: center; color: #ccc; background:url(../media/00_primary/css_images/projectnews_items/projectnews_mid.png) repeat-y left bottom; _background:url(../media/00_primary/css_images/projectnews_items/projectnews_mid.gif) repeat-y left bottom; } #main #projectnews h4.intro { display:block; margin-top: -12px; padding: 4px 10px 12px 10px; font-size:11px; font-weight:bold; color: #eee; background:url(../media/00_primary/css_images/projectnews_items/projectnews_mid.png) repeat-y left bottom; _background:url(../media/00_primary/css_images/projectnews_items/projectnews_mid.gif) repeat-y left bottom; } #main #projectnews h4.last { display:block; margin:0; padding: 0 10px 10px 10px; font-weight:normal; color: #ccc; background:url(../media/00_primary/css_images/projectnews_items/projectnews_btm.png) no-repeat left bottom; } #main #projectnews h4 a { display:inline; color:#3ff; text-decoration:none; position:relative; outline:none; } #main #projectnews h4 a:hover { color: #f90; text-decoration:underline; } #main #projectnews h2 { height: 44px; margin:0; padding: 6px 18px 6px; background:url(../media/00_primary/css_images/projectnews_items/projectnews_top.png) no-repeat left top; *margin-top:-2px; _background:url(../media/00_primary/css_images/projectnews_items/projectnews_top.gif) no-repeat left top; *margin-top:-2px; } #main #projectnews h2 a { color:#303030; text-decoration:none; } #main #projectnews h2 a:hover { text-decoration:underline; } /* ----------------------------------------------------------------------*/ /* --------------------------- DARK BROWN VERSION -------------------------------*/ /* ----------------------------------------------------------------------*/ body#home #main #subnav ul li#sn-home, body#news #main #subnav ul li#sn-news, body#recording #main #subnav ul li#sn-recording, body#writing #main #subnav ul li#sn-writing, body#drums #main #subnav ul li#sn-drums, body#bio #main #subnav ul li#sn-bio, body#links #main #subnav ul li#sn-links { color:#595959; } /* ----------------------------------------------------------------------*/ body#home #main #subnav ul li#sn-home p, body#news #main #subnav ul li#sn-news p, body#recording #main #subnav ul li#sn-recording p, body#writing #main #subnav ul li#sn-writing p, body#drums #main #subnav ul li#sn-drums p, body#bio #main #subnav ul li#sn-bio p, body#links #main #subnav ul li#sn-links p { color: #6f0; } /* ----------------------------------------------------------------------*/ body#home #main #subnav ul li#sn-home p a, body#news #main #subnav ul li#sn-news p a, body#recording #main #subnav ul li#sn-recording p a, body#writing #main #subnav ul li#sn-writing p a, body#drums #main #subnav ul li#sn-drums p a, body#bio #main #subnav ul li#sn-bio p, body#links #main #subnav ul li#sn-links p a { color: #6f0; } /* ----------------------------------------------------------------------*/ #main #subnav ul li p a { padding-left:40px; } #main #subnav ul li p img { float:left; margin:-10px 0 0 -8px; } /* ----------------------------------------------------------------------*/ /* --------------------------- DARK BLUE VERSION -------------------------------*/ /* ----------------------------------------------------------------------*/ body#home #main #subnav ul li#sn-home, body#news #main #subnav ul li#sn-news, body#recording #main #subnav ul li#sn-recording, body#writing #main #subnav ul li#sn-writing, body#drums #main #subnav ul li#sn-drums, body#bio #main #subnav ul li#sn-bio, body#links #main #subnav ul li#sn-links { color:#ccc; } /* ----------------------------------------------------------------------*/ body#home #main #subnav ul li#sn-home p, body#news #main #subnav ul li#sn-news p, body#recording #main #subnav ul li#sn-recording p, body#writing #main #subnav ul li#sn-writing p, body#drums #main #subnav ul li#sn-drums p, body#bio #main #subnav ul li#sn-bio p, body#links #main #subnav ul li#sn-links p { color: #6f0; } /* ----------------------------------------------------------------------*/ body#home #main #subnav ul li#sn-home p a, body#news #main #subnav ul li#sn-news p a, body#recording #main #subnav ul li#sn-recording p a, body#writing #main #subnav ul li#sn-writing p a, body#drums #main #subnav ul li#sn-drums p a, body#bio #main #subnav ul li#sn-bio p, body#links #main #subnav ul li#sn-links p a { color: #6f6; } /* ----------------------------------------------------------------------*/ #main #subnav_blue ul li p a { padding-left: 0px; } #main #subnav_blue ul li p img { float:left; margin:-10px 0 0 -8px; } /* ----------------------------------------------------------------------*/ /* HEADERS, TEXT */ /* ----------------------------------------------------------------------*/ body, #main #content { color:#666; } #main h1 { font-weight:normal; color:#ff6; margin-bottom:.5em; } #main h1 span { color:#666; } #main h3 { font-size:14px; margin-bottom: 12px; } #main h2 { color: #96f; } #main h3 { color: #c60; } #main h4 { color: #f60; } #main p.intro, #main strong { color:#eee; } #main p.daynum { background: #222; color: #cf6; text-align: center; } #main p.daynum.hilite { background: #ff9; color: #000; } .center { text-align:center; } /* ----------------------------------------------------------------------*/ /* LINKS */ /* ----------------------------------------------------------------------*/ #main a { text-decoration:none; } #main a:hover { color: #f90; } /* ----------------------------------------------------------------------*/ /* IMAGES */ /* ----------------------------------------------------------------------*/ img { margin-bottom: 14px; } img.glow { margin-top:0; margin-bottom:14px; } img.inline { margin-top:12px; } img.shadow { margin-bottom:5px; } div.center { text-align:center; } #main .hr { padding:4px 0; width:100%; text-align:center; } #main .hr { background:url(../media/00_primary/css_images/hr650x2.png) no-repeat 50% 100%; margin: -12px auto 12px auto; _background:url(../media/00_primary/css_images/hr650x2.gif) no-repeat 50% 100%; margin: -12px auto 12px auto; } #main #subnav .hr { padding:1px 0 1px 0; width:100%; text-align:center; } #main #subnav .hr { background: url(../media/00_primary/css_images/subnav_brown_hr.png) no-repeat 50% 100%; margin: 0; _background: url(../media/00_primary/css_images/subnav_brown_hr.gif) no-repeat 50% 100%; margin: 0; } #main #subnav_blue .hr { padding:1px 0 1px 0; width:100%; text-align:center; } #main #subnav_blue .hr { background: url(../media/00_primary/css_images/subnav_blue_hr.png) no-repeat 50% 100%; margin: 0; _background: url(../media/00_primary/css_images/subnav_blue_hr.gif) no-repeat 50% 100%; margin: 0; } /* -------------------- WEB "SIGNATURE" ---------------------*/ .signed { width: 140px; height: 58px; background:url(../media/00_primary/mjj_websignature_gold.png) no-repeat 0 100%; _background:url(../media/00_primary/mjj_websignature_gold.gif) no-repeat 0 100%; } /* --------------------------- FOOTER ------------------------------*/ #footer { width: 932px; margin: 0px auto; text-align: center; font-size: 10px; color: #6e6e6e; } #footer a { margin: 0 2px; text-decoration: none; } #footer a:hover { text-decoration: underline; } #footer p.left { width: 50%; float: left; text-align: left; text-indent: 10px; } #footer p.right { width: 50%; float: right; } #footer p.links { border: 1px solid #2e2e2e; border-width: 1px 0; padding: .5em 0; margin: 1.5em 0 2em; } /* -------------------- SINGLE-COLUMN ROUNDED (980 WHITE) ----------*/ /* TOP */ #contentheader980w { height:10px; position:relative; overflow:hidden; background:transparent url(../media/00_primary/css_images/980_rounded_white/980_top_bg.png) no-repeat; padding-bottom:10px; margin-bottom:-10px; z-index:100; behavior: url(../scripts/iepngfix.htc); } /* MID (CONTENT) */ #midcontent980w { padding:27px 30px; border:1px solid #fff; border-width:0 1px; } /* BOTTOM */ #capbottom980w { background: url(../media/00_primary/css_images/980_rounded_white/980_btm_bg.png) no-repeat; position:relative; height: 10px; z-index:100; behavior: url(../scripts/iepngfix.htc); } /* -------------------- SINGLE-COLUMN ROUNDED (980 BLACK) ----------*/ /* TOP */ #contentheader980b { height:10px; position:relative; overflow:hidden; background:transparent url(../media/00_primary/css_images/980_rounded_black/980_top_bg.png) no-repeat; padding-bottom:10px; margin-bottom:-10px; z-index:100; behavior: url(../scripts/iepngfix.htc); } /* MID (CONTENT) */ #midcontent980b { padding:27px 30px; border:1px solid #000; border-width:0 1px; } /* BOTTOM */ #capbottom980b { background: url(../media/00_primary/css_images/980_rounded_black/980_btm_bg.png) no-repeat; position:relative; height: 10px; z-index:100; behavior: url(../scripts/iepngfix.htc); } /* -------------------- SINGLE-COLUMN ROUNDED (850) ----------*/ /* TOP */ #contentheader850bl { height:10px; position:relative; overflow:hidden; background:transparent url(../media/00_primary/css_images/850_top_bg.png) no-repeat; padding-bottom:10px; margin-bottom:-10px; z-index:100; behavior: url(../scripts/iepngfix.htc); } /* MID (CONTENT) */ #midcontent850bl { padding:27px 30px; border:1px solid #036; border-width:0 1px; } /* BOTTOM */ #capbottom850bl { background: url(../media/00_primary/css_images/850_btm_bg.png) no-repeat; position:relative; height: 10px; z-index:100; behavior: url(../scripts/iepngfix.htc); } /* ----------------------------------------------------------------------*/ /* -------------------- NOTE WINDOW ROUNDED (680) -----------------*/ /* ----------------------------------------------------------------------*/ #note { width: 680px; margin: 4px auto 12px auto; } #note p { margin: 4px auto 4px auto; } /* TOP */ #noteheader { height:10px; position:relative; overflow:hidden; background:transparent url(../media/00_primary/css_images/680_rounded/680_top.png) no-repeat; padding-bottom:10px; margin-bottom:-10px; z-index:100; behavior: url(../scripts/iepngfix.htc); } /* MID (CONTENT) */ #notemidcontent { padding:4px 12px; border:1px solid #f93; border-width:0 1px; } /* BOTTOM */ #notecapbtm { background: url(../media/00_primary/css_images/680_rounded/680_btm.png) no-repeat; position:relative; height: 10px; z-index:100; behavior: url(../scripts/iepngfix.htc); } /* ----------------------- CUSTOM SUBSTITUTE FOR "BLOCKQUOTE" ----------------------*/ .smallquote { width: 500px; padding: 8px; margin: 4px 12px 12px 0px; font-family: times, serif; font-size: 14px; text-align: left; background-color: #222; color: #9ff; border: 1px outset #999; } .bigquote { width: 650px; padding: 8px; margin: 4px auto 12px auto; font-family: times, serif; font-size: 16px; text-align: left; background-color: #222; color: #9ff; border: 1px outset #999; } /* ----------------------------------------------------------------------*/ /* ------------------- MJM INTERFACE-SPECIFIC CSS ---------------*/ /* MJJ layout - black_gloss_with_viewport - 980 total - 932-wide (BLACK) viewport*/ /*-------------------------------------------------------------------------*/ #containerouter { background: transparent; height: auto; width: 980px; margin: 18px auto; position: relative; } #header { background: transparent; height: 120px; margin: -4px 0 -8px 24px; background-image: url(../media/00_primary/mjw_logo.gif); background-repeat: no-repeat; position: relative; } #searchbox { display: inline; font-size: 90%; background: transparent; width: 280px; height: 1em; margin: 1em 1em; float: right; } /* ----------------------------------------------------------------------*/ #interface { background: transparent; color: #eee; width:980px; margin:24px auto; } #interface .hd .c, #interface .ft .c { font-size:1px; /* ensure minimum height */ height:13px; } #interface .ft .c { height:14px; } #interface .hd { background:transparent url(../media/00_primary/css_images/black_gloss/tl_980.gif) no-repeat 0px 0px; } #interface .hd .c { background:transparent url(../media/00_primary/css_images/black_gloss/tr.gif) no-repeat right 0px; } #interface .bd { background:transparent url(../media/00_primary/css_images/black_gloss/ml_980.gif) repeat-y 0px 0px; } #interface .bd .c { background:transparent url(../media/00_primary/css_images/black_gloss/mr.gif) repeat-y right 0px; } #interface .bd .c .s { margin:0px 2px 0px 4px; background:#000 url(../media/00_primary/css_images/black_gloss/ms.jpg) repeat-x 0px 0px; padding:1em; } #interface .ft { background:transparent url(../media/00_primary/css_images/black_gloss/bl_980.gif) no-repeat 0px 0px; } #interface .ft .c { background:transparent url(../media/00_primary/css_images/black_gloss/br.gif) no-repeat right 0px; } #interfacebtm { background: transparent; width: 980px; height: 24px; margin-top: -28px; } /* ----------------------------------------------------------------------*/ /* ------------------------------------ CSS "Drawers" sidbar ---------------------------------------*/ /* ----------------------------------------------------------------------*/ #dlmenu { height:14em; } #menu { list-style-type:none; margin: 12px; padding:0; position: absolute; width:200px; background: transparent; z-index:100; } #menu li { display:block; padding:0; margin:0; position:relative; z-index:100; } #menu li a, #menu li a:visited { display:block; text-decoration:none; } #menu li dd { display:none; } #menu li:hover, #menu li a:hover { border:0; } #menu li:hover dt a , #menu li a:hover dt a { background: transparent url(../media/00_primary/menugraphics/drawers_images/200_round_top_hover.png); color:#fff; } #menu li:hover dtmid a , #menu li a:hover dtmid a { background: transparent url(../media/00_primary/menugraphics/drawers_images/200_mid_hover.png); color:#fff; } #menu li:hover dtbtm a , #menu li a:hover dtbtm a { background: transparent url(../media/00_primary/menugraphics/drawers_images/200_round_btm_hover.png); color:#fff; } #menu li:hover dd, #menu li a:hover dd { display:block; } #menu li:hover dl, #menu li a:hover dl { height:auto; background: transparent; } #menu table { border-collapse:collapse; padding:0; margin:-4px; font-size:1em; } #menu dl { width: 200px; margin: 0; background: transparent; } #menu dt { margin:0; padding: 0; font-size: 1em; } #menu dd { margin:0; padding:0; font-size: 1em; text-align:left; background: #333; color: #ccc; } #menu dd a hover { margin:0; padding:0; font-size: 1em; text-align:left; } .gallery dt a, .gallery dt a:visited { display:block; color:#fff; padding:5px 5px 5px 10px; background: transparent url(../media/00_primary/menugraphics/drawers_images/200_round_top.png); } .gallery dtmid a, gallery dtmid a:visited { display:block; color:#fff; padding:5px 5px 5px 10px; background: transparent url(../media/00_primary/menugraphics/drawers_images/200_mid.png); } .gallery dtbtm a, gallery dtbtm a:visited { display:block; color:#fff; padding:5px 5px 5px 10px; background: transparent url(../media/00_primary/menugraphics/drawers_images/200_round_btm.png); } .gallery dd a:hover { color:#ff9; background:#111; } .gallery dd a, .gallery dd a:visited { color:#00f; min-height:1em; text-decoration:none; display:block; padding:4px 5px 4px 20px; background: transparent; * html .gallery dd a, * html .gallery dd a:visited { height:1em; } /* ----------------------------------------------------------------------*/ #final {background: transparent; height: auto; width: 100%; clear: both; position: relative; } /* ----------------------------------------------------------------------*/ #ads {background: transparent; height: auto; width: 100%; clear: both; position: relative; } /* ----------------------------------------------------------------------*/