/* ----------------------------- CSS for index, fingerings, contact, search-page, not for print page -- in nFix (iPad-Design) ------------------ Color Scheme: 2004-2011 2011 (iPad-Design) ================================================================================================= Background body (overall background) #fbfbfb (light grey) #f3f7d0 (light olive) (first try was e3e7c0, to dark) LogoBox, Selection Header #ddd (darker grey) #c3c7a0 (darkest olive) MenuItems Main-Menu #ccc (dark grey) #d3d7b0 (dark olive) MenuItems fingering selection #ddd #e3e7c0 IxBlock (Infos first page) #ffd (helles rosa) #eff4ef (lighter olive, with a dash of blue) Background Select Boxes #f6fad0 (lightest olive) color tip (some headers, symbols) #9b1c2e (red-lila like summit advertising background) */ /* ====================================== General settings for the page, all background-colors, main css ================================== */ * {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; font-size:100%; font-family:Verdana,Arial,sans-serif; color:black;} body {background:#f3f7d0;} #BodyBox {margin:0 2px 0 2px;} /* body for all boxes except Index, */ /* ===========>> next lines are the 3D effect of boxes, 1stline for menu items and headers, 2nd line for larger boxes */ *.LogoMenuItems,*.ChartFavHead,*.ChartFavLine,*.ChartSelect {border-top:1px white solid;border-left:1px white solid;border-right:1px black solid;border-bottom:1px black solid;} #LogoBox,*.IxBlock,#IxLeft,#IxRight {border-top:2px white solid;border-left:2px white solid;border-right:2px #666 solid;border-bottom:2px #666 solid;} /* === see also CSS for Links and general usage (H1...,) at the end */ /* ======================================== Logo - see Inc-Logo.php ============================================== */ #LogoBox, #FooterBox {background:#c3c7a0; height:fit-content; margin: 4px 1px 0px 4px; width:720px;} /*LogoBox top of the page (see style) */ #FooterBox {margin-top:8px;padding: 2px 0 8px 0;} *.LogoText {cursor:pointer; font-size:1.2em; color:black;font-weight:bold; margin: 0 4px 0 4px; white-space:nowrap;} *.LogoFlags {text-align:left; padding: 2px 0px 0px 6px; white-space:nowrap;} /* space for the language flags */ *.FlagImg {border: none 0px; margin:3px 0px 0px 0px;} /* Flags in the Logo */ *.LogoMenu {text-align:left; font-size:0.8em; margin: 4px 0px 2px 4px; white-space:nowrap;height:20px;} *.LogoMenuItems {background:#d3d7b0;text-decoration:none; margin:0 0 0 0; padding:0 4px 0 4px;}/* items in NavBar */ /* ========================================== Advertising boxes at the bottom ==================================================== */ *.AdBoxHead {margin: 6px 0 0 5px; font-size:14px; z-index:-99;} /* header line "Ads" */ *.AdBoxLine {margin: 0px 0 0 4px; } /* container embracing a line of AdBox'es */ *.AdBox {float:left; border: solid black 1px; background:#fdfdfd;cursor:pointer; text-align:center; } /* Advertising boxes at bottom */ /* plus indiv. style in Inc-Advertising.php */ /* ============================================= Index-Pages (Main-I.php and Main-A.php) only ============================================== */ *.BodyBoxI {margin-left: 12px; height:380px;} /* Total body of this page, but not including the footer */ *.TxtCol, *.IndexHdr, *.IndexTxt,*.NewsScrollBox {width:200px;} /* the 2 text columns */ *.IndexHdr {color:white;background-color:blue;font-size:0.7em;font-weight:bold;padding: 1px 6px 2px 6px; margin:8px 0 2px 0;} *.IndexTxt {font-size:0.64em; margin: 5px 0 0 4px;} *.new {padding: 0 3px 1px 3px; color:white;background:red; font-weight:bold;} /* red news hint */ *.NewsScrollBox {overflow:hidden; height:250px; background-color:#ddf; padding: 4px; border: solid 2px blue;} /*weglassen width=Fehler, verkleinern=keine Wirkung*/ *.ChartFavHead,*.ChartSelect,*.ChartFavLine {font-size:0.84em; margin: 2px 0 0 0; padding:0 4px 2px 4px;} *.ChartSelect,*.ChartFavLine {background:#e9efc0; color:black;} /* selection menu item */ *.ChartFavLine,*.ChartFavHead {color:#666;} /* favoriten item line */ *.ChartFavHead {background:#d3d7c0; font-weight:bold; border:solid #888 1px;} /* favorites box header */ *.ChartFavLine {font-size:0.6em;} *.IxBlock {background:#efefaf; font-size:0.76em; clear:left; margin: 8px 0 0 4px; padding: 1px 2px 2px 6px; width:710px; } /* Info Blocks */ *.IxBlockT {font-size:0.8em; margin: 3px 0 0 2px;} #IxLeft a, #IxRight a {text-decoration:none; display:block;} /* to have no underlines in the menu-items */ #IxLeft {float:left; width:330px; margin:6px 0 0 4px; padding:4px 4px 4px 4px; background:#ed6;} /* box for fingering selection, left */ #IxRight {float:left; width:340px; margin:6px 0 0 10px; padding:4px 4px 4px 4px; background:#dc4;} /* box for selection favoritest */ *.ErrMsg {color:red; width:310px; font-weight:bold;} /* Error messages in RED */ *.TxtCol {padding: 0 10px 0 6px;} /* ABOUT page column */ #breadcrumb {font-size:0.8em;text-decoration:none; margin:2px 0 0px 6px;} /* Breadcrumb for all pages */ /* ============================================= Fingering page (Main-F.php) only =================================================== */ #ErrorMsg {top:68px;} /* Error Msg "Loading incorrect", */ #ErrorMsg {position:absolute;border:#111 solid 1px;color:red;font-weight:bold; font-size:8pt; background-color:#eee;padding: 2px 2px 2px 2px;} /* Next: Info message ("move the mouse ...") overlaying the recorder image (in blue on grey) */ #FingeringMsg {position:absolute;top:200px;left:10px;width:160px;text-align:center;font-size:8pt;color:#a0a;background-color:#efefaf; border:#111 solid 1px; padding: 4px 4px 4px 4px;font-weight:bold; visibility:visible;z-index:10;} #HelpBox {position:absolute; left:340px; top:60px; width:260; background:#999;color:#ffff00;font-weight:bold;font-size:0.8em; visibility:hidden;z-index:99;} /*yellow HELP box, opened by click */ #HelpText {color:black; margin-bottom:0px; background:#ff0; font-size:0.8em;} /* Text lines in the help box, used in */ *.PrinterSymbol {margin: 4px 10px 0px 2px; xpadding: 4px 8px 0px 0px; text-align:left;} /* printer Symbol in HELP box*/ #AdrBox {position:absolute; left:10px; top:100px; width:290; z-index:11; color:blue; margin-top: 14px; border: 1px black solid;visibility:hidden;} /* AdrBox: Address and Links of the maker */ *.AdrHeader{background:#c6c6c6; font-style: italic; font-size:0.8em; font-weight: bold; padding:3px;} /* Header */ *.AdrText {font-size:0.7em; font-style: italic; color:black; background:#f0f0f0; border-top: 1px black solid; padding:2px;} /* Text lines */ /* additional Infos about the maker, always shown */ #AddInfos {position:absolute; left:310px; top:100px; width:300; margin-top: 14px; font-size:1em; color:#666; border: 1px solid black; background:#ff9; z-index:2; visibility:hidden;} #AddInfosH {background:#c6c6c6;font-weight:bold;font-size:0.8em; border-bottom:solid black 1px; padding:3px;} #AddInfosT {margin-top: 4px; font-size:0.6em; padding: 3px;} *.GriffText {color:blue;} *.Grifftone {font-weight:bold;} #Scroll {} /* ======================================== Left box (SEARCH, Menu, Status) - see Inc-Menu.php ===================== */ *.SearchBox {padding: 0px 0px 4px 0px;border-top: black solid 1px;} /* font-size is in style */ /* these following are ok, dont delete, leave here ================ */ /* ------------------------ Appearance of Hyperlinks ---------------------------------------------------------------*/ a {text-decoration:none; color:black;} /* to avoid colored and underlined links */ #LinkBG,#LinkBG a {background-color:#f4f4f4;text-decoration:none;} a:hover,#LinkBG a:hover {background-color:yellow;color:red; text-decoration:none;} a:visited {text-decoration:none;} #LinkOhne a,#LinkOhne a:hover {text-decoration:none;} /* ------------------------- other Headers, Bottons, general Text ------------------------- */ input.button {margin:4px 0 4px 0; padding: 3px 4px 3px 4px; font-weight:bold;} H1 {font-size:1.0em;font-weight:bold; margin:8px 2px 4px 6px;} /* used as header for ChartTitle */ *.h1a {color:#888;} /* field within H1, additional grey text */ H1.c {font-size:18pt;color:blue;font-weight:bold;margin:8px 0 4px;text-align:center;} H1.m {font-size:10pt;color:#030;font-weight:bold;margin:8px 0 4px 4px;} H2 {font-size:1.2em;color:#blue;font-weight:bold;margin-top:6px;margin-bottom:4px;} /* used in C */ /* h5 (Info yellow box on top of or underneath the recorder) - h6 (text under the recorder) (must use display:none, error in Mozialla exception from this box position see FuGriff.php at function WriteInfo h5/h6 HTML coding see build.js - H5 at top (margin-top:8px see here) H6 at bottom underneath the image */ h5,h6 {z-index:99;position:absolute;display:none;font-size:7pt; text-align:center; border:solid 1px;} h5 {width:60px;padding: 2px 4px 2px 4px; margin: 8px 0 0 20px; background:yellow;} h6 {width:66px;padding: 2px 2px 2px 2px; margin: 0 0 0 10px; background:#f4f4f4; color:#003300;} *.ub {font-weight:bold; text-decoration:underline;} /* used embedded in text in the MySQL table: Headers underlined */ *.cb {font-weight:bold; text-align:center;} /* used embedded in text in the MySQL table: Headers centered */ *.Hand {cursor:pointer;}