@charset "UTF-8";

/* COLORS

#2f3e5a;
#304670;
#336290;
#4682b4;    SteelBlue
#78a0c8;
#b0c4de;		LIGTHSteelBlue
#e8eeff;
#f8fbff;

#FFA500		ORANGE
#FFC800		ORANGE
#FFE900		ORANGE



#4682B4 Shades:
	 		#000000	(black)
	 		#070D12
	 		#0E1A24
	 		#152736
	 		#1C3448 x
	 		#23415A
	 		#2A4E6C
	 		#315B7E x
	 		#386890
	 		#3F75A2
			#4682B4 (Steelblue)
			#588EBC
			#6B9BC3
			#7EA8CA x
			#90B4D2
			#A2C0DA
			#B5CDE1 x
			#C8DAE8
			#DAE6F0
			#ECF2F8 x
			#FFFFFF	(white)
*/



/* general settings */

*	{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
	overflow-wrap: anywhere;
	}

/* remove italic and bold from B and I, use STRONG and EM */
/* B and I are used without any semantic meanings */
b, i {
	font-weight: normal;
	font-style: normal;
}

html {font-size: calc(8px + 0.7vw); color: #333; }
h1 {font-size:1.6rem; font-weight: bold; margin: 1rem 0 .6rem 0;}
h2, input.a_edit_head {font-size: 1.4rem; font-weight: bold; margin: 0 0 .2rem 0; color: steelblue; border:none; background: none;}
/*h3 {font-size: 1rem; font-style: italic; font-weight: normal; margin: 0 0 .3rem 0; border:none; background: none;}*/
h3 {font-size: 1.2rem; font-weight: bold; margin: 0 0 .3rem 0; color: steelblue; border:none; background: none;}
h4 {font-size: 1rem; font-weight: normal; font-style: italic; margin: 0 0 .4rem 0; color: steelblue; border:none; background: none;}

input.a_edit, select {border: none; display: inline; background: none;}

input.a_edit_head, input[type="text"].a_edit {margin: .05em 0; width: 60%; border-bottom: 2px dashed lightgrey;}
select.a_edit {margin: .05em 0;}

ul {list-style-type: square;}
li {margin-left: 3em;}
hr {
       height: 2px;
       background: #ccc;
       font-size:0;
       border: 0;
       margin: .3rem 0;
       }

p {margin: .5em 0 1em 0;}

code {font-family: Courier}

pre {	display: block;
       font-family: monospace;
       white-space: normal;
       border: 1px dotted grey;
       background-color: lightgrey;
       margin: .1em 0;
       font-size: .8rem;
       }

a {color:#315B7E; text-decoration:none; font-weight: bold;}
a:hover {text-decoration:underline;}


/* Main Layout using Flexbox */

body {
  display: flex;
	flex-direction: column;
}

#headcontainer, #footcontainer {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content:space-between;
	/* border-bottom: 1px solid #666; */
	width: 80vw;
	margin: 0 auto;
}

#maincontainer {
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap-reverse;
	justify-content: space-between;
	width: 80vw;
	margin: 0 auto;
	column-gap: 1em;
}

#headcontainer, #maincontainer, #footcontainer {

}

/* smaller screens - smaller margins */

@media only screen and (max-width: 970px) {
	#headcontainer, #maincontainer, #footcontainer {
		width: 95%;
	}
	/* tohle maže obrázek pro malé obrazovk */
	#newspane > img {
		display: none;
	}
}

#sitelogo {
		flex: 0 0 auto;

    background-image: url("../img/skoda110r.png");
    background-repeat: no-repeat;
    background-size: contain;
		width: 20em;
    height:3em;
  }

#navicons {
		flex: 0 0 auto;

		display:flex;
		justify-content:  space-between; /* horizontal */
		align-items: center; /* vertical */
		flex-wrap: nowrap;
		column-gap: .5rem;
		padding: .5em 0;
	}

