/*  
Theme Name: PIC2020
Theme URI: https://www.particleincell.com
Description: PIC-C
Version: 1.0
Author: Lubos Brieda
Author URI: http://www.iamlubos.com
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap')

/*browser reset*/
p, article,h1, h2, h3, h4, div,span, img, table, ul, ol,a,figure,figcaption{
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
font-size: 100%;
font-family: inherit;
text-align: left;}

table {border-collapse: collapse;font-family:courier;border-spacing: 0;}
table,th, td{border: 1px solid black;}
td,th{padding: 3px;}
th{font-weight:bold;}
img{max-width:100%;height:auto;}

body {
  background: #fff // url('images/code.png') no-repeat 20px 10px;
  color:black;
  font-family: 'Montserrat', sans-serif;
  font-size:14px;
  font-weight:normal;
  margin:0;
  padding:0;
  line-height:1.3;
}

p{
 margin-bottom:0.5em;
}

a{color:#11c;font-weight:bold;}
a:hover{color:#008;}


header{
 background-image: linear-gradient(0deg, rgba(100,100,255,0), rgba(200,200,255,1));
 min-height:55px;
 padding:5px 5px 10px 5px;
}

div.wrapper {
 max-width:1500px;
 margin:0 auto;
 padding: 0 12px 0 5px;
}

header div.wrapper {
 display:flex;
 flex-flow:row wrap;
 align-items:flex-end;
}


header div.logo {
height:55px;
min-width: 120px;
background: url('images/logo4.png') no-repeat 2px 2px;
}

/*search and social media bar*/
header form.searchsm {
 text-align:right;
 width:180px;
 margin-left:auto;
}
input#searchsm{width:140px;}

img.smicon:hover {background-color:#ddd;}

nav.topmenu {
display:flex;
flex-flow:row wrap;
justify-content:center;
}

nav.topmenu a {
  font-family: 'Ubuntu', sans-serif;  
  font-size:22px;
  font-weight:700;
  font-variant: small-caps; 
  text-decoration: none; 
  padding: 0px 4px 0px 4px;
  margin: 0px 2px;
  color: #bbc;
  text-shadow: 1px 1px black;  dd
}

nav.topmenu a:hover{background:linear-gradient(0deg, #eee, #ccc);}



@media screen and (max-width: 820px) {
  header div.wrapper {   
    flex-direction: column;
    align-items:center;
  }

  header form.searchsm{
  margin-left:0;
  width: 80%;
  text-align:center;
  display:flex;
 }
 input#searchsm{width:50%}
}


footer {
 background-color:#666;
 color:white;
 padding:5px 0;
}

footer a{color:#eef;font-weight:bold;}
footer a:hover{color:#fff;}

p{text-align:justify}
h1,h2,h3 {color:#822; font-variant:small-caps;}
h1,h2,h3 {font-family:'Ubuntu',sans-serif}
h1 {
font-size: 1.8em;
font-weight:600;
text-align:center;
text-decoration:underline;
}

h2{
font-size:1.5em;
font-weight:bold;
border-bottom: 3px solid transparent;
border-image: linear-gradient(90deg,#fee,#c66);
border-image-slice: 1;
margin:5px 0px;
}
h3{font-weight:bold;font-size:1.2em;}

figure{ 
border:1px solid #ddd;
box-shadow: 2px 2px #bbb;
text-align:center;
display:inline-block;
padding: 5px;
margin: 0 auto 5px auto;
position:relative;
left:50%; 
transform: translateX(-50%);
}
figure img{margin: 0 2px;}
figcaption{
 font-style:italic;
 text-align: center;
 color: #222;
 font-size:0.9em;
}
figure a:hover img{opacity:0.7;}

.left {float:left;margin-right: 10px;}
.right {float:right;margin-left: 10px;}
ol,ul{  padding-left:0}
li{margin-bottom:0.3em;
text-align:justify;
list-style-position:inside;}


.deck{
display:flex;
flex-flow:row wrap;
align-items:flex-start;
justify-content:center;
}
.card {
 display:inline-block;
 border: 1px solid #ddd;
 padding: 2px;
 box-shadow:1px 1px #888;
 margin: 0 3px 0.5em 3px;
 font-size: 0.9em;
 font-weight: normal;
 hyphens:auto;
 color:black;
}
.card h1{font-size:16px;color:#222;}
.card:link{text-decoration:none;color:red;font-size:2em;}
.card:hover{background-color:#eee;}

aside {font-size:0.9em;}

ul.categories{
 list-style:none;
 font-size:12px;
}
ul.categories li{padding-right:5px; display:inline;}
ul.categories a {
 color: #444;
}

.meta {font-size:0.8em; color:#222;text-align:right;}

/*student area*/
ul.sa-menu
{
 font-size: 15px;
 list-style:none;
 margin:0;
 padding:0;
 border-bottom:1px solid #ccc;
}

ul.sa-menu>li
{
padding:0 0.3em;
font-size:1.1em;
font-weight:bold;
margin-right:0.5em;
margin-bottom:0;
display:inline-block;
border:1px solid #ccc;
border-bottom:0px;
background-color:#ccc;
cursor:pointer;
}
ul.sa-menu>li.selected{background-color:white;}
div#tab_pages {
  z-index: 10;
  position: relative;
  padding: 0.5em;
}

.commentsblock {
 font-size:0.8em;
 background-color:#eee;
 }