CSS refactoring

Refactored CSS stylesheets. Broke down original CSS file into small, more
logical parts

Signed-off-by: Gergely POLONKAI <polesz@w00d5t0ck.info>

app/Resources/public/css/eventbox.css

@@ -0,0 +1,53 @@
+/* 
+    Document   : eventbox
+    Created on : 2012.08.15., 11:34:17
+    Author     : Gergely Polonkai
+    Description:
+        Event-box styling CSS
+*/
+
+#event-box {
+    position: fixed;
+    left: 5px;
+    top: 32px;
+    width: 250px;
+    height: 200px;
+    background-color: #c4d3ff;
+    border: 2px solid #152967;
+    color: #152967;
+    display: none;
+}
+
+#event-box td {
+    text-align: center;
+    vertical-align: middle;
+}
+
+#event-box td.woy {
+    font-size: 60%;
+}
+
+#event-box td.program {
+    background-color: green;
+}
+
+#event-inside p.month {
+    text-align: center;
+    margin: 0 5px;
+    font-weight: bold;
+}
+
+#event-inside table {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#event-inside {
+    position: relative;
+    padding: 5px;
+}
+
+#events-button {
+    float: left;
+    padding: 5px;
+}

app/Resources/public/css/forum.css

@@ -0,0 +1,98 @@
+/* 
+    Document   : forum
+    Created on : 2012.08.15., 11:40:39
+    Author     : Gergely
+    Description:
+        Forum styling CSS
+*/
+
+.forum-lista {
+    border: 1px solid #3366ff;
+    border-collapse: collapse;
+    width: 100%;
+    margin-bottom: 20px;
+}
+
+.forum-lista thead td {
+    font-weight: bold;
+    height: 1.5em;
+    border-bottom: 2px solid #3366ff;
+    padding: 3px;
+}
+
+.forum-lista thead td a {
+	color: #3366ff;
+	text-decoration: none;
+}
+
+.forum-lista tbody td {
+	padding: 5px;
+	border-bottom: 1px solid #3366ff;
+}
+
+.forum-lista tbody tr.odd td {
+	background-color: #060c16;
+}
+
+.forum-lista tbody tr.even td {
+	background-color: #000000;
+}
+
+.forum-lista tbody td a {
+	color: #3366ff;
+	text-decoration: underline;
+}
+
+.post-lista {
+	border: 1px solid #3366ff;
+	border-collapse: collapse;
+}
+
+.post-lista td {
+	border-style: solid;
+	border-color: #3366ff;
+	border-width: 3px 1px;
+	vertical-align: top;
+	padding: 5px;
+}
+
+.post-lista td.felado {
+	width: 150px !important;
+	font-size: 80%;
+}
+
+.post-lista td.szoveg {
+	width: 510px;
+}
+
+.post-lista td.szoveg div {
+	width: 510px;
+	overflow: auto;
+}
+
+td.uj-post {
+}
+
+td.uj-post textarea {
+	width: 500px;
+	background-color: #000000;
+	color: #3366ff;
+	border-style: solid;
+	border-color: #3366ff;
+	border-width: 0 0 2px 0;
+	height: 15em;
+}
+
+td.uj-post p {
+	clear: both;
+	float: none;
+	margin: 0;
+}
+
+td.uj-post p .eszkoztar {
+	float: left;
+}
+
+td.uj-post p .kuldes-gomb {
+	float: right;
+}

app/Resources/public/css/library.css

@@ -0,0 +1,17 @@
+/* 
+    Document   : books.css
+    Created on : 2012.08.15., 11:41:37
+    Author     : Gergely Polonkai
+    Description:
+        Library-styling CSS
+*/
+
+#konyvtar-gomb {
+    float: left;
+    padding: 5px;
+}
+
+#konyvtar-gomb a {
+    color: inherit;
+    text-decoration: none;
+}

app/Resources/public/css/loginbox.css

@@ -0,0 +1,24 @@
+/* 
+    Document   : loginbox
+    Created on : 2012.08.15., 11:32:19
+    Author     : Gergely Polonkai
+    Description:
+        Login-box styling CSS
+*/
+
+#login-box {
+    position: fixed;
+    left: 5px;
+    top: 32px;
+    width: 300px;
+    height: 100px;
+    background-color: #c4d3ff;
+    border: 2px solid #152967;
+    color: #152967;
+    display: none;
+}
+
+#login-belso {
+    position: relative;
+    padding: 5px;
+}

