/* -----------------------------------------------------------------------

 Gimnazija Vic Web

   * Design: Peter Cuhalev & Aljaz Vesel
   * CSS: Peter Cuhalev & Jure Slak

   *Klemen
   Za povečanje kontrasta sem zeleno #82b400 spremenil v #609900
   oziroma rgba(96,153,0,0.99). 0.99 je da zmede pregledovalnike
   dostopnosti npr https://wave.webaim.org/.

----------------------------------------------------------------------- */

body {background: url('/static/skin/img/pattern-back.png') 0 0 repeat; margin: 0; padding: 0;}
/*
24px = 1.714em
22px = 1.572em
20px = 1.429em
18px = 1.286em
16px = 1.143em
14px = 1em
12px = 0.857em
10px = 0.714em
*/

:root {
    --gimvic-green: rgb(82,130,0);
}

#container {
    width: 100%;
}

.todo { background-color: red; color: white; }

/* Header Styles */
header .upper-header { height: 38px; background: var(--gimvic-green); position: relative; width: 100%;
	box-shadow: 0px 0px 10px 5px rgba(00, 00, 00, 0.2); }
header .upper-header ul {max-width: 940px; margin: 0 auto; width: 100%; padding: 0px; }
header .upper-header li { display: inline; float: right; margin-right: 4px; margin-top: 1px; color: #fff; font-size: 14pt; }
header .upper-header li:before {content: ' \2219  ';}
header .upper-header li:last-child:before {content: '';}
header .upper-header li a {color: #fff; text-decoration: none; font-size: 1.1em;}
header .upper-header li a:hover {color: #333;}
header .upper-header li a img { width: 22px; height: 22px; }

header .logo {margin-top: 30px; float: left;}
header .searchbox {position: absolute; top:30px; right: 0; width: 25%; min-width: 170px; }
header .searchbox input[type='text'] {width: 98%; padding-left: 5px; border-radius:5px; border: 1px solid #B9B4A5; line-height: 25px;}
header .searchbox .icosearch {position: absolute; top: 7px; right: 0; padding: 5px 5px 3px 5px; line-height: 18px; width: 28px; height: 25px; background: url('/static/skin/img/ico-search.png') 4px 4px no-repeat; border: none; border-left:1px solid #B9B4A5; cursor: pointer;}
header .searchbox .icosearch:hover {background: url('/static/skin/img/ico-search-hover.png') 4px 4px no-repeat;}

header .navigation {max-width: 940px; width: 95%; margin: 0 auto 40px auto; font-family:  "Calibri", "FreeSans", "Cantarell", sans-serif; font-size: 1.143em; font-weight: bold; text-align: center; clear: both; padding-top: 30px; text-shadow: 1px 1px 2px #333; position: relative;}

header .navigation ul {border-radius:5px; margin: 0 auto; padding:0; text-align: center; position: relative; display: block; height: 42px;}
header .navigation li {margin: 0; border-right: 1px solid #fff; padding: 8px 0; float: left;
    box-shadow: 0px 0px 10px 0px rgba(00, 00, 00, 0.2);
	transition:background-color 0.3s ease-out;
	list-style-type: none;
	background: url('/static/skin/img/alert-overlay2.png') 0 0 var(--gimvic-green); width: 187px;}
header .navigation li:first-child {border-radius:5px 0 0 5px;}
header .navigation li:last-child {border-radius:0 5px 5px 0; border-right:0;}
header .navigation li a {padding: 0; color: #fff; text-decoration: none; display: block;}
header .navigation li:hover {background-color: #333;}
header .navigation li.selected {background-color: #333;}

header .navigation li.one {width: 18.085%;}
header .navigation li.two {width: 24.468%;}
header .navigation li.three {width: 21.277%;}
header .navigation li.four {width: 17.553%;}
header .navigation li.five {width: 17.553%;}

/* Main Content styles */
#main, .wrap {max-width: 940px; width: 95%; margin: 0 auto; position: relative;}
.content-wrap {width: 66%; float: left; margin-bottom: 100px;}

/* First page Exposed Articles slider */
.exposed-articles {position: relative; color: #fff; height: 300px; }
.highlight {position: absolute; }
.exposed-articles img {border-radius: 3px; border: 1px solid #B9B4A5; width: 100%; }
.exposed-overlay {position: absolute; top: 66%; bottom: 2%; width: 95%; background-color: rgba(130, 180, 0, 0.9); padding: 0.8% 2.5% 1.93% 2.5%; border: 1px solid var(--gimvic-green); border-radius: 3px;}
.exposed-articles h2 {font-size: 1.286em; margin-bottom:0; color: #fff; text-shadow: 1px 1px 2px #333; font-weight: bold;}
.exposed-articles p {width: 82.25%; line-height: 1.5em; text-shadow: 1px 1px 2px #333;}
.exposed-articles .numbers {position: absolute; bottom: 3%; right: 2%; font-family:  "Calibri", sans-serif;}
.exposed-articles .numbers span {background: #fff; display: block; width: 20px; float: right; text-align: center; border-radius:3px; margin-left: 5px; line-height: 18px; text-decoration: none; color: #333; font-size: 0.857em; cursor: pointer; }
.exposed-articles .numbers span:hover {background: #333; color: #fff;}
.exposed-articles .numbers .selected {background: #333; color: #fff; cursor: default;}
.exposed-overlay h2 a {color: #fff; text-decoration: none;}
.exposed-overlay h2 a:hover {color: #333; text-shadow: 1px 1px 2px #666;}

/* Short Articles lists */
article h1 {margin-top: 40px;}
article a img, article img {border: 1px solid #B9B4A5; border-radius:3px; margin:10px 20px 15px 0;}
article.short p { display: inline; }
article.short a.readmore span.icon { font-size: 130%; line-height: 100%; }
article.short a img.subcat-image { width: 100%; }
article.short a.title-image { display: block; }
article.short a.title-image img { width: 100%; max-height: 300px; max-width: 100%; object-fit: cover; }

/* Sidebar */
#main aside {float: right; width: 30%; font-family:  "Calibri", sans-serif; margin-bottom: 70px;}
#main aside h3 {font-size: 1.429em; font-weight: bold;}
#main aside img { width: 100%; }
#main aside img#eduroam { float: right; max-width: 212px; }
#main aside img#unesco { float: right; max-width: 280px; }
#main aside img#erazmus { float: right; padding: 10px 0px; }
#main aside img#tom { float: right; max-width: 150px; }
#main aside img#zdrava_sola  { float: right; max-width: 150px; }

/* Quick Links or Second Navigation*/
.second-navigation, .side-order {border: 1px solid #B9B4A5; margin-bottom: 30px; border-radius:3px;
    box-shadow: 0px 0px 10px 0px rgba(00, 00, 00, 0.1);}
.second-navigation ul, .side-order ul {padding: 0; margin: 0;}
.second-navigation li, .side-order li {list-style: none; border-bottom: 1px solid #ccc;
	transition:background-color 0.3s ease-out;
	background: url('/static/skin/img/alert-overlay.png') 0 0 rgba(166,161,148,0.99);
    display: block; cursor: pointer; padding: 3px 20px;
    font-weight: bold; color: white; text-shadow: 1px 1px 2px #333;
}
.second-navigation li a, .side-order li a { color: white; display: block; overflow: hidden; text-overflow: ellipsis; height: 26px; line-height: 26px;}
.second-navigation li.selected, .side-order li.selected {background-color: var(--gimvic-green); /* cursor: default; */}
/*.second-navigation li.selected a, .side-order li.selected a {cursor: default; }*/
.second-navigation li.nested, .side-order li.nested { padding: 0; margin: 0; }
.second-navigation li:hover, .second-navigation ul.inside li:hover, .side-order li:hover, .side-order ul.inside li:hover {background-color: #333;}
.second-navigation li.selected:hover, .side-order li.selected:hover { background-color: var(--gimvic-green); /* cursor: default; */}
.second-navigation li:last-child, .side-order li:last-child, .second-navigation ul.inside li:last-child, .second-navigation ul.inside li ul.inside-two li:last-child {border-bottom: 0;}
.second-navigation ul.inside li, .side-order ul.inside li {background-color: #fff; border-bottom:1px solid #B9B4A5; }
.second-navigation ul.inside li.selected, .side-order ul.inside li.selected {background-color: #ccc; }
.second-navigation ul.inside li ul.inside-two li {background-color: #D9E8B2;}
.second-navigation ul.inside li ul.inside-two a {color: #333;}
.second-navigation ul.inside li ul.inside-two li:hover {background-color: #333;}
.second-navigation ul.inside li ul.inside-two li:hover a {color: #fff;}
.second-navigation ul.inside li ul.inside-two li.selected {background-color: #e2e2e2;}
.second-navigation ul.inside li ul.inside-two li.selected:hover a {color:#333;}
.second-navigation ul.inside li.selected:hover a, .side-order ul.inside li.selected:hover a {color: #333;}
.second-navigation ul.inside li a, .side-order ul.inside li a {color:#333; text-shadow: none;}
.second-navigation ul.inside li:hover a, .side-order ul.inisde li:hover a {color: #fff;}
.second-navigation li.title, .side-order li.title {background-color: #333; cursor: default; padding: 0; height:30px}
.second-navigation li.title:hover, .side-order li.title:hover {background-color: #333; }
.second-navigation li h3, .side-order li h3 {padding: 8px 20px; margin-bottom: 2px; color: #fff; font-size: 16px !important;}

/*.second-navigation .trikotnik {position: absolute; bottom: -23px; border: 0; margin-left: 10px; display: none; }*/
/*.second-navigation li.selected .trikotnik {display:block; }*/
/*.second-navigation ul.inside li.selected .trikotnik {display:block !important; }*/
.second-navigation > ul > li.selected:after { content: url('/static/skin/img/ico-bottom-green.png'); display: block; position: absolute; margin-top: -9px; }
.second-navigation > ul > li.nested > ul.inside > li.selected:after { content: url('/static/skin/img/ico-bottom-gray.png'); display: block; position: absolute; margin-top: -9px;}
.second-navigation li.no-triangle:after { content: '' !important; }


/* Notifications */
.notifications {padding: 20px; border: 1px solid var(--gimvic-green); border-radius:3px; margin-bottom: 30px;
    box-shadow: 0px 0px 10px 0px rgba(00, 00, 00, 0.1);
    background: #fff;
    }
.notifications h3 {color: var(--gimvic-green);}
.notifications p {margin-bottom: 0.8em; line-height: 1.6em;}
.notifications p:last-child {margin-bottom: 0;}
.notifications span {display: block;}

/* First page contacts for Gimvic */
.contacts-gimvic {padding: 20px; background-color: var(--gimvic-green); border-radius:3px; margin-bottom: 30px; color: #fff;
    box-shadow: 0px 0px 10px 0px rgba(00, 00, 00, 0.1);}
.contacts-gimvic a {color: #fff; text-decoration: underline;}
.contacts-gimvic a:hover {text-decoration: none; color: #333;}
.contacts-gimvic h3 {color: #fff; margin:0.1em 0 0.4em 0;}
.contacts-gimvic ul {padding: 0; margin-bottom: 0.8em;}
.contacts-gimvic ul:last-child {margin-bottom: 0;}
.contacts-gimvic li {list-style-type: none;}

/* Single pages and categories */
.single .content-wrap {margin-top: 30px;}
.single aside {margin-top: 40px;}
.single article h1 {margin-top: 0;}
.single img {border: 1px solid #B9B4A5; border-radius:3px; margin:0 20px 15px 0;}
.single a h2 {line-height: 1.4em; margin-bottom: 1em;}
.single a:hover h2 {color: #333;}

/* Category head picture */
.category-picture {display: block; position: relative;}
.category-picture img {border-radius:3px; width: 100%; margin: 0; }

/* Calendar on Dogodki in novice */
.calendar {width: 940px; margin-top: 30px;}

/* News list on Dogodki in novice */
.news-list {float: left; position: relative;}
.news-list ul {padding: 0;}
.news-list ul li {list-style: none;}
.news-list ul li a {color: #333;}
.news-list ul li a:hover {color: var(--gimvic-green);}

/* Categories first view */
.single .short p {margin-bottom: 0.5em;}
.short p:last-of-type { margin-bottom: 0.5em;}
.single .short {margin-bottom: 2em;}
.single .short img {border-radius: 3px; margin-bottom: 0; }
.short a:hover h1 {color: #333;}

/* Content */
.content-wrap p { text-align: justify; }

/* Predstavitev view */
.about {margin-bottom: 100px;}

/* One news view */
.last-news a {color: #333;}
.last-news a:hover {color: var(--gimvic-green);}

/* Footer */
footer {clear: both; text-align: center;}
footer .gimvic-slogan {height: 40px; background-color: var(--gimvic-green); margin-bottom: 30px; box-shadow: 0px 0px 10px 3px rgba(00, 00, 00, 0.2);}
footer img {padding-top: 13px;}
footer li {display: inline;}
footer li:before {content: ' \2219  ';}
footer li:first-child:before {content: '';}
footer .copyright a {color: #333;}
footer .copyright a:hover {color: var(--gimvic-green);}

/* Table styles - ie. Predmetnik na Delovanje sole in Pouk */
thead th, tfoot th {background:#8FBC1A; color: #000; text-shadow: none;}
th, td, caption {padding:4px 10px 4px 10px;}
tbody tr:nth-child(even) td, tbody tr.even td {background:#D9E8B2;}

/* Urnik zvonenja */
.urnik_zvonenja {width: 200px;}
.urnik_zvonenja th, .urnik_zvonenja td {text-align: center;}

/* Button styles */
.button { width: 150px;
	background: var(--gimvic-green);
	display: inline-block;
	color: #fff;
	font-family:  "Georgia", serif;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
    border-radius:5px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
	border: 1px solid rgba(0,0,0,0.1);
	position: relative;
	cursor: pointer;
	font-size: 13px;
	padding: 7px 14px 7px;
	margin: 6px 0;
	transition: background-color 0.3s ease-out;
	/*outline: 0*/;
}

.button:hover {color: #FFF; background-color:#333; outline: 0; }
.button:active {top: 1px; }
/*Video dodal klemen*/

hr.breadcrumbs-bottom {
	border-bottom: 1px solid #ccc;
	color: transparent;
	margin-bottom: 20px;
	margin-top: -1px;
}

iframe {max-width:100%;}

/* cookie consent box */
#cookie-popup {
    display: none;
    position: fixed;
    width: 100%;
    height: 38px;
    line-height: 38px;
    bottom: 0px;
    z-index: 10;
    background-color: var(--gimvic-green);
    box-shadow: 0px 0px 10px 5px rgba(00, 00, 00, 0.2);
    color: #fff;
    text-align: center;
}
#cookie-popup button {
    padding: 2px 8px;
    border: 1px solid var(--gimvic-green);
    border-radius: 4px;
    box-shadow: 0px 0px 10px 0px rgba(00, 00, 00, 0.1);
    background: #fff;
    color: var(--gimvic-green);
    font-weight: 500;
    margin-left: 10px;
}
#cookie-popup a { color: inherit; }
#cookie-popup a:hover { color: #333; }
#cookie-popup a.vec { margin-left: 5px; }