ABOUT CSS

/* About CSS */
body, html {
  height: 100%;
  font-family: Verdana;
  background: #fff;
  margin: 0;
  overflow-x: hidden;
  color:#aaaaaa;
}

* {
  box-sizing: border-box;
}

h2 {
	color: #444;
  text-transform: uppercase;
  text-align: center;
}

.plava-linija {
  margin: 0px;
  border-top: 2px solid #02b8dd;
}

/* Header */
#header {
  overflow: hidden;
  padding: 20px 10px 0px 10px;
}

#header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

#header a.logo {
  font-size: 25px;
  font-weight: bold;
  font-family: 'Crete Round', serif;
}

#header a.logo:hover {
  background-color: #fff;
}

#header a:hover {
  background-color: #ddd;
  color: black;
}

.header-right {
  float: right;
}

.color {
  color: #02b8dd;
}

/* Vertikalni meni */
/*
.menu {
  float:left;
  width:20%;
  text-align:center;
}

.menu a {
  background-color:#e5e5e5;
  padding:8px;
  margin-top:7px;
  display:block;
  width:100%;
  color:black;
}*/

/* Responsive design - Meni */
@media screen and (max-width: 500px) {
  #header a {
    float: none;
    display: block;
    text-align: left;
  }

  .header-right {
    float: none;
  }
}

/* Leva sekcija */
.leftcolumn {
  float: left;
  width: 25%;
  padding-left: 20px;
}

/* Desna sekcija */
.rightcolumn {
  float: left;
  width: 75%;
  padding-left: 20px;
  padding-right: 20px;
}

/* Fakultet linkovi */
.fax-link {
  background-color: #02b8dd;
  width: 100%;
  padding: 15px;
  border-radius: 5px;
}

.fax-link:hover {
	background-color: #444;
  color: #fff;
}

/* Kartice */
.card {
   background-color: #f8fafa; /* #f1f1f1 */
   padding: 20px;
   margin-top: 20px;
}

.card a {
  text-decoration: none;
  color: #fff;
}

/* Clearfix hack - Ukoliko sadržaj koji se nalazi u main divu ima definisanu veću visinu nego main div (pod uslovnom da je float postavljen na div sa sadržajem) onda div sa sadržajem iskače "overflow" tj. prelazi preko main diva. Kako bi se ovaj problem rešio postoji "Clearfix hack" način */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Isti problem može da se reši i na sledeći način */
/*
.row {
  overflow: auto;
}*/

/* Footer */
#footer {
  background-color:#e5e5e5;
  text-align:center;
  padding:10px;
  margin-top:40px;
}

/* Autor */
.credits a {
  color: #666;
  font-size: 12px;
  text-decoration: none;
}

.credits p {
  font-size: 12px;
}

/* Responsive design - Kada je širina ekrana manja od 800px dve kolone tj. leva i desna sekcija redaju se jedna ispod druge, umesto jedna pored druge. Leva sekcija se pozicionira na vrh dok se desna sekcija pozicionira ispod leve. To smo postigli jer smo stavili da širina svake sekcije bude 100%*/
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
}