#navicons > a {
		color: white;
		align-items: center; /* vertical */
		font-size: 1.7rem;
		font-weight: 800;
		text-transform: uppercase;
		white-space: nowrap;
		-webkit-text-stroke: 1px #333;
	}

#navicons > a span {
			color: SteelBlue;
		}

#navicons > a > i {
		vertical-align: inherit;
		background-color: #4682B4;
		padding: 2px;;
		border: 2px solid black;
		border-radius: 4px;
	}
#navicons > a > i:hover {
	 background-color: #B5CDE1;
	}

/* not used for now
.topbadge {
	display: block;
	padding:0;
	background-color: firebrick;
	width: 10px;
	height: 10px;
	border: 2px solid white;
	border-radius: 10px;
	font-size: 8px;
	line-height: 10px;
	text-align: center;
	color: white;
	font-weight: bold;
	position: absolute;
	float: right;
	right: 0;
	top: -5px;
} */

#footcontainer {
    background-color:lightsteelblue;
		height:auto;
		padding: .5rem;
		border-top: solid black 1px;
		}

/*end of main layout*/

#contentblock {
	flex: 65 0 30em;
}

#newspane {
	flex: 35 0 15em;
	background-color: #F8F8F8;
	padding: .5rem;
	margin-top: .5em;
	border: 1px solid #DDD;
	border-radius: 2px;
}

#newspane > img {
	width:90%;
	margin: 1em 5%;
	opacity: 80%;
}

#newspane article {
	border-bottom: .1rem dashed #999;
	margin-bottom: .5rem;
	padding-bottom: .5rem;
	width: 100%;
}

/* General class properties */

.big {font-size: 1.4rem;}
.bigger  {font-size: 1.2rem;}
.smaller  {font-size: .9rem;}
.small  {font-size: .8rem;}
.italic {font-style: italic;}
.bold {font-weight: bold;}

.flexline{
	display: flex;
	flex-direction: row;
	column-gap: .5rem;
	align-items: flex-start; /* vertical */
	margin-bottom: .5rem;
	justify-content: space-between;
}
.flexleft{
	display: flex;
	flex-direction: row;
	column-gap: .5rem;
	align-items: flex-start; /* vertical */
	margin-bottom: .5rem;
}

.flexcolumn {
	display: flex;
	flex-direction: column;
}

.left {float:left;}
.right {float:right;}

.clearfix:after {
  display: table;
  clear:both;
  content: "";
  }

.paperwhite {
    background-color: #F8F8F8;
    border: 1px solid #DDD;
    border-radius: 2px;
    padding: .7em;
    }

.nodecoration, .nodecoration:hover {
       text-decoration: none;
}

.nowrap {
    white-space: nowrap;
}

.rounded {
    border-radius: 2px;
}

.bordered {
    border: 1px solid;
}

.shadow {
    box-shadow: 2px 2px 5px gray;
    margin-top: .5em;
    margin-bottom: .5em;
    border-radius: 2px;
}

.maximized {
    width: 100%;
}


.font05 {
	font-size: .5rem;
}
.font08 {
	font-size: .8rem;
}
.font12 {
	font-size: 1.2rem;
}

/* END of General Properties */


#my_file_element
	{
	border: none;
	background: none;
	}


.sysmsg
	{
	background: #315B7E;
  border: 6px double lightsteelblue;
	border-radius: 2px;
	padding: .6em 1.2em;
	font-family: Courier;
	font-size: 1.2em;
	font-weight: bold;
	color: #DAE6F0;
	}
.disappear {
       animation: fadeout 4s 4s forwards, shrink-y 1s 7s both;
       -webkit-animation: fadeout 4s 4s forwards, shrink-y 1s 7s both;
       overflow: hidden;
       display: block;
}
@-webkit-keyframes fadeout { to { opacity: 0; }}
@keyframes fadeout { to { opacity: 0; }}

@keyframes shrink-y {
       from {max-height:100px;}
       to {
	 max-height: 0;
	 padding-top: 0;
	 padding-bottom: 0;
	 margin-top: 0;
	 margin-bottom: 0;
	 border-top: 0;
	 border-bottom: 0;
       }
       }
