/*

	Webdesigner: Łukasz Kmita
     _                                             
    | |A G E N C J A  I N T E R A K T Y W N A /\    
  __| |_ __ _   _ _*__    _ _ __   __ _      /  \   
 / _` | '__| | | |_  / | | | '_ \ / _` |    / /\ \  
| (_| | |  | |_| |/ /| |_| | | | | (_| |   / ____ \ 
 \__,_|_|   \__,_/___|\__, |_| |_|\__,_|  /_/    \_\
                       __/ |                       
                      |___/     WWW.DRUZYNAA.PL
*/

@font-face {
	font-family: 'Myriadcond';
	src: url('font/myriadpro-cond-webfont.eot');
	src: local('Myriad Pro Condensed'), url('font/MyriadPro-Cond.otf') format('opentype');
	}

@font-face {
	font-family: 'Myriadregular';
	src: url('font/myriadpro-regular-webfont.eot');
	src: local('Myriad Pro Regular'), url('font/MyriadPro-Regular.otf') format('opentype');
	}

@font-face {
	font-family: 'Myriadcondit';
	src: url('font/myriadpro-condit-webfont.eot');
	src: local('Myriad Pro Condensed Italic'), url('font/MyriadPro-CondIt.otf') format('opentype');
	}

html {height: 100%;}

body {
	margin: 0;
	padding: 0;
	height: 100%;
/*	font-size: 14px;
	font-family: Helvetica;
	color: #fff;
	text-shadow: 0 1px 0 #000; */
	background: #eeeeee;
}

a {
	color: #393939;
	text-decoration: underline;
	}

a:active {
	outline: none;
	}

a:focus {
	outline: none;
}

/* ---- HEADER ---- */

div.header {
/*	background: url(../img/header-bg.png) top center no-repeat;*/
	width: 100%;
	height: 150px;
	margin: 0;
	padding: 0;
	}
	
div.header div.animation {
	width: 960px; 
	height: 133px; 
	margin: 0 auto; 
	position: relative;
	top: 0;
	}	
	
div#fwslider div.slider-overlay {
	background: url(../img/slider-overlay.png) top center no-repeat;
	width: 100%;
	height: 150px;
	z-index: 9980;
	}
	
/* ---- MENU ---- */

div.menu-bg {
	background: url(../img/menu-bg.png) 0 0 repeat-x;
	width: 100%;
	height: 111px;
	}	
	
div.menu-bg div.container {
	width: 960px;
	height: 100px;
	margin: 0 auto;
	position: relative;
	top: 0;
	left: 0;
	}	

div.menu-bg div.container a.logo {
	width: 182px;
	height: 62px;
	background: url(../img/logo-tetasystem.png) 0 0 no-repeat;
	display: block;
	position: relative;
	top: 16px;
	}	
	
div.menu-bg div.container div.przycisk-alarmu {
	background: url(../img/przycisk-alarmu.png) 0 0 no-repeat;
	width: 174px;
	height: 89px;
	position: absolute;
	top: 10px;
	right: 249px;
}	
	
div.menu-corner-left {
	background: url(../img/menu-corner-left.png) 0 0 no-repeat;
	width: 243px;
	height: 37px;
	padding: 0 0 0 5px;
	position: absolute;
	top: 30px;
	right: 120px;
	}
	
div.menu-corner-right {
	background: url(../img/menu-corner-right.png) 100% 0 no-repeat;
	width: 243px;
	height: 37px;
	padding: 0 5px 0 0;
	}	
	
ul.menu {
	
	list-style: none;
	background: url(../img/ul-bg.png) 0 0 repeat-x;
	width: 243px;
	height: 37px;
	margin: 0;
	padding: 0;
	
	}
	
ul.menu li {
	position: relative;
	top: 2px;
	float: left;
	line-height: 35px;
	height: 35px;
	background: url(../img/menu-separator.png) 100% 0 no-repeat;
	padding: 0 8px 0 9px;
	}
	
