/*
***********************************************************
* 
* Title:		main.css
* Website:		www.designeus.hr
* Browser(s): 	All (except IE)
* 
* Author: 		Davor Tomic for Designeus (www.designeus.hr)
* Copyright:	Designeus, 2009.
* Created: 		1.7.2009.
* 
* This code is not in the public domain and must not be 
* copied or modified without authorisation by the author
* and copyright holders.
*
*
* COLORS		LIGHT GRAY	#cccccc
* 				GRAY		#666666
* 				DARK GRAY	#333333
*				RED			#cc0000
* 
***********************************************************
*/

/* -----------
    CSS RESET
   ----------- */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;}
ol,ul, li {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym {border:0;}
* {outline:none;}

/* -------------------------- */

form { display: inline; }

strong { font-weight: bold }
em { font-style: italic }

* a { position:relative } /* Gets links displaying over a PNG background */
a { outline:none } /* Gets rid of Firefox's dotted borders */
a img { border:none } /* Gets rid of IE's blue borders */


/* ----- FLOATS & CLEARS ----- */

.left { float:left; }
.right { float:right; }
.clear { clear:both; }
.centered { text-align:center }
.alignleft { text-align:left }
.alignright { text-align:right }

/* ------------------
    BASIC TYPOGRAPHY
   ------------------ */
body { color:#333; font-family:Georgia, "Times New Roman", Times, serif; }
a { text-decoration:none;  }
a:hover { -webkit-transition: color .4s ease-out !important; }
.uppercase {  }
@font-face { font-family: "GraublauWeb"; src: url("files/GraublauWeb.otf"); }

/* --------------
    BASIC LAYOUT
   -------------- */
body {  }
#wrapper { background-color:#fff; margin:0 auto; padding:0 15px; width:960px; }
#header {  }
#content-wrapper {  }
#sidebar { }
#footer { }
#footer #about { }

/* -----------------
    ADVANCED LAYOUT
   ----------------- */
   
/* ----- HEADER ----- */

#header { border-bottom:3px double #ccc; height:65px; position:relative }
#logo { height:47px; left:10px; position:absolute; top:19px; width:140px; }
#tagline { color:#666; font-size:12px; left:158px; position:absolute; top:43px; text-transform:uppercase; }

/* MENU */
#menu { left:490px; position:absolute; top:38px }
#menu li { display:inline; margin:0; }
#menu li a { color:#333; font-size:18px; }
#menu li a.on { border-bottom:3px solid #c00; color:#c00; padding-bottom:6px; }
#menu li a:hover { color:#c00; }
#menu b { color:#999; font-family:arial; font-size:14px; font-weight:normal; margin:0 12px 0 15px; }

a.lang { background:url(img/arrow-right.png) no-repeat right 4px; color:#666; display:block; font-size:12px; left:870px; padding-right:14px; position:absolute; top:43px; }
a.lang:hover { color:#c00; }

/* ----- HEADING ----- */
#heading { color:#ccc; font-size:36px; padding:25px 10px; }
.accent { color:#666 }

/* ----- CONTENT ----- */
#content { border-bottom:1px solid #ccc; float:left; }
.site { border-top:1px solid #ccc;  float:left; padding:25px 5px }
h2 { color:#666; display:inline; font-family:"GraublauWeb", Georgia, "Times New Roman", Times, serif; font-size:26px; padding-left:10px; text-transform:uppercase; }
.site a { color:#666; font-size:14px; text-decoration:underline; }
.site a.siteurl { background:url(img/link.png) no-repeat left 3px; padding-left:22px; }
.site a:hover { color:#c00; }
.frame { background:url(img/reference-frame.png) no-repeat 0 0; float:left; height:232px; padding:14px 15px; width:460px; }
.frame:hover { background-position:0 -272px; }
.description { color:#666; float:left; font-size:14px; line-height:19px; margin:5px 20px 0 0; width:300px; }
.description p { margin-bottom:19px; }
.jobs { background-color:#f6f6f6; border-bottom:1px solid #ddd; border-right:1px solid #ddd; float:left; font-size:14px;  margin-top:5px; padding:15px; width:109px; }
.jobs li { margin-bottom:10px; }
.jobs li.title { color:#888; font-style:italic; }

.member { border-top:1px solid #ccc; overflow:hidden; padding:25px 5px 15px; }
.member h2 { float:left; font-size:20px; text-align:right; text-transform:uppercase; width:140px; }
.member h2 span { color:#999; display:block; font-size:16px; text-transform:lowercase; }
.member p { color:#666; float:left; font-size:14px; line-height:19px; margin:0 0 14px 20px; width:540px; }
.member img { float:left; margin-left:20px; }

.cform { border-top:1px solid #ccc; overflow:hidden; padding:25px 5px 15px 15px; width:940px; }
#form { overflow:hidden; width:630px }
dt { float:left; padding-top:5px; width:120px; }
dd { background-color:#f2f2f2; float:left; margin-bottom:10px; padding:2px; width:480px; }
label { color:#666; font-size:16px; margin-right:10px; vertical-align:top; }
#send { margin:5px 0 30px 120px; }
.button { background-color:#eee; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d6d6d6), to(#ededed)); background-image:-moz-linear-gradient( center bottom , #d6d6d6 25%, #EDEDED 75%); cursor:pointer; width:120px }
.button:hover { background-color:#e5e5e5; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#b6b6b6), to(#ddd)); background-image:-moz-linear-gradient( center bottom , #b6b6b6 25%, #ddd 75%); border:1px solid #aaa; }
.button:active { margin-bottom:-1px; margin-top:1px; }
input, textarea { border:1px solid #ccc; color:#333; font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; padding:4px; width:470px; }
h3 { clear:both; color:#999; padding-bottom:15px; }
.additional { border-bottom:1px dashed #ccc; border-top:1px dashed #ccc; margin:10px 0 15px -20px; overflow:hidden; padding:10px 0 5px 20px; width:620px}
.msgstatus { color:#c00; font-size:20px; margin:-20px auto 20px; padding:10px 20px 6px 0; }
#contact-data { background-color:#f6f6f6; border-bottom:1px solid #ddd; border-right:1px solid #ddd; float:right; font-size:15px; line-height:27px; margin:0 20px; padding:20px 30px; width:200px; }
#contact-data h2 { color:#888; font-family:Georgia, "Times New Roman", Times, serif; font-size:14px; font-style:italic; padding-left:0; text-transform:none; }

/* ----- FOOTER ----- */
#footer { clear:both; color:#666; font-size:14px; margin-bottom:30px; padding:20px 10px 30px; }
#footer p { float:left }
.menu { float:left; margin-left:125px; }
.menu li { display:inline }
.menu li a { color:#333; }
.menu li a.on, .menu li a:hover { color:#c00; }
.menu b { color:#999; font-family:arial; font-size:10px; font-weight:normal; margin:0 12px 0 15px; }
a.top { background:url(img/arrow-up.gif) no-repeat right 4px; color:#666; float:right; padding-right:14px; }
a.top:hover { color:#c00; }


.b_reqd { background-color:#fdf9f9; border: 1px solid #fec2c2; }
.b_ok { background-color:#f8fcfe; border:1px solid #a6e6fe; }


/* ----- PORTFOLIO STYLING ----- */
#paintbrush { background:url(img/brush.png) no-repeat center bottom; bottom:0; height:213px; left:-50px; margin:0; overflow:hidden; padding:0; position:fixed; width:100%; z-index:100 }

.folio #wrapper { background:url('img/wrapper-bg.png') repeat-y 70px top; padding:0 0 0 170px; width:790px; }
.folio #menu { left:436px; }
.hr #menu { left:426px; }
.folio a.lang { left:700px; top:7px; }
.hr a.lang { left:706px; }
.folio #content { position:relative }
.folio .site a { border:1px solid #d8d8d8; -moz-box-shadow:0 0 14px #ccc; -webkit-box-shadow:0 0 14px #ccc; box-shadow:0 0 14px #ccc; float:left; margin:10px 20px 15px 0; padding:4px; }
.folio .site a:hover { -moz-box-shadow:0 0 14px #bbb; -webkit-box-shadow:0 0 14px #bbb; box-shadow:0 0 14px #bbb; -webkit-transition: -webkit-box-shadow .6s ease-out; }
.folio .site p a, .folio .site p a:hover { -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; float:none; margin:0; padding:0; }
.folio .site a.siteurl { border:none; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; margin:0; padding:0 0 0 22px; }
.folio .menu { margin-left:75px }
.folio .menu a, .folio a.top { z-index:200 }
.folio .menu a.on { border-bottom:3px solid #c00; padding-bottom:3px; }

i { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate (90deg); color:#fff; font-size:32px; font-style:normal; position:absolute; text-transform:uppercase; }
.vekaing i { left:-181px; top:132px }
.amp i { left:-215px; top:471px }
.sputnik i { left:-155px; top:810px; }
.prom i { left:-152px; top:1124px;  }
.cimerman i { left:-177px; top:1452px }
.interpreter i { left:-198px; top:1760px  }
.drift i { left:-192px; top:2065px; }
.tajgoprom i { left:-198px; top:2376px; }
.sanatio i { left: -190px; top:2690px; }
.scroll i { left:-171px; top:3005px; }
.milas i { left:-202px; top:3308px; }
.kladaric i { left:-210px; top:3615px; }
.landrover i { left:-185px; top:3937px;  }
.ersteos i { left:-165px; top:4251px; }
.erstesec i { left:-203px; top:4537px; }

.hr .vekaing i { left:-144px; top:153px }
.hr .amp i { left:-196px; top:505px }
.hr .sputnik i { left:-180px; top:847px; }
.hr .prom i { left:-133px; top:1165px;  }
.hr .cimerman i { left:-153px; top:1522px }
.hr .interpreter i { left:-168px; top:1830px  }
.hr .drift i { left:-202px; top:2155px; }
.hr .tajgoprom i { left:-168px; top:2482px; }
.hr .sanatio i { left: -177px; top:2816px; }
.hr .scroll i { left:-174px; top:3118px; }
.hr .milas i { left:-201px; top:3421px; }
.hr .kladaric i { left:-147px; top:3732px; }
.hr .landrover i { left:-202px; top:4050px;  }
.hr .ersteos i { left:-181px; top:4351px; }
.hr .erstesec i { left:-181px; top:4665px; }