/* 

	project: internet services - 2nd edition
	author: luka cvrk (www.solucija.com) */

   
/* default styles
   -------------- */
*{ margin: 0; padding: 0; }* 
body{font-size:13px;font-family:Verdana,Arial,Sans-Serif;line-height:1.6em;background:#373534;color:#444;text-align:justify}
a {	color: #E0691A;	background: inherit;}
a:hover { color: #6C757A; background: inherit; }
h1 { font: normal 2.4em "Verdana", Arial, Sans-Serif; padding: 7px 0 0 8px; margin: 0; }
h1 a { color: #737373; background: inherit; }
.orange { color: #E0692A; }
sup { font-size: .5em; }
h1 a, h2 a { text-decoration: none; }
h1 a:hover, h2 a:hover { color: #FF6600; background: inherit; }
h2 { font-size: 1.5em; margin-bottom: 5px; color: #000; background: inherit; }
p {	margin: 0 0 5px 0; }
ul { list-style : none; }
.mb-30 {margin-bottom: 30px}
.mb-50 {margin-bottom: 50px}

/* layout
   ------ */
.content{margin:0 auto;width:980px;background-color:#fff}
.header{height:70px;background:#fff url(images/headerbg.gif) repeat-x bottom;color:grey;margin:0;padding:0}
.logo {width: 980px; height: 200px;}
.top_info{float:right;width:555px;padding:5px 0 4px 0;color:grey}
.top_info_left{width:200px;float:left}
.top_info_right{float:right;width:290px;padding:0 0 0 35px;border-left:1px solid #eee}
.browse_category{width:390px;color:#fff;background:inherit}
.bar{margin-top:120px;clear:both;height:152px;color:#fff;background:#fff url(images/menu_bg.png) no-repeat right;font-family:Calibri,Arial,Sans-Serif;font-size:18px;padding:5px 0 0 170px}
.bar li{color:#ffeadc;padding-left:30px;margin-top:10px;display:inline;line-height:38px}
.bar li.active{color:#fff;font-weight:700}
.bar li a{font-weight:700;color:#fff;background:inherit;text-decoration:none}
	
/* search form */
.search_field{background:#fff url(images/searchbg.gif) no-repeat right;color:grey;clear:both;font-weight:700;padding:7px 12px 10px 10px;margin:5px 0}
input.search{width:292px;border:0;background:#fff url(images/input.gif) no-repeat;padding:4px;color:#e0691a;font-weight:700;margin:0 0 0 3px}
input.submit{background:#e0691a url(images/submit.gif) no-repeat;border:0;padding:4px 0;width:65px;margin:0 10px 1px 0;color:#fff;font:bold 1em Arial,Sans-Serif}
.grey { color: #808080; background: inherit; font-weight: normal; }
.search_form { float: right; }

/* left side
   --------- */
.left{float:right;width:730px;margin:-100px 0 10px 0;background-color:#fff;padding-top:10px;padding-right:10px}
.left h2{clear:both;background:#e8e8e8 url(images/h2bg.gif) no-repeat center right;color:#444;padding:1px 0 1px 10px;font:bold 1.6em Calibri,Arial,Sans-Serif;margin:0 0 10px 0}
.left_side{float:left;width:160px;padding:0 0 0 10px;margin:10px 0 0 38px}
.left_side a, .right_side a { color: #414141; background: #FFF; }
.right_side{float:right;width:280px;background:#fff url(images/dotted.gif) repeat-y;color:#414141;padding:0 0 0 70px;margin:10px 0}
.left_box{margin:0 0 0 10px;color:#000;background:#fff;padding:3px 0}
		
/* right side
   ---------- */
.right{float:left;width:210px;margin:0 0 10px 0;background-color:#fff;padding-top:0;padding-left:10px}
.right h3{background:#bdbdbd url(images/h3bg.gif) no-repeat center left;color:#fff;padding:7px 0 5px 43px;font:bold 1em Tahoma,Arial,Sans-Serif;margin:0 0 3px 0}
.right_articles{color:#414141;padding:8px;margin:0 0 3px 0}
.notice{background:#eee;color:grey;padding:12px 8px;margin:0 0 3px 0}
.image{float:left;margin:0 9px 3px 0}
.left1{float:right;width:260px;margin:-370px 0 0 0}
.left1 h3{clear:both;background:#bdbdbd url(images/h2bg.gif) no-repeat center right;color:#444;padding:2px 0 2px 43px;font:bold 1.4em Verdana,Arial,Sans-Serif;margin:0 0 10px 0}
.left1_articles{color:#414141;padding:8px;margin:0 0 3px 0}

/* footer
   ------ */
.footer{clear:both;text-align:center;padding:10px 0;border-top:1px solid #ccc;line-height:2em}
.footer a { color: #808080; background: #fff; }

/*horizontalmenu*/
@charset 'UTF-8';
/* Some stylesheet reset */
#cssmenu>ul{list-style:none;margin:0;padding:0;vertical-align:baseline;line-height:1}

/* The container */
#cssmenu>ul{display:block;position:relative;width:200px}

/* The list elements which contain the links */
#cssmenu>ul li{display:block;position:relative;margin:0;padding:0;width:100%;background-color:#b8c3b8}

/* General link styling */
#cssmenu>ul li a{display:block;position:relative;margin:0;border-top:1px solid #fff;border-bottom:1px solid #d9d9d9;padding:11px 20px;padding-left:10px;color:#030;text-decoration:none;font-family:Verdana,Arial,Sans-Serif;font-size:14px}
/* Rounded corners for the first link of the menu/submenus */
#cssmenu>ul li:first-child>a{border-top-left-radius:4px;border-top-right-radius:4px;border-top:0;font-family:Verdana,Arial,Sans-Serif;font-size:14px}
/* Rounded corners for the last link of the menu/submenus */
#cssmenu>ul li:last-child>a{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom:0;font-family:Verdana,Arial,Sans-Serif;font-size:14px}
/* The hover state of the menu/submenu links */
#cssmenu>ul li a:hover,#cssmenu>ul li:hover>a{color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.25);background:#030;background:-webkit-linear-gradient(#159789,#159789);background:-moz-linear-gradient(#159789,#159789);background:linear-gradient(#159789,#159789);border-color:transparent;font-family:Verdana,Arial,Sans-Serif;font-size:14px}
/* The arrow indicating a submenu */
#cssmenu>ul .has-sub>a::after{content:'';position:absolute;top:16px;right:10px;width:100%;height:0;border:4px solid transparent;border-left:4px solid #030}
/* The same arrow, but with a darker color, to create the shadow effect */
#cssmenu>ul .has-sub>a::before{content:'';position:absolute;top:17px;right:10px;width:100%;height:0;border:4px solid transparent;border-left:4px solid #fff;font-family:Verdana,Arial,Sans-Serif;font-size:14px}
/* Changing the color of the arrow on hover */
#cssmenu>ul li:hover>a::after,#cssmenu>ul li>a:hover::after{border-left:4px solid #fff}
#cssmenu>ul li:hover>a::before,#cssmenu>ul li>a:hover::before{border-left:4px solid rgba(0,0,0,.25)}
/* THE SUBMENUS */
#cssmenu>ul ul{position:absolute;left:100%;top:-9999px;padding-left:5px;opacity:0;width:100%;-webkit-transition:opacity .3s ease-in;-moz-transition:opacity .3s ease-in;transition:opacity .3s ease-in}
#cssmenu>ul ul li a{font-family:Verdana,Arial,Sans-Serif;font-size:14px}
/* Showing the submenu when the user is hovering the parent link */
#cssmenu>ul li:hover>ul{top:0;opacity:1;z-index:1}
#cssmenu>ul li.active>a{color:#ccc;background:#030;background:-webkit-linear-gradient(#030,#030);background:-moz-linear-gradient(#030,#030);background:linear-gradient(#030,#030);border-color:transparent;border-top-left-radius:4px;border-top-right-radius:4px;border-top:0}

/*** CUSTOM CSS - IMAGE GALLERY **/
.container-all{width:fit-content;margin:20px auto;height:auto}
.container-gallery{overflow:hidden;height:fit-content;margin:3px;padding:0;display:block;position:relative;float:left}
.container-gallery img{width:100%;transition-duration:.3s;max-width:100%;display:block;overflow:hidden;cursor:pointer}
.container-gallery:hover img{transform:scale(1.2);transition-duration:.3s;filter:grayscale(50%);opacity:.7}
@media only screen and (max-width: 900px) {.container-gallery {width: calc(100% - 6px);}}
@media only screen and (max-width: 400px) {.container-gallery {width: 100%;}}

.gallery-width-25 {width:calc(25% - 6px);}
.gallery-width-50 {width:calc(50% - 6px);}

/*** Vustom All Caps ***/
.news h3 {text-transform: uppercase;}