app/Resources/public/css/main.css

@@ -0,0 +1,175 @@
+/* 
+    Document   : main
+    Created on : 2012.08.15., 10:58:08
+    Author     : Gergely Polonkai
+    Description:
+        Main stylesheet
+*/
+
+* {
+	font-family: sans-serif;
+	font-size: 14px;
+}
+
+body {
+    margin: 0;
+    background-color: #001100;
+    background-image: url('../images/rose_bg.png');
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-position: right bottom;
+}
+
+a {
+    color: inherit;
+    text-decoration: underline;
+}
+
+#top-line {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    background-color: #152967;
+    color: #c4d3ff;
+    height: 32px;
+    border-bottom: 1px solid #1b3586;
+}
+
+#top-line-padding {
+    height: 33px;
+    clear: both;
+}
+
+#top-line #search-box {
+    float: right;
+    padding: 5px;
+}
+
+#top-line #login-gomb {
+    float: left;
+    padding: 5px;
+}
+
+#top-line #profil-gomb {
+    float: left;
+    padding: 5px;
+}
+
+#bottom-line-padding {
+    height: 33px;
+}
+
+#bottom-line {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    background-color: #152967;
+    color: #c4d3ff;
+    height: 32px;
+    border-top: 1px solid #1b3586;
+}
+
+#wrapper {
+    background-color: #000000;
+    width: 960px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#header {
+    height: 270px;
+    background-image: url('../images/fejlec.jpg');
+}
+
+#header h1 {
+    display: none;
+}
+
+#content-wrapper {
+    background-color: #0e0e0e;
+}
+
+#content-outline {
+    color: #3366ff;
+    text-align: justify;
+    width: 740px;
+    float: left;
+    background-color: #c6ecfe;
+}
+
+#content {
+    padding: 5px;
+}
+
+#hirek {
+    float: right;
+    color: #aaaacc;
+    width: 215px;
+}
+
+#hirek h3 {
+    padding: 10px;
+    margin: 15px 0 0 0;
+}
+
+div.hir {
+    padding: 5px;
+    font-size: 80%;
+    margin-bottom: 15px;
+}
+
+p.hir-cim {
+    font-weight: bold;
+    margin: 0 0 5px 0;
+}
+
+p.hir-szoveg {
+    text-align: justify;
+    margin: 10px 0;
+}
+
+p.hir-szerzo {
+    font-style: italic;
+    text-align: right;
+    margin: 0;
+}
+
+p.hir-datum {
+    text-align: right;
+    margin: 0;
+}
+
+h3 a {
+    color: #3366ff;
+    text-decoration: none;
+}
+
+.u {
+	text-decoration: underline;
+}
+
+.b {
+	font-weight: bold;
+}
+
+.i {
+	font-style: italic;
+}
+
+.gomb {
+	background-color: #cccccc;
+	color: black;
+	white-space: nowrap;
+	cursor: pointer;
+}
+
+#top-line .gomb {
+	background-color: transparent;
+	color: #c4d3ff;
+}
+
+.gomb a {
+	color: inherit !important;
+}

app/Resources/public/css/menu.css

@@ -0,0 +1,31 @@
+/* 
+    Document   : menu
+    Created on : 2012.08.15., 11:10:44
+    Author     : Gergely Polonkai
+    Description:
+        Menu stylesheet
+*/
+
+#menu {
+    background-color: #29140d;
+    border-radius: 15px 15px 0 0;
+    border-color: #29140d;
+    font-size: 80%;
+    height: 50px;
+}
+
+#menu ul {
+    margin: 0;
+    padding: 17px 0 0 20px;
+}
+
+#menu li {
+    list-style-type: none;
+    display: inline;
+}
+
+#menu a {
+    color: #ffffff;
+    margin-right: 5px;
+    padding: 0 15px;
+}

app/Resources/public/css/popup.css