@-webkit-keyframes shrink-y {
       from {max-height:100px;}
       to {
	 max-height: 0;
	 padding-top: 0;
	 padding-bottom: 0;
	 margin-top: 0;
	 margin-bottom: 0;
	 border-top: 0;
	 border-bottom: 0;
       }
       }


.slider
    {
    overflow: hidden;
    background-color: #B5CDE1;
    max-height: 1.6em;
    border: solid 1px steelblue;
    border-radius: .2em;
    padding: .5em;
    transition: max-height .5s;
    }

.slider p:first-child
    {
    margin-bottom: .5em;
    }

.slider:hover
    {
    height: auto;
    max-height:40em;
    transition: max-height .8s;
    transition-delay: .8s;
    }

.thumb
	{
	display: block;
	float:left;
	background-color: #4682B4;
	border:1px solid white;
	padding: 2px;
	height: 100px;
	width: auto
	}

.thumb a
	{
	background-color: #4682B4;
	color: white;
	padding: 2px 5px;
	position: relative;
	float: left;
	}


.pagewidth {
	display: block;
	box-sizing: border-box;
	width:90%;
	margin: 0 auto;
	min-width: 20rem;
	max-width: 70rem;
}


.invlink {color: #ECF2F8;
        margin: 0 0 0 0;
        padding: 1px 2px 1px 2px;
        }

.invlink:hover {background: #B5CDE1; color:black;}

#mainsearch
	{
	margin: .5rem 0;
	padding: .1rem .5rem;
	width:100%;
	display: flex;
	align-items: center;
	border: solid lightsteelblue .1rem;
	border-radius: .2rem;
	}

#mainsearch>input[type="search"]
	{
	flex: 0 1 100%;
	height: 1.6rem;
	margin: 0;
	border: 0;
	font-size: 1.2rem;
	background-color: inherit;
	}

#mainsearch>input[type="search"]:focus {
	outline:none;
}

#mainsearch>button
	{
	flex: 0 0 2rem;
	height: 2rem;
	min-width:2rem;
	margin:0;
	background: none;
	border: none;
	box-shadow: none;

	padding: 0;
	}
#mainsearch>button>i{
	color: steelblue;
	font-size: 1.6rem;

}


#photolist
	{
	width: 99%;
	height: 320px;
	}

/* pagination */
ul.pagination {
    text-align: right;
    font-size: 1rem;
    height: auto;
    width: 100%;
    list-style-type: none;
    margin: 1.4em 0;
    overflow: hidden;
    padding: 0;

}
ul.pagination li.details {

    background-color: white;
    border-color: #C8D5E0;
    border-image: none;
    border-style: solid;
    border-width: 1px 1px 2px;
    color: #1E598E;
    font-weight: bold;
    padding: .28em .7em;
    text-decoration: none;

}
ul.pagination li.dot {

    padding: 3px 0;

}
ul.pagination li {

    display: inline-block;
    list-style-type: none;
    margin: 0 3px 0 0;

}
ul.pagination li:first-child {

    margin-left: 0;

}
ul.pagination li:last-child {

    margin-right: 0;

}
ul.pagination li a {

    color: black;
    display: block;
    padding: 4px 10px;
    text-decoration: none;

}
ul.pagination li a img {

    border: medium none;

}
ul.pagination li a.current {

    background-color: white;
    border-radius: 0 0 0 0;
    color: #333333;

}
ul.pagination li a.current:hover {

    background-color: white;

}
ul.pagination li a:hover {

    background-color: #C8D5E0;

}
ul.pagination li a {

    background-color: #F6F6F6;
    border-color: #C8D5E0;
    border-image: none;
    border-style: solid;
    border-width: 1px 1px 2px;
    color: #1E598E;
    display: block;
    font-weight: bold;
    padding: 4px 10px;
    text-decoration: none;
}
/* end of Pagination */

