/* 
    Document   : style
    Created on : 17.10.2010, 11:45:59
    Author     : gregor
    Description:
        Purpose of the stylesheet follows.
*/

/* undohtml */
/* (CC) 2004 Tantek Celik. Some Rights Reserved.             */
/*  http://creativecommons.org/licenses/by/2.0                   */
/* This is licensed under a Creative Commons License. */
/* Purpose: undo some of the default styling of common (X)HTML browsers */
:link,:visited {
	text-decoration: none
}

ul,ol {
	list-style: none
}

h1,h2,h3,h4,h5,h6,pre,code {
	font-size: 1em;
	margin: 0;
	padding: 0
}

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
	{
	margin: 0;
	padding: 0
}

a img,:link img,:visited img {
	border: none
}

address {
	font-style: normal
}

/* ----------------------end undohtml----------------------------------------- */

body {
    text-align: center;
    background-color: #CBCBCC;
    font-size: 13px;
    font-family: Verdana, sans-serif;
}

a:hover {
    text-decoration: underline;
}

h2 {
    font-size: 150%;
    padding: 1em 0 0.3em;
    color:  #DD9928;
    font-style: italic;
    width: 100%;
    border-bottom: #DD9928 solid 1px;
}

h3 {
    font-size: 110%;
    font-style: italic;
    font-weight: bold;
    padding-top: 1em;
    color:  #DD9928;
}

label {
	display:block;
}

#vse {
    max-width:900px;
    margin: 0 auto;
    text-align: left;
    background-color: white;
    box-shadow: 0 5px 10px #555555;
}

#glava {
    background-color: white;
}

#slike {
    float: left;
    padding: 0.5em 0 0 0.5em;
}

#glava h1 {
    float:right;
    padding: 1em 1em 0.5em 0;
}

#fotke {
    clear:both;
}

#sidebar {
    width: 250px;
    background-color: #DD9928;
    color: white;
    padding: 1em;
    float: left;
    box-shadow: 3px 0 0 #DD9928
}

#sidebar h2 {
    padding: 21em 0 1em 0;
    color: white;
    font-size: 110%;
    font-style: italic;
}

#menu {
    background-color: gray;
    border-left: solid 1px gray;
    border-right: solid 1px gray;
    border-bottom: solid 2px #CBCBCC;
    float: right;
}

#menu ul {
    list-style:  none;

}

#menu ul li {
    display: inline;
}

#menu ul li a {
    display: block;
    float: left;
    width: 122px;
    height: 20px;
    text-align: center;
    border-left: solid 1px gray;
    border-right: solid 1px gray;
    font-size: 105%;
    font-variant: small-caps;
}

#menu ul li a:link {
    background-image: url('../media/menua.png');
    color: black;
}

#menu ul li a:visited {
    background-image: url('../media/menua.png');
    color: black;
}

#menu ul li a:hover {
    background-image: url('../media/menub.png');
    color: black;
}

#main {
    max-width: 600px;
    float: right;
    padding-right: 1em;
}


#main a {
    color:  #DD9928;
}

#main p {
    padding-top: 1em;
    text-align: justify;
}

#main ul {
    list-style: url('../media/kopac-icon.png') inside;
    padding-top: 1em;
}

#main ul li {
    text-indent: -2.6em;
    margin-left: 2.6em;
}

#povprasevanje {
    clear:both;
    padding:.8em;
    background-color: #dd9928;
    border-radius: 5px;
    max-width:10em;
    margin-left:68%;
    box-shadow: 2px 2px 3px #555555;
}

#povprasevanje p {
    padding:0;
    margin:0;
}

#povprasevanje a {
    color:#fff;
}

.storitev {
    padding: 1em;
    width:260px;
    float: left;
}

.storitev img {
    float: left;
    vertical-align: top;
    border: solid #CBCBCC 5px;
    margin-right: 1em;
    box-shadow: 2px 2px 3px #555555;
}

