/* The Néveri Project CSS © Copyright Néveri 2020 */ /* # Unused # DIII Text color #9e7b51 li:before { content: "> "; } li:first-child:before { content: ""; } */ /* Testing-code only used in test.php */ div#menucol ul { margin: 0 0 0 0.5em; padding: 0; width: 11em; background: white; border-width: 1px 1px 0 1px; border-style: solid; border-color:#257;} div#menucol li { position: relative; list-style: none; margin: 0; border-bottom: 1px solid #257; } div#menucol li:hover { background-color: #aaf; } div#menucol li.sub { background-image:url(gfx/rarrow.gif); background-position:right center; background-repeat:no-repeat; } div#menucol li a { display: block; padding: 0.25em 0 0.25em 0.5em; text-decoration: none; width:10.5em; } div#menucol>ul a { width: auto; } div#menucol ul ul { position: absolute; top: -1px; left: -1000em; } div#menucol ul.niveau1 li.sub:hover ul.niveau2, div#menucol ul.niveau2 li.sub:hover ul.niveau3 { left:10.5em; } /* Basics */ body{ padding: 0px; margin: 0px; background-color: #FFFFFF; background-repeat:repeat-x; } p, div{ color:#000000;font-family:Georgia, "Times New Roman", Times, serif;font-size:14px;line-height:23px; } a{ color:#000000; transition: color 0.5s;} a:hover{ color:#F0F0F0; transition: color 0s;} a:focus, span:focus{ color:#F0F0F0; transition: color 0s;} .FieldError { background-color:#FFCC66; } .NewItem { color:#660000; font-style:italic; font-weight:bold; } /* Style for New-text */ .SimpleList { font-size:medium; list-style-type:square; } /* When a non-graphical menu is needed - Currently not used */ #Container { background-image:url("gfx/bg.jpg"); background-repeat:repeat; border:5px ridge #6642CC; border-radius:10px; -webkit-box-shadow: 10px 10px 5px #3C3C3C; /* Safari */ box-shadow: 10px 10px 5px #3C3C3C; margin:auto; margin-top:0px; margin-bottom:50px; min-width:1200px; width:60%; } /* Top Menu */ .MenuScrollMiddle { background-image:url('gfx/TopMenuScroll-Middle.gif'); background-repeat:repeat-x; background-position:0px 6px; } /* Grafikken til mellemstykket af topmenuen */ .TopMenuLinks { /* border: 1px solid black; */ position:relative; padding-left:15px; text-decoration:none; top:1px; color:#BFBFBF; font-size:x-large; list-style-type:none; } /* Style til Topmenuen */ /* Style til Topmenuen */ .TopMenuLinks:hover, .TopMenuLinks:focus { color:#CC6600; list-style-image:url("gfx/LargeListImage.png"); } /* Admin link area */ #AdminPanel { position: absolute; left: 400px; top: 125px; background: url('gfx/AccessKey0.png') 0px 0px no-repeat; z-index:3; width: 89px; height: 40px; padding: 0px; margin: 0px; transition: 0.5s; } #AdminPanel:hover { /* X Y - Horizontal/Vertical */ background: url('gfx/AccessKey1.png') 0px 4px no-repeat; top: 110px; left: 396px; width: 104px; height: 65px; } #AdminPanel a { display: block; position: relative; width: 89px; height: 40px; } #AdminPanel a:hover { width: 104px; height: 66px; } /* Floating elements */ /* Banner */ #SiteBanner { background-image:url('gfx/banner.png'); background-repeat:repeat; position:absolute; top:0px; width:542px; height:252px; z-index:-1; } /* Flags */ #FlagDanish { background-image:url('gfx/FlagDanish.png'); height:61px; width:81px; float:left; z-index:3; transition: 0.5s; } #FlagDanish:hover { background-image:url('gfx/FlagDanishHover.png'); } #FlagEnglish { background-image:url('gfx/FlagEnglish.png'); height:61px; width:81px; float:left; z-index:3; transition: 0.5s; } #FlagEnglish:hover { background-image:url('gfx/FlagEnglishHover.png'); } .FlagLinkArea { padding: 2px 0px 40px 80px; } /* Top menu */ #TopMenu { /* border:1px solid black; */ margin: auto; margin-top:200px; min-width:997px; width:60%; } #TopMenuBanner { width:100%; border-spacing: 0px; } #TopMenuBanner td { padding: 0px;} #TopMenu li { /* border:1px solid white; */ display: inline; z-index:4;} /* Soulcircle*/ #Soulcircle { width:150px; height:175px; float:right; } /* Breadcrumb area */ a.Breadcrumbs { vertical-align:top;border-bottom:1px dotted black; margin-top:0px; font-weight:bold; text-decoration:none; } a.BreadcrumbsCurrent { vertical-align:top;border-bottom:0px solid white; color:white; font-weight:bold; text-decoration:none; } span.Breadcrumbs { color:#3F3F3F;vertical-align:top;border-bottom:0px dotted black; margin-top:0px; font-weight:bold; text-decoration:none; } span.BreadcrumbsCurrent { color:white;vertical-align:top;border-bottom:0px dotted black; margin-top:0px; font-weight:bold; text-decoration:none; } /* Main Menu */ .ListLinks { /* border:1px solid black; */ color:#003300; text-decoration:none; } /* Bestemmer farven på links i sidemenuen */ .ListLinks:hover, .ListLinks:focus {color: #cccc66; background-color: transparent; } /* Bestemmer farven på links i sidemenuen, når musen holdes over teksten og klassen har fokus */ .MenuLinks1 { list-style-type:none; } .MenuLinks2 { list-style-type:none; padding-left:20px; font-size:small; margin:0px;} /* Indryk til sidemenuens links i niveau 2 */ .MenuLinks3 { list-style-type:none; padding-left:40px; font-size:small; margin:0px;} /* Indryk til sidemenuens links i niveau 3 */ .MenuLinks4 { list-style-type:none; padding-left:20px; font-size:small; margin:0px;} /* Indryk til sidemenuens links i niveau 4 */ .MenuLinks5 { list-style-type:none; font-size:small; margin:0px;} /* Indryk til sidemenuens links i niveau 5 */ .MenuLinks1:hover, .MenuLinks2:hover, .MenuLinks3:hover { list-style-type:none; } /* Menupunkt grafik til sidenmenuen. Husk at hvis grafik forsvinder, er menu strukturen blevet dybere end 3 niveaur og der skal tilføjet et 4. osv. Der findes IKKE et objekt kaldet MenuLinks. Kun MenuLinks1..2 osv. */ #MainMenuTop { height:136px; background-image:url("gfx/MainMenuTop.png"); background-repeat:no-repeat; z-index:10; } #MainMenuSectionTitle { position:relative; top:-13px; left:0%; color:#FFFFFF; font-size:x-large; letter-spacing:5px; text-align:center; width:191px; z-index:11; } /* Overskriften i sidemenuen [Menu sektionens navn] */ #MainMenuMiddle { background-image:url("gfx/MainMenuMiddle.png"); background-repeat:repeat-y; z-index:9; } #MainMenuText { position:relative; top:0px; left:0%; width:230px; color:#003300; z-index:12; margin:0px; } /* Styre menutekstens postionen i den grafiske sidemenu og bredden */ #TimeBox { position:relative; top:0px; left:0px; text-align:center; font-size:medium; width:180px; z-index:13; } #MainMenuBottom { height:100px; background-image:url("gfx/MainMenuBottom.png"); background-repeat:no-repeat; z-index:8; } /* Text Page */ .ChangeNote { font-size:x-small; color:#393939; } /* The updated time text */ .FrontPageSpacer { background-image:url("gfx/VerticalSpacer.png"); background-repeat:repeat-y; } /* Front page's mid graphic */ #PageSection { margin:3px 25px 0px 0px; position:relative; width:100%; z-index:14; } /* The style for the text area of each page. */ /* Applies to all images inside the main page */ #PageSection img { border: 3px ridge #996666; border-radius:7px; -webkit-box-shadow: 2px 2px 5px #4B0000; /* Safari */ box-shadow: 2px 2px 5px #4B0000; } #PageSection img.NoBorder { border: 0px solid transparent; border-radius:0px; -webkit-box-shadow: 0px 0px 0px transparent; /* Safari */ box-shadow: 0px 0px 0px transparent; } #PageSection img:hover { white; } /* IDs and classes for specific content inside the main page. Created as part of further separation of structure (HTML and design (CSS). */ /* Removes the hover effect created by #PageSection img:hover */ #PageSection img.No-hover-effect:hover{ border:3px ridge none; } .InfoBox{ border: 3px ridge #996666; border-radius:7px; -webkit-box-shadow: 2px 2px 5px #4B0000; /* Safari */ box-shadow: 2px 2px 5px #4B0000; background-color:black; } .InfoBox:hover { border:3px ridge white; height:225px; } #ForumDanish { width:235px; color:rgb(255, 255, 255); /* padding-left: 15px; */ } #InfoboxForumDanish img { padding:1px; /* Makes sure the image inside doesn't clip the border of its container. */ } /* The pagenation CSS for the front page. For unknown reasons, you cannot change the class name "pageNavPosition". Otherwise the navigation area on front page will disappear */ #pageNavPosition { display: inline-block; } #pageNavPosition a { color: black; float: left; padding: 8px 16px; text-decoration: none; border-radius: 5px; transition: background-color .3s; } #pageNavPosition a:hover:not(.activePage) {background-color: rgba(221, 221, 221, 0.5);} #pageNavPosition a.activePage { background-color: rgba(120, 30, 194, 0.5); color: white; border-radius: 5px; } /* Message displayed on the English site, telling them the pages are currently not updated */ .NoEngUpd { background-color: LightSalmon; border:1px solid #000000; border-radius:3px; -webkit-box-shadow: 5px 5px 2px #4B0000; /* Safari */ box-shadow: 5px 5px 2px #4B0000; color:#000000; text-align:center; margin-bottom:10px; opacity: 0.3; transition: opacity .5s;} .NoEngUpd:hover { opacity: 1; } /* Currently unused - I think .Completed { color:rgb(0, 128, 0); list-style-image:url('gfx/Completed.png'); } /* Cannot find where used */ #Forum { width:100%; height:5000px; overflow:hidden; } /* Was used for a previous attempt to include the forum into the website, which did not work well. */ /* Contribute */ .SubmitContributionButton { border: 0px solid black;background-color:transparent;background-image:url(gfx/edit.png);background-repeat:no-repeat; margin:0x; padding:0px; width:28px;height:33px;font-weight:bold; } /* ID's ID's control the position of the boxes the design is built from. */ /* Z-indexing ca. oversigt 0 body 1 Container 2 Portal 3 BlenderTop 4 SiteBanner 5 TopMenuRules 6 TopMenuForum 7 TopMenuPG 8 MainMenuBottom 9 MainMenuMiddle 10 MainMenuTop 11 MainMenuSectionTitle 12 MainMenuText 13 TimeBox 14 PageSection */ /* ###################################################################################################### The Soulcircle CSS ###################################################################################################### */ .dead { border:1px solid black; background-color:#999999; color:#000000; } .DelNotice { border:1px solid black; background-color:#993333; color:#FF6666; } .Error { color:#000000; text-align:center; background-color:#FF9933; border:1px solid black; border-radius:3px; -webkit-box-shadow: 5px 5px 2px #4B0000; /* Safari */ box-shadow: 5px 5px 2px #4B0000; } /* ERROR LEVEL 1 */ .ErrorLevel1 { color:#1e3f16; text-align:center; background-color: #cccc66; border:1px solid #000000; border-radius:3px; -webkit-box-shadow: 5px 5px 2px #4B0000; /* Safari */ box-shadow: 5px 5px 2px #4B0000; margin-bottom:10px; } /* ERROR LEVEL 2 */ .ErrorLevel2 { color:#000000; text-align:center; background-color: LightSalmon; border:1px solid #000000; border-radius:3px; -webkit-box-shadow: 5px 5px 2px #4B0000; /* Safari */ box-shadow: 5px 5px 2px #4B0000; margin-bottom:10px;} /* ERROR LEVEL 3 */ .ErrorLevel3 { color:#FFCC33; text-align:center; background-color:#4B0000; border:1px solid #000000; border-radius:3px; -webkit-box-shadow: 5px 5px 2px #4B0000; /* Safari */ box-shadow: 5px 5px 2px #4B0000; margin-bottom:10px; } /* ERROR LEVEL with message - Used for both level 4 and 5, the only difference is that the 4th is used for a CUSTOM message and the 5th is used for a HARDCODED message about extreme instability. */ .ErrorLevelWithMsg { color:#bcd4f7; text-align:center; background-color:rgb(0, 69, 116); border:3px solid #bcd4f7; border-radius:3px; -webkit-box-shadow: 5px 5px 2px #4B0000; /* Safari */ box-shadow: 5px 5px 2px #4B0000; margin-bottom:10px; } .fields_disabled, .fields_disabled:hover, .fields_disabled:focus { color:#CCCCCC; } .LastUpdated1 { color:#336600; } .LastUpdated2 { color:#FFFF66; } .LastUpdated3 { color:#990000; } .Notice { background-color:#CCCC66; border:1px solid black; padding:5px 0px 5px 0px; border-radius:3px; -webkit-box-shadow: 5px 5px 2px #4B0000; /* Safari */ box-shadow: 5px 5px 2px #4B0000; color:#006600; text-align:center; } .Preview { background-color:transparent; border:15px inset #993300; padding:0px 10px 0px 10px; } .TableHoverEffect { background-color:transparent; border-radius:3px; } .TableHoverEffect:hover { background-color:transparent; border: 1px solid black;} .userlevel2 { color:#F0B400; } .userlevel3 { color:#990000; } .userlevel4 { color:#660099; } /* ###################################################################################################### CSS FormMade by Nick Rigby Advanced styling (colour, text-style and borders) added by Rahsna, which was inspired by the original work of the author. ###################################################################################################### */ .Charsheet { margin-bottom: 10px; border-top-width:20px; border-left-width:20px; border-bottom: 20px; border-right: 0px; padding-left:20px; border-image:url(gfx/ShalanBorder.png) 16 19 round; -moz-border-image:url(gfx/ShalanBorder.png) 16 19 round; /* Firefox */ -webkit-border-image:url(gfx/ShalanBorder.png) 16 19 round; /* Safari and Chrome */ -o-border-image:url(gfx/ShalanBorder.png) 16 19 round; /* Opera */ } .Charsheet b { font-family:Constantia; font-size: 12px; width: 180px; /* Width of labels */ display: inline-block; line-height: 1.8; vertical-align: top; } form.cs { font-family:Constantia; font-size: 12px; } form.cs fieldset { margin-bottom: 10px; border-top-width:20px; border-left-width:20px; border-bottom: 0px; border-right: 0px; border-image:url(gfx/ShalanBorder.png) 16 19 round; -moz-border-image:url(gfx/ShalanBorder.png) 16 19 round; /* Firefox */ -webkit-border-image:url(gfx/ShalanBorder.png) 16 19 round; /* Safari and Chrome */ -o-border-image:url(gfx/ShalanBorder.png) 16 19 round; /* Opera */ } form.cs legend { padding: 0 2px; font-weight: bold; font-size: x-large; } form.cs label { display: inline-block; line-height: 1.8; vertical-align: top; font-weight: bold; } form.cs fieldset ol { margin: 0; padding: 0; } form.cs fieldset li { list-style: none; padding: 5px; margin: 0; } form.cs fieldset fieldset { border: none; margin: 3px 0 0; } form.cs fieldset fieldset legend { padding: 0 0 5px; font-weight: normal; } form.cs fieldset fieldset label { display: block; width: auto; } form.cs em { font-weight: bold; font-style: normal; color: #f00; } form.cs label { width: 120px; /* Width of labels */ } form.cs li { border-bottom: 1px ridge #993300; } /* For use of box-sizing, see: https://www.w3schools.com/css/css_float.asp (Images Side By Side) */ /* In short: Use box-sizing property to make sure that the image container doesn't break due to extra padding. */ * { box-sizing: border-box; } /* Use the clearfix hack to take care of the layout flow after using float */ .clearfix::after { content: ""; clear: both; display: table; } .GodsGroup { font-size:xx-large; font-style:italic; text-align:center; margin-bottom:15px; padding-top:30px; } .GodChoiceArea { text-align:center; float:left; width:33.33%; padding: 0px 5px 0px; margin: 15px 0px 25px 0px; } .GodChoiceArea span { font-weight:bold; margin-left: 15px; } .GodChoiceArea img{ width:75px; height:75px; } /* Downsize the original God image */ .GodChoiceArea input { top:2px; position:relative; } /* Align the input-dot with the text */