/* ** MZT16.CSS ** CSS updated Summer 2021 aiming for better mobile phone support. */ /* table, tr, img, figure, blockquote { page-break-inside: avoid; } */ div#main-document { margin-top: 31px; } /*==================================================================================*/ /* Classes providing generic 'synonyms' */ /*==================================================================================*/ .bold { font-weight:bold; } .lightbold { color:#646464; font-weight:bold; } .tx-white { color: #ffffff; } .tx-logoblue { color: #0063ef; } .tx-blue3 { color: #90d8f8; } .tx-blue2 { color: #000060; } .tx-blue { color: #00008b; } .tx-green { color: #008b00; } .tx-green2 { color: #0ad21d; } .tx-green3 { color: #90ff90; } .tx-purple { color: #5e015f; } .tx-orange { color: #e08000; } .tx-red-ff { color: #ff0000; } .tx-maroon { color: maroon; } .tx-grey { color: #606060; } .tx-heading0 { color: #00008b; } /*==================================================================================*/ /* Generic defaults */ /*==================================================================================*/ h1 { text-align:center; font-size:24pt; } h2 { text-align:center; font-weight:bold; font-size:14pt; } h3 { text-align:left; font-weight:bold; font-size:13pt; } h4 { text-align:left; font-weight:bold; font-size:12pt; } p { margin-left: 0px; /* leave margins = 0 */ margin-top: 0px; margin-right: 0px; margin-bottom: 0px; padding-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0.5em; /* space default paragraphs */ font-family: MZ-OpenSans,Tahoma,Arial,sans-serif; font-weight: normal; } td { font-size: 12pt; } a:link { color:#0063ef; font-weight:bold; text-decoration:underline; } a:visited { color:#553377; font-weight:bold; text-decoration:underline; } a:active { color:#0044aa; font-weight:bold; text-decoration:underline; } a:hover { color:#00c0ff; font-weight:bold; text-decoration:underline; } mark { background-color: transparent; font-weight:bold; } /*==================================================================================*/ /* General variants */ /*==================================================================================*/ p.centring { text-align:center; } p.title16-colour { color: #0063ef; } span.hi { color: #0063ef; text-shadow: 1px 1px 1px #c0c0c0; font-weight:bold; } span.hi0 { color: #880f0f; text-shadow: 1px 1px 1px #c0c0c0; font-weight:bold; } img.flag { width:16px; height:11px; padding:0; margin-top:auto; margin-bottom:auto; } img.sq { width:13px; height:13px; } img.ribbon { border:1px solid black; box-shadow:5px 5px 5px #c0c0c0; } img.smbls { border:1px solid black; box-shadow:5px 5px 5px #c0c0c0; float:left; margin:5px; } span.normal { font-size:10pt } span.captionit { color:#800000; font-style:italic } span.foreign { color:#800000; font-style:italic } span.warning { color:#800000; font-style:italic } span.sombre { color:#8080C0 } span.neutral { color:#000000 } span.emphasis0 { color:#000099; font-weight:bold } span.emphasis1 { color:#000099; font-size:12pt; font-weight:bold } .moz { text-transform: capitalize; } .user { color:#00008b; } .pictcaption { color:#800000; font-size:10pt; font-style:italic; } .caption { color:#800000; } .captionbold { color:#800000; font-weight:bold; } .mzcommand { color:#006600; font-weight:bold; } a.contactpagelink {} /* Identified only for javascript manipulation */ /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ /* Useful: margins */ /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ .marginLR5 { margin-left: 5px; margin-right: 5px; width:auto; } .marginLR10 { margin-left:10px; margin-right:10px; width:auto; } .marginLR20 { margin-left:20px; margin-right:20px; width:auto; } .marginLR25 { margin-left:25px; margin-right:25px; width:auto; } .marginLR50 { margin-left:50px; margin-right:50px; width:auto; } /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ /* a useful trick from W3Schools. */ /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ .clearfix::after { content: ""; clear: both; display: table; } /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ /* Body */ /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ body.theme16 { background-color: #e0f0ff; /* background-color: #f0f8ff; background-image: none; background-image: linear-gradient(to-right, #f0f8ff, #f4fdff ); */ text-align: center; font-family: MZ-OpenSans,Tahoma,Arial,sans-serif; font-size: 12pt; font-weight: normal; margin: 0px; padding: 0px; } .theme16 h1 { color: #0063ef; text-shadow: 2px 2px 2px #c0c0c0; text-align:center; } .theme16 h2 { color: #0063ef; text-shadow: 2px 2px 2px #c0c0c0; } .theme16 h3 { color: #0063ef; text-shadow: 1px 1px 1px #c0c0c0; } .theme16 h4 { color: #0063ef; text-shadow: 1px 1px 1px #c0c0c0; } /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ /* pop-up topics */ /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ body.themepopup12 { background-color: #ffffff; text-align: center; font-family: MZ-OpenSans,Tahoma,Arial,sans-serif; font-size: 12pt; font-weight: normal; margin: 0px; padding: 0px; } .themepopup12 h1 { color: #0063ef; text-shadow: 2px 2px 2px #c0c0c0; text-align:center; } .themepopup12 h2 { color: #0063ef; text-shadow: 2px 2px 2px #c0c0c0; } .themepopup12 h3 { color: #0063ef; text-align: left; font-family: MZ-OpenSans,Tahoma,Arial, sans-serif; font-weight: 100; font-size: 10pt; } /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ /* main area (below menu bar) */ /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ div#main16popup { background-color: #ffffff; width: 100%; margin-top: 0px; padding-top: 0px; z-index: 0; } /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ /* menu at the top */ /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ div#menubar16, nav#menubar16 { color: #ffffff; background-color: #083050; width: 100%; position: fixed; text-align: center; top: 0; z-index: 5; } .rightmost { border-right:1px solid #ffffff; } div#menus16 { color: #ffffff; /* background-color: #000000; */ background-color: #083050; margin: auto; line-height: 200%; max-width: 750px; } div.dropdown { position: relative; display: inline-block; } div.dropdown-content { display: none; position: absolute; box-sizing: border-box; padding: 12px 16px; background-color: #f9f9f9; color: #000000; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); text-align: left; line-height: normal; z-index: 5; } div.dropdown:hover div.dropdown-content { display: block; z-index: 5; } div.dropdown-content div.ddc-column1 { float: left; } div.dropdown-content div.ddc-column2 { float: left; margin-left: 10px; padding-left: 10px; border-left: 1px solid gray; } div.dropdown-content div.ddc-fullwidth { box-sizing: border-box; width: 100%; margin: 0; text-align: center; padding-left: 0px; padding-right: 0px; padding-top: 0px; padding-bottom: 5px; } div.dropdown-content h2 { font-size: 90%; color: gray; font-weight: bold; text-align: left; } div.dropdown-content p { font-size: 90%; color: gray; font-weight: normal; } div.dropdown-content p.non-menu, div.dropdown-content span.non-menu { font-size: 90%; color: gray; font-weight: normal; text-decoration: none; text-shadow: none; } div.dropdown-content p.gap { font-size: 10%; color: gray; font-weight: normal; } div.dropdown-content a:link { font-size:80%; color:#0063ef; text-decoration:none; font-weight:normal; } div.dropdown-content a:visited { color:#009bfc; text-decoration:none; } div.dropdown-content a:hover { color:#004369; text-decoration:underline; } div.dropdown-content a:active { color:#004369; text-decoration:none; } div.dropdown-content a.idx { font-size: 90%; color: gray; font-weight: bold; text-decoration: none; text-shadow: 2px 2px 2px #c0c0c0; } div.dropdown-content a.idx:link { color:gray; } div.dropdown-content a.idx:hover { color:#000000; text-decoration:underline; } div.dropdown-content a.idx:visited { color:gray; } div.dropdown-content a.idx:active { color:gray; } div.dropdown-content div.ddc-fullwidth a.idx:hover { color:#000000; text-decoration:underline; } div.dropdown-content div.ddc-column1 a.idx:hover { color:#000000; text-decoration:underline; } div.dropdown-content div.ddc-column2 a.idx:hover { color:#000000; text-decoration:underline; } div.dropdown-content a.idxc { font-size: 90%; color: #0063ef; font-weight: bold; text-decoration: none; text-shadow: 2px 2px 2px #c0c0c0; } div.dropdown-content a.idxc:hover { color:#004369; text-decoration:underline; } /* 2nd ================================================================================================*/ div#main-document { background-color: #f0f8ff; /* background-image: linear-gradient( to right, #ffffff, #f0f8ff ); */ background-image: url('../image16/chopinfade.gif'); background-repeat: repeat-y; background-position: left top; width: 100%; margin-top: 31px; padding-top: 0px; z-index: 0; } div.nav-menuitm, a.nav-menuitm { display: inline-block; /*float: left;*/ background-color: transparent; /* padding-left: 0px; */ /* padding-right: 0px; */ border-left: 1px solid #ffffff; text-align: center; margin-left: 0; margin-right: 0; box-sizing: border-box; } div#menu-home { width:40px; } div#menu-mozart { width:70px; } div#menu-downld { width:110px; } div#menu-support { width:85px; } div#menu-shop { width:64px; } div#menu-articles { width:80px; } div#menu-home:hover { background-color:darkgray; } div#menu-mozart:hover { background-color:darkgray; } div#menu-downld:hover { background-color:darkgray; } div#menu-support:hover { background-color:darkgray; } div#menu-shop:hover { background-color:darkgray; } div#menu-articles:hover { background-color:darkgray; } #spn-home { color: #ffffff; font-weight:bold; text-decoration: none; } #spn-mozart { color: #ffffff; font-weight:bold; text-decoration: none; } #spn-downld { color: #ffffff; font-weight:bold; text-decoration: none; } #spn-support { color: #ffffff; font-weight:bold; text-decoration: none; } #spn-shop { color: #ffffff; font-weight:bold; text-decoration: none; } #spn-articles { color: #ffffff; font-weight:bold; text-decoration: none; } #spn-home:hover { color: #ffffff; border-bottom: 4px #00ffff solid; } #spn-mozart:hover { color: #ffffff; border-bottom: 4px #00ffff solid; } #spn-downld:hover { color: #ffffff; border-bottom: 4px #00ffff solid; } #spn-support:hover { color: #ffffff; border-bottom: 4px #00ffff solid; } #spn-shop:hover { color: #ffffff; border-bottom: 4px #00ffff solid; } #spn-articles:hover { color: #ffffff; border-bottom: 4px #00ffff solid; } #ddn-home { left: -38px; min-width:120px; } #ddn-mozart { left: -103px; min-width:280px; } #ddn-downld { left: -33px; min-width:180px; } #ddn-support { left: -86px; min-width:260px; } #ddn-shop { left: -43px; min-width:150px; } #ddn-articles { left: -125px; min-width:320px; } /* Not actually centred. */ /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ /* footer */ /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ div#foottext16, footer16#foottext16 { background-image: none; /* background-color: transparent; */ background-color: #e0f0ff; text-align: center; margin-top: 0; padding-top: 10px; border-bottom: 2px solid gray; } p.footer16 { font-family: 'Times New Roman',serif; font-size: 10pt; font-weight: bold; color: #0063ef; /* text color to match logo */ font-style: italic; text-align: center; } p#footmenu16, nav#footmenu16 { font-size: 8pt; font-weight: bold; color: #808080; text-align: center; } a.footlink /* space footer links */ { margin-left: 3em; margin-right: 3em; } /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ /* title area */ /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ div#sitepath16 /* Holds the path to the page OBSOLESCENT */ { display: none; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; padding-left: 15px; padding-right: 15px; padding-top: 0px; padding-bottom: 0px; width: auto; /* within padding */ text-align: right; font-size: 8pt; font-family: Tahoma,Arial,sans-serif; font-weight: bold; color: #c0c0c0; white-space: nowrap; } /* //////////////////////////////////////////////////////////////////// */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* Coloured stripe for debugging */ /* Hide it for the release version with display:none */ div#stripe { display: none; } div.info, div#stripe { margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; padding-left: 15px; padding-right: 15px; padding-top: 0px; padding-bottom: 0px; width: auto; /* within padding */ text-align: right; font-size: 8pt; font-family: Tahoma,Arial,sans-serif; font-weight: bold; white-space: nowrap; color: black; background-color: cyan; } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* left/right of title on front page */ div#title16-left-w180 { float:left; width:180px; margin-right:10px; background-color:transparent; } div#title16-right-w180 { float:right; width:180px; margin-left:10px; background-color:transparent; } div#title16-left { float:left; width:75px; max-width:20%; margin-right:10px; margin-left:0; background-color:transparent; } div#title16-right { float:right; width:75px; max-width:20%; margin-left:10px; margin-right:0; background-color:transparent; } div.title-h0 { height:85px; } div.title-f { height:120px; } div#title16-area { margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 15px; border-style: none; border-width: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; padding-bottom: 0px; width: auto; text-align: center; color: #0063ef; /* text color to match logo */ background-color: transparent; } div#title16-area .smaller { font-size: 18pt; } div#title16-area > h1 { padding-top:30px; } /*----------------------------------------------------------------------------------*/ /* panel corners */ div.panel-rounded-4 { border-radius: 4px; margin: 0px; padding: 0px; } div.panel-rounded-6 { border-radius: 6px; margin: 0px; padding: 0px; } /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ /* panel padding */ /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ .panelpad70 { padding-left:70px; padding-right: 70px; } .panelpad25 { padding-left:25px; padding-right: 25px; } .panelpad20 { padding-left:20px; padding-right: 20px; } .panelpad10 { padding-left:10px; padding-right: 10px; } .panelpad05 { padding-left: 5px; padding-right: 5px; } .panelpad2510 { padding-left:25px; padding-right: 25px; padding-top:10px; padding-bottom:10px; } .panelpad-2pc { padding-left:2%; padding-right:2%; } .panelpad-4pc { padding-left:4%; padding-right:4%; } .panelpad-8pc { padding-left:8%; padding-right:8%; } /*--------------------------------------------------------------------------------------*/ /* Audio */ /*--------------------------------------------------------------------------------------*/ div.audiobtn-c { width:300px; max-width:90%; margin-left:auto; margin-right:auto; margin-top:10px; margin-bottom:10px; } audio.audiobtn { width:300px; max-width:90%; } /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ /* tiles */ /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ a#tile-logo { display: block; background-color: #005ED2; border: 1px white solid; width: 64px; height: 75px; margin-left: 25px; margin-right: 0px; margin-top: 5px; margin-bottom: 5px; padding: 0px; } a#tile-logo:link {} a#tile-logo:visited {} a#tile-logo:active {} a#tile-logo:hover { background-color: #51a3ff; } p.subhead, div.just p.subhead { text-align: center; font-family: MZ-OpenSans,Tahoma,Arial, sans-serif; font-weight: 100; font-size: 18pt; margin-top: 0; padding-top: 0; color: #0063ef; text-shadow: 1px 1px 1px #c0c0c0; } div#subheading { width: auto; margin: 2px 10px 2px 10px; /* top right bottom left */ padding: 2px 5px 2px 5px; /* top right bottom left */ color: black; background-color: transparent; text-align: center; } div#abstract16c /* use this to centre short abstracts */ { width: auto; margin: 2px auto 2px auto; /* top right bottom left */ padding: 2px 5px 2px 5px; /* top right bottom left */ background-color: transparent; text-align: center; font-size: 90%; clear: both; } div#abstract16j /* use this to justifty longer abstracts */ { width: 80%; margin-left: auto; margin-right: auto; margin-top: 2px; margin-bottom: 2px; padding: 2px 10px 10px 10px; /* top right bottom left */ background-color: transparent; text-align: justify; font-size: 90%; clear: both; } div#abstract16f /* use this to centre fancy abstracts */ { font-size: 16px; text-align: center; font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif; font-style: italic; width: auto; margin: 2px 10px 2px 10px; /* top right bottom left */ padding: 2px 5px 2em 5px; /* top right bottom left */ background-color: transparent; text-align: center; clear: both; } div#abstract16f span.fancy { font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif; font-style: italic; font-size: 36px; color: #0063ef; /* text color to match logo */ padding-right: 20px; } /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ /* page area */ /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ div#textarea16 { width: 100%; margin: 0 0 0 0; padding: 0 0 0 0; } article#textarea16 { width: 100%; margin: 0 0 0 0; padding: 0 0 0 0; } .text-content { width: 90%; margin-left: auto; margin-right: auto; margin-top: 15px; margin-bottom: 15px; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; background-color: #ffffff; box-shadow: 8px 8px 16px 8px rgba(0,0,0,0.2), -4px -4px 16px 4px rgba(0,0,0,0.2); box-sizing: border-box; } article.text700, article.text750, article.text800, article.text850, article.text900, article.text1000 { width: 90%; margin-left: auto; margin-right: auto; margin-top: 15px; margin-bottom: 15px; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; background-color: #ffffff; box-shadow: 8px 8px 16px 8px rgba(0,0,0,0.2), -4px -4px 16px 4px rgba(0,0,0,0.2); box-sizing: border-box; background-image: url('../image16/logo-blue-50.gif'); background-repeat: no-repeat; background-position: 20px 10px; } /* div has no logo at top left */ div.text700, div.text800, div.text850, div.text900 { width: 90%; margin-left: auto; margin-right: auto; margin-top: 15px; margin-bottom: 15px; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; background-color: #ffffff; box-shadow: 8px 8px 16px 8px rgba(0,0,0,0.2), -4px -4px 16px 4px rgba(0,0,0,0.2); box-sizing: border-box; background-image: none; } article.text700, div.text700 { max-width:700px; } article.text750, div.text750 { max-width:750px; } article.text800, div.text800 { max-width:800px; } article.text850, div.text850 { max-width:850px; } article.text900, div.text700 { max-width:900px; } article.text1000 { max-width:1000px; } article.text700 h1 { padding-left:55px; padding-right:55px; margin-top:10px; } /* Don't overap logo */ article.text700 #subheading p { max-width:95%; } article.text700 h2 { text-align:left; margin-bottom:5px; font-size:14pt; font-weight:100; } article.text700 h3 { text-align:left; margin-bottom:5px; font-size:13pt; font-weight:100; } article.text700 h4 { text-align:left; margin-bottom:5px; font-size:12pt; font-weight:400; } article.text700 p { text-align:justify; } article.text700 ul { text-align:left; } article.text750 h1 { padding-left:55px; padding-right:55px; margin-top:10px; } /* Don't overap logo */ article.text750 #subheading p { max-width:95%; } article.text750 h2 { text-align:left; margin-bottom:5px; font-size:14pt; font-weight:100; } article.text750 h3 { text-align:left; margin-bottom:5px; font-size:13pt; font-weight:100; } article.text750 h4 { text-align:left; margin-bottom:5px; font-size:12pt; font-weight:400; } article.text750 p { text-align:justify; } article.text750 ul { text-align:left; } article.text800 h1 { padding-left:55px; padding-right:55px; margin-top:10px; } /* Don't overap logo */ article.text800 #subheading p { max-width:95%; } article.text800 h2 { text-align:left; margin-bottom:5px; font-size:14pt; font-weight:100; } article.text800 h3 { text-align:left; margin-bottom:5px; font-size:13pt; font-weight:100; } article.text800 h4 { text-align:left; margin-bottom:5px; font-size:12pt; font-weight:400; } article.text800 p { text-align:justify; } article.text800 ul { text-align:left; } div.text800 h1 { padding-left:55px; padding-right:55px; margin-top:10px; } /* Don't overap logo */ div.text800 #subheading p { max-width:95%; } div.text800 h2 { text-align:left; margin-bottom:5px; font-size:14pt; font-weight:100; } div.text800 h3 { text-align:left; margin-bottom:5px; font-size:13pt; font-weight:100; } div.text800 h4 { text-align:left; margin-bottom:5px; font-size:12pt; font-weight:400; } div.text800 p { text-align:justify; } div.text800 ul { text-align:left; } article.text850 h1 { padding-left:55px; padding-right:55px; margin-top:10px; } /* Don't overap logo */ article.text850 #subheading p { max-width:95%; } article.text850 h2 { text-align:left; margin-bottom:5px; font-size:14pt; font-weight:100; } article.text850 h3 { text-align:left; margin-bottom:5px; font-size:13pt; font-weight:100; } article.text850 h4 { text-align:left; margin-bottom:5px; font-size:12pt; font-weight:400; } article.text850 p { text-align:justify; } article.text850 ul { text-align:left; } article.text900 h1 { padding-left:55px; padding-right:55px; margin-top:10px; } /* Don't overap logo */ article.text900 #subheading p { max-width:95%; } article.text900 h2 { text-align:left; margin-bottom:5px; font-size:14pt; font-weight:100; } article.text900 h3 { text-align:left; margin-bottom:5px; font-size:13pt; font-weight:100; } article.text900 h4 { text-align:left; margin-bottom:5px; font-size:12pt; font-weight:400; } article.text900 p { text-align:justify; } article.text900 ul { text-align:left; } article.text1000 h1 { padding-left:55px; padding-right:55px; margin-top:10px; } /* Don't overap logo */ article.text1000 #subheading p { max-width:95%; } article.text1000 h2 { text-align:left; margin-bottom:5px; font-size:14pt; font-weight:100; } article.text1000 h3 { text-align:left; margin-bottom:5px; font-size:13pt; font-weight:100; } article.text1000 h4 { text-align:left; margin-bottom:5px; font-size:12pt; font-weight:400; } article.text1000 p { text-align:justify; } article.text1000 ul { text-align:left; } .text-content h2 { text-align:left; margin-bottom:5px; font-size:14pt; font-weight:100; } .text-content h3 { text-align:left; margin-bottom:5px; font-size:13pt; font-weight:100; } .text-content h4 { text-align:left; margin-bottom:5px; font-size:12pt; font-weight:400; } .text-content p { text-align:justify; } .text-content ul { text-align:left; } .centred100 { width:100%; margin-left:0; margin-right:0; } .centred96 { width:96%; margin-left:auto; margin-right:auto; } .centred95 { width:95%; margin-left:auto; margin-right:auto; } .centred90 { width:90%; margin-left:auto; margin-right:auto; } div.infotileindex { width: 90%; margin-left: auto; margin-right: auto; margin-top: 15px; margin-bottom: 15px; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; background-color: #ffffff; box-shadow: 8px 8px 16px 8px rgba(0,0,0,0.2), -4px -4px 16px 4px rgba(0,0,0,0.2); box-sizing: border-box; /* Add a maxwidth to taste */ } div.infotileindex h2 { clear: left; text-align: left; color: gray; font-size: 14pt; font-weight: bold; text-shadow: 2px 2px 2px #c0c0c0; margin-bottom: 5px; padding-top: 20px; } /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ /* div, article max-width definitions */ /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ .maxwid560 { max-width:560px; } .maxwid600 { max-width:600px; } .maxwid640 { max-width:640px; } .maxwid700 { max-width:700px; } .maxwid750 { max-width:750px; } .maxwid800 { max-width:800px; } .maxwid850 { max-width:850px; } .maxwid900 { max-width:900px; } .maxwid-20pc { max-width:20%; } .maxwid-30pc { max-width:30%; } .maxwid-50pc { max-width:50%; } .maxwid-95pc { max-width:95%; } .maxwid-98pc { max-width:98%; } div.maxwid-4tiles { max-width:680px; } div.maxwid-5tiles { max-width:840px; } /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ /* viewport-dependent width definitions */ /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ div.separator16 { width:auto; font-size:1px; border-bottom:2px groove #0063ef; padding:0px; } div.separator16f { width:auto; font-size:1px; border-bottom:2px groove #0063ef; padding:0px; margin-bottom:15px;} /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ /* miscellaneous */ /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ .headingfont { color: #00008b; font-weight:bold; text-transform:uppercase; } .heading { color: #00008b; font-weight:bold; text-align:left; text-transform:uppercase; } .headingc { color: #00008b; font-weight:bold; text-align:center; text-transform:uppercase; } .subheading { color: #00008b; font-weight:bold; text-align:left; text-transform:capitalize; } .smallfont { font-size: 8pt; } .smallprint { font-size: 8pt; } .stdfont { font-size: 10pt; } .largeprint { font-size: 12pt; } .vlarge { font-size: 14pt; } .linespaced01 { line-height: 1.7em; } .centring { text-align:center; } .just { text-align:justify; } .just777 { text-align:justify; } .leftalign { text-align:left; } .rightalign { text-align:right; } .bold16 { font-weight:bold; } .para-space { } .smallfont { font-size: 8pt; } .moz { text-transform: capitalize; } div.para-space p { margin-top:10px; } ul.para-space li { margin-top:10px; } ul.para-space15 li { margin-top:15px; } div.just p { text-align:justify; } /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ /* download button */ /* with round corners and shadow */ /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ a.i-button { display: block; max-width: 166px; box-sizing: border-box; /* height: 80px; margin: 2px 0px 0px 2px; */ padding: 3%; border-width: 1px; border-style: solid; text-align: left; text-decoration: none; font-size: 8pt; border-radius: 4px; box-shadow: 5px 5px 5px #488080; } a.i-button:link { text-decoration:none; } a.i-button:visited { text-decoration:none; } a.i-button:active { text-decoration:none; } a.i-button:hover { text-decoration:none; margin:0px 2px 2px 0px; box-shadow:5% 5% 5% #488080; } a.i-button img { float:left; width:20%; max-width:31px; /*margin-left:6%;*/ margin-right:6%; margin-top:12%; margin-bottom:0; } a.i-button h6 { box-sizing: border-box; margin-top: 6%; margin-bottom: 6%; padding-left: 6%; text-align: left; font-weight: bold; font-size: 14pt; color: white; text-decoration: none; text-shadow: 1px 1px 1px rgba(255,255,255,0.6); } /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ /* rounded tiles */ /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ a.tile-round-shadow, a.tile-round-shadow-x { display: block; width: 166px; height: 80px; padding: 4px; border-width: 1px; border-style: solid; text-align: left; text-decoration: none; font-size: 8pt; margin: 2px 0px 0px 2px; border-radius: 4px 4px 4px 4px; box-shadow: 5px 5px 5px #488080; } a.tile-round-shadow:link { text-decoration:none; } a.tile-round-shadow:visited { text-decoration:none; } a.tile-round-shadow:active { text-decoration:none; } a.tile-round-shadow-x:link { text-decoration:none; } a.tile-round-shadow-x:visited { text-decoration:none; } a.tile-round-shadow-x:active { text-decoration:none; } a.tile-round-shadow:hover, a.tile-round-shadow-x:hover { text-decoration: none; margin: 0px 2px 2px 0px; box-shadow: 7px 7px 7px #488080; } a.tile-round-shadow img, a.tile-round-shadow-x img { float: left; margin-left: 3px; margin-right: 10px; } .tile-round-shadow h6, .tile-round-shadow-x h6 { margin-top: 15px; padding-left: 10px; text-align: left; font-weight: bold; font-size: 14pt; color: white; text-decoration: none; text-shadow: 1px 1px 1px rgba(255,255,255,0.6); } /* Information tiles */ a.infotile { display: block; float: left; width: 146px; height: 80px; margin-left: 2px; margin-right: 2px; margin-top: 2px; margin-bottom: 2px; padding: 4px; border-width: 1px; border-style: solid; text-align: left; text-decoration: none; font-size: 8pt; } a.infotile:link { text-decoration:none; } a.infotile:visited { text-decoration:none; } a.infotile:active { text-decoration:none; } a.infotile:hover { text-decoration:none; } a.infotile img { float: left; margin-left: 3px; margin-right: 6px; } a.infotile h2 { margin-top: 30px; text-align: left; font-weight: normal; font-size: 10pt; color: white; } a.infotile h3 { margin-top: 30px; text-align: left; font-weight: normal; font-size: 10pt; color: white; } a.infotile h6 { margin-top: 30px; text-align: left; font-weight: normal; font-size: 10pt; color: white; } /* Headings above tiles */ h2.tileheader { text-align: left; color: gray; font-weight: bold; text-shadow: 2px 2px 2px #c0c0c0; margin-bottom: 5px; } h2.tileheader a { color: gray; text-align: left; color: gray; font-weight: bold; text-decoration: none; text-shadow: 2px 2px 2px #c0c0c0; } h2.tileheader a:hover { color: #000000; text-decoration: underline; } /* Information tiles 3/4 size */ a.infotile75 { display: block; float: left; box-sizing: border-box; width: 100px; height: 60px; margin-left: 2px; margin-right: 2px; margin-top: 2px; margin-bottom: 2px; padding: 3px; border-width: 1px; border-style: solid; text-align: left; text-decoration: none; font-size: 6pt; } a.infotile75:link { text-decoration:none; } a.infotile75:visited { text-decoration:none; } a.infotile75:active { text-decoration:none; } a.infotile75:hover { text-decoration:none; } a.infotile75 img { float: left; /* Need width explicitly */ margin-left: 2px; margin-right: 4px; } a.infotile75 h2 { margin-top: 22px; text-align: left; font-weight: normal; font-size: 8pt; color: white; } a.infotile75 h3 { margin-top: 22px; text-align: left; font-weight: normal; font-size: 8pt; color: white; } a.infotile75 h6 { margin-top: 22px; text-align: left; font-weight: normal; font-size: 8pt; color: white; } /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ /* Buttons */ /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ a.btn400x40 { display: block; width: 60%; max-width: 400px; min-height: 40px; color: #000000; text-align: center; border: 1px black solid; padding-top: 18px; } a.btn400x40:link { color:#000000; font-weight:normal; text-decoration:none; } a.btn400x40:visited { color:#000000; font-weight:bold; text-decoration:none; } a.btn400x40:active { color:#000000; font-weight:bold; text-decoration:none; } a.btn400x40:hover { color:#000000; font-weight:bold; text-decoration:underline; } .btngreygrad { background: #e0e0e0; background: linear-gradient( #f8f8f8, #e0e0e0 ); } .btnshadow { box-shadow:3px 3px 3px rgba(192,192,192,0.5); } /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ /* Front page */ /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ div.fp-container { width: 90%; margin-left: auto; margin-right: auto; padding-top: 10px; background-color: transparent; } /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ /* Front page */ /* music example: outer - inner */ /* music-picture-panel */ /* div */ /* div */ /* music-picture-image */ /* img */ /* */ /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ div#music-picture-panel { float: right; width: 60%; border: 2px #dddddd solid; margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 10px; padding: 0; box-sizing: border-box; background-color: #e0f0ff; } div#music-picture-image { width: 100%; } img#music { border: 1px solid blue; } div.fp16-panel { border: 1px solid gray; padding: 10px; background-color: #ffffff; box-sizing: border-box; } div.fp16-eval { float: right; width: 35%; max-width: 294px; margin-left: 0px; margin-right: 3%; margin-top: 0px; margin-bottom: 10px; background-color: antiquewhite; } div.fp16-reader { float: right; width: 35%; max-width: 294px; margin-left: 0px; margin-right: 3%; margin-top: 0px; margin-bottom: 10px; background-color: antiquewhite; } div.fp16-forum { float: right; width: 35%; max-width: 294px; margin-left: 0px; margin-right: 3%; margin-top: 0px; margin-bottom: 10px; background-color: #e8ffe8; } div.fp16-view { float: right; width: 98%; margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 10px; background-color: #f4fff4; } /*--------------------------------------------------------------------------------------*/ /* News */ /*--------------------------------------------------------------------------------------*/ div.mozartera { width:100%; margin-left:0px; margin-right:0px; } div.mozartera h2 { margin-left:0px; margin-top:20px; text-align:left; } div.mozart17era h2 { color:#a02040; } div.mozart16era h2 { color:#6000e0; } div.mozart15era h2 { color:#03c0c0; } div.mozart14era h2 { color:#208020; } div.mozart13era h2 { color:#c08040; } div.mozart12era h2 { color:#c04040; } div.mozart11era h2 { color:#ff4000; } div.mozart10era h2 { color:#ff0000; } div.mozart09era h2 { color:#ec0000; } div.mozart08era h2 { color:#da0020; } div.mozart07era h2 { color:#c80040; } div.mozart06era h2 { color:#b60060; } div.mozart05era h2 { color:#a40080; } div.mozart04era h2 { color:#9200a0; } div.mozart03era h2 { color:#8080c0; } div.newsentry { margin-top:6px; padding-left: 0px; padding-right: 0px; padding-bottom:10px; } div.boxednewsentry { border: 1px gray solid; } div#textarea16 div.newsentry h3 { margin-left:3%; margin-bottom:15px; font-size:14pt; background-color:transparent; } .newsentry p { margin-left:3%; margin-right:3%; text-align:justify; } .newsentry ul { margin-left:0%; margin-right:2%; text-align:left; } .newsentry ol { margin-left:0%; margin-right:2%; text-align:left; } .newsentry table { margin-left:3%; font-size:12pt; background-color:transparent; color:#000000; } span.fixref { color:#80a0ff; font-size:small; } /*--------------------------------------------------------------------------------------*/ /* sitemap (schematic) */ /*--------------------------------------------------------------------------------------*/ table.sm16 { border-collapse:collapse; width:500px; margin-left:auto; margin-right:auto; max-width:95%; } table.sm16 td { font-weight:bold; font-size:12pt; color:#000000; } /* table.sm16 th { width:50px; } */ table.sm16 td a { font-weight:bold; font-size:12pt; color:#000000; } table.sm16 td a.hover { color:#808080; } td.w_0 { border: none; } td.w_t { border-top: 4px solid #404040; } td.w_r { border-right: 4px solid #404040; } td.w_b { border-bottom: 4px solid #404040; } td.w_l { border-left: 4px solid #404040; } td.w_tl { border-top: 4px solid #404040; border-left: 4px solid #404040;} td.w_tr { border-top: 4px solid #404040; border-right: 4px solid #404040;} td.w_bl { border-bottom: 4px solid #404040; border-left: 4px solid #404040;} td.w_br { border-bottom: 4px solid #404040; border-right: 4px solid #404040;} td.r_us { background-color: #ffc080; } td.r_mz { background-color: #8080ff; } td.r_su { background-color: #80ff80; } td.r_hm { background-color: #c0c0c0; } td.r_dl { background-color: #c04040; } td.r_th { background-color: #60a060; } td.r_sh { background-color: #ffff00; } td.db { font-weight:bold; background-color:transparent; } /*--------------------------------------------------------------------------------------*/ /* Table cells with partial borders */ /*--------------------------------------------------------------------------------------*/ td.tlbr { border-top: 1px gray solid; border-left: 1px gray solid; border-right: 1px gray solid; border-bottom: 1px gray solid; } td.tl0 { border-top: 1px gray solid; border-left: 1px gray solid; border-right: 1px gray solid; } td.tr0 { border-top: 1px gray solid; border-left: 1px gray solid; border-right: 1px gray solid; } td.bl0 { border-left: 1px gray solid; border-right: 1px gray solid; border-bottom: 1px gray solid; } td.br0 { border-left: 1px gray solid; border-right: 1px gray solid; border-bottom: 1px gray solid; } td.tlr0 { border-top: 1px gray solid; border-left: 1px gray solid; border-right: 1px gray solid; } td.blr0 { border-left: 1px gray solid; border-right: 1px gray solid; border-bottom: 1px gray solid; } /*--------------------------------------------------------------------------------------*/ /* Tiled index pages */ /*--------------------------------------------------------------------------------------*/ div.tilearea { float:left; } div.tilecols1 { width:162px; } div.tilecols2 { width:324px; } div.tilecols3 { width:486px; } div.ta-width350 { width:350px; } div.tileplustext { float:left; } div.tilearea h2 { color:#005ED2; text-align:left; margin-left:2px; margin-bottom:2px; font-weight:100;} div.tileplustext h2 { color:#005ED2; text-align:left; margin-left:2px; margin-bottom:2px; font-weight:100;} .mr00 { margin-right:0px; } .mr10 { margin-right:8px; } .mr26 { margin-right:24px; } .mr27 { margin-right:25px; } .mr40 { margin-right:38px; } .m-col-info-01 { margin-left:13px; margin-right:13px; } .m-col-info-02 { margin-left:13px; margin-right:13px; } .m-col-info-03 { margin-left:13px; margin-right:13px; } .m-col-info-04 { margin-left:13px; margin-right:13px; } .m-col-info-05 { margin-left:13px; margin-right:11px; } .m-col-info-06 { margin-left:11px; margin-right:11px; } .m-col-info-07 { margin-left:11px; margin-right:0px; } .m-col-info-08 { margin-left:13px; margin-right:13px; } .m-col-info-09 { margin-left:13px; margin-right:13px; } /*--------------------------------------------------------------------------------------*/ /* Features */ /*--------------------------------------------------------------------------------------*/ div#mzlist { font-size:8pt; padding-top:0px; } div#mzlist a { display: block; border: 1px gray solid; padding: 3px; margin: 3px 0px 3px 0px; width: 16px; float: left; } /* add lighter blue here */ div#mzlist a.pas9 { background-color: #F0F0FF; } div#mzlist a.pas8 { background-color: #E8E8FF; } div#mzlist a.pas7 { background-color: #E0E0FF; } div#mzlist a.pas6 { background-color: #D8D8FF; } div#mzlist a.pas5 { background-color: #D0D0FF; } div#mzlist a.pas4 { background-color: #C8C8FF; } div#mzlist a.pas3 { background-color: #C0C0FF; } div#mzlist a.pas2 { background-color: #B8B8FF; } div#mzlist a.pas1 { background-color: #B0B0FF; } div#mzlist a.crnt { background-color: #000000; color:#FFFFFF; } div#mzlist a.fut1 { background-color: #FFFFF0; } div#mzlist a.fut2 { background-color: #FFFFE8; } div#mzlist a.fut3 { background-color: #FFFFE0; } div#mzlist a.fut4 { background-color: #FFFFD9; } div#mzlist a.fut5 { background-color: #FFFFD0; } div#mzlist a.fut6 { background-color: #FFFFB8; } div#mzlist a.fut7 { background-color: #FFFFB0; } div#mzlist a.fut8 { background-color: #FFFFA8; } div#mzlist a.fut9 { background-color: #FFFFA0; } div#mzlist a.futA { background-color: #FFFF98; } /*--------------------------------------------------------------------------------------*/ /* info-about-features12 fb=features box */ /*--------------------------------------------------------------------------------------*/ h2.fb-fullwidth-head { text-align: left; margin-left: 3%; margin-top: 10px; margin-bottom: 15px; clear: left; } div.fb-example { float: left; box-sizing: border-box; margin-left: 1%; margin-right: 1%; margin-top: 3px; margin-bottom: 3px; padding-left: 10px; padding-right: 10px; border: 1px gray solid; background-color: white; } div.fb-half { width: 48%; } div.fb-full { width: 98%; } div.fb-halfwidth { float: left; box-sizing: border-box; width: 48%; margin-left: 1%; margin-right: 1%; margin-top: 3px; margin-bottom: 3px; padding-left: 10px; padding-right: 10px; border: 1px gray solid; background-color: white; } div.fb-fullwidth { box-sizing: border-box; width: 98%; margin-left: 1%; margin-right: 1%; margin-top: 3px; margin-bottom: 3px; padding-left: 10px; padding-right: 10px; border: 1px gray solid; background-color: white; } div.fb-fullwidth-notice { box-sizing: border-box; width: 98%; margin-left: 1%; margin-right: 1%; margin-top: 3px; margin-bottom: 3px; padding-left: 10px; padding-right: 10px; padding-top: 5px; padding-bottom: 5px; border: 1px gray solid; background-color: antiquewhite; } div.fb-example h2 { text-align:center; margin-top:2px; } div.fb-halfwidth h2 { text-align:center; margin-top:2px; } div.fb-fullwidth h2 { text-align:center; margin-top:2px; } img.fbimgright { float: right; margin-left: 10px; } img.fbimgleft { float: left; margin-right: 30px; } .fb-h-200 { height:200px; } .fb-h-250 { height:250px; } .fb-h-280 { height:280px; } .fb-h-300 { height:300px; } .fb-h-320 { height:320px; } .fb-h-400 { height:400px; } /*--------------------------------------------------------------------------------------*/ /* support */ /*--------------------------------------------------------------------------------------*/ table.sp-table { width: 90%; max-width: 600px; margin-left: auto; margin-right: auto; margin-bottom: 30px; margin-top: 10px; border: 1px #000080 solid; } table.sp-table td { box-sizing: border-box; padding: 2%; vertical-align: top; text-align: left; } table.sp-table td h5 { padding-top:0; margin-top:0; } .btngreygrad { background:#e0e0e0; background:linear-gradient( #f8f8f8, #e0e0e0 ); } .btnshadow { box-shadow:3px 3px 3px rgba(192,192,192,0.5); } .btndownload { display:block; width:90%; max-width:300px; color:#000000; text-align:center; border:1px black solid; padding-top:18px; padding-bottom:18px;} a.btndownload:link { color:#000000; font-weight:normal; text-decoration:none; } a.btndownload:visited { color:#000000; font-weight:bold; text-decoration:none; } a.btndownload:active { color:#000000; font-weight:bold; text-decoration:none; } a.btndownload:hover { color:#000000; font-weight:bold; text-decoration:underline; } /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ /* download language modules */ /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ table#table-language-module { padding-left:6%; padding-right:6%; } table#table-language-module tr td { vertical-align:50%; } a.tile-lang { display: block; float: left; width: 24px; height: 24px; color: white; background-color: purple; background-image: url('../image12/download1small.gif'); background-repeat: no-repeat; background-position: center center; border-radius: 3px; padding: 0px; box-shadow: 3px 3px 3px slategray; text-decoration: none; } td.wbord_l { text-align:left; } td.wbord_r { text-align:left; } td.wbord_0 { text-align:left; } img.flag { width:16px; height:11px; padding:0; margin-top:auto; margin-bottom:auto; } img.sq { width:13px; height:13px; } img.ribbon { border:1px solid black; box-shadow:5px 5px 5px #c0c0c0; } img.smbls { border:1px solid black; box-shadow:5px 5px 5px #c0c0c0; float:left; margin:5px; } .bk-blue-2-0-m { background-image:url(image10/bk-blue-2-0-m.png); background-repeat:repeat-y; background-color:#d0f0ff; /* bk-blue0 */ } .bk-blue-2-0-n { background-image:url(image10/bk-blue-2-0-n.png); background-repeat:repeat-y; background-color:#d0f0ff; /* bk-blue0 */ } .bk-green-2-0-n { background-image:url(image10/bk-green-2-0-n.png); background-repeat:repeat-y; background-color:#d8ffd8; /* bk-green0 */ } .bk-orange-2-0-n { background-image:url(image10/bk-orange-2-0-n.png); background-repeat:repeat-y; background-color:#ffc887; /* bk-orange0 */ } .bk-purple-2-0-n { background-image:url(image10/bk-purple-2-0-n.png); background-repeat:repeat-y; background-color:#e8c8ff; /* bk-purple0 */ } .bk-grey-2-0-n { background-image:url(image10/bk-grey-2-0-n.png); background-repeat:repeat-y; background-color:#d8d8d8; /* bk-grey0 */ } div.bk-blue-2-0-n h2 { color: #00008b; } /* tx-blue */ div.bk-green-2-0-n h2 { color: #008b00; } /* tx-green */ div.bk-purple-2-0-n h2 { color: #5e015f; } /* tx-purple */ div.bk-orange-2-0-n h2 { color: #e08000; } /* tx-orange */ div.bk-grey-2-0-n h2 { color: #000000; } /*--------------------------------------------------------------------------------------*/ /* shop */ /*--------------------------------------------------------------------------------------*/ table.shopguide { width:90%; max-width:500px; margin-left:auto; margin-right:auto; margin-bottom:10px; } td.shopguide { font-size:7pt; color:#606060; vertical-align:middle; text-align:center; } td.guidearrow { font-size:7pt; color:#606060; vertical-align:middle; text-align:center; width:11px; } td#shopguideactive { font-weight:bold; color:#0063ef; } /* logo-blue */ div.panel-shop { padding:0px; border-radius:6px; } div.shop-build-L { float:left; text-align:left; } div.shop-build-L p { height:20px; text-align:left; } div.shop-build-R { float:right; text-align:left; } div.shop-build-R p { height:20px; text-align:left; } div.columnleftshop { float:left; width:180px; margin:0; padding:0; box-sizing:border-box; } div.columnrightshop { float:right; width:470px; margin:0; padding:0; box-sizing:border-box; } div.columnleftshop div.shopproductbox { float: left; width: 152px; margin-left: 0px; margin-right: 20px; margin-top: 5px; margin-bottom: 10px; } div.columnleftshop div.panel-rounded-6 { float: left; width: 152px; margin-left: 0px; margin-right: 20px; margin-top: 5px; margin-bottom: 10px; padding-left: 2px; padding-right: 2px; } div.panel-shop-0 { padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; border-top-left-radius: 0px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; margin-top: 0px; } div.shoptabholder { text-align: left; padding: 0px; margin-bottom: 0px; height: 2em; } div.shoptab { float: left; border-top-left-radius: 4px; border-top-right-radius: 4px; margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; height: 100%; vertical-align: middle; } div.shoptab p { margin-left: 0px; margin-top: 0px; padding-left: 0px; padding-right: 0px; padding-top: 10px; padding-bottom: 10px; font-size: 8pt; } div.shoptab a { margin-left: 10px; margin-right: 10px; text-decoration: none; padding-top: 10px; padding-bottom: 10px; } div.shoptab a:link { color:#0063ef; font-weight:normal; text-decoration:none; } div.shoptab a:visited { color:#0063ef; font-weight:normal; text-decoration:none; } div.shoptab a:active { color:#0063ef; font-weight:normal; text-decoration:none; } div.shoptab a:hover { color:#404040; font-weight:normal; text-decoration:none; } div.shopnote { margin-top: 5px; font-size: 8pt; line-height: 10pt; text-align: left; } td.inote { width: 20px; vertical-align: top; font-size:10pt; } td.snote { width: auto; vertical-align: top; font-size:10pt; } .shoperrorheader { background-image: url("shop/shopfiles/redGrad.jpg"); background-repeat: repeat-x; background-position: top left; font-size: 12px; text-align: center; margin-top: 20px; margin-bottom: 20px; padding: 12px; border: #daa7a6 1px solid; } .shopaddresstable { width: 100%; border: 0px none; border-collapse: collapse; } .shopaddressprompt { color: #575C53; font-size: 10pt; font-weight: normal; text-align: right; box-sizing: border-box; width: 30%; } .shopaddressdata { padding-left: 3px; padding-right: 3px; font-size: 10pt; box-sizing: border-box; width: 70%; } td.shopaddressdata input { width: 100%; box-sizing: border-box; } .shopformtable { width: 100%; border: 0px none; border-collapse: collapse; } .shopformtable td { border-top: 0px none; border-right: 0px none; border-left: 0px none; border-bottom: 0px none; padding: 0px; vertical-align: top; } .shopformfooter { margin: 20px 15px 0px 15px; /* top right bottom left */ width: auto; } .shopfieldlabel { color:#575C53; font-size:10pt; font-weight:normal; text-align: right; width: 30%; } .inputBoxDisable { background-color: #dddddd; border: 1px solid #999999; } .inputBoxEnable { background-color: #ffffff; border: 1px solid #999999; } .shopfielddata { width: 70%; font-size:10pt; } .shopwarning { color:#ff0000; font-weight:bold; } .bk-stdblue { background-color:#e0f0ff; } div.shop-currency-000 { float:left; width:80px; height:49px; margin:0px; padding:0px; } div.shop-currency-box { float:right; width:80px; border-radius:4px; margin:0px; padding:0px; } div.shop-currency-drop { width:74px; margin-left:auto; margin-right:auto; } table.purchase { box-sizing:border-box; width:100% max-width:410px; margin-left:auto; margin-right:auto; text-align:left; } p.shop-currency-prompt { color:#404040; text-align:center; font-weight:normal; font-size:8pt; } /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ /* Shop - customer details */ /* article.customer-details shares properties with text800 etc */ /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ article#customer-details { width: 90%; max-width: 900px; margin-left: auto; margin-right: auto; margin-top: 15px; margin-bottom: 15px; padding-top: 10px; padding-bottom: 10px; padding-left: 0; padding-right: 0; background-color: #ffffff; box-shadow: 8px 8px 16px 8px rgba(0,0,0,0.2), -4px -4px 16px 4px rgba(0,0,0,0.2); box-sizing: border-box; background-image: url('../image16/logo-blue-50.gif'); background-repeat: no-repeat; background-position: 20px 10px; } div.columnCustomer { float: left; width: 50%; margin: 0px; padding: 0px; min-width: 350px; box-sizing: border-box; } div.panel-shop-customer { box-sizing: border-box; width: 92%; max-width: 350px; margin-left: auto; margin-right: auto; padding: 0px; border-radius: 6px; } /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ /* Shop - order confirmation */ /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ article#order-confirmation { width: 90%; max-width: 700px; margin-left: auto; margin-right: auto; margin-top: 15px; margin-bottom: 15px; padding-top: 10px; padding-bottom: 10px; padding-left: 0; padding-right: 0; background-color: #ffffff; box-shadow: 8px 8px 16px 8px rgba(0,0,0,0.2), -4px -4px 16px 4px rgba(0,0,0,0.2); box-sizing: border-box; background-image: url('../image16/logo-blue-50.gif'); background-repeat: no-repeat; background-position: 20px 10px; } td.orderrow1 { font-weight:bold; border-bottom:1px solid black; } .ordercol0 { width:18%; max-width:100px; color:#0063ef; text-align:center; font-weight:bold; } /* logo-blue */ td.ordercol1 { width:250px; background-color:#ffffff; text-align:left; padding-left:10px; } td.ordercol2 { width: 60px; background-color:#ffffff; text-align:right; } td.ordercol3 { width: 60px; background-color:#ffffff; text-align:center; } td.ordercol4 { width: 60px; background-color:#ffffff; text-align:right; padding-right:10px; } td.ordercol4 p { padding-bottom:0px; } /* override standard paragraph spacing */ td.addrcol1 { width:140px; background-color:#ffffff; text-align:left; vertical-align:top; padding-left:10px; } td.addrcol2 { width:300px; background-color:#ffffff; text-align:left; vertical-align:top; } /*--------------------------------------------------------------------------------------*/ /* misc image data */ /*--------------------------------------------------------------------------------------*/ img#sax9912-jpg { width:781px; max-width:98%; margin-left:auto; margin-right:auto; } img#extwinkle-gif { width:592px; max-width:98%; margin-left:auto; margin-right:auto; } img#ydbparts-gif { width:488px; max-width:98%; margin-left:auto; margin-right:auto; } img#Take5Theme1-gif { width:638px; max-width:98%; margin-left:auto; margin-right:auto; } img#Take5Theme2-gif { width:604px; max-width:98%; margin-left:auto; margin-right:auto; } img#closedcylinder-gif { width:322px; height:394px; } img#closedcone-gif { width:332px; height:402px; } img#opencylinder-gif { width:322px; height:394px; } img#opencone-gif { width:332px; height:427px; } img#screen01-gif { width:434px; max-width:98%; margin-left:auto; margin-right:auto; } img#screen02-gif { width:507px; max-width:98%; margin-left:auto; margin-right:auto; } img#screen03-gif { width:370px; max-width:98%; margin-left:auto; margin-right:auto; } img#screen04-gif { width:420px; max-width:98%; margin-left:auto; margin-right:auto; } img#screen05-gif { width:504px; max-width:98%; margin-left:auto; margin-right:auto; } img#screen06-gif { width:506px; max-width:98%; margin-left:auto; margin-right:auto; } img#screen07-gif { width:441px; max-width:98%; margin-left:auto; margin-right:auto; } /* img#screen08-gif { width:417px; max-width:98%; margin-left:auto; margin-right:auto; } */ img#screen09-gif { width:417px; max-width:98%; margin-left:auto; margin-right:auto; } img#screen10-gif { width:323px; max-width:98%; margin-left:auto; margin-right:auto; } img#languagedlg2-gif { width:500px; max-width:98%; margin-left:auto; margin-right:auto; } img#menu-es-gif { width:541px; max-width:98%; margin-left:auto; margin-right:auto; } img#phraseprops2-gif { width:685px; max-width:98%; } img#phraseMarkExample-gif { width:618px; max-width:98%; } img#rehearsalmarks-gif { width:416px; max-width:98%; } img#renumber3-gif { width:659px; max-width:98%; } img#shapenotes2-gif { width:421px; max-width:98%; } img#mum1947-jpg { width:248px; max-width:50%; } object#vid02 { width:462pt; height:525pt; } object#vid03 { width:462pt; height:739pt; } object#vid05 { width:462pt; height:349pt; } object#vid07 { width:462pt; height:401pt; } object#vid08 { width:462pt; height:471pt; } object#vid09 { width:462pt; height:417pt; } object#vid11 { width:462pt; height:540pt; } /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ /* buttons for play-back */ /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ button.play { width: 16px; height: 15px; background-image: url('../images/btnplay1.gif'); background-repeat: no-repeat; background-origin: border-box; padding: 0px; border-width: 0px; margin: 0px; } button.stop { width: 16px; height: 15px; background-image: url('../images/btnstop1.gif'); background-repeat: no-repeat; background-origin: border-box; padding: 0px; border-width: 0px; margin: 0px; } /*==================================================================================*/ /* Coloured tiles on different media */ /*==================================================================================*/ @media screen { a.it-spacer { background-color:#ffffff; color:black; border-color:#ffffff; } a.it-gold { background-color:#fd9c03; color:white; border-color:#fd9c03; } a.it-gold:hover { background-color:#fbae35; color:white; border-color:#fd9c03; } a.it-green { background-color:#008000; color:white; border-color:#008000; } a.it-green:hover { background-color:#20A020; color:white; border-color:#008000; } a.it-green1 { background-color:#009600; color:white; border-color:#009600; } a.it-green1:hover { background-color:#20A020; color:white; border-color:#008000; } a.it-green2 { background-color:#006400; color:white; border-color:#006400; } a.it-green2:hover { background-color:#008000; color:white; border-color:#006400; } a.it-navy { background-color:navy; color:white; border-color:blue; } a.it-navy:hover { background-color:blue; color:white; border-color:blue; } a.it-black { background-color:#000000; color:white; border-color:#080808; } a.it-black:hover { background-color:#080808; color:white; border-color:#080808; } a.it-brown { background-color:#800000; color:white; border-color:#800000; } a.it-brown:hover { background-color:#804040; color:white; border-color:#800000; } a.it-brown1 { background-color:#974325; color:white; border-color:#974325; } a.it-brown1:hover { background-color:#C96F4F; color:white; border-color:#974325; } a.it-brown2 { background-color:#462424; color:white; border-color:#462424; } a.it-brown2:hover { background-color:#800000; color:white; border-color:#462424; } a.it-red { background-color:#E00000; color:white; border-color:#E00000; } a.it-red:hover { background-color:#FF2020; color:white; border-color:#E00000; } a.it-turq { background-color:#005E8D; color:white; border-color:#005E8D; } a.it-turq:hover { background-color:#0686C8; color:white; border-color:#005E8D; } a.it-blue { background-color:#005ED2; color:white; border-color:#005ED2; } a.it-blue:hover { background-color:#51A3FF; color:white; border-color:#005ED2; } a.it-skyblue { background-color:#6DA0D5; color:white; border-color:#6DA0D5; } a.it-skyblue:hover { background-color:#8EBBE4; color:white; border-color:#6DA0D5; } a.it-blue2 { background-color:#10315A; color:white; border-color:#10315A; } a.it-blue2:hover { background-color:#26568C; color:white; border-color:#10315A; } a.it-mauve { background-color:#8080FF; color:white; border-color:#8080FF; } a.it-mauve:hover { background-color:#B0B0f8; color:white; border-color:#8080FF; } a.it-orange { background-color:#EA5E21; color:white; border-color:#B0B0E0; } a.it-orange:hover { background-color:#FB9D73; color:white; border-color:#B0B0E0; } a.it-purp0 { background-color:#B0B0E0; color:white; border-color:#B0B0E0; } a.it-purp0:hover { background-color:#D8D8FF; color:white; border-color:#B0B0E0; } a.it-purp1 { background-color:#800080; color:white; border-color:#800080; } a.it-purp1:hover { background-color:#A227A3; color:white; border-color:#800080; } a.it-purp2 { background-color:#5F497A; color:white; border-color:#5F497A; } a.it-purp2:hover { background-color:#8161AD; color:white; border-color:#5F497A; } a.it-grey { background-color:#606060; color:white; border-color:#606060; } a.it-grey:hover { background-color:#C0C0C0; color:white; border-color:#606060; } /* ** Shades of blue hue=151, sat=255, for diferent lightness ** lighness colour ** 240 #E1EEFF ** [235 #D7E8FF] ** 225 #C3DEFF ** 210 #A5CDFF ** 195 #87BDFF ** 180 #69ACFF ** 165 #4B9CFF ** 150 #2D8BFF ** 135 #0F7BFF ** 120 #006CFF ** 105 #005ED2 ** 90 #0051B4 ** 75 #004396 ** 60 #003678 */ a.it-blue-mz17 { background-color:#004396; color:white; border-color:#004396; } a.it-blue-mz17:hover { background-color:#51A3FF; color:white; border-color:#004396; } a.it-blue-mz16 { background-color:#0051B4; color:white; border-color:#0051B4; } a.it-blue-mz16:hover { background-color:#51A3FF; color:white; border-color:#004396; } a.it-blue-mz15 { background-color:#005ED2; color:white; border-color:#005ED2; } a.it-blue-mz15:hover { background-color:#51A3FF; color:white; border-color:#004396; } a.it-blue-mz14 { background-color:#006CFF; color:white; border-color:#006CFF; } a.it-blue-mz14:hover { background-color:#51A3FF; color:white; border-color:#004396; } a.it-blue-mz13 { background-color:#0F7BFF; color:white; border-color:#0F7BFF; } a.it-blue-mz13:hover { background-color:#51A3FF; color:white; border-color:#004396; } a.it-blue-mz12 { background-color:#2D8BFF; color:white; border-color:#2D8BFF; } a.it-blue-mz12:hover { background-color:#51A3FF; color:white; border-color:#004396; } a.it-blue-mz11 { background-color:#4B9cFF; color:white; border-color:#4B9CFF; } a.it-blue-mz11:hover { background-color:#51A3FF; color:white; border-color:#004396; } a.it-blue-mz10 { background-color:#69ACFF; color:white; border-color:#69ACFF; } a.it-blue-mz10:hover { background-color:#51A3FF; color:white; border-color:#004396; } a.it-blue-mz09 { background-color:#87BDFF; color:white; border-color:#87BDFF; } a.it-blue-mz09:hover { background-color:#51A3FF; color:white; border-color:#004396; } a.it-blue-mz08 { background-color:#A5CDFF; color:white; border-color:#A5CDFF; } a.it-blue-mz08:hover { background-color:#51A3FF; color:white; border-color:#004396; } a.it-blue-mz07 { background-color:#C3DEFF; color:white; border-color:#C3DEFF; } a.it-blue-mz07:hover { background-color:#51A3FF; color:white; border-color:#004396; } a.it-blue-mz06 { background-color:#D7E8FF; color:white; border-color:#D7E8FF; } a.it-blue-mz06:hover { background-color:#51A3FF; color:white; border-color:#004396; } a.it-blue-mz05 { background-color:#D7E8FF; color:white; border-color:#D7E8FF; } a.it-blue-mz05:hover { background-color:#51A3FF; color:white; border-color:#004396; } a.it-blue-mz04 { background-color:#D7E8FF; color:white; border-color:#D7E8FF; } a.it-blue-mz04:hover { background-color:#51A3FF; color:white; border-color:#004396; } a.it-blue-mz03 { background-color:#D7E8FF; color:white; border-color:#D7E8FF; } a.it-blue-mz03:hover { background-color:#51A3FF; color:white; border-color:#004396; } /* -------------------------- */ a.it-purp-mz17 { background-color:#8000F0; color:white; border-color:#8000F0; } a.it-purp-mz17:hover { background-color:#A57BF3; color:white; border-color:#380793; } a.it-purp-mz14 { background-color:#380793; color:white; border-color:#380793; } a.it-purp-mz14:hover { background-color:#A57BF3; color:white; border-color:#380793; } a.it-purp-mz13 { background-color:#5811D8; color:white; border-color:#5811D8; } a.it-purp-mz13:hover { background-color:#A57BF3; color:white; border-color:#5811D8; } a.it-purp-mz12 { background-color:#8543FF; color:white; border-color:#8543FF; } a.it-purp-mz12:hover { background-color:#A57BF3; color:white; border-color:#8543FF; } a.it-purp-mz11 { background-color:#A060FF; color:white; border-color:#A060FF; } a.it-purp-mz11:hover { background-color:#A57BF3; color:white; border-color:#A060FF; } a.it-purp-mz10 { background-color:#B787FF; color:white; border-color:#B787FF; } a.it-purp-mz10:hover { background-color:#A57BF3; color:white; border-color:#A060FF; } a.it-purp-mz09 { background-color:#C797FF; color:white; border-color:#C797FF; } a.it-purp-mz09:hover { background-color:#A57BF3; color:white; border-color:#A060FF; } a.it-purp-mz03 { background-color:#C59FFF; color:white; border-color:#C59FFF; } a.it-purp-mz03:hover { background-color:#A57BF3; color:white; border-color:#A060FF; } a.it-purp-mz02 { background-color:#C59FFF; color:white; border-color:#C59FFF; } a.it-purp-mz02:hover { background-color:#A57BF3; color:white; border-color:#A060FF; } } @media print { a.it-spacer { background-color:#ffffff; color:black; border-color:#ffffff; } a.it-gold { background-color:transparent; color:black; border-color:#fd9c03; } a.it-green { background-color:transparent; color:black; border-color:#008000; } a.it-green2 { background-color:transparent; color:black; border-color:#006400; } a.it-navy { background-color:transparent; color:black; border-color:blue; } a.it-brown { background-color:transparent; color:black; border-color:#800000; } a.it-brown1 { background-color:transparent; color:black; border-color:#974325; } a.it-brown2 { background-color:transparent; color:black; border-color:#462424; } a.it-red { background-color:transparent; color:black; border-color:#E00000; } a.it-turq { background-color:transparent; color:black; border-color:#005E8D; } a.it-blue { background-color:transparent; color:black; border-color:#005ED2; } a.it-skyblue { background-color:transparent; color:black; border-color:#6DA0D5; } a.it-blue2 { background-color:transparent; color:black; border-color:#10315A; } a.it-mauve { background-color:transparent; color:black; border-color:#8080FF; } a.it-purp0 { background-color:transparent; color:black; border-color:#B0B0E0; } a.it-purp1 { background-color:transparent; color:black; border-color:#800080; } a.it-purp2 { background-color:transparent; color:black; border-color:#5F497A; } a.it-grey { background-color:transparent; color:black; border-color:#606060; } a.it-blue-mz15 { background-color:transparent; color:black; border-color:#004FA8; } a.it-blue-mz14 { background-color:transparent; color:black; border-color:#004FA8; } a.it-blue-mz13 { background-color:transparent; color:black; border-color:#004FA8; } a.it-blue-mz12 { background-color:transparent; color:black; border-color:#005ED2; } a.it-blue-mz11 { background-color:transparent; color:black; border-color:#005ED2; } a.it-blue-mz10 { background-color:transparent; color:black; border-color:#006CF0; } a.it-blue-mz09 { background-color:transparent; color:black; border-color:#0F7BFF; } a.it-blue-mz08 { background-color:transparent; color:black; border-color:#2D8BFF; } a.it-blue-mz07 { background-color:transparent; color:black; border-color:#4B9CFF; } a.it-blue-mz06 { background-color:transparent; color:black; border-color:#69ACFF; } a.it-purp-mz11 { background-color:transparent; color:black; border-color:#005ED2; } a.it-purp-mz10 { background-color:transparent; color:black; border-color:#006CF0; } a.it-purp-mz09 { background-color:transparent; color:black; border-color:#0F7BFF; } } /*==================================================================================*/ /* Responsive to smaller viewing area width: */ /*==================================================================================*/ /* Horizontal displacement of drop-down L/R/C */ /* ZONE\ home mozart downld support shop theory */ /* CYAN: C C C C C C 'WHITE' C C C C C < DARKRED: R R C C C L RED: R R C C L | C ORANGE: R R C C C C YELLOW: R R C L | C C GREEN: R R L | R L | C BLUE: R R L | C R L */ @media all and (max-width: 777px) { div#stripe { background-color:antiquewhite; } /* menu is 1 row, but keep articles drop-down on page */ div#ddn-articles { left: -195px; } article#customer-details { width:100%; box-shadow:none; margin-bottom:0; } article#order-confirmation { width:100%; box-shadow:none; } article.text700 { width:100%; box-shadow:none; margin-bottom:0; } article.text750 { width:100%; box-shadow:none; margin-bottom:0; } article.text800 { width:100%; box-shadow:none; margin-bottom:0; } article.text850 { width:100%; box-shadow:none; margin-bottom:0; } article.text900 { width:100%; box-shadow:none; margin-bottom:0; } article.text1000 { width:100%; box-shadow:none; margin-bottom:0; } div.infotileindex { width:100%; box-shadow:none; margin-bottom:0; } div.text-content { width:100%; box-shadow:none; margin-bottom:0; } div.columnCustomer { width:100%; } div.fp16-forum { clear:both; float:right; width:98%; max-width:98%; margin-top:10px; margin-left:0; margin-right:0; } .just777 { text-align:left; } fp16-eval p.just777 { text-align:left; } fp16-reader p.just777 { text-align:left; } } @media all and (max-width: 699px) { div#stripe { background-color:gray; } /* shop */ div.columnleftshop { float:none; width:100%; max-width:410px; margin-left:auto; margin-right:auto; } div.columnrightshop { float:none; width:100%; max-width:470px; margin-left:auto; margin-right:auto; } /* You Tube videos */ object#vid02 { width:400pt; height:455pt; } object#vid03 { width:400pt; height:640pt; } object#vid05 { width:400pt; height:302pt; } object#vid07 { width:400pt; height:347pt; } object#vid08 { width:400pt; height:408pt; } object#vid09 { width:400pt; height:361pt; } object#vid11 { width:400pt; height:468pt; } } @media all and (max-width: 626px) { div#stripe { background-color:DarkRed; } a.i-button h6 { font-size:12pt; } /* You Tube videos */ object#vid02 { width:360pt; height:409pt; } object#vid03 { width:360pt; height:576pt; } object#vid05 { width:360pt; height:272pt; } object#vid07 { width:360pt; height:312pt; } object#vid08 { width:360pt; height:367pt; } object#vid09 { width:360pt; height:325pt; } object#vid11 { width:360pt; height:421pt; } } @media all and (max-width: 600px) { div#stripe { background-color:red; } div#main-document { margin-top: 31px; } div#main16 { margin-top: 62px; } div#menus16 { max-width: 584px; } div#ddn-mozart { left: 0px; } div#ddn-home { left: 0px; } div#music-picture-panel { float:none; width:100%; } div.fp16-eval { float:left; width:48%; margin-left:1%; margin-right:1%; margin-top:10px; } div.fp16-reader { float:left; width:48%; margin-left:1%; margin-right:1%; margin-top:10px; } div.fp16-forum { clear:left; width:48%; margin-left:1%; margin-right:1%; margin-top:10px; } div.fp16-view { clear:none; float:left; width:48%; margin-left:1%; margin-right:1%; margin-top:10px; } /* You Tube videos */ object#vid02 { width:342pt; height:389pt; } object#vid03 { width:342pt; height:547pt; } object#vid05 { width:342pt; height:258pt; } object#vid07 { width:342pt; height:297pt; } object#vid08 { width:342pt; height:349pt; } object#vid09 { width:342pt; height:309pt; } object#vid11 { width:342pt; height:400pt; } } @media all and (max-width: 520px) /* V2 menu -> 2 rows ... + Articles */ { div#stripe { background-color:HotPink; } div#main-document { margin-top: 31px; } div#ddn-articles { left: -250px; } /* right */ /* You Tube videos */ object#vid02 { width:312pt; height:355pt; } object#vid03 { width:312pt; height:499pt; } object#vid05 { width:312pt; height:235pt; } object#vid07 { width:312pt; height:271pt; } object#vid08 { width:312pt; height:318pt; } object#vid09 { width:312pt; height:282pt; } object#vid11 { width:312pt; height:365pt; } } @media all and (max-width: 499px) { /* 210815 - Need to squash menu to keep on one line */ div#stripe { background-color:chartreuse; } div#main-document { margin-top: 31px; } div#menu-home { width:30px; } div#menu-mozart { width:60px; } div#menu-downld { width:100px; } div#menu-support { width:75px; } div#menu-shop { width:50px; } div#menu-articles { width:70px; } /* shop */ div.columnleftshop { float:none; width:100%; max-width:410px; margin-left:auto; margin-right:auto; } div.columnrightshop { float:none; width:100%; max-width:470px; margin-left:auto; margin-right:auto; } /* You Tube videos */ object#vid02 { width:270pt; height:307pt; } object#vid03 { width:270pt; height:432pt; } object#vid05 { width:270pt; height:204pt; } object#vid07 { width:270pt; height:234pt; } object#vid08 { width:270pt; height:275pt; } object#vid09 { width:270pt; height:244pt; } object#vid11 { width:270pt; height:316pt; } } @media all and (max-width: 412px) /* V2 menu -> 2 rows ... + Shop | Articles */ { div#stripe { background-color:yellow; } div#main-document { margin-top: 62px; } div#menus16 { max-width: 400px; } div#ddn-articles { left: -125px; } /* centred */ div#ddn-shop { left: -86px; } /* right */ div#ddn-support { left: -160px; } /* shop */ div.columnleftshop div.shopproductbox { float:none; margin-left:auto; margin-right:auto; } div.columnleftshop div.panel-rounded-6 { float:none; margin-left:auto; margin-right:auto; } select#ctl_combo_product { max-width:96%; } div.columnCustomer { float:none; width:350px; margin-left:auto; margin-right:auto; } /* You Tube videos */ object#vid02 { width:246pt; height:280pt; } object#vid03 { width:246pt; height:394pt; } object#vid05 { width:246pt; height:186pt; } object#vid07 { width:246pt; height:213pt; } object#vid08 { width:246pt; height:251pt; } object#vid09 { width:246pt; height:222pt; } object#vid11 { width:246pt; height:288pt; } } @media all and (max-width: 346px) /* Menu is 4+2 ...suppport | Sales Articles */ { div#stripe { background-color:aquamarine; } div#main-document { margin-top: 62px; } div#menus16 { max-width: 320px; } div#ddn-articles { left: -150px; } /* between centred and right */ div#ddn-shop { left: -48px; } div#ddn-support { left: -181px; } div#ddn-mozart { left: -30px; } /* You Tube videos */ object#vid02 { width:208pt; height:236pt; } object#vid03 { width:208pt; height:333pt; } object#vid05 { width:208pt; height:157pt; } object#vid07 { width:208pt; height:180pt; } object#vid08 { width:208pt; height:212pt; } object#vid09 { width:208pt; height:188pt; } object#vid11 { width:208pt; height:243pt; } } @media all and (max-width: 320px) /* Menu is 2 rows (4+2) */ { div#stripe { background-color:green; } div#main16 { margin-top: 62px; } div#menus16 { max-width: 300px; } div#ddn-articles { left: -155px; } /* between centred and right */ div#title16-left { visibility:hidden; } div#title16-right { visibility:hidden; } /* You Tube videos */ object#vid02 { width:140pt; height:159pt; } object#vid03 { width:140pt; height:224pt; } object#vid05 { width:140pt; height:106pt; } object#vid07 { width:140pt; height:121pt; } object#vid08 { width:140pt; height:143pt; } object#vid09 { width:140pt; height:126pt; } object#vid11 { width:140pt; height:164pt; } } @media all and (max-width: 276px) /* Menu is 3+3 ...|suppport sales articles */ { div#stripe { background-color:blue; } div#main-document { margin-top: 62px; } div#menus16 { max-width: 266px; } div#ddn-articles { left: -180px; } div#ddn-support { left: -30px; } div#ddn-downld { left: -80px; } div#ddn-mozart { left: -60px; } /* You Tube videos */ object#vid02 { width:118pt; height:134pt; } object#vid03 { width:118pt; height:189pt; } object#vid05 { width:118pt; height:89pt; } object#vid07 { width:118pt; height:102pt; } object#vid08 { width:118pt; height:120pt; } object#vid09 { width:118pt; height:107pt; } object#vid11 { width:118pt; height:138pt; } } /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/