@@ -0,0 +1,100 @@
+/* 
+    Document   : popup
+    Created on : 2012.08.15., 11:29:58
+    Author     : Gergely Polonkai
+    Description:
+        Popup DIV styling CSS
+*/
+
+#popup-container {
+	display: none;
+	position: fixed;
+	height: 300px;
+	width: 200px;
+	background: #ffffff;
+	z-index: 80;
+}
+
+#popup-close {
+	position: absolute;
+	width: 16px;
+	height: 16px;
+	top: -5px;
+	right: -5px;
+	background-image: url('../images/no.png');
+}
+
+#popup-inside {
+	border: 1px solid black;
+	height: 292px;
+	width: 192px;
+	margin-left: auto;
+	margin-right: auto;
+	margin-top: 3px;
+}
+
+#popup-title {
+	font-weight: bold;
+	padding: 5px;
+}
+
+#popup-content {
+	padding: 3px;
+}
+
+#popup-scrollable {
+	width: 192px;
+	clear: both;
+	margin: 20px 0 10px;
+}
+
+#popup-scrollable .viewport {
+	width: 172px;
+	height: 246px;
+	overflow: hidden;
+	position: relative;
+}
+
+#popup-scrollable .overview {
+	list-style: none;
+	position: absolute;
+	left: 0;
+	top: 0;
+}
+
+#popup-scrollable .thumb .end, #popup-scrollable .thumb {
+	background-color: #003D5D;
+}
+
+#popup-scrollable .scrollbar {
+	position: relative;
+	float: right;
+	width: 15px;
+}
+
+#popup-scrollable .track {
+	background-color: #D8EEFD;
+	height: 100%;
+	width: 13px;
+	position: relative;
+	padding: 0 1px;
+}
+
+#popup-scrollable .thumb {
+	height: 20px;
+	width: 13px;
+	cursor: pointer;
+	overflow: hidden;
+	position: absolute;
+	top: 0;
+}
+
+#popup-scrollable .thumb .end {
+	overflow: hidden;
+	height: 5px;
+	width: 13px;
+}
+
+#popup-scrollable .disable {
+	display: none;
+}

app/Resources/public/css/profilebox.css

@@ -0,0 +1,34 @@
+/* 
+    Document   : profilebox
+    Created on : 2012.08.15., 11:31:41
+    Author     : Gergely Polonkai
+    Description:
+        Profile-box styling CSS
+*/
+
+#profil-box {
+    position: fixed;
+    left: 5px;
+    top: 32px;
+    width: 300px;
+    height: 400px;
+    background-color: #c4d3ff;
+    border: 2px solid #152967;
+    color: #152967;
+    display: none;
+}
+
+#profil-belso {
+    position: relative;
+    padding: 5px;
+}
+
+#profil-box dt {
+    font-weight: bold;
+}
+
+#profil-szerkesztes {
+    position: absolute;
+    bottom: 5px;
+    right: 5px;
+}

app/Resources/views/Box/Events.html.twig

