@media screen and (max-width:800px) { body { background: none !important; background-color: #202020 !important; } .externalLines { background-color:#8f3d31; } table.structure { display:none; } .mobileContent { display:block; background:none; background-color:#3d2d2a; } .meaWrapper { position:absolute; background-color:black; top:0; left:0; bottom:0; right:0; display:flex; flex-direction:column; } .meaGraphics { background-color:#3d2d2a; height:auto; width:100%; } .meaGraphicsLandscape { display:none; } .meaGraphicsPortrait { padding:10px; box-sizing:border-box; } #nhLogo { width:23%; float:left; margin-right:2%; margin-bottom:10px; } #nhCaption { width:70%; float:right; margin-left:2%; margin-top:2%; } #nhLogo img, #nhCaption img { width:100%; height:auto; } #largeLogo { float:left; width:45%; position:relative; padding:10px; padding-left:0; box-sizing:border-box; } #largeLogo img { width:90%; height:auto; } #homepageCaption { float:right; width:55%; position:relative; padding:10px; padding-top:20px; box-sizing:border-box; } #homepageCaption img { width:90%; height:auto; } .meaContent { width:100%; flex-grow:1; margin:auto; display:flex; flex-direction:column; overflow-y:hidden; } .meaGraphic { flex-grow:0; flex-shrink:0; min-height:100px; } #meaGraphic { background-image:url(_images-2012/homepage_image_1.png); background-size:cover; background-position:bottom right; } .meaSearch { padding:10px; box-sizing:border-box; display:flex; flex-flow: row nowrap; } #meaSearchInput { flex-grow:1; padding-right:10px; box-sizing:border-box; } #meaSearchButton { flex-grow:0; } .textbox { border:none; background-color:#fff182; background: linear-gradient(#fed86f,#fff586); box-shadow:inset 2px 2px 2px rgba(0,0,0,0.5); padding:5px; box-sizing:border-box; font-size:16px; height:30px; } #meaSearchInput .textbox { width:100%; } .meaContent button, .linkForm button { background-color:black; background: linear-gradient(#373737,black); border:1px solid #584830; border-radius:5px; color:#fcba57; height:30px; font-weight:bold; font-size:14px; cursor:pointer; } .meaContent button:hover, .linkForm button:hover { color:#fff68f; } .meaContent button:active, .linkForm button:active { background-color:#ad4e22; background: linear-gradient(#a03400,#bc935d); color:white; } .meaContent button.selectedTab { color:#fff182; background: linear-gradient(black,#373737); border-color:orange; } .meaTabs { display:flex; flex-flow:row nowrap; margin:0 5px; padding-top:5px; padding-bottom:5px; flex-grow:0; } .meaTabs button { width:25%; margin:0 5px; } .meaScroller { flex-grow:1; overflow-y:auto; height:0; -webkit-overflow-scrolling:touch; } .meaIndex { color:white; padding:0 10px; font-size:14px; box-sizing:border-box; display:none; } #meaIndexAlpha { display:block; } #meaAlphaWrapper { display:flex; flex-flow:row wrap; height:100%; } .meaAlphaItem { width:14.2%; padding:3px; box-sizing:border-box; } .meaAlphaItem button { width:100%; font-size:20px; min-height:40px; padding:0; } .meaDisabled button { color:#9e7537; } .meaIOS { display:none; width:100%; background-color:#303030; border-radius:5px; margin-top:10px; padding:10px; box-sizing:border-box; background: linear-gradient(#202020,#373737); box-shadow:inset 5px 5px 5px rgba(0,0,0,0.5); color:#e0e0e0; position:relative; cursor:pointer; } .meaIOS:hover,.meaIOS:active { background: linear-gradient(#a03400,#bc935d); } .meaIOS h2 { font-weight:normal; font-size:16px; margin:0; } .meaIOS p { margin-top:0; font-size:11px; width:75%; margin:0; margin-top:5px; } .meaIOS img { position:absolute; top:10px; right:5px; width:25%; height:auto; } .meaAdditional { width:100%; background-color:#303030; border-radius:5px; margin-top:10px; margin-bottom:10px; padding:10px; box-sizing:border-box; background: linear-gradient(#202020,#373737); box-shadow:inset 5px 5px 5px rgba(0,0,0,0.5); color:#e0e0e0; } .meaAdditional p { line-height:150%; font-size:14px; } .meaAdditional h5 { color:#c0c0c0; margin:0; } .meaAdditional h5 { margin:0; font-weight:normal; font-size:20px; margin:0; margin-top:5px; color:#fcba57; } .meaAdditional h4 { margin:0; font-weight:normal; } .meaAdditional a, a:visited { color:#f0d0a0; } .meaAdditional a h5:hover, .meaAdditional a:hover { color:gold !important; } .meaIndexList ul { padding-left:3px; margin:0 !important; } .meaIndexList ul li { background-color:black; background: linear-gradient(#191919,black); list-style:none; min-height:30px; font-size:14px; font-weight:bold; padding:4px 0; box-sizing:border-box; } .meaIndexList ul li { color:#f4cb6a; } .meaIndexList ul li a { color:#f4cb6a; width:100%; display:block; } .meaIndexList ul li a:hover { color:orange; } .meaIndexList ul ul { padding-left:0; } .meaIndexList ul ul li { font-weight:normal; background:none; background-color:#202020; border-bottom:1px solid black; padding-left:15px; } .insetPanels .titleIndex { display:none; } .meaCollapsibleCaption { background: linear-gradient(#5b3c37,#442a26); padding:10px; padding-left:15px; box-sizing:border-box; font-weight:bold; color:#fff586; font-size:14px; cursor:pointer; } .meaCollapsibleMarker { color:white; font-weight:normal; } .meaCollapsibleSection { display:none; } .meaFaqMenu { padding:10px 15px; box-sizing:border-box; } .meaFaqMenu h2 { color:white; font-weight:normal; margin-top:10px; } .meaFaqMenu ul { padding-left:20px; } .meaFaqMenu li { color:#807060; margin:10px 0; line-height:130%; font-size:14px; } .meaFaqMenu li a, .meaFaqMenu li a:visited, .meaFaqMenu a:visited { color:#ffe8bf; } .meaFaqMenu li a:hover { color:#fdcf68; } .welcomeMobile { display:block; } .welcomeMobile h2 { font-weight:normal; font-size:22px; } .cookieWarning { left:10px !important; right:10px !important; bottom:10px !important; height:auto !important; width:auto !important; box-sizing:border-box; padding:15px !important; margin-left:0 !important; } .cookieWarning td { white-space:normal !important; } .cookieWarning p { white-space:normal !important; font-size:14px !important; line-height:130% !important; } .cookieWarning h1 { display:none; } .cookieWarning a:hover, .cookieWarning a:active{ color:red !important; } h1.encardaAppHeader { font-size:20px !important; padding-top:5px; } .meaTranslateWrapper #encardaAppTable { margin:0 !important; margin-top:20px !important; } .meaTranslateWrapper #encardaAppTable h1 { display:none; } .meaTranslateWrapper #encardaAppImg { width:100%; height:auto; margin:0 !important; } .meaTranslateWrapper .buttonBatch { margin:0 !important; } .meaTranslateWrapper .baseButtonScreenshots { display:none; } .linksTable p { margin:10px 0; line-height:120% !important; font-size:14px !important; } .linksTable h1 { margin-top:10px !important; } .linksTable td * { line-height:inherit !important; font-size:inherit !important; } .linkForm table { width:100%; } .linkForm .textbox { width:100% !important; } .linkForm button { margin:auto; display:block; width:100px; font-size:14px; margin-top:10px; } } @media screen and (max-width:320px) { .meaContent button { font-size:11px; } } @media screen and (min-width:600px) and (orientation:portrait) { #largeLogo img { height:150px; width:auto; } #homepageCaption { text-align:right; } #homepageCaption img { height:150px; width:auto; } } @media screen and (orientation:landscape) { .meaWrapper { flex-direction:row; } .meaGraphics { width:200px; flex-grow:0; overflow:hidden; position:relative; } .meaGraphicsPortrait { display:none; } .meaGraphicsLandscape { display:block; } #largeLogo { float:none; width:100%; height:50%; position:absolute; bottom:-5%; left:0; } #homepageCaption { float:none; width:100%; height:50%; text-align:center; position:absolute; top:0; left:0; } #largeLogo img { width:100%; height:auto; } #homepageCaption img { width:100%; height:auto; } .meaContent { height:100%; } } @media screen and (orientation:landscape) and (max-height:700px){ .meaGraphic { display:none; } } /* Standard Sections */ @media screen and (max-width:800px) { .mobileContent .mobileHeader { position:fixed; cursor:pointer; width:100%; z-index:100; } .mobileContent .mobileHeader #headerLogo { position:absolute; top:5px; left:5px; width:12%; height:auto; z-index:10; border-radius:30px; box-shadow: none; transition: box-shadow 0.5s; } .mobileContent .mobileHeader #headerArrow { position:absolute; top:5px; right:5px; width:15px; height:auto; display:none; } .mobileContent .mobileHeader .headerSection { padding-left:16%; box-sizing:border-box; } .mobileContent .mobileHeader .upperSection { padding-top:8px; padding-bottom:5px; background-color:#5b3c37; border-bottom:1px solid #856f6b; transition:background-color 0.5s; } .mobileContent .mobileHeader .lowerSection { padding-top:5px; padding-bottom:5px; background-color:#442a26; border-bottom:1px solid black; transition:background-color 0.5s; } .mobileContent .mobileHeader:hover .upperSection, .mobileContent .mobileHeader:active .upperSection { background-color:#7b4c47; } .mobileContent .mobileHeader:hover .lowerSection, .mobileContent .mobileHeader:active .lowerSection { background-color:#643a36; } .mobileContent .mobileHeader:hover #headerLogo { box-shadow: inset 0 0 0px #fff183, 1.5px 0 30px #fcba57; } .mobileContent .mobileHeader .upperSection img { width:85%; height:auto; } .mobileContent .mobileHeader .lowerSection img { width:85%; height:auto; } .mobileContent .lowerSection { display:none; } .mobileContent { background:none; } .mobileContent #meaHeader { background:none; padding:10px; padding-top:15px; background-color:#2c201e; padding-top:22vw; } .mobileContent #meaHeader h1 { margin:0; color:#fff183; padding-left:5px; } .mobileContent #meaHeader h2 { padding-left:5px; color:#fff1a3; } .mobileContent #meaMenu { background-color:black; text-align:center; background-color:#341a16; box-shadow: inset 0 5px 20px black; border-top:1px solid black; height:33px; overflow:hidden; padding:0; transition:height 0.5s; } .mobileContent #meaMenu img { margin:6px 10px; transition:box-shadow 0.5s, background-color 0.5s; border-radius:5px; } .mobileContent #meaMenu img:hover { box-shadow: inset 0 0 0px #fff183, 1.5px 0 15px #fcba57; background-color:#7d5532; } .periodCaption { color:white !important; } .mainTable h1 { font-size:16px !important; } .mobileContent .meaTranslateWrapper { color:white; padding:0 15px; box-sizing:border-box; } .mobileContent .meaTranslateWrapper .baseContent { border-top-color:#505050; } .mobileContent .meaTranslateWrapper .baseContent p { color:#f0f0f0; margin:2px 0; padding-bottom:10px; line-height:120%; font-size:12px !important; } .mobileContent .meaTranslateWrapper h1 { font-weight:normal; margin-top:30px; } .mobileContent .meaTranslateWrapper a { color:#fff183; } .mobileContent .meaTranslateWrapper hr { width:100%; margin:0; } .mobileContent .meaTranslateWrapper ul { padding-left:20px; } .mobileContent .meaTranslateWrapper li { margin:10px 0; } .mobileContent .meaTranslateWrapper p { line-height:150%; font-size:16px; } .mobileContent .meaTranslateWrapper li { line-height:150%; font-size:16px; } .mobileContent .meaTranslateWrapper .results { margin:0; } .mobileContent .meaTranslateWrapper .mobileSearchForm { display:block !important; margin-top:20px; } .mobileContent .meaTranslateWrapper .mobileSearchForm #mobileSearchBox { width:100%; } .mobileContent .meaTranslateWrapper .mobileSearchForm #mobileSearchButton { width:32px; height:32px; background-repeat:no-repeat; background-size:cover; margin-left:5px; } .mobileContent .meaTranslateWrapper .mobileSearchForm table { width:100%; margin-bottom:10px; } .mobileContent .meaTranslateWrapper .mobileSearchForm table td { display:table-cell; } .mobileContent .meaTranslateWrapper .results h1 { font-weight:normal; } .mobileContent .meaTranslateWrapper .results table { margin:0; border-spacing:0; padding:0; } .mobileContent .meaTranslateWrapper .results h1 { margin-bottom:0; margin-top:0; } .mobileContent .meaTranslateWrapper td { display:block; } #references td { display:table-cell; } .mobileContent .meaTranslateWrapper td:first-child { font-size:16px; } .mobileContent .meaTranslateWrapper td:last-child { margin-bottom:7px; } .mobileContent .meaTranslateWrapper .indexTable { width:100% !important; } .mobileContent .meaTranslateWrapper .indexTable td { padding-top:0; padding-bottom:0; width:100%; } .mobileContent .meaTranslateWrapper .indexTable td h1 { color:white; font-size:20px !important; font-weight:normal; padding-bottom:5px; } .mobileContent .meaTranslateWrapper .indexTable a { font-size:16px !important; line-height:180%; } .mobileContent .meaTranslateWrapper .indexTable .subEntry a { font-size:14px !important; color:#efe173; } .mobileContent .meaTranslateWrapper .indexTable a:hover, .mobileContent .meaTranslateWrapper .indexTable .subEntry a:hover { color:gold; } .mobileContent .meaTranslateWrapper .notesTable td { display:table-cell; } span.spoilerButton { color:#ffe183 !important; } span.revealedSpoiler { color:#e0d0c0 !important; } span.spoilerButton:hover,span.spoilerButton:active { color:#ffefa3 !important; } .oeNames td { font-size:16px; line-height:150% !important; } #eowynTree { display:none; } #whereNext b { color:white; font-size:16px; } #references table { border-spacing:5px; } #references td { font-size:16px; vertical-align:top; } .sectionLabel { color:white; border-color:#706050; } .definition { font-size:16px; line-height:150%; margin:15px 0; } .definition .element { color:white; font-size:16px; } .current { border:none !important; } .excyclopediaContent .definition { font-size:16px; line-height:150%; margin:15px 0; } .excyclopediaContent .definition .heading { color:white; } table.wordlist { width:100%; } table.wordlist .definition { margin-left:20px; text-indent:-20px; } table.wordlist .definition b { color:white; font-weight:bold; } table.wordlist .definition .subdef { color:white; font-style:italic; } .titleListBlock { float:none; margin-left:0; margin-top:10px; } .titleIndex { width:100%; box-sizing:border-box; background:none; background-color:#5b3c37; } .titleIndex p { font-size:14px !important; } .titleIndex select { width:100%; font-size:16px !important; } .entryCaption { display:none; } .aboutChronicle { display:none; } .meaAboutChronicle { margin:0 15px; } .meaAboutChronicle p { color:white; font-size:14px; line-height:150%; } .meaAboutChronicle a { color:#fff586; } table.chronicleTable { margin-top:20px; width:auto; } table.chronicleTable select { font-size:16px !important; } table.chronicleTable input { font-size:16px; width:120px; } .mobileContent .meaTranslateWrapper td.chronicleButton { display:none; } .chronicleButtonMobile { display:table-row; } .chronicleButton { width:100% !important; height:auto !important; padding:10px !important; box-sizing:border-box; -webkit-appearance:none; } .comparisonWrapper td p { font-size:14px !important; } .comparisonBullet { display:none; } .lexiconWrapper { width:100%; margin:0 !important; } .lexiconWrapper .definition { margin-left:0; text-indent:-20px; } table.calendarWrapper { width:auto !important; margin:auto; } table.calendarWrapper select { font-size:16px !important; } .factboxColumn { width:100%; margin-top:10px; } .factboxWrapper { border-bottom:1px solid #504030; } .factboxWrapper .factboxLabel { color:white; font-size:14px; } .factboxWrapper .factboxContent { color:white; line-height:130%; font-size:14px; } .mobileContent .meaTranslateWrapper .factboxColumn { padding:0; } .mobileContent .meaTranslateWrapper .factboxColumn p { font-size:14px !important; } .mobileContent .meaTranslateWrapper .factboxColumn li { font-size:14px !important; margin:0; } .mobileContent .meaTranslateWrapper .factboxColumn hr { display:none; } .entrySummary { display:none; } .entrySummaryMobile { display:block; border-top:1px solid #605040; padding-top:10px; } .entrySummaryMobile p { font-size:14px !important; } .entrySummaryMobile li { font-size:14px !important; line-height:100% !important; } .quoteSpace { max-width:90%; color:#e0e0e0; } .quote { font-size:14px; line-height:150%; } .notesTable { margin-left:0; } .mobileContent .meaTranslateWrapper .genealogyWrapper { background-color:#303030; border:1px solid #505050; border-radius:5px; width:calc(100vw - 50px); max-width:100%; overflow-x:auto; height:auto; margin-top:10px; margin-bottom:10px; display:inline-block; } .mobileContent .meaTranslateWrapper .genealogy { margin:0; margin-bottom:10px; width:100% !important; } .mobileContent .meaTranslateWrapper .genealogy>table { padding:0 10px; margin:0; } .mobileContent .meaTranslateWrapper .genealogy td { display:table-cell; } .mobileContent .meaTranslateWrapper #genealogyCaptionMobile .captionSpace { width:100%; } .mobileContent .meaTranslateWrapper #genealogyCaptionMobile .captionSpace p { font-size:14px !important; margin-top:0; } .mobileContent .meaTranslateWrapper .genealogyWrapper .captionSpace { display:none; } .mobileContent .meaTranslateWrapper .mapSpaceMobile { background-color:#303030; border:1px solid #505050; border-radius:5px; width:calc(100vw - 50px); max-width:100%; max-height:calc(100vw - 50px); overflow:auto; margin-top:10px; margin-bottom:10px; display:inline-block; overflow:auto; -webkit-overflow-scrolling:touch; } .mobileContent .meaTranslateWrapper .mapWrapperMobile { margin:0; } .mapCaption { display:none; } .mapCaptionMobile { display:block; font-size:14px; } .mobileContent .meaTranslateWrapper .mapCaptionMobile td { display:table-cell; } .mobileContent .meaTranslateWrapper .mapCaptionMobile tr td:first-child { padding-right:10px; font-size:12px; } .imageWrapper { float:none; margin:0; margin-bottom:20px !important; } .imageWrapper img { width:100%; height:auto; } .imageCaption { width:100% !important; font-size:16px !important; line-height:130%; } .mobileContent .meaTranslateWrapper .calendarWrapper .navigator { display:none; } .mobileContent .meaTranslateWrapper .calendarWrapper .calendarForm, .mobileContent .meaTranslateWrapper .calendarWrapper .calendarTable { width:100%; } .mobileContent .meaTranslateWrapper .calendarWrapper .calendarForm { padding:0; } .mobileContent .meaTranslateWrapper .calendarWrapper h1 { font-size:20px; border-color:#504030 !important; } .mobileContent .meaTranslateWrapper .calendarWrapper #anniversaries td { font-size:16px !important; line-height:150%; } .kinglistWrapper { margin-left:10px; margin-right:10px; } .kinglistTable { width:100%; } .kinglistTable td { color:white; font-size:14px; } .kinglistTable td.kinglistCount { display:inline; color:#a09080; margin-right:5px; font-size:16px; } .kinglistTable td.kinglistCaption { display:inline; font-weight:normal; padding-bottom:0; font-size:16px; } .essayWrapper { padding:0; } .essayWrapper h1 { font-size:20px; } .essayWrapper h2 { font-size:18px; margin-top:30px; } .essayWrapper h5 { color:white; font-size:16px; } .timelineWrapper, .timelineWrapperMobile { width:auto; background:none; background-color:#303030; border:1px solid #505050; margin:10px 0; } #timelineWrapperMobile { display:block; } #timelineWrapper { display:none; } .timelineGraphic { height:10px; } .timelineBars { border:none; } .timelineBarDark { background-color: #d6d0c0; } .timelineBarLight { background-color: #cf4d16; } .timelineBarFadein { background-color: #cf4d16; background: linear-gradient(to right,#d6d0c0,#cf4d16); } .timelineBarFadeout { background-color: #cf4d16; background: linear-gradient(to left,#d6d0c0,#cf4d16); } .timelineBarCapin { background-color: #d6d0c0; } .timelineBarCapinlight { background-color: #cf4d16; background: linear-gradient(to right,#303030,#cf4d16); } .timelineBarCapout { background-color: #d6d0c0; } .timelineBarCapoutlight { background-color: #cf4d16; background: linear-gradient(to left,#303030,#cf4d16); } .timelineLabelSpace { border-color:#606060; padding-left:3px; } .timelineLabelStandard { display:none; } .timelineLabelSpace { height:12px; } .timelineLabelCompressed { display:inline-block; } } @media screen and (max-width:800px) and (orientation:landscape) { .mobileContent .mobileHeader #headerLogo { width:8%; } .mobileContent .mobileHeader .headerSection { padding-left:11%; } .mobileContent .mobileHeader .upperSection img { width:50%; } .mobileContent .mobileHeader .lowerSection img { width:50%; } .mobileContent #meaHeader { padding-top:13vw; } } @media screen and (max-height:650px) { .meaGraphic { display:none; } } @media screen and (orientation:landscape) { .mobileContent #meaHeader { padding-top:16vw; } } .mdpSpace { position:relative; height:50px; background-color:#29344a; border:1px solid #6a7181; margin-bottom:20px; background-image:url(themes/mydiscprofile/mdp-background.png); background-repeat:no-repeat; background-size:25%; background-position:0 50%; } .mdpSpace:hover { background-color:#49546a; } #mdpCaption { position:absolute; top:10%; right:5px; height:80%; width:auto; } @media screen and (max-width:375px) { .mdpSpace { background-image:none; } } @media screen and (max-width:350px) { .mdpSpace { height:auto; text-align:right; padding:5px 2px; box-sizing:border-box; } #mdpCaption { position:relative; width:90%; height:auto; } }