@font-face {
 font-family: TheOnlyException;
 src: url(/uploads/fonts/TheOnlyException.ttf);
}

@font-face {
 font-family: localSSPL;
 src: url(/uploads/fonts/SourceSansPro-Light.otf);
}

@font-face {
 font-family: TheOnlyException-eot;
 src: url(/uploads/fonts/TheOnlyException.eot);
}
@font-face {
 font-family: localSSPL-eot;
 src: url(/uploads/fonts/SourceSansPro-Light.eot);
}

/* layout */

body {
 background-color: #ece5d5;
 padding: 0px;
 margin: 0px;
 font-family: "Source Sans Pro Light", localSSPL, sans-serif;
 font-weight: 400;
 font-size: 18px;
}
.ie body {
 font-family: "Source Sans Pro Light", localSSPL-eot, sans-serif;
}

#body-wrap {
 display: table;
 width: 100%;
}


#body {
 display: table-cell;
 min-width: 100%;
}

#header-wrap {
 background-color: #ba2f3e;
 text-align: right;
 padding: 10px 0px 9px; /* 9px at the bottom, because 1px is given by #main's border */
 margin: 0px;
}

#header {
 margin-top: auto;
 margin-bottom: auto;
}

#my-lang-menu {
 padding-right: 30px;
}

#desktop-table {
 display: table;
 width: 100%;
}

@media screen and (min-width: 1200px) {
 #desktop-table, #header {
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
 }
}

#desktop-row {
 display: table-row;
 width: 100%;
 padding: 0px;
 margin: 0px;
}

#mobile-table {
 display: table-cell;
 vertical-align: top;
 width: 333px;
 padding: 0px 0px 4ex 10px;
}

#mobile-row {
 display: inline-block;
 width: 333px;
}

#desktop-content-cell {
 display: table-cell;
 vertical-align: top;
 padding: 0px 30px 10px;
}

#desktop-rope {
 padding-top: 170px;
 border-right: solid 2px #ba2f3e;
}

h1#title {
 text-align: right;
 white-space: nowrap;
 padding: 0px;
 margin: 0px;
 margin-bottom: -2ex;
 position: relative;
 top: -2ex;
 right: 2px;
 font-family: TheOnlyException, sans-serif;
 font-weight: normal;
 color: #ba2f3e;
}
.ie h1#title {
 font-family: TheOnlyException-eot, sans-serif;
 top: -2.2ex;
}

#mobile-rope-1 {
 display: none;
}
#mobile-rope-2 {
 display: none;
}

@media only screen and (max-device-width:800px) {
 #desktop-table {
  display: block;
  width: 100%;
 }
 #desktop-row {
  display: block;
  width: 100%;
 }
 #mobile-table {
  display: table;
  empty-cells: show;
  width: 100%;
  padding: 0px;
 }
 #mobile-row {
  display: table-row;
  width: 100%;
 }
 #navigation {
  display: table-cell;
  width: 333px;
 }
 #mobile-rope-1 {
  display: table-cell;
  border-right: solid 2px #ba2f3e;
 }
 #mobile-rope-2 {
  display: table-cell;
  width: 30px;
 }
 #desktop-content-cell {
  display: block;
 }
 #desktop-rope {
  display: none;
 }
 #navigation {
  padding: 0px 0px 30px 10px;
 }
}

#main-menu {
 display: inline-block;
 background-image: url(/uploads/images/zavihek.png);
 background-repeat: no-repeat;
 background-position: right top;
 background-color: #ba2f3e;
 border-top: 3px solid #9e2f39;
 border-right: 3px solid #9e2f39;
 -webkit-transform-origin: 0 0;
 -moz-transform-origin: 0 0;
 -ms-transform-origin: 0 0;
 -o-transform-origin: 0 0;
 transform-origin: 0 0;
 -webkit-transform: rotate(-3.5deg);
 -moz-transform: rotate(-3.50deg);
 -ms-transform: rotate(-3.5deg);
 -o-transform: rotate(-3.5deg);
 transform: rotate(-3.5deg);
}

#footer-wrap {
 padding: 0px;
 margin: 0px;
 border-top: solid;
 border-top-color: #ba2f3e;
 padding-top: 10px;
}