/* IMAGES */

.clickableImage, #previewImage, .previewImage{
    margin: .2rem;
    border: .3rem solid #fff;
    font-size: .8rem;
    border-radius: .2rem;
    width: 8rem;
    height: 6rem;
    box-shadow: 2px 2px 5px gray;
}

.clickableImage:hover, .previewImage:hover, .insertableImage:hover {
    opacity: .8;
    cursor: pointer;
}

.largePreview {
	width: 12rem;
	height: 9rem;
}

/* end of IMAGES */

/* forum */

.thread_list {
       width: 100%;
       border-spacing: 0 .2em;
       margin: 0;
       padding: 0;
}
.thread_list th{
       background-color: #3F75A2;
       color: #F8F8F8;
       padding: .5em;
}
.thread_list tr{
       background-color: #F8F8F8;
}
.thread_list tr:nth-child(odd){
       background-color: #E8E8E8;
}
.thread_list tr:hover{
       background-color: #B5CDE1;
}
.thread_list td {
       border-radius: 2px;
       padding: .5em;
       vertical-align: top;
}


/* USER styling*/

.avatar {
  /*background-color: #F8F8F8;*/
  padding: .1em;
  display: inline-block;
  white-space: nowrap;
  /*margin-left: 1em;*/
}

.avatar_ico {
  display: inline-block;
  background: url(../img/user_close_32_fff.png) #999 center center no-repeat;
  width:40px;
  height:40px;
  vertical-align:top;
  margin-right: .5em;
}
.avatar_stats {
  margin-left: .3em;
  color: grey;
}

.avatar_name {
  font-weight: bold;
}

.user_info {
  display:inline-block;
  padding-right: .5em;
  /*min-width: 10em;*/
  white-space: nowrap;
  vertical-align:top;
  line-height: 1.2;
}

.avatar_info {
  font-style: italic;
  font-size: .8em;
}

.badge0:before {
  content: "\2298";
  color: grey;
  margin-right: .2em;
}

.badge1:before, .badge3:before{
  content: "\25B2"; /* 2756 = diamond minus cross / 26AB = black dot - not working in my chrome */
  color: #b87333; /*copper*/
  margin-right: .2em;
}
.badge15:before {
  content: "\25C6"; /* 2726 4 pont star */
  color: darkorange;
  margin-right: .2em;
}
.badge253:before, .badge255:before {
  content: "\25C8"; /* 2605 5+star */
  color: #AE0C00;
  margin-right: .2em;
}

.comment {
    margin-bottom: 1em;
    padding: 0;
    display: table;
    width: 100%
}

.tcell {
display: table-cell;
padding: .5rem;
vertical-align: top;
}

.comment_main {
    width: 100%;
}
.comment_message {
    min-height: 3em;
}
.comment_ctrl {
       margin-top: .5rem;
    font-size: .9rem;
    color: darkgrey;
    font-weight: normal;
}
.comment_ctrl a{
       color: inherit;
       font-weight: inherit;
}

.comment_ctrl span {
    margin-right: .5em;
}

.icon {
       font-size: 1.2rem;
       font-family: serif;
       font-weight: bold;
}

.opahover {
       opacity: .5;
}
.opahover:hover {
       opacity: 1;
}

.hand {
	cursor: pointer;
}

.filter_wrap
       {
       /*position: absolute;*/
       overflow: hidden;
       /*font-size: .8em;*/
       background-color: white;
       max-height: 1.6em;
       border: solid 1px steelblue;
       border-radius: .2em;
       padding: .5em;
       transition: max-height .5s;
       }

.filter_wrap p
       {
       margin-bottom: .5em;
       }

.filter_wrap:hover
       {
       height: auto;
       max-height:120px;
       transition: max-height .5s;
       transition-delay: .5s;

       }

/* end of forum */


.eabutton
	{
	background: url('../img/square64.png');
    color: black;
    font-size: 1.3em;
    text-align: center;
    margin: 0;
    padding: 0;
    height: 64px;
    width: 64px;
    overflow: hidden;
    }