ul.menu li#last {
	position: relative;
	top: 2px;
	float: left;
	line-height: 35px;
	height: 35px;
	background: none;
	padding: 0 10px 0 11px;
	}		
	
ul.menu li a {
	color: #eeeeee;
	text-decoration: none;
	font-family: Tahoma, Helvetica, Myriadcond, sans-serif;
	font-size: 14px;
	font-style: italic;
	text-shadow: 0 1px 0 #000;
	padding: 0 5px 0 0;
	display: block;
	height: 35px;
	line-height: 32px;
	}	
	
ul.menu li:hover {
	background: url(../img/li-hover.png) 100% 0 repeat-x;
	}	
	
ul.menu li#last:hover {
	background: url(../img/li-hover.png) 100% 0 repeat-x;
	}	
	
ul.menu li a.active {
	background: url(../img/dziubek.png) bottom center no-repeat;
	height: 53px;
	}	

ul.menu li#last a {
	color: #eeeeee;
	text-decoration: none;
	font-family: Tahoma, Helvetica, Myriadcond, sans-serif;
	font-size: 14px;
	font-style: italic;
	text-shadow: 0 1px 0 #000;
	padding: 0 5px 0 0;
	display: block;
	height: 35px;
	line-height: 32px;
	}
	
ul.menu li#last a.active {
	background: url(../img/dziubek.png) bottom center no-repeat;
	height: 53px;
	}	
	
div.spryskiwacz1 {
	background: url(../img/spryskiwacz.png) 0 0 no-repeat;
	width: 32px;
	height: 26px;
	position: absolute;
	bottom: -28px;
	left: 230px;
	}	
	
div.spryskiwacz2 {
	background: url(../img/spryskiwacz.png) 0 0 no-repeat;
	width: 32px;
	height: 26px;
	position: absolute;
	bottom: -28px;
	right: -30px;
	}	
	
/* ---- CONTENT ---- */

div.main {
	width: 1001px;
	margin: 0 auto;
	}	
	
div.clr {clear: both;}	
	
div.main div.left-column {
	width: 245px;
	min-height: 300px;
	float: left;
	margin: 0 0 0 8px;
/*	border: 1px solid red;*/
	}	
	
div.main div.right-column {
	width: 748px;
	min-height: 300px;
	float: right;
/*	border: 1px solid green;*/
	}	
	
	
/* Left menu */

div.menu-left-top {
	background: url(../img/left-box-top-bg.png) 0 0 no-repeat;
	width: 245px;
	height: 79px;
	}	
	
div.menu-left-top h2 {
	padding: 42px 0 0 75px;
	margin: 0;
	color: #eeeeee;
	font-family:  Tahoma, Helvetica, Myriadcond, sans-serif;
	font-size: 16px;
	font-style: italic;
	font-weight: normal;
	text-shadow: 0 -1px 0 #000;
	}	
	
div.menu-left-body {
	background: url(../img/left-box-body-bg.png) 0 0 repeat-y;
	width: 236px;
	margin: 0 0 0 5px;
	}	
	
div.menu-left-body ul {
	margin: 0;
	padding: 0;
	list-style: none;
	}
	
div.menu-left-body ul li {
	height: 40px;
	line-height: 40px;
	background: url(../img/separator-left-menu.png) 0 100% no-repeat;
	margin: 0 0 0 10px;
	}	
	
div.menu-left-body ul li:hover {
	background: url(../img/separator-left-menu-hover.png) 0 100% no-repeat;
	}		
	
div.menu-left-body ul li a {
	color: #eeeeee;
	font-family:  Tahoma, Helvetica, Myriadcond, sans-serif;
	font-size: 14px;
	font-style: italic;
	font-weight: normal;
	text-shadow: 0 -1px 0 #000;
	text-decoration: none;
	display: block;
	width: 216px;
	height: 40px;
	padding-left: 15px;
	}	
	
div.menu-left-bottom {
	background: url(../img/left-box-bottom-bg.png) 0 0 no-repeat;
	width: 236px;
	height: 35px;
	margin: 0 0 0 5px;
	}	
	
/* Szybki kontakt */

