/*
***********************************************************
* 
* 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;}

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

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-family:depot-new-condensed-web, Arial, Helvetica, sans-serif; font-size:18px; left:158px; position:absolute; top:36px; text-transform:uppercase; }

/* LANG MENU */
.lang { position:absolute; right:0; top:10px }
.lang li { float:left; margin-left:4px }
.lang a { border-radius:18px; color:#F81F0C; display:inline-block; font:400 19px/1.2 depot-new-condensed-web,Arial,Helvetica,sans-serif; padding:6px 9px; text-transform:uppercase }
.lang a:hover { background:#F81F0C; color:#fff }
.lang a.active, .lang a.active:hover { background:#eee; color:#000 }

.works { left:-88px; top:25px }
.works li { float:none; margin-bottom:5px; margin-left:none }
.works a { border-radius:22px; color:#fff; font-size:22px; padding:7px 10px }
.works a:hover { background:#555; color:#fff }
.works a.active, .works a.active:hover { background:#fff; color:#F81F0C }

/* 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; }

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

/* ----- CONTENT ----- */
#content { border-bottom:1px solid #ccc; float:left; }
.site { border-top:1px solid #ccc; float:left; padding:25px 5px; position:relative; width: 100%; }
h2 { color:#666; font-family:depot-new-condensed-web, Arial, Helvetica, sans-serif; font-size:37px; margin-bottom:-10px; 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-family: depot-new-condensed-web, Arial, Helvetica, sans-serif; font-size:18px; font-style:italic; font-weight:300 }

.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 { float:left; 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; border: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; font-family:depot-new-condensed-web, Arial, Helvetica, sans-serif; font-size:18px; 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; }
.couch i { left:-154px; top:164px }
.sandyfeet i { left:-198px; top:145px }
.surfajbolje i { left:-206px; top:170px }
.ifmc i { left:-152px; top:165px }
.sundance i { left:-188px; top:150px }
.crocoroo i { left:-178px; top:150px }
.vekaing i { left:-181px; top:150px }
.amp i { left:-215px; top:150px }
.sputnik i { left:-155px; top:150px; }
.prom i { left:-152px; top:150px;  }
.cimerman i { left:-177px; top:150px }
.interpreter i { left:-198px; top:140px  }
.drift i { left:-192px; top:150px; }
.tajgoprom i { left:-198px; top:150px; }
.sanatio i { left: -190px; top:150px; }
.scroll i { left:-171px; top:150px; }
.kladaric i { left:-210px; top:140px; }
.landrover i { left:-185px; top:150px;  }
.ersteos i { left:-165px; top:100px; }

.hr .couch i { left:-198px; top:144px }
.hr .sandyfeet i { left:-202px; top:154px }
.hr .surfajbolje i { left:-179px; top:173px }
.hr .ifmc i { left:-171px; top:174px }
.hr .sundance i { left:-140px; top:150px }
.hr .crocoroo i { left:-178px; top:162px }
.hr .vekaing i { left:-144px; top:150px }
.hr .amp i { left:-196px; top:150px }
.hr .sputnik i { left:-180px; top:150px; }
.hr .prom i { left:-133px; top:130px;  }
.hr .cimerman i { left:-153px; top:150px }
.hr .interpreter i { left:-168px; top:150px  }
.hr .drift i { left:-202px; top:130px; }
.hr .tajgoprom i { left:-168px; top:150px; }
.hr .sanatio i { left: -177px; top:150px; }
.hr .scroll i { left:-174px; top:150px; }
.hr .kladaric i { left:-147px; top:150px; }
.hr .landrover i { left:-202px; top:120px;  }
.hr .ersteos i { left:-181px; top:100px; }



@media screen and (max-width: 980px) {

#wrapper, .folio #wrapper { background-image:none; padding:0 3%; width:94% }	
#paintbrush, .site i { display:none }

}


@media screen and (max-width: 768px) {

#paintbrush, .site i, .lang, #footer .menu { display:none }

#header { height:auto; overflow:hidden; padding-bottom:18px }
#logo { margin:10px auto 0; position:static }
#logo a { display:block }
#tagline { position:static; text-align:center }

#menu { border-top:3px double #ccc; margin:18px auto; padding-top:18px; position:static; width:100% }
#menu li { float:left; margin-left:2%; width:32% }
#menu li:first-child { margin-left:0 }
#menu li:last-child { display:none }
#menu li a, #menu li a.on { background:#eee; display:block; line-height:1; padding:8px 0 10px; text-align:center }
#menu li a.on { border-bottom:none }
#menu b { display:none }

#heading { font-size:22px; line-height:1.3 }

.site { padding:15px 0 25px }
.description { clear:left; float:left; margin-top:10px; width:100% }
.jobs { float:none; left:335px; line-height:1.5; padding:2% 3%; position:absolute; top:75px; width:auto }
.jobs li { display:inline }
.jobs li:after { color:#c00; content:" + " }
.jobs li:last-child:after { color:#666; content:"." }
.jobs li.title { display:block }
.jobs li.title:after { color:#999; content:": " }


/* ABOUT US */
.member h2 { float:none; left:180px; line-height:1; padding-left:0; position:absolute; text-align:left; width:auto }
.member h2 span { display:block; font-size:20px }
.member img, .member p { clear:left; margin:0 0 14px }
.member p { width:99% }


/* CONTACT */
#content { width:100% }
.cform { padding:25px 1% 15px; width:98% }
#form { width:98% }
#contact-data { clear:left; float:left; margin:20px 1%; padding:20px 3%; width:92% }
textarea { padding:1%; width:94% }

}

@media screen and (max-width: 520px) {

h2 { font-size:25px; padding-left:0 }

#menu li a, #menu li a.on { font-size:15px; padding:10px 0 }

.site { padding:5% 1%; width:98% }
.folio .site a { -moz-box-shadow:none; -webkit-box-shadow:none; -o-box-shadow:none; box-shadow:none; margin:0; padding:0 }
.jobs { background:#fff; border:none; clear:left; float:left; padding:0 2%; position:static; width:88% }
.jobs li { margin:0 }
.jobs li.title { display:block }

.description { display:none }

#footer { padding:20px 1% 30px; width:98% }
#footer p { width:70% }
	
}