/* !-- Fonts -- */ /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* Open Sans Light : 300 Normal : 400 Semi-Bold : 600 Bold : 700 Extra-Bold : 800 */ @import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,300,400,600,700,800&subset=latin,greek,cyrillic); /* !-- Fancybox -- */ /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ @import url(../js/lib/fancybox/jquery.fancybox.css); .fancybox-close { padding: 0 !important; right: 0; } .fancybox-close:after { content: ""; width: 20px; height: 22px; margin-left: -10px; margin-top: -11px; background: url(../img/close-button@2x.png) 0 0 no-repeat; background-size: 100% auto; position: absolute; top: 50%; left: 50%; } .fancybox-close:hover:after, .fancybox-close:focus:after { background-position: 0 100%; } /* !-- User panel -- */ /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ #user-panel { color: #fff; font: 700 14px/1.3em "Open Sans", sans-serif !important; width: 260px; min-height: 79px; background: #192128; background: -moz-linear-gradient(top, #192128 0%, #2c353d 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#192128), color-stop(100%,#2c353d)); background: -webkit-linear-gradient(top, #192128 0%,#2c353d 100%); background: -o-linear-gradient(top, #192128 0%,#2c353d 100%); background: -ms-linear-gradient(top, #192128 0%,#2c353d 100%); background: linear-gradient(to bottom, #192128 0%,#2c353d 100%); } #user-panel, #user-panel * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; cursor: pointer; } #user-panel .panel { min-height: 79px; padding: 8px 10px 10px; position: relative; z-index: 200; } #user-panel .panel:after { content: ""; height: 0; display: block; clear: both; overflow: hidden; visibility: hidden; } #user-panel p { margin: 0; padding: 0; } #user-panel .actions { position: absolute; z-index: 201; } #user-panel button, .fancybox-close { color: #000; font-weight: 700; font-size: 1.07142857142857em /* 15px/14px */; line-height: 1.2em; font-family: inherit; text-decoration: none; text-align: center; text-transform: uppercase; white-space: nowrap; margin: 0; padding: .5em 10px; border: 0; background: #ff7800; display: inline-block; cursor: pointer; background: -moz-linear-gradient(top, #ff7800 0%, #ff4f00 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff7800), color-stop(100%,#ff4f00)); background: -webkit-linear-gradient(top, #ff7800 0%,#ff4f00 100%); background: linear-gradient(to bottom, #ff7800 0%,#ff4f00 100%); } html[lang="el-GR"] #user-panel button, html[lang="el_GR"] #user-panel button, html[lang="es-ES"] .fancybox-close, html[lang="es_ES"] .fancybox-close { text-transform: none !important; } html[lang="es-ES"] #user-panel button, html[lang="es_ES"] #user-panel button, html[lang="es-ES"] .fancybox-close, html[lang="es_ES"] .fancybox-close { padding: .5em 0px; } #user-panel button:hover, #user-panel button:focus, .fancybox-close:hover, .fancybox-close:focus { background: #ff6000; background: -moz-linear-gradient(top, #ff6000 0%, #ef2e00 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff6000), color-stop(100%,#ef2e00)); background: -webkit-linear-gradient(top, #ff6000 0%,#ef2e00 100%); background: linear-gradient(to bottom, #ff6000 0%,#ef2e00 100%); } #user-panel .panel .title { font-style: italic; text-transform: uppercase; } html[lang="el-GR"] #user-panel .panel .title, html[lang="el_GR"] #user-panel .panel .title { text-transform: none !important; } #user-panel .panel .title a { color: #fff; text-decoration: none; } #user-panel .invite { height: 59px; } #user-panel .invite .title { font-size: 1.28571428571429em /* 18px/14px */; text-align: center; } #user-panel .invite .actions { background: #c64000; right: 6px; bottom: -10px; left: 6px; -webkit-box-shadow: 0 0 3px #000; -moz-box-shadow: 0 0 3px #000; box-shadow: 0 0 3px #000; } html[lang="pt-PT"] #user-panel .invite .actions, html[lang="pt_PT"] #user-panel .invite .actions { font-size: 0.85714285714286em /* 12px/14px */; } html[lang="de-DE"] #user-panel .invite .actions, html[lang="de_DE"] #user-panel .invite .actions { bottom: -34px; } #user-panel .invite .actions:after { content: ""; height: 0; display: block; clear: both; overflow: hidden; visibility: hidden; } #user-panel .invite .actions button { width: 50%; float: left; } #user-panel button.register { font-weight: 800; float: left; position: relative; left: -1px; } #user-panel .user { padding-top: 0; } #user-panel .user .title { font-size: 1.14285714285714em /* 16px/14px */; position: absolute; top: 20px; right: 90px; left: 15px; z-index: 102; } #user-panel .user .avatar { text-align: right; margin: 0 -10px 8px; padding-top: 1px; background: url(../img/avatar-glow@2x.png) 100% 100% no-repeat; background-size: 195px 79px; } #user-panel .user .avatar img { width: 82px; height: 86px; margin: -7px 10px 0 0; padding: 0; vertical-align: bottom; display: inline-block; } #user-panel .user .username { font-style: italic; font-weight: 600; font-size: 1.07142857142857em /* 15px/14px */; margin-bottom: .5em; } #user-panel .user .level { color: #ff4b00; font-style: italic; font-weight: 700; font-size: 1.21428571428571em /* 17px/14px */; text-transform: uppercase; } html[lang="el-GR"] #user-panel .user .level, html[lang="el_GR"] #user-panel .user .level { text-transform: none !important; } #user-panel .user .actions { right: 0; bottom: 0; } #user-panel button.logout { font-size: 0.85714285714286em /* 12px/14px */; } @media (max-width: 999px) { #user-panel { width: auto; } #user-panel, #user-panel .panel { height: auto !important; min-height: 0 !important; } #user-panel .invite .title { font-size: 1.42857142857143em /* 20px/14px */; width: 65%; margin-top: .25em; float: left; } #user-panel .invite .actions { width: 32%; float: right; position: static; margin-top: 2px } #user-panel .user { padding-bottom: 0; } #user-panel .user .title { font-size: 1.28571428571429em /* 18px/14px */; margin: .25em 50% 0 0; } #user-panel .user .avatar { width: 50%; margin-bottom: 0; float: left; } #user-panel .user .avatar img { margin-top: -16px; } #user-panel .user .user-info { width: 50%; padding-top: 1em; float: right; } } @media (max-width: 767px) { #user-panel .invite .title { font-size: 1.14285714285714em /* 16px/14px */; width: auto; margin: 0 0 25px; float: none; } #user-panel .invite .actions { width: auto; float: none; position: absolute; } #user-panel .user { padding: 8px 0 0 70px; } #user-panel .user .title { font-size: 1em /* 14px/14px */; margin: 0 0 5px; position: relative; top: auto; right: auto; left: auto; z-index: 201; } #user-panel .user .avatar { width: 70px; margin: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 200; } #user-panel .user .avatar img { width: 70px; height: 73px; position: absolute; left: 0; bottom: 0; } #user-panel .user .user-info { width: auto; padding: 8px 10px; background: #151b21; float: none; position: relative; z-index: 201; } #user-panel .user .username { font-size: 1em /* 14px/14px */; } #user-panel .user .level { font-size: 1.14285714285714em /* 16px/14px */; } }