#footer {
 background-color: #ba2f3e;
 color: #ece5d5;
 padding: 5px 0px;
 text-align: center;
 font-size: smaller;
}

img.logo {
  width: 300px;
  height: auto;
  padding: 20px 0px 40px 30px;
  border-left: solid;
  border-left-color: #ba2f3e;
}

#my-lang-menu a, #main-menu a {
 color: #ece5d5;
 text-decoration: none;
 padding: 0px;
}
#my-lang-menu a {
 padding: 0px 4px;
}


#my-lang-menu li.lang_current a, #main-menu a.menuactive {
 color: white;
 font-weight: bold;
}

#main-menu li  {
  list-style-type: none;
  padding: 2px 0px 0px;
}
#main-menu > ul {
  padding: 0ex 1em 1ex 2em;  /* 0px 20px 10px 30px;*/
  margin: 1ex 0px;
 -webkit-transform-origin: 0 0;
 -moz-transform-origin: 0 0;
 -ms-transform-origin: 0 0;
 -o-transform-origin: 0 0;
 transform-origin: 0 0;
 -webkit-transform: rotate(3.5deg);
 -moz-transform: rotate(3.5deg);
 -ms-transform: rotate(3.5deg);
 -o-transform: rotate(3.5deg);
 transform: rotate(3.5deg);
}
#main-menu ul ul {
  padding: 0px 0px 0px 2em;
  margin: 0px;
}
#my-lang-menu li {
  display: inline;
}
#my-lang-menu ul {
  margin: 0;
}

a {
 color: #ba2f3e;
}




/* http://radiatingstar.com/unorthodox-ideas-for-ahover-effects */
a  {
 text-decoration: none;
}
.not-ie a:not(.logo) {
 position: relative;
 -webkit-transition: all .3s;
 -moz-transition: all .3s;
 -o-transition: all .3s;
 transition: all .3s; /* Vendor prefixes required in your code. */
}
.not-ie a:not(.logo):after, .not-ie a:not(.logo):before {
 -webkit-transition: all .3s;
 -moz-transition: all .3s;
 -o-transition: all .3s;
 transition: all .3s; /* Once again, vendor prefixes required. */
}
.not-ie a:not(.logo):after, .not-ie a:not(.logo):after {
 content: "\2605";
 position: absolute;
 top: -10px;
 right: 0;
 color: transparent;
 font-weight: normal;
}
.not-ie #my-lang-menu a:after, .not-ie #main-menu a:after {
 top: -4px;
}

.not-ie a:not(.logo):hover:after {
 right: -25px;
 -webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
 -ms-transform: rotate(360deg);
 -o-transform: rotate(360deg);
 transform: rotate(360deg); /* Vendor prefixes. */
 padding: 5px; /* A small fix. Read below why it's needed. */
}
.not-ie a:not(.logo):hover:after {
 color: #ba2f3e;
}
.not-ie #main-menu a:hover:after {
 color: #ece5d5;
}
.not-ie #my-lang-menu li:last-of-type a:hover:after {
 color: #ece5d5;
}
.not-ie #my-lang-menu li:first-of-type a:before {
 content: "\2605";
 position: absolute;
 top: -4px;
 left: 0;
 color: transparent;
 font-weight: normal;
}
.not-ie #my-lang-menu li:first-of-type a:hover:before {
 left: -25px;
 -webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
 -ms-transform: rotate(360deg);
 -o-transform: rotate(360deg);
 transform: rotate(360deg); /* Vendor prefixes. */
 padding: 5px; /* A small fix. Read below why it's needed. */
 color: #ece5d5;
}
.not-ie #main-menu a.menuactive:hover:after, .not-ie #my-lang-menu li.lang_current:last-of-type a:hover:after, .not-ie #my-lang-menu li.lang_current:first-of-type a:hover:before {
 color: white;
}

/* content */

#content ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

#content li {
  padding-left: 1em;
  text-indent: -1em;
}

#content li:before {
  content: "*";
  font-family: TheOnlyException;
  color: #ba2f3e;
  padding-right: 5px;
  line-height: 10%;
}

/* Stylesheet: Jezikalja Modified On 2014-02-07 12:02:37 */