@@ -1,10 +1,10 @@
 {# vim: ft=htmljinja
 #}
-				<div id="esemenyek-gomb">
+				<div id="events-button">
-					<span id="esemeny-mutato" class="gomb">[események gomb]</span>
+					<span id="event-shower" class="gomb">[események gomb]</span>
-					<div id="esemeny-box">
+					<div id="event-box">
-						<div id="esemeny-belso">
+						<div id="event-inside">
-							<p class="honap">{{ firstDay|date('Y-m') }}</p>
+							<p class="month">{{ firstDay|date('Y-m') }}</p>
 							<table>
 								<thead>
 									<tr>

app/Resources/views/main_template.html.twig

@@ -2,20 +2,32 @@
 #}
 <!DOCTYPE html>
 <html>
-	<head>
+    <head>
-		<title>Kék Rózsák{% block title %}{% endblock %}</title>
+        <title>Kék Rózsák{% block title %}{% endblock %}</title>
-		<meta charset="utf8" />
+        <meta charset="utf8" />
-		<link rel="stylesheet" type="text/css" href="{{ asset('css/kekrozsak_front.css') }}" />
+        <link rel="stylesheet" type="text/css" href="{{ asset('css/kekrozsak_front.css') }}" />
-		<link rel="stylesheet" type="text/css" href="{{ asset('js/jquery-cluetip/jquery.cluetip.css') }}" />
+        <link rel="stylesheet" type="text/css" href="{{ asset('js/jquery-cluetip/jquery.cluetip.css') }}" />
+{% stylesheets
+    '../app/Resources/public/css/main.css'
+    '../app/Resources/public/css/menu.css'
+    '../app/Resources/public/css/popup.css'
+    '../app/Resources/public/css/profilebox.css'
+    '../app/Resources/public/css/loginbox.css'
+    '../app/Resources/public/css/eventbox.css'
+    '../app/Resources/public/css/forum.css'
+    '../app/Resources/public/css/library.css'
+filter='cssrewrite' %}
+        <link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
+{% endstylesheets %}
 {% block additional_css %}{% endblock %}
-		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
-		<script type="text/javascript" src="{{ asset('js/jquery-cluetip/lib/jquery.hoverIntent.js')}}"></script>
+        <script type="text/javascript" src="{{ asset('js/jquery-cluetip/lib/jquery.hoverIntent.js')}}"></script>
-		<script type="text/javascript" src="{{ asset('js/jquery-cluetip/jquery.cluetip.js') }}"></script>
+        <script type="text/javascript" src="{{ asset('js/jquery-cluetip/jquery.cluetip.js') }}"></script>
-		<script type="text/javascript" src="{{ asset('js/jquery.tinyscrollbar.min.js') }}"></script>
+        <script type="text/javascript" src="{{ asset('js/jquery.tinyscrollbar.min.js') }}"></script>
-		<script type="text/javascript" src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
+        <script type="text/javascript" src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
-		<script type="text/javascript" src="{{ path('fos_js_routing_js', {callback: 'fos.Router.setData'}) }}"></script>
+        <script type="text/javascript" src="{{ path('fos_js_routing_js', {callback: 'fos.Router.setData'}) }}"></script>
 {% block additional_js %}{% endblock %}
-	</head>
+    </head>
 	<body>
 		<div id="popup-container">
 			<div id="popup-close"></div>
@@ -65,8 +77,7 @@
 				</ul>
 			</div>
 			<div id="header">
-				<h1><a href="{{ path('KekRozsakFrontBundle_homepage') }}"><img src="{{ asset('images/kek_rozsak_felirat.jpg') }}" alt="Kék Rózsák" /></a></h1>
+				<h1>Kék Rózsák</h1>
-				<h2><img src="{{ asset('images/okkultista_kor_felirat.jpg') }}" alt="A Kék Rózsa okkultista kör honlapja" /></h2>
 			</div>
 			<div id="content-wrapper">
 				<div id="content-outline">
@@ -113,14 +124,14 @@
 			$('.program').cluetip({
 				cluezIndex: 1000
 			});
-			$('#esemeny-mutato').click(function() {
+			$('#event-shower').click(function() {
-				if ($('#esemeny-box').is(':visible'))
+				if ($('#event-box').is(':visible'))
 				{
-					$('#esemeny-box').hide();
+					$('#event-box').hide();
 				}
 				else
 				{
-					$('#esemeny-box').show();
+					$('#event-box').show();
 				}
 			});
 			$('.userdata').cluetip();
@@ -174,6 +185,20 @@
 					$('#popup-content').html('Nem sikerült betölteni a könyv adatait.');
 				});
 			}
+                        
+                        $(document).ready(function() {
+                            bottomLineTop = $('#bottom-line').position().top;
+                            contentOutlineTop = $('#content-outline').position().top;
+                            contentHeight = $('#content-outline').outerHeight();
+                            newsHeight = $('#hirek').outerHeight();
+                            minHeight = bottomLineTop - contentOutlineTop;
+                            
+                            height = Math.max(contentHeight, newsHeight, minHeight);
+                            if ($('#content-outline').outerHeight() < height)
+                                $('#content-outline').css('height', height + 'px');
+                            if ($('#hirek').outerHeight() < height)
+                                $('#hirek').css('height', height + 'px');
+                        });
 		</script>
 {% block bottomscripts %}{% endblock %}
 	</body>

web/css/kekrozsak_front.css

