# HG changeset patch # User Matti Hamalainen # Date 1394591811 -7200 # Node ID 6fefa0f6af0576ea243db1a930614cf49b5926a3 # Parent b98f05d27502be37b015266204dd9498f3c957a7 Some work on second style. diff -r b98f05d27502 -r 6fefa0f6af05 css/mapstyle2.css --- a/css/mapstyle2.css Wed Mar 12 04:35:00 2014 +0200 +++ b/css/mapstyle2.css Wed Mar 12 04:36:51 2014 +0200 @@ -1,56 +1,43 @@ -/* $Id: mapstyle.css 2290 2009-09-21 14:33:05Z jeskko $ */ - body { background-image: url(../img/dark.jpg); - color: white; font-family: sans-serif; } #footer { position: absolute; bottom: 0px; - height: 1.5em; + height: 2em; left: 0px; right: 0px; - padding-top: 0.25em; - padding-left: 0.25em; margin: 0px; } -#sidebar { - background-image: url(../img/gray.jpg); +#footercontent { position: absolute; - right: 0px; - top: 3em; - bottom: 1.5em; - width: 290px; - padding: 0px; - margin-top: 10px; - margin-bottom: 10px; + + left: 0.2em; + right: 0.2em; + top: 0.25em; + + padding: 0.5em; + + color: white; + font-size: 10pt; + + background: rgba(0,0,0, 0.6); + border-radius: 0.2em; } -#topcorner { - position: absolute; - top: -6px; - left: 0px; - padding: 0px; - margin: 0px; -} - -#bottomcorner { - position: absolute; - bottom: -4px; - left: 0px; - margin: 0px; - padding: 0px; +#footercontent span { + color: red; } #sidebar { position: absolute; right: 0px; - top: 50px; + top: 80px; bottom: 80px; - width: 290px; + width: 270px; padding: 0px; margin: 0px; } @@ -61,40 +48,41 @@ width: 100%; height: 100%; + z-index: 5; } #sidetop { position: absolute; - right: 0px; - top: -10px; background-image: url(../img/graytop.jpg); - height: 10px; - width: 290px; + z-index: 10; - padding: 0px; - margin: 0px; + width: 100%; + height: 65px; + top: -50px; } #sidebottom { position: absolute; background-image: url(../img/graybottom.jpg); - bottom: -10px; - right: 0px; - height: 10px; - width: 290px; - padding: 0px; - margin: 0px; + z-index: 10; + + width: 100%; + height: 75px; + bottom: -35px; + } #sidecontent { position: absolute; - top: 80px; - bottom: 16px; + z-index: 15; + + top: 140px; + bottom: 32px; right: 16px; left: 16px; - color: white; + color: black; overflow: auto; font-size: 10pt; @@ -102,21 +90,25 @@ } #sidecontent a { + display: inline-block; + width: 85%; text-decoration: none; - color: white; + color: black; + padding: 2px; + margin: 2px; + border-radius: 4px; + text-shadow: 1px 1px 1px rgba(0,0,0,0.2); } -#sidecontent div { - padding: 1px; -} - -#sidecontent div:hover { - background: url(../img/dark.jpg); +#sidecontent a:hover { + background: rgba(0,0,0,0.5); + color: #0f0; } #controls { position: absolute; + top: 28px; right: 16px; left: 16px; @@ -124,8 +116,10 @@ } #controls span { - text-shadow: 2px 2px 2px #000; - margin: 4px; + text-shadow: 1px 1px 1px #000; + border: 1px solid black; + margin: 2px; + display: inline-table; } #controls * a { @@ -139,16 +133,16 @@ width: 8px; background-image: url(../img/graystrip.jpg); position : absolute; - right: 290px; - top: 3em; - bottom: 1.5em; + right: 270px; + top: 0px; + bottom: 0px; min-height: 50px; padding-left: 1px; padding-right: 1px; padding-top: 0px; padding-bottom: 0px; margin: 0px; - } +} #collbuttondiv { position: relative; @@ -169,18 +163,115 @@ left: 0px; right: 0px; top: 0px; - height: 3em; - padding-left: 0.25em; - padding-top: 0.25em; + height: 120px; + padding: 8px; +} + +#headcontent { + color: white; + background: url(../img/batmud_logo2.png) no-repeat 0px 0px; + height: 100%; + padding: 0px; + padding-left: 200px; + + text-shadow: 0px 0px 4px #000; + font-size: 0.7em; +} + +#headcontent h1 { + font-size: 2em; + padding: 0px; + margin: 0px; +} + +#headcontent h2 { + font-size: 1.5em; + padding: 0px; + margin: 0px; + color: red; +} + +#headcontent div { + display: inline-block; +} + +#headcontent .info { + position: absolute; + right: 280px; + width: auto; +} + +#headcontent a { + color: white; } #map { position: absolute; left: 0px; - top: 3em; - right: 300px; - bottom: 1.5em; + top: 100px; + right: 280px; + bottom: 2em; padding: 0px; margin: 0px; + + box-shadow: 10px 10px 5px #000; +} + +#copyrights { + position: absolute; + padding: 0.2em; + left: 80px; + bottom: 4em; + height: auto; + width: auto; + font-size: 8pt; + color: rgba(255,255,255, 0.85); + text-shadow: 1px 1px 1px #000; +} + + +.labels { + color: white; + background: black; + font-family: "Arial", sans-serif; + font-weight: bold; + font-size: 10px; + white-space: nowrap; + padding: 2px; + border: 1px dotted white; } + + +#sidecontent div div { + display: inline-block; + width: 10%; + height: auto; + border-radius: 0.5em; + box-shadow: 2px 2px 2px rgba(0,0,0,0.7); +} + +#sidecontent div.c_laenor div { + color: yellow; + background: yellow; +} + +#sidecontent div.c_rothikgen div { + color: blue; + background: blue; +} + +#sidecontent div.c_furnachia div { + color: red; + background: red; +} + +#sidecontent div.c_lucentium div { + color: green; + background: green; +} + +#sidecontent div.c_desolathya div { + color: purple; + background: purple; +}