div.menu-left-kontakt-top {
	background: url(../img/left-box-top-kontakt-bg.png) 0 0 no-repeat;
	width: 240px;
	height: 66px;
	margin: 0 0 0 5px;
	}	
	
div.menu-left-kontakt-top h2 {
	padding: 30px 0 0 75px;
	margin: 0;
	color: #eeeeee;
	font-family: Tahoma, Helvetica, Myriadcond, sans-serif;
	font-size: 16px;
	font-style: italic;
	font-weight: normal;
	text-shadow: 0 -1px 0 #000;
	}	
	
div.menu-left-kontakt-body {
	background: url(../img/left-box-body-bg.png) 0 0 repeat-y;
	width: 236px;
	margin: 0 0 0 5px;
	}		
	
div.menu-left-kontakt-body div.telephone {
	background: url(../img/icon-telephone.png) 0 5px no-repeat;
	width: 216px;
	height: 50px;
	margin: 0 0 0 15px;
	color: #eeeeee;
	font-family: Tahoma, Helvetica, Myriadcond, sans-serif;
	font-size: 15px;
	font-style: italic;
	font-weight: normal;
	text-shadow: 0 -1px 0 #000;
	padding: 0px 0 0 0;
	}
	
div.menu-left-kontakt-body div.telephone div.text {
	padding: 6px 0 0 52px;
	}	
	
div.menu-left-kontakt-body hr {
	width: 216px;
	height: 2px;
	background: url(../img/separator-left-menu.png) 0 0 no-repeat;
	border: none;
	margin: 3px 0 0 10px;
	padding: 0;
	}			
	
div.menu-left-kontakt-bottom {
	background: url(../img/left-box-bottom-kontakt-bg.png) 0 0 no-repeat;
	width: 236px;
	height: 40px;
	margin: 0 0 0 5px;
	}		
	
	
div.menu-left-kontakt-body div.email {
	background: url(../img/icon-email.png) 0 5px no-repeat;
	width: 216px;
	height: 50px;
	margin: 0 0 0 15px;
	color: #eeeeee;
	font-family: Tahoma, Helvetica, Myriadcond, sans-serif;
	font-size: 15px;
	font-style: italic;
	font-weight: normal;
	text-shadow: 0 -1px 0 #000;
	padding: 0 0 0 0;
	}
	
div.menu-left-kontakt-body div.email div.text {
	padding: 15px 0 0 52px;
	}	
	
div.menu-left-kontakt-body div.email div.text a {
	color: #eeeeee;
	font-family: Tahoma, Helvetica, Myriadcond, sans-serif;
	font-size: 15px;
	font-style: italic;
	font-weight: normal;
	text-shadow: 0 -1px 0 #000;
	text-decoration: none;
	}	
	
div.menu-left-kontakt-body div.email div.text a:hover {
	text-decoration: underline;
	}	
	
	
div.menu-left-kontakt-body div.adres {
	background: url(../img/icon-adres.png) 0 5px no-repeat;
	width: 216px;
	height: 70px;
	margin: 0 0 0 15px;
	letter-spacing: -0.5px;
	color: #eeeeee;
	font-family: Tahoma, Helvetica, Myriadcond, sans-serif;
	font-size: 15px;
	font-style: italic;
	font-weight: normal;
	text-shadow: 0 -1px 0 #000;
	padding: 0 0 5px 0;
	}
	
div.menu-left-kontakt-body div.adres div.text {
	padding: 8px 0 0 52px;
	}	
	
/* ---- CONTENT TRESCI ---- */

div.right-column div.content-bottom {
	background: url(../img/content-bottom-bg.png) bottom left no-repeat;
	width: 100%;
	}	
	
div.right-column div.content-top {
	background: url(../img/content-top-bg.png) top right no-repeat;
	width: 100%;
	min-height: 300px;
	}	
	
div.right-column div.content-top div.text {
	color: #686868;
	font-family: Tahoma, Helvetica, Myriadcond, sans-serif;
	font-size: 13px;
	text-align: justify;
	padding: 30px 30px 30px 32px;
	position: relative;
	}	
	