@@ -1,479 +0,0 @@
-* {
-	font-family: sans-serif;
-	font-size: 14px;
-}
-
-body {
-	margin: 0;
-	background-color: black;
-	background-image: url('../images/rose_bg.png');
-	background-repeat: no-repeat;
-	background-attachment: fixed;
-	background-position: right bottom;
-}
-
-#top-line {
-	position: fixed;
-	left: 0;
-	top: 0;
-	width: 100%;
-	background-color: #152967;
-	color: #c4d3ff;
-	height: 32px;
-	border-bottom: 1px solid #1b3586;
-}
-
-#top-line-padding {
-	height: 33px;
-	clear: both;
-}
-
-#top-line #search-box {
-	float: right;
-	padding: 5px;
-}
-
-#top-line #login-gomb {
-	float: left;
-	padding: 5px;
-}
-
-#top-line #profil-gomb {
-	float: left;
-	padding: 5px;
-}
-
-#bottom-line-padding {
-	height: 33px;
-}
-
-#profil-box {
-	position: fixed;
-	left: 5px;
-	top: 32px;
-	width: 300px;
-	height: 400px;
-	background-color: #c4d3ff;
-	border: 2px solid #152967;
-	color: #152967;
-	display: none;
-}
-
-#profil-belso {
-	position: relative;
-	padding: 5px;
-}
-
-#profil-box dt {
-	font-weight: bold;
-}
-
-#profil-szerkesztes {
-	position: absolute;
-	bottom: 5px;
-	right: 5px;
-}
-
-#login-box {
-	position: fixed;
-	left: 5px;
-	top: 32px;
-	width: 300px;
-	height: 100px;
-	background-color: #c4d3ff;
-	border: 2px solid #152967;
-	color: #152967;
-	display: none;
-}
-
-#esemeny-box {
-	position: fixed;
-	left: 5px;
-	top: 32px;
-	width: 250px;
-	height: 200px;
-	background-color: #c4d3ff;
-	border: 2px solid #152967;
-	color: #152967;
-	display: none;
-}
-
-#esemeny-box td {
-	text-align: center;
-	vertical-align: middle;
-}
-
-#esemeny-box td.woy {
-	font-size: 60%;
-}
-
-#esemeny-box td.program {
-	background-color: green;
-}
-
-#esemeny-belso p.honap {
-	text-align: center;
-	margin: 0 5px;
-	font-weight: bold;
-}
-
-#esemeny-belso table {
-	margin-left: auto;
-	margin-right: auto;
-}
-
-#login-belso {
-	position: relative;
-	padding: 5px;
-}
-
-#esemeny-belso {
-	position: relative;
-	padding: 5px;
-}
-
-#esemenyek-gomb {
-	float: left;
-	padding: 5px;
-}
-
-#konyvtar-gomb {
-	float: left;
-	padding: 5px;
-}
-
-#konyvtar-gomb a {
-	color: inherit;
-	text-decoration: none;
-}
-
-#bottom-line {
-	position: fixed;
-	left: 0;
-	bottom: 0;
-	width: 100%;
-	background-color: #152967;
-	color: #c4d3ff;
-	height: 32px;
-	border-top: 1px solid #1b3586;
-}
-
-#wrapper {
-	background-color: #000000;
-	width: 960px;
-	margin-left: auto;
-	margin-right: auto;
-}
-
-#menu {
-	background-color: #29140d;
-	background-image: gradient(top, #4e1e0b, #29140d);
-	border-radius: 15px 15px 0 0;
-	border-color: #29140d;
-	font-size: 80%;
-	height: 50px;
-}
-
-#menu ul {
-	margin: 0;
-	padding: 17px 0 0 20px;
-}
-
-#menu li {
-	list-style-type: none;
-	display: inline;
-}
-
-#menu a {
-	color: #ffffff;
-	margin-right: 5px;
-	padding: 0 15px;
-}
-
-#header {
-	height: 270px;
-	background-image: url('../images/fejlec.jpg');
-}
-
-#header h1 {
-	margin: 0;
-	padding-left: 96px;
-	padding-top: 95px;
-}
-
-#header h2 {
-	margin: 0;
-	padding-left: 15px;
-	padding-top: 20px;
-}
-
-#content-wrapper {
-	background-color: #0e0e0e;
-}
-
-#content-outline {
-	color:#3366ff;
-	text-align: justify;
-	width: 740px;
-	float: left;
-}
-
-#content {
-	padding: 5px;
-}
-
-#hirek {
-	float: right;
-	color: #aaaacc;
-	width: 215px;
-}
-
-#hirek h3 {
-	padding: 10px;
-	margin: 15px 0 0 0;
-}
-
-div.hir {
-	padding: 5px;
-	font-size: 80%;
-	margin-bottom: 15px;
-}
-
-p.hir-cim {
-	font-weight: bold;
-	margin: 0 0 5px 0;
-}
-
-p.hir-szoveg {
-	text-align: justify;
-	margin: 10px 0;
-}
-
-p.hir-szerzo {
-	font-style: italic;
-	text-align: right;
-	margin: 0;
-}
-
-p.hir-datum {
-	text-align: right;
-	margin: 0;
-}
-
-h3 a {
-	color: #3366ff;
-	text-decoration: none;
-}
-
-.forum-lista {
-	border: 1px solid #3366ff;
-	border-collapse: collapse;
-	width: 100%;
-	margin-bottom: 20px;
-}
-
-.forum-lista thead td {
-	font-weight: bold;
-	height: 1.5em;
-	border-bottom: 2px solid #3366ff;
-	padding: 3px;
-}
-
-.forum-lista thead td a {
-	color: #3366ff;
-	text-decoration: none;
-}
-
-.forum-lista tbody td {
-	padding: 5px;
-	border-bottom: 1px solid #3366ff;
-}
-
-.forum-lista tbody tr.odd td {
-	background-color: #060c16;
-}
-
-.forum-lista tbody tr.even td {
-	background-color: #000000;
-}
-
-.forum-lista tbody td a {
-	color: #3366ff;
-	text-decoration: underline;
-}
-
-.post-lista {
-	border: 1px solid #3366ff;
-	border-collapse: collapse;
-}
-
-.post-lista td {
-	border-style: solid;
-	border-color: #3366ff;
-	border-width: 3px 1px;
-	vertical-align: top;
-	padding: 5px;
-}
-
-.post-lista td.felado {
-	width: 150px !important;
-	font-size: 80%;
-}
-
-.post-lista td.szoveg {
-	width: 510px;
-}
-
-.post-lista td.szoveg div {
-	width: 510px;
-	overflow: auto;
-}
-
-td.uj-post {
-}
-
-td.uj-post textarea {
-	width: 500px;
-	background-color: #000000;
-	color: #3366ff;
-	border-style: solid;
-	border-color: #3366ff;
-	border-width: 0 0 2px 0;
-	height: 15em;
-}
-
-td.uj-post p {
-	clear: both;
-	float: none;
-	margin: 0;
-}
-
-td.uj-post p .eszkoztar {
-	float: left;
-}
-
-td.uj-post p .kuldes-gomb {
-	float: right;
-}
-
-.u {
-	text-decoration: underline;
-}
-
-.b {
-	font-weight: bold;
-}
-
-.i {
-	font-style: italic;
-}
-
-#popup-container {
-	display: none;
-	position: fixed;
-	height: 300px;
-	width: 200px;
-	background: #ffffff;
-	z-index: 80;
-}
-
-#popup-close {
-	position: absolute;
-	width: 16px;
-	height: 16px;
-	top: -5px;
-	right: -5px;
-	background-image: url('../images/no.png');
-}
-
-#popup-inside {
-	border: 1px solid black;
-	height: 292px;
-	width: 192px;
-	margin-left: auto;
-	margin-right: auto;
-	margin-top: 3px;
-}
-
-#popup-title {
-	font-weight: bold;
-	padding: 5px;
-}
-
-#popup-content {
-	padding: 3px;
-}
-
-#popup-scrollable {
-	width: 192px;
-	clear: both;
-	margin: 20px 0 10px;
-}
-
-#popup-scrollable .viewport {
-	width: 172px;
-	height: 246px;
-	overflow: hidden;
-	position: relative;
-}
-
-#popup-scrollable .overview {
-	list-style: none;
-	position: absolute;
-	left: 0;
-	top: 0;
-}
-
-#popup-scrollable .thumb .end, #popup-scrollable .thumb {
-	background-color: #003D5D;
-}
-
-#popup-scrollable .scrollbar {
-	position: relative;
-	float: right;
-	width: 15px;
-}
-
-#popup-scrollable .track {
-	background-color: #D8EEFD;
-	height: 100%;
-	width: 13px;
-	position: relative;
-	padding: 0 1px;
-}
-
-#popup-scrollable .thumb {
-	height: 20px;
-	width: 13px;
-	cursor: pointer;
-	overflow: hidden;
-	position: absolute;
-	top: 0;
-}
-
-#popup-scrollable .thumb .end {
-	overflow: hidden;
-	height: 5px;
-	width: 13px;
-}
-
-#popup-scrollable .disable {
-	display: none;
-}
-
-.gomb {
-	background-color: #cccccc;
-	color: black;
-	white-space: nowrap;
-	cursor: pointer;
-}
-
-#top-line .gomb {
-	background-color: transparent;
-	color: #c4d3ff;
-}
-
-.gomb a {
-	color: inherit !important;
-}
-