.datatitle { width:200px; text-align:right; display:block; float:left;}

.slim { padding-top:0; padding-bottom:0;
    margin-top:0; margin-bottom:0;}

.error
	{
	color:red;
	font-weight:bold;
	}

.half   {
	box-sizing: border-box;
  display: inline-block;
	width: 50%;
	}

.third
	{
	box-sizing: border-box;
	width: 33%;
	display: inline-block;
	clear:none;
	overflow:hidden;
	}

.quarter
	{
	box-sizing: border-box;
	width: 25%;
	display: inline-block;
	clear:none;
	overflow:hidden;
	}

.eight
	{
	box-sizing: border-box;
	width: 12%;
	display: inline-block;
	float:left;
	clear:none;
	overflow:hidden;
	}

.center
	{
	text-align: center;
	}

.infobox
	{
	position:absolute;
	top:0;
	left:0;
	width:400px;
	height:150px;
	height:180px;
	z-index:1;
	background-color:#B5CDE1;
	border:3px solid #4682B4;
	color:#4682B4;
	padding-top:70px;
	}

.navside {padding: 0; width:90px;}
.navcenter {padding:0; width:390px;}
.textline {height:20px; margin: 5px 0; overflow:hidden; border: 0; text-align:center;}

.twocol {
       column-count: 2;
       column-gap: 1.2em;
       }

.twocol>span, .twocol>div {display:inline-block; width:100%;}


.info {
	margin: .5rem 0;
	padding: 0;
	}
.info h2{
	background-color: orange;
	border-radius: 2px 2px 0 0;
	color: white;
	padding: .5rem;
	margin: 0;
	}
.info div {
	background-color: lightgrey;
	border-radius: 0 0 2px 2px;
	padding: .5rem;
	margin: 0;
	display: block;
	width: auto;
	}

.margin {
       margin-top: 1em;
       margin-bottom: 1em;
       }

.tnlink
	{
	display: inline-block;
	margin: 5px 4px;
	padding: 0;
	border:1px solid #B5CDE1;
	text-align:center;
	border-radius: 2px;
	box-shadow: 2px 2px 5px gray;
	}

.tnlink:hover
	{
	box-shadow: 2px 2px 5px #000;
	}

.tnlink img
	{
	border-radius: 2px;
	vertical-align: top;
	}


.whitetext {
            color: #E8E8E8;
        }

.gray	{
       background-color: #E0E0E0;
       border-color: gray;
       color: gray;
}

.darken	{
       background-color: rgba(0,0,0,0.04);
}

.orange	{
       background-color: #FFDB99 !important;
       border-color: orange !important;
}

/*.orange div:first-child	{
       background-color: #FFC04D;
}*/

.green	{
       background-color: #cce698 !important;
       border-color: limegreen !important;
}
.green div:first-child	{
       background-color: #AED75B !important;
}
.greentext	{
       color: limegreen;
}

i.goldtext	{
       color: gold;
}
.greytext	{
       color: lightgrey;
}
.grey	{
       background-color: lightgrey;
			 border-color: grey;
}
.red	{
       background-color: #D89090;
       border-color: firebrick;
}
.red div:first-child	{
       background-color: #C96464;
}

.redtext	{
       color: firebrick;
}

:target .hilite{
       animation: colorout 3s ease-out 0s backwards;
       -webkit-animation: colorout 3s ease-out 0s backwards;
}
:target:before {
    content: "";
    margin-top: -150px;
    height: 150px;
    display: block;
    visibility: hidden;
}


@-webkit-keyframes colorout { from { background-color: #FD6; }}
@keyframes colorout { from { background-color: #FD6; }}


.redtext {color: firebrick; text-shadow: 1px 1px 1px #333;}
.yellowtext {color: goldenrod; text-shadow: 1px 1px #333;}
.greentext {color: green; text-shadow: 1px 1px #333;}