diff --git a/media.css b/media.css new file mode 100644 index 00000000..1d889782 --- /dev/null +++ b/media.css @@ -0,0 +1,268 @@ + +/* Phone */ +@media (min-width: 1px) { + body { + font-size: 20px; + } + #header { + width: 100% !important; + padding-bottom: 0em !important; + } + #header a { + display: block; + width: 99%; + } + + #header-logo { + width: 90%; + min-height: 3em !important; + margin-left: 2em; + } + + #header-navigation { + display: inline-block; + width: 100% !important; + padding-top: 0.5em; + margin-left: 0em; + font-size: 14px; + } + + #header-navigation div:first-child { + margin-left: 8% !important; + } + + #account-header { + display: none !important; + } + + #account-header div { + float: none; + clear: both; + margin-right: 1em !important; + } + + #middle { + margin: 0 auto; + margin-left: auto; + margin-right: auto; + margin-top: 0.5em; + } + + #middle #left-column #content-area .lobby-panel table { + width: 100% !important; + } + #middle #left-column #content-area .lobby-panel table tr { + font-size: 12px; + } + + #middle #left-column #content-area .lobby-panel table td { + font-size: 12px; + } + + #middle #left-column #content-area .lobby-panel h1 { + font-size: 30px; + } +} + +/* Tablet */ +@media (min-width: 768px) { + #header { + width: 100% !important; + padding-bottom: 0em !important; + } + #header a { + display: inline-block; + width: 32%; + } + #header-logo { + width: 100%; + margin-left: 10%; + } + #header-navigation { + display: inline-block; + width: 67% !important; + padding-top: 0.5em; + margin-left: 0em; + } + #header-navigation div:first-child { + margin-left: 5% !important; + } + #middle { + margin: 0 auto; + margin-left: auto; + margin-right: auto; + width: 750px; + margin-top: 0.5em; + } + #middle #left-column #content-area .lobby-panel table { + width: 75% !important; + } + + #middle #left-column #content-area .lobby-panel table tr { + font-size: 14px; + } + + #middle #left-column #content-area .lobby-panel table td { + font-size: 14px; + } +} + +/* Laptop */ +@media (min-width: 992px) { + #header { + width: 100% !important; + } + #header a { + display: inline-block; + width: 30%; + margin-left: 0%; + } + #header-logo { + width: 100%; + margin-left: 8em; + } + #header-navigation { + display: inline-block; + width: 68% !important; + } + #header-navigation div:first-child { + margin-left: 12em !important; + } + #middle { + margin: 0 auto; + margin-left: auto; + margin-right: auto; + width: 970px; + margin-top: 0.5em; + } + #middle #left-column #content-area .lobby-panel table { + width: 55% !important; + } + #middle #left-column #content-area .lobby-panel table th { + margin: 0; + padding: 0; + text-align: left; + width: 50%; + line-height: 1.6em; + padding-left: 5% !important; + } +} + +/* Full Width */ +@media (min-width: 1200px) { + #header { + width: 100% !important; + } + #header a { + display: inline-block; + width: 30%; + margin-left: 18%; + } + #header-logo { + width: 100%; + margin-left: 3em !important; + } + #header-navigation { + display: inline-block; + margin-left: 0em !important; + width: 50% !important; + } + #header-navigation div:first-child { + margin-left: 15% !important; + } + #middle { + margin: 0 auto; + margin-left: auto; + margin-right: auto; + width: 1170px; + margin-top: 0.5em; + } + #middle #left-column #content-area .lobby-panel h1 { + font-size: 2vw; + } + + #middle #left-column #content-area .lobby-panel table { + width: 55% !important; + font-size: 18px !important; + } + #middle #left-column #content-area #resource-bar thead tr th { + width: 6.5em; + text-align: left; + font-size: 16px; + } + + #middle #left-column #content-area #resource-bar thead tr th:last-child { + width: 8em; + text-align: left; + } + + #middle #left-column #content-area #resource-bar tbody tr th { + width: 6.5em; + text-align: left; + font-size: 16px; + } + + #middle #left-column #content-area #resource-bar tbody tr th:last-child { + width: 8em; + text-align: left; + } + + #middle #left-column #content-area #game-navigation .navigation { + margin-top: 15px; + } + + #middle #left-column #content-area #game-navigation .navigation div { + margin: 0; + padding: 0; + float: left; + position: relative; + } + + #middle #left-column #content-area #game-navigation .navigation div a { + padding: 0 15px; + line-height: 32px; + font-size: 12px; + font-weight: 700; + text-decoration: none; + display: block; + } + #middle #left-column #content-area .game-content table.three-column-stats th { + font-size: 14px; + } + + #middle #left-column #content-area .game-content table.three-column-stats td { + font-size: 14px; + } + #middle #left-column #content-area .game-content table.math-table th { + font-size: 14px; + } + + #middle #left-column #content-area .game-content table.math-table td { + font-size: 14px; + } + #middle #left-column #content-area .game-content table.data th { + font-size: 14px; + } + + #middle #left-column #content-area .game-content table.data td { + font-size: 14px; + } + #middle #left-column #content-area .game-content table.schedule th { + font-size: 14px; + } + + #middle #left-column #content-area .game-content table.schedule td { + font-size: 14px; + } + + #middle #left-column #content-area .game-content table th { + font-size: 14px; + } + + #middle #left-column #content-area .game-content table td { + font-size: 14px; + } + +} + + diff --git a/theme.css b/theme.css index a12fbc5a..7c656f3c 100644 --- a/theme.css +++ b/theme.css @@ -1,1446 +1,668 @@ -@import url("uniform.utopia.css"); - -/* -FOLLOW THIS FORMAT: - -.my-first-selector, -.my-second-selector { - - positioning and size - - border styling - - internal styling - padding etc. - - typography - - colors - - display, opacity and special effects -} -*/ - -@font-face { - font-family: 'KnightsQuestRegular'; - src: url('./fonts/knights-webfont.eot'); - src: url('./fonts/knights-webfont.eot?#iefix') format('embedded-opentype'), - url('./fonts/knights-webfont.woff') format('woff'), - url('./fonts/knights-webfont.ttf') format('truetype'), - url('./fonts/knights-webfont.svg#KnightsQuestRegular') format('svg'); - font-weight: normal; - font-style: normal; -} - -body { - color: white; - font-family: 'Trebuchet MS', Helvetica, sans-serif; - background-color: black; -} - - -#header-logo { - background: url(./images/logo_header.png) no-repeat top left; - width: 243px; - height: 49px; - position: absolute; -} - -.navigation { - - /* border styling */ - border: 2px solid; - border-radius: 2px; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - - /* internal styling - padding etc. */ - - /* typography */ - font-family: KnightsQuestRegular; - font-size: 20px; - font-weight: normal; - text-align: left; - - -moz-text-shadow: -1px 1px 2px #000, 1px -1px 2px #ffcf68; - -webkit-text-shadow: -1px 1px 2px #000, 1px -1px 2px #ffcf68; - text-shadow: -1px 1px 2px #000, 1px -1px 1px #ffcf68; - filter: glow(color=#252525,strength=3); - - /* colors */ - border-color: #555555; - -moz-box-shadow: 1px -1px 2px 0px #fffbf1, inset 0px 0px 6px #000; - -webkit-box-shadow: 1px -1px 2px 0px #fffbf1, inset 0px 0px 6px #000; - box-shadow: 1px -1px 2px 0px #fffbf1, inset 0px 0px 6px #000; - - background: #494432; /* Old browsers */ - background: -moz-radial-gradient(center, ellipse cover, #7b7354 0%, #29261c 100%); /* FF3.6+ */ - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#7b7354), color-stop(100%,#29261c)); /* Chrome,Safari4+ */ - background: -webkit-radial-gradient(center, ellipse cover, #7b7354 0%,#29261c 100%); /* Chrome10+,Safari5.1+ */ - background: -o-radial-gradient(center, ellipse cover, #7b7354 0%,#29261c 100%); /* Opera 12+ */ - background: -ms-radial-gradient(center, ellipse cover, #7b7354 0%,#29261c 100%); /* IE10+ */ - background: radial-gradient(center, ellipse cover, #7b7354 0%,#29261c 100%); /* W3C */ -} - -.navigation a { - text-decoration: none; - color: #fff; -} - -.navigation a:hover { - /* colors */ - color: white; -} - -#header-navigation div { - /* display, opacity and special effects */ - opacity:0.7; - filter:alpha(opacity=70); /* For IE8 and earlier */ -} - -#header-navigation div:hover { - /* display, opacity and special effects */ - opacity:1.0; - filter:alpha(opacity=100); /* For IE8 and earlier */ - -moz-box-shadow: 1px -1px 2px 0px #fffbf1, inset 0px 0px 4px #7c4a14, 0px 8px 10px -6px #fff;; - -webkit-box-shadow: 1px -1px 2px 0px #fffbf1, inset 0px 0px 4px #7c4a14, 0px 8px 10px -6px #fff;; - box-shadow: 1px -1px 2px 0px #fffbf1, inset 0px 0px 6px #000, 0px -8px 8px -6px #fff; - -} - -#account-container { - font-family: KnightsQuestRegular; - font-size: 20px; -} - -#account-header .account-image { - background: url(./images/anonymous_small.png) no-repeat top left; -} - -#account-header -{ - color: #edf2fd; -} - -#account-header:hover -{ - background-color: #494432; -} - -#account-header.selected -{ - background-color: #494432; -} - -#account-details -{ - font-size: 12px; - font-family: 'Trebuchet MS', Helvetica, sans-serif; - line-height: 16px; - background-color: #494432; -} - -#account-details .account-title -{ - font-size: 18px; - font-weight: bolder; - font-family: KnightsQuestRegular; - border-bottom: 1px solid #29261c; - -moz-box-shadow: 0px 2px 1px -1px #7b7354; - -webkit-box-shadow: 0px 2px 1px -1px #7b7354; - box-shadow: 0px 2px 1px -1px #7b7354; - -} - -#account-details .alert a { - color: #ff771c; - text-shadow: -1px 1px 2px black; -} - -#account-details a:hover { - box-shadow: -10px 0px 6px -6px #fff; - -} - -#account-details .account-summary { - /* internal styling - padding etc. */ - border-bottom: 1px solid #29261c; - -moz-box-shadow: 0px 2px 1px -1px #7b7354; - -webkit-box-shadow: 0px 2px 1px -1px #7b7354; - box-shadow: 0px 2px 1px -1px #7b7354; - -} - -#account-details .account-signout -{ - border-top: 1px solid #29261c; - -moz-box-shadow: inset 0px 2px 1px -1px #7b7354; - -webkit-box-shadow: inset 0px 2px 1px -1px #7b7354; - box-shadow: inset 0px 2px 1px -1px #7b7354; - font-weight: bold; - text-align: right; - -} - -#middle { - /* positioning and size */ - /* border styling */ - /* internal styling - padding etc. */ - background-image: url(./images/leather.jpg); - background-repeat: repeat-y; - background-position: top left; - /* typography */ - /* colors */ - /* display, opacity and special effects */ - box-shadow: 3px -3px 5px #191919, -10px 10px 10px #000; - -} - -a { - color: #e5c40f; - text-decoration: none; -} - -a.highlighted { - color: #E68910; -} - -a.info-link { - font-family: 'Trebuchet MS', Helvetica, sans-serif; - font-size: 14px; -} - -a:focus, -a:hover { - color: #fff; -} - -h1, -h2, -h3 { - font-family: KnightsQuestRegular; - font-weight: 200; - color: #fff; - -moz-text-shadow: -1px 1px 2px #000; - -webkit-text-shadow: -1px 1px 2px #000; - text-shadow: -1px 1px 2px #000; - filter: glow(color=#252525,strength=3); -} - -#footer { - color: #4d5355; - font-size: 10px; -} - -.report-this { - color: #c4a112; - background-color: #18100e; - border-bottom-left-radius: 8px 8px; - -moz-border-radius-bottomleft: 8px 8px; - - - -moz-box-shadow: 0px 3px 4px #000; - -webkit-box-shadow: 0px 3px 4px #000; - box-shadow: 0px 3px 4px #000; - /* For IE 8 */ - -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')"; - /* For IE 5.5 - 7 */ - filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000'); - -} - -.report-this:hover { - color: #c4a112; - background-color: #2a201d; -} - -.reported-content { - border: 2px inset #616161; - background-color: #000000; -} - -.overlay -{ - background-color: #2f2e2e; - border:1px solid #666; - box-shadow:0 0 90px 5px #000; - -moz-box-shadow:0 0 90px 5px #000; - -webkit-box-shadow: 0 0 90px #000; - -} - -.overlay .close -{ - background-image:url("./images/overlay-close.png"); -} - -.age-changes, -.lobby-panel, -.campaigns { - /* border styling */ - border: 2px solid; - border-radius: 12px; - -moz-border-radius: 12px; - -webkit-border-radius: 12px; - - - /* internal styling - padding etc. */ - - /* typography */ - -moz-text-shadow: -1px 1px 2px #000, 1px -1px 2px #ffcf68; - -webkit-text-shadow: -1px 1px 2px #000, 1px -1px 2px #ffcf68; - text-shadow: -1px 1px 2px #000, 1px -1px 1px #ffcf68; - - /* colors */ - border-color: #555555; - -moz-box-shadow: 1px -1px 2px 0px #fffbf1, inset 0px 0px 6px #000; - -webkit-box-shadow: 1px -1px 2px 0px #fffbf1, inset 0px 0px 6px #000; - box-shadow: 1px -1px 2px 0px #fffbf1, inset 0px 0px 6px #000; - - background: #494432; /* Old browsers */ - background: -moz-radial-gradient(center, ellipse cover, #7b7354 0%, #29261c 100%); /* FF3.6+ */ - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#7b7354), color-stop(100%,#29261c)); /* Chrome,Safari4+ */ - background: -webkit-radial-gradient(center, ellipse cover, #7b7354 0%,#29261c 100%); /* Chrome10+,Safari5.1+ */ - background: -o-radial-gradient(center, ellipse cover, #7b7354 0%,#29261c 100%); /* Opera 12+ */ - background: -ms-radial-gradient(center, ellipse cover, #7b7354 0%,#29261c 100%); /* IE10+ */ - background: radial-gradient(center, ellipse cover, #7b7354 0%,#29261c 100%); /* W3C */ -} - -.lobby-panel h1 { - font-size: 40px; - line-height: 40px; - color: #EBE8CD; -} - -.lobby-panel h1 a:hover { - color: #fff; -} - -.divider { - background-image: url(./images/divider.png); - background-repeat: no-repeat; - background-position: top center; -} - -.divider-small { - background-image: url(./images/divider-small.png); - background-repeat: no-repeat; - background-position: top center; -} - -.lobby-panel table th { - font-family: KnightsQuestRegular; - font-size: 20px; -} - -.lobby-panel table td { - font-size: 14px; -} - -.lobby-panel h2 { - font-size: 24px; - line-height: 30px; -} - -.age-changes h3, -.campaigns h3 { - font-size: 20px; - line-height: 24px; -} - -.recruitment-campaigns h1, -.race-changes h1, -.trait-changes h1 { - font-size: 40px; - line-height: 45px; -} - -.race-changes h2, -.trait-changes h2 { - font-size: 30px; -} - -.campaigns .basic-details .campaign-summary h2{ - font-size: 18px; -} - -.campaigns .basic-details .campaign-summary .highlight-keyword{ - font-size: 22px; -} - -.good { - color: #90ee90; -} - -.bad { - color: #EC7566; -} - -.message { - font-weight: bold; - font-size: 18px; - line-height: 20px; - - /* border styling */ - border: 1px solid; - border-radius: 8px; - -moz-border-radius: 8px; - -webkit-border-radius: 8px; - - - /* internal styling - padding etc. */ - /* typography */ - font-family: KnightsQuestRegular; - font-size: 20px; -} - -.good.message -{ - color: #fefff7; - -moz-text-shadow: -1px 1px 2px #363a19, 1px -1px 2px #363a19; - -webkit-text-shadow: -1px 1px 2px #363a19, 1px -1px 2px #363a19; - text-shadow: -1px 1px 2px #363a19, 1px -1px 1px #363a19; - - /* colors */ - border-color: #feffea; - -moz-box-shadow: 1px -1px 1px 0px #cbd3a9 , -1px 1px 2px #363a19, inset 0px 0px 10px #000; - -webkit-box-shadow: 1px -1px 1px 0px #cbd3a9 , -1px 1px 2px #363a19, inset 0px 0px 10px #000; - box-shadow: 1px -1px 1px 0px #cbd3a9 , -1px 1px 2px #363a19, inset 0px 0px 10px #000; - - background: #718d16; /* Old browsers */ - background: -moz-radial-gradient(center, ellipse cover, #789316 0%, #5d7a19 100%); /* FF3.6+ */ - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#789316 ), color-stop(100%,#5d7a19)); /* Chrome,Safari4+ */ - background: -webkit-radial-gradient(center, ellipse cover, #789316 0%,#5d7a19 100%); /* Chrome10+,Safari5.1+ */ - background: -o-radial-gradient(center, ellipse cover, #789316 0%,#5d7a19 100%); /* Opera 12+ */ - background: -ms-radial-gradient(center, ellipse cover, #789316 0%,#5d7a19 100%); /* IE10+ */ - background: radial-gradient(center, ellipse cover, #789316 0%,#5d7a19 100%); /* W3C */ - -} - -.bad.message -{ - color: #FFFCF7; - -moz-text-shadow: -1px 1px 2px #331100, 1px -1px 2px #331100; - -webkit-text-shadow: -1px 1px 2px #331100, 1px -1px 2px #331100; - text-shadow: -1px 1px 2px #331100, 1px -1px 1px #331100; - - /* colors */ - border-color: #feffea; - -moz-box-shadow: 1px -1px 1px 0px #D3AEA9 , -1px 1px 2px #331100, inset 0px 0px 10px #000; - -webkit-box-shadow: 1px -1px 1px 0px #D3AEA9 , -1px 1px 2px #331100, inset 0px 0px 10px #000; - box-shadow: 1px -1px 1px 0px #D3AEA9 , -1px 1px 2px #331100, inset 0px 0px 10px #000; - - background: #521802; /* Old browsers */ - background: -moz-radial-gradient(center, ellipse cover, #641E04 0%, #401100 100%); /* FF3.6+ */ - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#641E04 ), color-stop(100%,#401100)); /* Chrome,Safari4+ */ - background: -webkit-radial-gradient(center, ellipse cover, #641E04 0%,#401100 100%); /* Chrome10+,Safari5.1+ */ - background: -o-radial-gradient(center, ellipse cover, #641E04 0%,#401100 100%); /* Opera 12+ */ - background: -ms-radial-gradient(center, ellipse cover, #641E04 0%,#401100 100%); /* IE10+ */ - background: radial-gradient(center, ellipse cover, #641E04 0%,#401100 100%); /* W3C */ - -} - -.info.message -{ - color: #FFFCF7; - -moz-text-shadow: -1px 1px 2px #362301, 1px -1px 2px #362301; - -webkit-text-shadow: -1px 1px 2px #362301, 1px -1px 2px #362301; - text-shadow: -1px 1px 2px #362301, 1px -1px 1px #362301; - - /* colors */ - border-color: #feffea; - -moz-box-shadow: 1px -1px 1px 0px #D4C7AF , -1px 1px 2px #362301, inset 0px 0px 10px #000; - -webkit-box-shadow: 1px -1px 1px 0px #D4C7AF , -1px 1px 2px #362301, inset 0px 0px 10px #000; - box-shadow: 1px -1px 1px 0px #D4C7AF , -1px 1px 2px #362301, inset 0px 0px 10px #000; - - background: #D09734; /* Old browsers */ - background: -moz-radial-gradient(center, ellipse cover, #D09734 0%, #594118 100%); /* FF3.6+ */ - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#D09734 ), color-stop(100%,#594118)); /* Chrome,Safari4+ */ - background: -webkit-radial-gradient(center, ellipse cover, #D09734 0%,#594118 100%); /* Chrome10+,Safari5.1+ */ - background: -o-radial-gradient(center, ellipse cover, #D09734 0%,#594118 100%); /* Opera 12+ */ - background: -ms-radial-gradient(center, ellipse cover, #D09734 0%,#594118 100%); /* IE10+ */ - background: radial-gradient(center, ellipse cover, #D09734 0%,#594118 100%); /* W3C */ - -} - - -/* User profile page --------------------------------------------------------------- */ - -.lobby-panel .statement { - background: url('./images/province_profile/scroll.png') no-repeat; -} - -.lobby-panel .statement h2 { - line-height: 16px; -} - -.advice-message { - color: #a5d387; -} - -.warning { - color: #e55700; -} - -.error { - color: #e55700; -} - -#game-navigation .current-date { - - padding: 11px 0px; - - font-family: KnightsQuestRegular; - font-size: 16px; - text-shadow: -1px 1px 2px black, 1px -1px 1px #FFCF68; - - /* border styling */ - border: 2px solid; - border-radius: 2px; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - - - border-color: #555555; - -moz-box-shadow: 1px -1px 2px 0px #fffbf1, inset 0px 0px 6px #000; - -webkit-box-shadow: 1px -1px 2px 0px #fffbf1, inset 0px 0px 6px #000; - box-shadow: 1px -1px 2px 0px #fffbf1, inset 0px 0px 6px #000; - - background: #3a3830; /* Old browsers */ - background: -moz-radial-gradient(center, ellipse cover, #3a3830 0%, #23221f 100%); /* FF3.6+ */ - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#3a3830), color-stop(100%,#23221f)); /* Chrome,Safari4+ */ - background: -webkit-radial-gradient(center, ellipse cover, #3a3830 0%,#23221f 100%); /* Chrome10+,Safari5.1+ */ - background: -o-radial-gradient(center, ellipse cover, #3a3830 0%,#23221f 100%); /* Opera 12+ */ - background: -ms-radial-gradient(center, ellipse cover, #3a3830 0%,#23221f 100%); /* IE10+ */ - background: radial-gradient(center, ellipse cover, #3a3830 0%,#23221f 100%); /* W3C */ -} - -#game-navigation a { - line-height: 0.6em; -} - -#game-navigation a:hover { - box-shadow: -10px 0px 6px -6px #fff; - -} - -#resource-bar -{ - /* border styling */ - border: 2px solid; - border-radius: 2px; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - - /* internal styling - padding etc. */ - - /* typography */ - font-family: KnightsQuestRegular; - font-size: 14px; - - -moz-text-shadow: -1px 1px 2px #000, 1px -1px 2px #ffcf68; - -webkit-text-shadow: -1px 1px 2px #000, 1px -1px 2px #ffcf68; - text-shadow: -1px 1px 2px #000, 1px -1px 1px #ffcf68; - - /* colors */ - border-color: #555555; - -moz-box-shadow: 0px -1px 1px #fffbf1, - inset 0px 1px 2px #000, - inset 0px -1px 1px #fffbf1, - 0px 1px 1px #000, - -1px 0px 2px #000, - inset 1px 0px 1px #fffbf1, - inset -1px 0px 2px #000, - 1px 0px 1px #fffbf1; - -webkit-box-shadow: 0px -1px 1px #fffbf1, - inset 0px 1px 2px #000, - inset 0px -1px 1px #fffbf1, - 0px 1px 1px #000, - -1px 0px 2px #000, - inset 1px 0px 1px #fffbf1, - inset -1px 0px 2px #000, - 1px 0px 1px #fffbf1; - box-shadow: 0px -1px 1px #fffbf1, - inset 0px 1px 2px #000, - inset 0px -1px 1px #fffbf1, - 0px 1px 1px #000, - -1px 0px 2px #000, - inset 1px 0px 1px #fffbf1, - inset -1px 0px 2px #000, - 1px 0px 1px #fffbf1; - - background: #d7d7d7; /* Old browsers */ - background: -moz-radial-gradient(center, ellipse cover, #d7d7d7 0%, #353535 100%); /* FF3.6+ */ - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#d7d7d7), color-stop(100%,#353535)); /* Chrome,Safari4+ */ - background: -webkit-radial-gradient(center, ellipse cover, #d7d7d7 0%,#353535 100%); /* Chrome10+,Safari5.1+ */ - background: -o-radial-gradient(center, ellipse cover, #d7d7d7 0%,#353535 100%); /* Opera 12+ */ - background: -ms-radial-gradient(center, ellipse cover, #d7d7d7 0%,#353535 100%); /* IE10+ */ - background: radial-gradient(center, ellipse cover, #d7d7d7 0%,#353535 100%); /* W3C */ - -} - -#resource-bar thead { - background: #3a3830; /* Old browsers */ - background: -moz-radial-gradient(center, ellipse cover, #3a3830 0%, #23221f 100%); /* FF3.6+ */ - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#3a3830), color-stop(100%,#23221f)); /* Chrome,Safari4+ */ - background: -webkit-radial-gradient(center, ellipse cover, #3a3830 0%,#23221f 100%); /* Chrome10+,Safari5.1+ */ - background: -o-radial-gradient(center, ellipse cover, #3a3830 0%,#23221f 100%); /* Opera 12+ */ - background: -ms-radial-gradient(center, ellipse cover, #3a3830 0%,#23221f 100%); /* IE10+ */ - background: radial-gradient(center, ellipse cover, #3a3830 0%,#23221f 100%); /* W3C */ -} - -#resource-bar thead th { - font-weight: normal; -} - -#resource-bar tbody th, -#resource-bar tbody td{ - width: 98px; - border-right: 1px inset #444444; - border-bottom: 1px inset #444444; - - padding: 3px 6px 3px 6px; - background: transparent; - - font-size: 11px; - font-weight: lighter; - font-family: 'Trebuchet MS', Helvetica, sans-serif; - text-align: right; - color: #a9a9a9; - -moz-text-shadow: -1px 1px 1px #222222, 1px -1px 1px #222222, 1px 1px 1px #222222, -1px -1px 1px #7b7354; - -webkit-text-shadow: -1px 1px 1px #222222, 1px -1px 1px #222222, 1px 1px 1px #222222, -1px -1px 1px #7b7354; - text-shadow: -1px 1px 1px #222222, 1px -1px 1px #222222, 1px 1px 1px #222222, -1px -1px 1px #7b7354; - filter: glow(color=#252525,strength=3); -} - -#resource-bar tbody th { - font-size: 12px; - font-weight: bolder; -} - -#resource-bar thead th { - width: 98px; - border-right: 1px inset #141413; - border-bottom: 1px inset #141413; - background: transparent; -} - - -#resource-bar .positive { - color: #8FA94A; -} - -#resource-bar .negative { - color: #d0aeae; -} - -.game-content form, -.game-content h2 { - border: 2px solid; - border-left: 0px; - border-right: 0px; - - /* internal styling - padding etc. */ - - /* colors */ - border-color: #181818; - - -moz-box-shadow: inset 0px 0px 6px #000, - inset -3px 3px 3px 2px #545454; - -webkit-box-shadow: inset 0px 0px 6px #000, - inset -3px 3px 3px 2px #545454; - box-shadow: inset 0px 0px 6px #000, - inset -3px 3px 3px 2px #545454; - - color: #fff; - -moz-text-shadow: -1px 1px 1px #000, 1px -1px 1px #69634D; - -webkit-text-shadow: -1px 1px 1px #000, 1px -1px 1px #69634D; - text-shadow: -1px 1px 1px #000, 1px -1px 1px #69634D; - - background: rgb(86, 83, 74); /* Old browsers */ - background: -moz-radial-gradient(center, ellipse cover, #d7d7d7 0%, #353535 100%); /* FF3.6+ */ - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#d7d7d7), color-stop(100%,#353535)); /* Chrome,Safari4+ */ - background: -webkit-radial-gradient(center, ellipse cover, #d7d7d7 0%,#353535 100%); /* Chrome10+,Safari5.1+ */ - background: -o-radial-gradient(center, ellipse cover, #d7d7d7 0%,#353535 100%); /* Opera 12+ */ - background: -ms-radial-gradient(center, ellipse cover, #d7d7d7 0%,#353535 100%); /* IE10+ */ - background: radial-gradient(center, ellipse cover, #d7d7d7 0%,#353535 100%); /* W3C */ - -} - -.game-content h3 { - font-size: 24px; - color: #fff; - -moz-text-shadow: -1px 1px 1px #000, 1px -1px 1px #69634D; - -webkit-text-shadow: -1px 1px 1px #000, 1px -1px 1px #69634D; - text-shadow: -1px 1px 1px #000, 1px -1px 1px #69634D; -} - -.game-content form { - font-size: 12px; - font-weight: bolder; - background: rgb(86, 83, 74); /* Old browsers */ - background: -moz-radial-gradient(center, ellipse cover, #706e62 0%, #353535 100%); /* FF3.6+ */ - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#898989), color-stop(100%,#353535)); /* Chrome,Safari4+ */ - background: -webkit-radial-gradient(center, ellipse cover, #706e62 0%,#353535 100%); /* Chrome10+,Safari5.1+ */ - background: -o-radial-gradient(center, ellipse cover, #706e62 0%,#353535 100%); /* Opera 12+ */ - background: -ms-radial-gradient(center, ellipse cover, #706e62 0%,#353535 100%); /* IE10+ */ - background: radial-gradient(center, ellipse cover, #706e62 0%,#353535 100%); /* W3C */ -} - -.game-content form.no-visible-fields { - width: auto; - background: none; - border: none; - -moz-box-shadow: none; - -webkit-box-shadow: none; - box-shadow: none; - -} - -form ul.errorlist { - color: #e26f80; -} - -.game-content form.change-kingdom { - /* typography */ - font-family: KnightsQuestRegular; - font-size: 16px; -} - -.game-content form.change-kingdom .change-kingdom-heading { - font-size: 30px; - filter: glow(color=#252525,strength=3); - line-height: 24px; -} - -.game-content form.change-kingdom .change-kingdom-form { - font-size: 30px; - color: #a9a9a9; - -moz-text-shadow: -1px 1px 1px #222222, 1px -1px 1px #222222, 1px 1px 1px #222222, -1px -1px 1px #7b7354; - -webkit-text-shadow: -1px 1px 1px #222222, 1px -1px 1px #222222, 1px 1px 1px #222222, -1px -1px 1px #7b7354; - text-shadow: -1px 1px 1px #222222, 1px -1px 1px #222222, 1px 1px 1px #222222, -1px -1px 1px #7b7354; -} - -.game-content form.change-kingdom.change-kingdom-target { - border: 0px; - border-top: 2px solid; - border-color: #555555; - -moz-box-shadow: 0px -1px 1px #fffbf1, - inset 0px 1px 2px #000; - -webkit-box-shadow: 0px -1px 1px #fffbf1, - inset 0px 1px 2px #000; - box-shadow: 0px -1px 1px #fffbf1, - inset 0px 1px 2px #000; - -} - -input[type=text], -form textarea, -form input[type=text], -form input[type=password] { - border-width: 1px; - border-color: #d7d7d7; - padding-left: 3px; - font-family: KnightsQuestRegular; - font-size: 20px; - text-align: left; - - -moz-box-shadow: inset 0px 0px 4px #7c4a14; - -webkit-box-shadow: inset 0px 0px 4px #7c4a14; - box-shadow: inset 0px 0px 6px #000; - - color: #fff; - background: #3a3830; /* Old browsers */ - background: -moz-radial-gradient(center, ellipse cover, #3a3830 0%, #23221f 100%); /* FF3.6+ */ - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#3a3830), color-stop(100%,#23221f)); /* Chrome,Safari4+ */ - background: -webkit-radial-gradient(center, ellipse cover, #3a3830 0%,#23221f 100%); /* Chrome10+,Safari5.1+ */ - background: -o-radial-gradient(center, ellipse cover, #3a3830 0%,#23221f 100%); /* Opera 12+ */ - background: -ms-radial-gradient(center, ellipse cover, #3a3830 0%,#23221f 100%); /* IE10+ */ - background: radial-gradient(center, ellipse cover, #3a3830 0%,#23221f 100%); /* W3C */ - - -} - -form input[type=text], -form input[type=password] { - height: 30px; - font-size: 30px; -} - -form .errorlist { - font-size: 12px; -} - -form input[type=submit], -.button-link { - /* positioning and size */ - - /* border styling */ - border: 1px solid; - border-radius: 4px; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - - - /* internal styling - padding etc. */ - /* typography */ - font-family: KnightsQuestRegular; - font-size: 20px; - font-weight: normal; - -moz-text-shadow: -1px 1px 2px #3d2f1a, 1px -1px 2px #3d2f1a; - -webkit-text-shadow: -1px 1px 2px #3d2f1a, 1px -1px 2px #3d2f1a; - text-shadow: -1px 1px 2px #3d2f1a, 1px -1px 1px #3d2f1a; - - /* colors */ - border-color: #7c551a; - -moz-box-shadow: 1px -1px 1px 0px #D4CAA8 , -1px 1px 2px #3d2f1a, inset 0px 0px 10px #000; - -webkit-box-shadow: 1px -1px 1px 0px #D4CAA8 , -1px 1px 2px #3d2f1a, inset 0px 0px 10px #000; - box-shadow: 1px -1px 1px 0px #D4CAA8 , -1px 1px 2px #3d2f1a, inset 0px 0px 10px #000; - - background: #9c7815; /* Old browsers */ - background: -moz-radial-gradient(center, ellipse cover, #E5C40F 0%, #7c551a 100%); /* FF3.6+ */ - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#E5C40F ), color-stop(100%,#7c551a)); /* Chrome,Safari4+ */ - background: -webkit-radial-gradient(center, ellipse cover, #E5C40F 0%,#7c551a 100%); /* Chrome10+,Safari5.1+ */ - background: -o-radial-gradient(center, ellipse cover, #E5C40F 0%,#7c551a 100%); /* Opera 12+ */ - background: -ms-radial-gradient(center, ellipse cover, #E5C40F 0%,#7c551a 100%); /* IE10+ */ - background: radial-gradient(center, ellipse cover, #E5C40F 0%,#7c551a 100%); /* W3C */ - - color: #fff; -} - -form input[type=submit]:hover, -.button-link:hover { - /* colors */ - background: #c99a1a; - background: -moz-radial-gradient(center, ellipse cover, #ead464 0%, #775f3a 100%); /* FF3.6+ */ - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ead464 ), color-stop(100%,#775f3a)); /* Chrome,Safari4+ */ - background: -webkit-radial-gradient(center, ellipse cover, #ead464 0%,#775f3a 100%); /* Chrome10+,Safari5.1+ */ - background: -o-radial-gradient(center, ellipse cover, #ead464 0%,#775f3a 100%); /* Opera 12+ */ - background: -ms-radial-gradient(center, ellipse cover, #ead464 0%,#775f3a 100%); /* IE10+ */ - background: radial-gradient(center, ellipse cover, #ead464 0%,#775f3a 100%); /* W3C */ -} - -form input[type=submit]:active, -.button-link:active { - /* colors */ - background: #ba8500; - background: -moz-radial-gradient(center, ellipse cover, #fceea6 0%, #9b7e52 100%); /* FF3.6+ */ - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#fceea6 ), color-stop(100%,#9b7e52)); /* Chrome,Safari4+ */ - background: -webkit-radial-gradient(center, ellipse cover, #fceea6 0%,#9b7e52 100%); /* Chrome10+,Safari5.1+ */ - background: -o-radial-gradient(center, ellipse cover, #fceea6 0%,#9b7e52 100%); /* Opera 12+ */ - background: -ms-radial-gradient(center, ellipse cover, #fceea6 0%,#9b7e52 100%); /* IE10+ */ - background: radial-gradient(center, ellipse cover, #fceea6 0%,#9b7e52 100%); /* W3C */ -} - -div.selector span, -div.uploader span.filename, -div.uploader span.action -{ - padding-left: 5px; - /* typography */ - font-family: KnightsQuestRegular; - font-size: 20px; - font-weight: normal; - text-align: left; - -moz-text-shadow: -1px 1px 2px #3d2f1a, 1px -1px 2px #3d2f1a; - -webkit-text-shadow: -1px 1px 2px #3d2f1a, 1px -1px 2px #3d2f1a; - text-shadow: -1px 1px 2px #3d2f1a, 1px -1px 1px #3d2f1a; -} -div.uploader span.filename, -div.uploader span.action -{ - font-size: 18px; -} - -.game-content form table { - border: 0px; - border-top: 2px solid; - border-color: #555555; - margin-bottom: 10px; - -moz-box-shadow: 0px -1px 1px #fffbf1, - inset 0px 1px 2px #000; - -webkit-box-shadow: 0px -1px 1px #fffbf1, - inset 0px 1px 2px #000; - box-shadow: 0px -1px 1px #fffbf1, - inset 0px 1px 2px #000; - - text-align: left; - -} - -.game-content form table thead th { - height: 36px; - - font-family: KnightsQuestRegular; - font-weight: normal; - font-size: 20px; - text-align: center; - text-decoration: none; - vertical-align: bottom; -} - -.game-content form tbody th { - border-left: 2px ridge rgba(48, 48, 48, 0.4); - font-family: KnightsQuestRegular; - font-size: 20px; - -} - -.game-content form tbody th:first-child { - border-left: none; -} - -.game-content form tbody td { - padding-right: 20px; - font-size: 12px; - text-align: center; -} - -.game-content form tbody tr { - border: none; -} -.game-content form tbody tr:nth-child(even) { - /* display, opacity and special effects*/ - background: rgb(48, 48, 48); - background: rgba(48, 48, 48, 0.1); - -} - - -.game-content form.change-kingdom #royal-commands { - border-top: 2px dotted #000; -} - -.game-content form.change-kingdom #royal-commands table { - border-top: none; - -moz-box-shadow: none; - -webkit-box-shadow: none; - box-shadow: none; -} - -.game-content form.change-kingdom #royal-commands table tbody td, -.game-content form.change-kingdom #royal-commands input[type=text] { - font-family: 'Trebuchet MS', Helvetica, sans-serif; - font-size: 13px; - font-weight: normal; -} - - -.game-content form.change-kingdom #royal-commands .button-link { - font-size: 16px; - line-height: 20px; -} - -/* KINGDOM NEWS */ - -.news-legend span.news-aid:before { - content: url(./images/kingdom_news/aid_inline.png); -} -.news-legend span.news-intra-kingdom-conflict:before { - content: url(./images/kingdom_news/intra_kingdom_conflict_inline.png); -} -.news-legend span.news-actions-against-our-kingdom:before { - content: url(./images/kingdom_news/actions_against_our_kingdom_inline.png); -} -.news-legend span.news-actions-by-our-kingdom:before { - content: url(./images/kingdom_news/actions_by_our_kingdom_inline.png); -} -.news-legend span.news-dragon:before { - content: url(./images/kingdom_news/dragon_inline.png); -} -.news-legend span.news-obituaries:before { - content: url(./images/kingdom_news/obituaries_inline.png); -} -.news-legend span.news-relations:before { - content: url(./images/kingdom_news/relations_inline.png); -} -.news-province-modification:before { - content: url(./images/kingdom_news/province_modification_inline.png); -} - -td.news-aid { - background-image: url(./images/kingdom_news/aid.png); -} -td.news-intra-kingdom-conflict { - background-image: url(./images/kingdom_news/intra_kingdom_conflict.png); -} -td.news-actions-against-our-kingdom { - background-image: url(./images/kingdom_news/actions_against_our_kingdom.png); -} -td.news-actions-by-our-kingdom { - background-image: url(./images/kingdom_news/actions_by_our_kingdom.png); -} -td.news-dragon { - background-image: url(./images/kingdom_news/dragon.png); -} -td.news-obituaries { - background-image: url(./images/kingdom_news/obituaries.png); -} -td.news-relations { - background-image: url(./images/kingdom_news/relations.png); -} -td.news-province-modification { - background-image: url(./images/kingdom_news/province_modification.png); -} +/* Import Responsive Media Queries */ +@import url("media.css"); -/* KINGDOM DETAILS */ -.unused-slot { color: #B0B0B0; } -.protected, -.intel-fresh { color: #99ffbb; } -.monarch, -.at-war, -.intel-rotten { color: #F28585; } -.chamberlain, -.intel-stale { color: #FFC583; } -.you { font-weight: bold; } -.slot-number { font-size: 0.8em; color: #B0B0B0; } - -.provinces-legend { - font-size: 0.8em; -} - -.provinces-legend .invitations { - font-family: KnightsQuestRegular; - font-size: 18px; -} - -.dip-status -{ - color: #000; -} - -.dip-status-NORMAL -{ - background-color: #01DF01; -} - -.dip-status-UNFRIENDLY -{ - background-color: #FFBF00; -} - -.dip-status-HOSTILE -{ - background-color:#FF4000; - background-image: url(./images/hostile_meter/hostile_gradient.png); - background-repeat:repeat-y; -} - -.dip-status-WAR -{ - background-color: #FF0000; -} - -.own-meter-value -{ - background-image: url(./images/hostile_meter/up.png); -} - -.their-meter-value -{ - background-image: url(./images/hostile_meter/down.png); -} - -.war-button-meter-value -{ - background-image: url(./images/hostile_meter/war.png); -} - -#hostility-meter-example { - background-image: url(./images/hostile_meter/example.png); -} - -#id_taunt_top_image { - color: white; -} - -/* Province profile page --------------------------------------------------------------- */ - -.province-flag .flagpole { - background: url('./images/province_profile/flagpole.png') no-repeat; -} - -.province-flag .flag-image .default-flag { - background: url('./images/province_profile/default_flag.png') no-repeat; -} - -.motto { - background: url('./images/province_profile/scroll.png') no-repeat; -} - - -.game-header -{ - height: 30px; - border-top: 2px solid #6b6348; - border-bottom: 2px solid #6b6348; - background: #655e44; /* Old browsers */ - background: -moz-radial-gradient(center, ellipse cover, #d4caa8 0%, #45402e 100%); /* FF3.6+ */ - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#d4caa8), color-stop(100%,#45402e)); /* Chrome,Safari4+ */ - background: -webkit-radial-gradient(center, ellipse cover, #d4caa8 0%,#45402e 100%); /* Chrome10+,Safari5.1+ */ - background: -o-radial-gradient(center, ellipse cover, #d4caa8 0%,#45402e 100%); /* Opera 12+ */ - background: -ms-radial-gradient(center, ellipse cover, #d4caa8 0%,#45402e 100%); /* IE10+ */ - background: radial-gradient(center, ellipse cover, #d4caa8 0%,#45402e 100%); /* W3C */ -} - -.game-header h1 -{ - height: 22px; - margin: 0px 1px; - padding: 6px 4px 1px 4px; - - font-size: 24px; - text-decoration: none; - font-family: KnightsQuestRegular; - -moz-text-shadow: 1px -1px 1px #908661; - -webkit-text-shadow: 1px -1px 1px #908661; - text-shadow: 1px -1px 1px #908661; - filter: glow(color=#252525,strength=3); - - -moz-box-shadow: 1px 1px 1px 1px #6d664a; - -webkit-box-shadow: 1px 1px 1px 1px #6d664a; - box-shadow: 1px 1px 1px 1px #6d664a; - - background: #c4bea9; /* Old browsers */ - background: -moz-linear-gradient(top, #908661 0%, #c4bea9 15%, #f9f9f9 33%, #f9f9f9 65%, #c4bea9 84%, #908661 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#908661), color-stop(15%,#c4bea9), color-stop(33%,#f9f9f9), color-stop(65%,#f9f9f9), color-stop(84%,#c4bea9), color-stop(100%,#908661)); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, #908661 0%,#c4bea9 15%,#f9f9f9 33%,#f9f9f9 65%,#c4bea9 84%,#908661 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, #908661 0%,#c4bea9 15%,#f9f9f9 33%,#f9f9f9 65%,#c4bea9 84%,#908661 100%); /* Opera 11.10+ */ - background: -ms-linear-gradient(top, #908661 0%,#c4bea9 15%,#f9f9f9 33%,#f9f9f9 65%,#c4bea9 84%,#908661 100%); /* IE10+ */ - background: linear-gradient(top, #908661 0%,#c4bea9 15%,#f9f9f9 33%,#f9f9f9 65%,#c4bea9 84%,#908661 100%); /* W3C */ +/* Import Web Fonts */ +@import url("https://fonts.googleapis.com/css?family=Quicksand:400,300,700"); +/* Create a normal font family with readily colors on the body */ +body { color: #000; - -} - -.game-header a h1 { - background: #494432; /* Old browsers */ - background: -moz-linear-gradient(top, #29261c 0%, #494432 15%, #7b7354 45%, #7b7354 55%, #494432 84%, #29261c 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#29261c), color-stop(15%,#494432), color-stop(45%,#7b7354), color-stop(55%,#7b7354), color-stop(84%,#494432), color-stop(100%,#29261c)); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, #29261c 0%,#494432 15%,#7b7354 45%,#7b7354 55%,#494432 84%,#29261c 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, #29261c 0%,#494432 15%,#7b7354 45%,#7b7354 55%,#494432 84%,#29261c 100%); /* Opera 11.10+ */ - background: -ms-linear-gradient(top, #29261c 0%,#494432 15%,#7b7354 45%,#7b7354 55%,#494432 84%,#29261c 100%); /* IE10+ */ - background: linear-gradient(top, #29261c 0%,#494432 15%,#7b7354 45%,#7b7354 55%,#494432 84%,#29261c 100%); /* W3C */ -} - -.game-header a h1:hover -{ - -moz-text-shadow: none; - -webkit-text-shadow: none; - text-shadow: none; - - background: #29261c; /* Old browsers */ - background: -moz-linear-gradient(top, #29261c 0%, #494432 15%, #7b7354 45%, #7b7354 55%, #494432 84%, #29261c 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#29261c), color-stop(15%,#494432), color-stop(45%,#7b7354), color-stop(55%,#7b7354), color-stop(84%,#494432), color-stop(100%,#29261c)); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, #29261c 0%,#494432 15%,#7b7354 45%,#7b7354 55%,#494432 84%,#29261c 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, #29261c 0%,#494432 15%,#7b7354 45%,#7b7354 55%,#494432 84%,#29261c 100%); /* Opera 11.10+ */ - background: -ms-linear-gradient(top, #29261c 0%,#494432 15%,#7b7354 45%,#7b7354 55%,#494432 84%,#29261c 100%); /* IE10+ */ - background: linear-gradient(top, #29261c 0%,#494432 15%,#7b7354 45%,#7b7354 55%,#494432 84%,#29261c 100%); /* W3C */ - - color: #fff; - box-shadow: 0px 5px 3px -3px #fff; - -} - -.game-content { - border: 2px solid; - - /* border styling */ - border-radius: 2px; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - - - /* colors */ - border-color: #555555; - -moz-box-shadow: 0px -1px 1px #fffbf1, - inset 0px 1px 2px #000, - inset 0px -1px 1px #fffbf1, - 0px 1px 1px #000, - -1px 0px 2px #000, - inset 1px 0px 1px #fffbf1, - inset -1px 0px 2px #000, - 1px 0px 1px #fffbf1; - -webkit-box-shadow: 0px -1px 1px #fffbf1, - inset 0px 1px 2px #000, - inset 0px -1px 1px #fffbf1, - 0px 1px 1px #000, - -1px 0px 2px #000, - inset 1px 0px 1px #fffbf1, - inset -1px 0px 2px #000, - 1px 0px 1px #fffbf1; - box-shadow: 0px -1px 1px #fffbf1, - inset 0px 1px 2px #000, - inset 0px -1px 1px #fffbf1, - 0px 1px 1px #000, - -1px 0px 2px #000, - inset 1px 0px 1px #fffbf1, - inset -1px 0px 2px #000, - 1px 0px 1px #fffbf1; -} - -.game-content h2 { - margin-top: 20px; - border: 0px; - border-top: 2px solid; - border-bottom: 2px solid; - border-color: #555555; - -moz-box-shadow: 0px -1px 1px #fffbf1, - inset 0px 1px 2px #000, - inset 0px -1px 1px #fffbf1, - 0px 1px 1px #000; - -webkit-box-shadow: 0px -1px 1px #fffbf1, - inset 0px 1px 2px #000, - inset 0px -1px 1px #fffbf1, - 0px 1px 1px #000; - box-shadow: 0px -1px 1px #fffbf1, - inset 0px 1px 2px #000, - inset 0px -1px 1px #fffbf1, - 0px 1px 1px #000; - - line-height: 30px; - font-size: 30px; - -} - - -.game-content thead th { - font-family: KnightsQuestRegular; - font-weight: normal; - font-size: 18px; - - -moz-text-shadow: -1px 1px 2px #000, 1px -1px 2px #ffcf68; - -webkit-text-shadow: -1px 1px 2px #000, 1px -1px 2px #ffcf68; - text-shadow: -1px 1px 2px #000, 1px -1px 1px #ffcf68; - - background: #3a3830; /* Old browsers */ - background: -moz-radial-gradient(center, ellipse cover, #3a3830 0%, #23221f 100%); /* FF3.6+ */ - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#3a3830), color-stop(100%,#23221f)); /* Chrome,Safari4+ */ - background: -webkit-radial-gradient(center, ellipse cover, #3a3830 0%,#23221f 100%); /* Chrome10+,Safari5.1+ */ - background: -o-radial-gradient(center, ellipse cover, #3a3830 0%,#23221f 100%); /* Opera 12+ */ - background: -ms-radial-gradient(center, ellipse cover, #3a3830 0%,#23221f 100%); /* IE10+ */ - background: radial-gradient(center, ellipse cover, #3a3830 0%,#23221f 100%); /* W3C */ -} - -.game-content tbody th { - border-left: 6px ridge rgba(48, 48, 48, 0.4); - font-family: KnightsQuestRegular; - font-size: 18px; - -} - -.game-content tbody th:first-child { - border-left: none; -} - -.game-content tbody td { - padding-right: 20px; -} - -.game-content tbody tr { - border-bottom: 2px groove rgba(48, 48, 48, 0.4); - border-top: 2px groove rgba(48, 48, 48, 0.4); - -} - -.game-content tbody tr:nth-child(even) { - /* display, opacity and special effects*/ - background: rgb(48, 48, 48); - background: rgba(48, 48, 48, 0.6); - -} - -.game-content tbody tr.sub-total { - background: none; -} -.game-content tr.sub-total td -{ - border-top: 2px solid #B9B9B9; - padding-bottom: 25px; -} - - -.game-content table.schedule -{ - font-size:0.8em; -} - - -.two-digit-input { - width: 50px; -} -.three-digit-input { - width: 55px; -} - -.four-digit-input { - width: 70px; -} - -.five-digit-input { - width: 85px; -} - -.six-digit-input { - width: 100px; -} - -/* GAME PREFERENCES */ -.game-content div.preference-box { - background: rgb(86, 83, 74); /* Old browsers */ - background: -moz-radial-gradient(center, ellipse cover, #706e62 0%, #353535 100%); /* FF3.6+ */ - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#898989), color-stop(100%,#353535)); /* Chrome,Safari4+ */ - background: -webkit-radial-gradient(center, ellipse cover, #706e62 0%,#353535 100%); /* Chrome10+,Safari5.1+ */ - background: -o-radial-gradient(center, ellipse cover, #706e62 0%,#353535 100%); /* Opera 12+ */ - background: -ms-radial-gradient(center, ellipse cover, #706e62 0%,#353535 100%); /* IE10+ */ - background: radial-gradient(center, ellipse cover, #706e62 0%,#353535 100%); /* W3C */ -} - -.game-content div.preference-box.disabled { - opacity: 0.5; -} - -.game-content table.applicant-view input[type="submit"], -.game-content table.mail-view input[type="submit"], -.game-content table.mail-view .button-link { - font-size: 14px; -} - -table.mail-view td.formatted-text { - background: rgb(86, 83, 74); /* Old browsers */ - background: -moz-radial-gradient(center, ellipse cover, #706e62 0%, #353535 100%); /* FF3.6+ */ - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#898989), color-stop(100%,#353535)); /* Chrome,Safari4+ */ - background: -webkit-radial-gradient(center, ellipse cover, #706e62 0%,#353535 100%); /* Chrome10+,Safari5.1+ */ - background: -o-radial-gradient(center, ellipse cover, #706e62 0%,#353535 100%); /* Opera 12+ */ - background: -ms-radial-gradient(center, ellipse cover, #706e62 0%,#353535 100%); /* IE10+ */ - background: radial-gradient(center, ellipse cover, #706e62 0%,#353535 100%); /* W3C */ -} - -div.wysiwyg { - border: 1px solid #999; - padding: 5px; - background: rgb(86, 83, 74); -} - -div.wysiwyg ul.toolbar li { - background: url('./images/jquery.wysiwyg.gif') no-repeat -64px -80px; - border: 1px outset #83817d; -} - -body.wysiwyg { - color: #fff; - background: #3a3830; /* Old browsers */ - font-size: 12px; -} - -#bookmark-header { - background-image: url(./images/gold_star.png); - background-repeat: no-repeat; - background-position: center 3px; -} - -#bookmark-header:hover, -#bookmark-header.selected -{ - background-color: #494432; -} - -#bookmark-details -{ - font-size: 16px; + background-color: #F2F2F2; + font-family: 'Quicksand', sans-serif; +} + + a { + color: #9a2617; + text-decoration: none; + } + + a:hover { + color: #ee7727; + } + + /* Make the inner container full width */ + #inner-container { + background-color: #F2F2F2; + top: 0; + right: 0; + left: 0; + z-index: 1030; + min-height: 50px; + width: 100%; + margin: 0px; + padding: 0px; + padding-top: 0.2em; + } + + #header { + width: 100%; + padding-top: 1em; + padding-bottom: 1em; + box-shadow: 0 4px 2px -2px rgba(208,72,46, 1); + height: auto; + background-color: white; + } + + #header-logo { + background: url(./images/logo_header.png) no-repeat top left; + height: 100%; + display: inline-block; + margin-right: 2em; + min-height: 4.5em; + } + + #header-navigation { + width: 55%; + top: auto; + left: auto; + } + + #header #header-navigation div { + padding: 3px !important; + } + #header-navigation a { + color: #9a2617; + text-decoration: none; + margin-left: 0.5em; + margin-right: 0.5em; + } + + #header-navigation a:hover { + color: #ee7727; + } + + #id-shop-login-form { display: none; } + #account-container { + display: none !important; + } + + #middle div { + display: none !important; + } + #middle #left-column { + width: 100% !important; + display: block !important; + padding-bottom: 10em; + } + + #middle #left-column div { + display: none !important; + } + + #middle #left-column #content-area { + display: block !important; + width: 100% + } + + #middle #left-column #content-area .lobby-panel { + display: block !important; + width: 100%; + margin: 0; + padding: 0; + } + + #middle #left-column #content-area .lobby-panel table { + font-size: 1vw; + color: #000; + padding: 0; + width: 70%; + } + + #middle #left-column #content-area .lobby-panel table a { + color: #EE7727; + text-decoration: none; + } + + #middle #left-column #content-area .lobby-panel table a:hover { + color: #EE7727; + } + + #middle #left-column #content-area .lobby-panel table th { + margin: 0; + padding: 0; + text-align: left; + width: 25%; + line-height: 1.6em; + padding-left: 3em; + } + + #middle #left-column #content-area .lobby-panel table tr { + margin: 0; + padding: 0; + line-height: 1.6em; + } + + #middle #left-column #content-area .lobby-panel table td { + margin: 0; + padding: 0; + text-align: left; + width: 100%; + line-height: 1.6em; + } + + #middle #left-column #content-area .lobby-panel table .advice-message { + display: block !important; + } + + #middle #left-column #content-area .lobby-panel h1 { + margin-top: 2em; + margin-bottom: 1em; + } + + #middle #left-column #content-area .lobby-panel h1 a { + color: #ee7727; + text-decoration: none; + } + + #middle #left-column #content-area .lobby-panel h1 a:hover { + color: #ee7727; + text-decoration: none; + } + + #middle #left-column #content-area .lobby-panel p { + text-align: left; + } + + #middle #left-column #content-area .lobby-panel p a { + color: #FAB048; + text-decoration: none; + font-weight: normal; + font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; + font-size: 14px; + line-height: 1.42857; + } + + #middle #left-column #content-area .lobby-panel p a:hover { + color: #ee7727; + } + + #middle #left-column #content-area .lobby-panel form { + float: left; + width: 100%; + } + + #middle #left-column #content-area #resource-bar { + background-color: #D9EDF7; + border-color: #bce8f1; + border: 1px solid transparent; + width: 100%; + margin-bottom: 20px; + border-radius: 4px; + padding: 0.5em 2em; + display: inline-block; + color: rgb(0, 0, 0); + } + + #middle #left-column #content-area #resource-bar thead { + width: 100%; + display: inline-block; + } + + #middle #left-column #content-area #resource-bar thead tr { + width: 100%; + display: inline-block; + } + + #middle #left-column #content-area #resource-bar tbody { + width: 100%; + display: inline-block; + } + + #middle #left-column #content-area #resource-bar tbody { + width: 100%; + display: inline-block; + } + + #middle #left-column #content-area #game-navigation { + display: block !important; + width: 100%; + position: fixed; + bottom: 0px; + right: 0; + left: 0; + text-align: left; + background-color: white; + height: auto; + padding-left: 1em; + padding-top: 0.5em; + z-index: 9999999; + background-image: url("http://www.datadelen.com/design/standard_design/images/background_footer.jpg"); + } + + #middle #left-column #content-area #game-navigation .current-date { + color: #000; + font-weight: 700; + font-size: 16px; + margin-right: 0.5em; + position: absolute; + color: wheat; + left: 50%; + right: 0px; + } + + #middle #left-column #content-area #game-navigation div { + display: inline-block !important; + } + + #middle #left-column #content-area #game-navigation div a { + color: #FAB048; + text-decoration: none; + font-size: 16px; + margin-left: 0.2em; + margin-right: 0.2em; + } + + #middle #left-column #content-area #game-navigation div a:hover { + color: #ee7727; + } + + #middle #left-column #content-area .game-header { + display: block !important; + width: 100%; + border-bottom: 1px solid #DDD; + } + + #middle #left-column #content-area .game-header h1 { + color: #7b7354; + font-size: 22px; + margin-left: 0.4em; + margin-right: 0.4em; + font-weight: normal; + } + + #middle #left-column #content-area .game-header a { + color: #9a2617; + text-decoration: none; + font-size: 22px; + margin-left: 0.4em; + margin-right: 0.4em; + } + + #middle #left-column #content-area .game-header a h1 { + color: #9a2617; + font-size: 22px; + margin-left: 0.4em; + margin-right: 0.4em; + font-weight: normal; + } + + #middle #left-column #content-area .game-header a:hover { + color: #ee7727; + } + + #middle #left-column #content-area .game-header a h1:hover { + color: #ee7727; + } + + #middle #left-column #content-area .game-content { + display: block !important; + width: 100%; + text-align: left; + margin-top: 1em; + } + + #middle #left-column #content-area .game-content h2 { + font-size: 15px; + font-weight: normal; + padding: 0.5em 0.5em 0.5em 0.5em; + background-color: #dff0d8; + border: 1px solid transparent; + width: 100%; + margin-bottom: 20px; + border-radius: 4px; + padding: 0.5em 0.5em 0.5em 0.5em; + display: inline-block; + color: rgb(0, 0, 0); + border-color: #d6e9c6; + } + + #middle #left-column #content-area .game-content #throne-monarch-message { + background-color: #fcf8e3; + border: 1px solid transparent; + width: 100%; + margin-bottom: 20px; + border-radius: 4px; + padding: 0.5em 0.5em 0.5em 0.5em; + display: inline-block; + color: rgb(0, 0, 0); + border-color: #faebcc; + } + + #middle #left-column #content-area .game-content #throne-monarch-message h2 { + display: none !important; + } + + #middle #left-column #content-area .game-content #throne-monarch-message p { + font-size: 14px; + margin: 0; + padding: 0; + text-align: left; + padding-right: 1.5em; + padding-left: 1.5em; + } + + #middle #left-column #content-area .game-content #throne-monarch-message p br { + display: none; + } + + #middle #left-column #content-area .game-content p { + font-size: 0px; + margin: 0; + padding: 0; + text-align: left; + } + + #middle #left-column #content-area .game-content p a { + color: #9a2617; + text-decoration: none; + font-size: 14px; + text-transform: capitalize; + margin-right: 3em; + text-align: left; + } + + #middle #left-column #content-area .game-content p a:hover { + color: #ee7727; + } + + #middle #left-column #content-area .game-content div { + display: block !important; + width: 100%; + } + + #middle #left-column #content-area .game-content table { + display: block !important; + width: 100%; + text-align: left; + font-size: 16px; + margin: 0; + padding: 0.5em 0.5em 0.5em 0.5em; + background-color: #fff; + border: 1px solid transparent; + margin-bottom: 20px; + border-radius: 4px; + color: rgb(0, 0, 0); + border-color: #faebcc; + padding-left: 4em; + } + + #middle #left-column #content-area .game-content table thead th { + width: 3em; + } + + #middle #left-column #content-area .game-content table thead td:first-child { + width: 10%; + } + + #middle #left-column #content-area .game-content table thead tr th { + font-weight: 700; + } + + #middle #left-column #content-area .game-content table th { + text-align: left; + margin: 0; + padding: 0; + border-bottom: 1px dotted #000; + padding-left: 0.5em; + } + + #middle #left-column #content-area .game-content table td { + border-bottom: 1px dotted #000; + padding-left: 0.5em; + } + + #middle #left-column #content-area .game-content table .even { + background-color: #eeeeee; + } + + #middle #left-column #content-area .game-content table thead th { + width: 15%; + } + + #middle #left-column #content-area .game-content table thead th:first-child { + width: 20%; + } + + #middle #left-column #content-area .game-content table.two-column-stats th { + width: 20%; + text-align: left; + margin: 0; + padding: 0; + border-bottom: 1px dotted #000; + } + + #middle #left-column #content-area .game-content table.two-column-stats td { + border-bottom: 1px dotted #000; + } + + #middle #left-column #content-area .game-content table.three-column-stats thead tr th { + font-weight: 700; + } + + #middle #left-column #content-area .game-content table.three-column-stats th { + text-align: left; + margin: 0; + padding: 0; + border-bottom: 1px dotted #000; + } + + #middle #left-column #content-area .game-content table.three-column-stats td { + border-bottom: 1px dotted #000; + } + + #middle #left-column #content-area .game-content table.math-table thead th { + width: 15%; + } + + #middle #left-column #content-area .game-content table.math-table thead th:first-child { + width: 20%; + } + + #middle #left-column #content-area .game-content table.math-table thead tr th { + font-weight: 700; + } + + #middle #left-column #content-area .game-content table.math-table th { + text-align: left; + margin: 0; + padding: 0; + border-bottom: 1px dotted #000; + } + + #middle #left-column #content-area .game-content table.math-table .sub-total { + background-color: #eeeeee; + } + + #middle #left-column #content-area .game-content table.math-table .sub-total th:first-child { + font-weight: 700; + padding-left: 0.5em; + } + + #middle #left-column #content-area .game-content table.math-table td { + border-bottom: 1px dotted #000; + } + + #middle #left-column #content-area .game-content table.data thead th { + width: 25%; + } + + #middle #left-column #content-area .game-content table.data thead td:first-child { + width: 20%; + } + + #middle #left-column #content-area .game-content table.data thead th:first-child { + width: 20%; + } + + #middle #left-column #content-area .game-content table.data thead tr th { + font-weight: 700; + } + + #middle #left-column #content-area .game-content table.data th { + text-align: left; + margin: 0; + padding: 0; + border-bottom: 1px dotted #000; + padding-left: 0.5em; + } + + #middle #left-column #content-area .game-content table.data td { + border-bottom: 1px dotted #000; + padding-left: 0.5em; + } + + #middle #left-column #content-area .game-content table.data .even { + background-color: #eeeeee; + } + + #middle #left-column #content-area .game-content table.schedule thead th { + width: 3em; + } + + #middle #left-column #content-area .game-content table.schedule thead td:first-child { + width: 15%; + } + + #middle #left-column #content-area .game-content table.schedule thead tr th { + font-weight: 700; + } + + #middle #left-column #content-area .game-content table.schedule th { + text-align: left; + margin: 0; + padding: 0; + border-bottom: 1px dotted #000; + padding-left: 0.5em; + } + + #middle #left-column #content-area .game-content table.schedule td { + border-bottom: 1px dotted #000; + padding-left: 0.5em; + } + + #middle #left-column #content-area .game-content table.schedule .even { + background-color: #eeeeee; + } + + + #middle #left-column #content-area .game-content table.tablesorter thead th { + width: 11em; + } + + #middle #left-column #content-area .game-content table.tablesorter thead th:first-child { + width: 5%; + } + + #middle #left-column #content-area .game-content table.tablesorter thead th:first-child + th { + width: 18em; + } + + + + #middle #left-column #content-area .game-content table.tablesorter thead tr th { + font-weight: 700; + } + + #middle #left-column #content-area .game-content table.tablesorter th { + text-align: left; + margin: 0; + padding: 0; + border-bottom: 1px dotted #000; + padding-left: 0.5em; + font-size: 14px; + } + + #middle #left-column #content-area .game-content table.tablesorter td { + border-bottom: 1px dotted #000; + padding-left: 0.5em; + font-size: 14px; + } + + #middle #left-column #content-area .game-content table.tablesorter tr:nth-child(even) { background: #eeeeee; } { + background-color: #eeeeee; + } + + .change-kingdom-heading { + display: inline-block !important; + width: 100% !important; + font-size: 14px !important; + padding: 0.5em 0.5em 0.5em 0.5em !important; + } + #id_add_bookmark_form { + display: inline-block; + } + .change-kingdom-nav { + width: 100% !important; + clear: both !important; + margin-bottom: 1em !important; + } + + .change-kingdom-nav a { + width: 5% !important; + text-align: right !important; + } + + .change-kingdom-nav a:first-child { + width: 7% !important; + text-align: left !important; + } + + .change-kingdom-nav a:first-child + a { + width: 6% !important; + text-align: left !important; + } + + #middle #left-column #content-area .game-content div #bookmark-container { + display: none !important; + } + + .advice-message { display: none !important; } + .warning { display: none !important; } + + #right-column { display: none !important; } + + #adunit { display: none !important; } + #footer { display: none !important; } + #recruitment-chat { display: none !important; } + #upoopu_extension { z-index: 99999; } + +h1 { + font-family: 'Quicksand', sans-serif; + font-size: 30px; + font-style: normal; + font-variant: normal; + font-weight: 400; + line-height: 33px; } - -#bookmark-details div -{ - padding-top: 1px; - padding-bottom: 1px; -} - -#bookmark-details a:hover { - box-shadow: -10px 0px 6px -6px #fff; -} - -#bookmark-details #bookmarks { - border-top: 1px solid #29261c; - border-bottom: 1px solid #29261c; - -moz-box-shadow: 0px 2px 1px -1px #7b7354; - -webkit-box-shadow: 0px 2px 1px -1px #7b7354; - box-shadow: 0px 2px 1px -1px #7b7354; - -} - -#royal-command-icon { - background-image: url(./images/gold_crown.png); - background-repeat: no-repeat; - background-position: center 3px; -} - -#royal-command-icon:hover { - background-color: #494432; -} - -.tablesorter th .order-icon { - background-image: url(./images/order_none.png); -} - -.tablesorter th.headerSortUp .order-icon { - background-image: url(./images/order_asc.png); -} - -.tablesorter th.headerSortDown .order-icon { - background-image: url(./images/order_desc.png); -} - -.campaign-meter-level div { - border: 1px solid #789316; -} - -.campaign-meter-level div.full { - background-color: #789316; -} - -.campaign-meter-level div.unknown { - color: #789316; -} - -.fails-criteria div { - border: 1px solid #CD4331; -} - -.fails-criteria div.full { - background-color: #CD4331; -} - -.recruitment-header .rank-bar, -.campaigns .rank-bar { - background-color: #867721; -} - -.recruitment-header .selected-rank, -.campaigns .selected-rank { - background-color: #E5C40F; -} - -.campaigns .campaign-message-intro { - font-family: KnightsQuestRegular; - font-weight: 200; - color: white; - text-shadow: -1px 1px 2px black; - font-size: 18px; -} - -#uniform-id-orderby { - background-position: left -38px; - width: 296px; -} - -#uniform-id-orderby span, -#uniform-id-orderby.focus span, -#uniform-id-orderby.hover span, -#uniform-id-orderby:hover span { - font-size: 30px; - background-position: right -38px; -} - -td#inline-hostility-meter { - text-align: left; - text-shadow: none; - font-weight: normal; -} - - +h3 { + font-family: 'Quicksand', sans-serif; + font-size: 20px; + font-style: normal; + font-variant: normal; + font-weight: 400; + line-height: 22px; +} +p { + font-family: 'Quicksand', sans-serif; + font-size: 14px; + font-style: normal; + font-variant: normal; + font-weight: 400; + line-height: 21px; +} +blockquote { + font-family: 'Quicksand', sans-serif; + font-size: 21px; + font-style: normal; + font-variant: normal; + font-weight: 400; + line-height: 31.5px; +} +pre { + font-family: Times; + font-size: 13px; + font-style: normal; + font-variant: normal; + font-weight: 400; + line-height: 19.5px; +} \ No newline at end of file