div.right-column div.content-top div.text img.content-image {
	float: right;
	padding: 0 0 0 13px;
	margin: -40px 0 0 0;
	}	
	


div.right-column div.content-top div.text h1 {
	background: url(../img/h1-bg.png) 0 24px no-repeat;
	float: left;
	width: 100%;
	margin: 0;
	padding: 0 0 22px 0;
	color: #e53a17;
	font-family: Tahoma, Helvetica, Myriadcond, sans-serif;
	font-size: 16px;
	font-style: italic;
	font-weight: normal;
	}	
	
/* ---- CREDITS ---- */

div.druzynaa {
	position: relative;
	margin: 0 auto;
	width: 960px;
	height: 24px;
	text-align: right;
	}
	
div.druzynaa div.druzynaa-container {
	position: absolute;
	right: 0;
	color: #7f7f7f;
	font-family: Tahoma, Helvetica;
	font-size: 10px;
	}	
	
/* ---- KONTAKT ---- */      

form {
	font-size: 12px;
	}

input.input {
	background: url(../img/input-bg.png) repeat-x #fff;
	border: 1px solid #999999;
	height: 20px;
	}
	
textarea.textarea {
	background: url(../img/input-bg.png) repeat-x #fff;
	border: 1px solid #999999;
	font-family: Verdana;
	font-size: 12px;
	}	
      
div.adres-kontakt {
	float: right;
	padding-right: 10px;
	}  
      
div.adres-kontakt span {
	font-size: 18px;
	font-style: italic;
	} 	
	
	
a.pdf {
	display: block;
	width: 250px;
	height: 48px;
	line-height: 48px;
	padding: 0 0 0 53px;
	background: url(../img/icon-pdf.png) 0 0 no-repeat;
	}	
	
	
/* ---- Galeria ---- */

a.gallery {
	width: 160px;
	height: 220px;
	float: left;
	text-align: center;
	text-decoration: none;
	padding: 0 0 0 0;
	margin: 0 30px 15px 30px;
	line-height: 1.5em;
	position: relative;
	display: block;
	
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
}

a.gallery.foto {
	margin: 0 30px 35px 30px;
}

a.gallery span.image {
	width: 160px;
	height: 160px;
	display: block;
	overflow: hidden;
	text-align: center;
	border-radius: 4px;
	margin: 0 0 10px 0;
	padding: 0 0 0 0;
	
	box-shadow: 0 1px 8px #959595;
	-webkit-box-shadow: 0 1px 8px #959595;
	-moz-box-shadow: 0 1px 8px #959595;
	-ms-box-shadow: 0 1px 8px #959595;
	-o-box-shadow: 0 1px 8px #959595;
}

a.gallery span.image img {
	height: 160px;
	padding: 0 0 0 0;
	margin: 0 0 0 0 ;
	z-index: 1;
	position: relative;
	left: -20%;
}

a.gallery span.image:after {
	background: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 160px;
	display: block;
	content: "";
	border-radius: 4px;
	z-index: 10;
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
}

a.gallery span.image:hover:after {
	background: rgba(0,0,0,0.2);
}

a.gallery.foto {
	height: 165px;
}

#lang-box {
    width: 100px;
    height: 30px;
    float: right;
    position: absolute;
    right: 0px;
    top: 40px;
}

#lang-pl {
    width: 25px;
    height: 15px;
    display: block;
    background: url('../img/flaga-pl.png') no-repeat top center;
    float: left;
    margin: 0px 0px 0px 5px;
    border: 1px solid #ddd;
}

#lang-de {
    width: 25px;
    height: 15px;
    display: block;
    background: url('../img/flaga-de.png') no-repeat top center;
    float: left;
    margin: 0px 0px 0px 5px;
    border: 1px solid #ddd;
}

#lang-en {
    width: 30px;
    height: 15px;
    display: block;
    background: url('../img/flaga-en.png') no-repeat top center;
    float: left;
    margin: 0px 0px 0px 5px;
    border: 1px solid #ddd;
}