#desnaslika {
    float: right;
    margin-left: 1em;
}

#desnaslika img {
    box-shadow: 2px 2px 3px #888888;
    margin-bottom:5px;
}

#kontakt {
    text-align: center;
    float: right;
    margin-right: 2em;
}

#noga {
    clear: both;
    text-align: center;
    font-size: 80%;
    background-color: #CBCBCC;
}

@media (max-width: 768px) {
    #vse {
        max-width: 100%;
        width: 100%;
        box-shadow: none;
    }

    /* Header: stack logo and title */
    #glava h1 {
        float: none;
        text-align: center;
        padding: 0.5em;
    }
    #slike {
        float: none;
        text-align: center;
        padding: 0.5em 0;
    }

    /* Sidebar: full width, no longer floated beside #main */
    #sidebar {
        width: auto;
        float: none;
        box-shadow: none;
    }
    #sidebar h2 {
        padding: 1em 0;
    }

    /* Menu: stack items instead of floating them at 122px each */
    #menu {
        float: none;
        width: 100%;
    }
    #menu ul li {
        display: block;
    }
    #menu ul li a {
        float: none;
        width: 100%;
        height: auto;
        padding: 0.5em 0;
    }

    /* Main content: full width, no longer floated beside sidebar */
    #main {
        max-width: 100%;
        float: none;
        padding-right: 0;
        padding: 0 1em;
    }

    #povprasevanje {
        max-width: 100%;
        margin-left: 0;
    }

    /* Service grid: stack instead of floating at 260px each */
    .storitev {
        width: 100%;
        float: none;
        box-sizing: border-box;
    }
    .storitev img {
        float: none;
        display: block;
        margin: 0 auto 1em;
    }

    #desnaslika,
    #kontakt {
        float: none;
        margin: 0 auto 1em;
        text-align: center;
    }

    #noga {
        padding: 0.5em;
    }
}

/* Global safety net, add outside the media query */
img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    #menu ul li a {
        float: none;
        width: 100%;
        height: auto;
        padding: 0.5em 0;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

/* Header slideshow: CSS crossfade replacing jquery.cycle (fx: fade, timeout 6s, speed 3s).
   4 slides x 9s (3s fade in + 6s hold) = 36s loop; the fade-out overlaps the next fade-in. */
#fotke {
    position: relative;
    overflow: hidden;
}
#fotke img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    animation: fotke-fade 36s infinite backwards;
}
#fotke img:first-child {
    position: relative;
    animation-delay: -3s;
}
#fotke img:nth-child(2) { animation-delay: 6s; }
#fotke img:nth-child(3) { animation-delay: 15s; }
#fotke img:nth-child(4) { animation-delay: 24s; }

@keyframes fotke-fade {
    0%      { opacity: 0; }
    8.33%   { opacity: 1; }
    25%     { opacity: 1; }
    33.33%  { opacity: 0; }
    100%    { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    #fotke img { animation: none; }
    #fotke img:first-child { opacity: 1; }
}

#sidebar a {
    color: white;
}

/* contact form */
.contactform {
    width: 600px;
    max-width: 100%;
}
.contactform div {
    padding-top: 1em;
}
.contactform input[type="text"],
.contactform input[type="email"],
.contactform textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.3em;
    font: inherit;
}
.contactform input[type="submit"] {
    margin-top: 1em;
    padding: 0.4em 1.5em;
    background-color: #DD9928;
    color: white;
    border: none;
    border-radius: 5px;
    font: inherit;
    cursor: pointer;
}
.contactform input[type="submit"]:disabled {
    opacity: .6;
    cursor: default;
}
.form-hp { display: none; }
.form-status { margin-top: 10px; border-radius: 3px; }
.form-status:empty { display: none; }
.form-status--success { padding: 8px 12px; background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.form-status--error   { padding: 8px 12px; background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }