/*************************************************************************************************************************************
   This script is copyrighted and is sole property of Jaroslaw Pietras (Yar Mobile).
   This script should not be viewed by you, unless you cooperate with the above person or company.
   Any copying of the code, or ideas contained within this script is prohibited and WILL BE noticed, and pursued in any legal way.
   This script uses a free framework written by Piotr Koleśnik.
   
   Skrypt ten jest objęty prawami autorskimi i jest wyłączną własnością Jarosława Pietrasa (Yar Mobile).
   Skrypt ten nie powinien znaleźć się w twoich rękach, jeśli nie współpracujesz z wyżej wymienioną osobą bądź firmą.
   Jakiekolwiek kopiowanie kodu i pomysłu z tego skryptu jest zabronione i BĘDZIE zauważone i ścigane wszelkimi dostępnymi sposobami.
   Skrypt wykorzystuje darmowy framework Piotra Koleśnika.

   KOLORY: 
   4B3838 - szaroczerwony tło (old: 604848, 503030, 705050)
   800500 - czerwony: menu, linie wewnętrzne
   600300 - czerwony ciemniejszy: menu zaznaczony tekst, linki
   702520 - obramowanie zewnętrzne oraz teksty w nagłówku obok robota
   FFF9F3 - najjaśniejszy kolor tła po lewej i koniec gradientu na górze (old FFF9F5 (jasnoróżowy))
   ac0700 - czerwony logo i teksty w nagłówku!
**************************************************************************************************************************************/

/* Cały ekran, m.in. tło widoczne po bokach */
body {
	margin:0 auto;
	padding:0;
	font:0.8em/1.3 "lucida sans unicode", lucida, "bitstream vera sans", verdana;
    background: #4B3838;
}

a {
	text-decoration:none;
	color:#600300;
}
a:hover{
	text-decoration: underline;
}
a img {
	border:0px;
}

.error{
	color: red;
	font-weight: bold;
	text-align: center;
}


/* Cała zawartość strony (obszar środkowy ekranu) */
#page {
	width:940px;
	margin:0 auto;
	background: white;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	overflow: hidden;
	border: 2px solid #702520;	 
}

/* Nagłówek */
#header {
	position: relative;
	float: left;
	width: 100%;
	height: 150px;
	background: white;
	border-bottom: 2px solid #800500;	/* kolor menu - z niego wychodzi linia */
}
/* Nagłówek - obszar obrazka logo i podpisów */
#header #logoarea {
	position: relative;
	float: left;
	width: 200px;
	height: 100%;
   	margin-top: 5px;
}
#header #logoarea #logoimage {
    width:100%;
    height: 69px;
}
/* Nagłówek - obszar samych podpisów */
#header #logoarea #textarea {
    color: #AC0700;    
	position: relative;
	float: left;
	width: 100%;
    text-align: center;
    font-weight: bold;
	margin: 0;
}
#header #logoarea #textarea h1{
	font-size: 14px;
    margin: 0 0 3px;
}
#header #logoarea #textarea h2{
	font-size: 12px;
    margin: 0 0 3px;
}
#header #logoarea #textarea h3{
	font-size: 18px;
    margin: 0 0 3px;
}
#header #toparea {
	position: relative;
	float: left;
	height: 100%;
	width: 740px;
    background: url(../images/top_grad.png) repeat-y;
}
#header #toparea #topimage {
	position: relative;
    float: left;
    margin-left:50px;
    margin-top: 25px;
	height: 125px;
	width: 201px;
    display: block;
}

#header #toparea #topimage #eyearea{
    width: 30px;
    height: 26px;
    position: absolute;
    top: 40px;
    left:50px;
}

#header #toparea #topimage #eyearea #eye{
    display: none;
}

#header #toparea h1{
    margin: 0;
}

#header #toparea #toptexts {
	position: relative;
	float: left;
	height: 115px;
	width: 390px;
    margin-top: 35px;
    color: #702520;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

#header #toparea #toptexts #txt_applications{
    position: relative;
    float: left;
    margin: 0px;
    font-size: 20px;
}

#header #toparea #toptexts #txt_Android{
    position: relative;
    float: left;
    margin-left: 8px;
    font-size: 20px;
    color: #AC0700;   
}

#header #toparea #toptexts #txt_t_m{
    position: relative;
    float: left;
    margin: 0 0 0 2px;
    font-size: 7px;
}

#header #toparea #toptexts #txt_Element_1{
    position: relative;
    float: left;
    margin: 8px 0 0 18px;
    font-size: 12px;
    clear: both;
    display: list-item;
}

#header #toparea #toptexts #txt_Element_2{
    position: relative;
    float: left;
    margin: 5px 0 0 30px;
    font-size: 12px;
    clear: both;
    display: list-item;
}

#header #toparea #toptexts #txt_Element_3{
    position: relative;
    float: left;
    margin: 5px 0 0 35px;
    font-size: 12px;
    clear: both;
    display: list-item;
}

#header #toparea #toptexts #txt_and_not_only{
    position: relative;
    float: left;
    margin: 5px 0 0 35px;
    font-size: 10px;
    clear: both;
}


/* Nagłówek - linki do zmiany języka */
#header #toparea #languages {
	font-size: 13px;
	text-align: right;
	font-weight: bold;
	position: absolute;		
	top: 10px;
	right: 12px;
	float: right;
}


/* Główny obszar strony - środek między nagłówkiem a stopką */
#main {
	position: relative;
	float: left;
	margin: 0px;
	width: 100%;
	
	overflow: hidden;     /* hack dla równych kolumn */
}

/* Główny obszar strony - cały pas po lewej zawierający menu */
#main #menuarea{
	position: relative;
	float: left;
	margin-left:0px;
	width: 200px;
    background:#FFF9F3;
	border-right: 2px solid #800500;
	
	padding-bottom: 5000px;   /* hack dla równych kolumn */
	margin-bottom: -5000px;
}

/* Okienko klientów oraz referencji - pod menu. Może ich być kilka. */
#main #menuarea .clientsWindow {
	position: relative;
	float: left;
	margin-left: 5px;
	margin-right: 5px;
    width: 178px;
	margin-top: 25px;
    background: white;
    padding: 5px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    border: 1px solid #800500;
    font-size: 10px;
}
/* Nagłóweczek jak "nasi klienci" */
#main #menuarea .clientsWindow h2 {
    font-size: 12px;
	font-weight: bold;
    margin: 0 auto;
    margin-bottom: 5px;
    text-align: center;
    clear: both;
    color: #AC0700;
}
/* pod-nagłóweczek jak "to między innymi" */
#main #menuarea .clientsWindow h3 {
    position: relative;
    text-align: center;
    font-size: 8px;
	font-weight: bold;
    margin: 0 auto;
    margin-bottom: 7px;
    margin-top: -3px;
    clear: both;
    color: #AC0700;
}

/* referencja klienta - kursywą */
.reference {
    font-style: italic;
    text-indent: 10px;    
}
/* podpis klienta */
.clientSignature {
    text-align: right;
    clear: both;
    margin-bottom: 20px;
}
/* podpis klienta */
#main #menuarea .clientsWindow .clientName {
    text-align: left;
    clear: both;
}


/* Główny obszar strony - zawartość po prawej od menu, pod nagłówkiem, nad stopką */
#main #contents{
	position: relative;
	float: left;	
	padding: 10px 20px 0px 20px;
	width: 697px;
	background: white;
	
	padding-bottom: 2000px;  /* hack dla równych kolumn */
	margin-bottom: -2000px;
}
#main #contents h1{
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	margin-top: 15px;
}
#main #contents h2{
	font-size: 14px;
	font-weight: bold;
	text-align: center;
    margin-top: 25px;
}
#main #contents h3{
	font-size: 10px;
	font-weight: bold;
    color: #ac0700;
    text-align: center;
    margin-top: 20px;
}
#main #contents p{
	text-indent: 20px
}
#main #contents .features{
    margin-top: 15px;
    text-align: left;
    font-weight: bold;
}
#main #contents ul{
	list-style-type: disc
}
#main #contents #contentssubfoot{  /* dla marginesu na dole (przez hack) */
	height: 20px;
	width: 100%;
}
#main #contents .rightimage{   /* zdjęcie obok nagłówka, po prawej */
	position: relative; 
	float: right; 
	margin-top: 15px;
	margin-left: 20px;
}

#main #contents .film {
	height: 190px;
	width: 200px;
	position: relative;
	float: left;
	margin: 10px 0px 20px 15px;
}


/* Karuzela */
#main .carouselItem {    
    width: 665px;
    height: 465px;
    /*width: 659px;  - bez obramowań obrazków */
}

/* Obrazki w realizacjach */
#main .carouselImg{
    border: 1px solid #666666;
}

#main .carouselImgSingle{
    border: 1px solid #666666;
    display: block;
    margin-left: auto;
    margin-right: auto;
}


#main .carouselItemListElem{
    position: relative;
    float: left;
    margin: 0 auto;
    font-size: 12px;
    clear: both;
    /*font-weight: bold;*/
}

/* Obrazki w realizacjach */
#main .portImg{
    margin: 5px;
    border: 1px solid #666666;
}

/* Podpisy pod obrazkami w realizacjach */
#main .imgDesc{
    position: relative;
    float: left;
    width: 100%;
    height: 15px;
    margin-bottom: 5px;
    margin-top: -5px;
}
#main .desc1{
    position: absolute;
    left: 5px;
}
#main .desc2{
    position: absolute;
    left: 237px;
}
#main .desc3{
    position: absolute;
    left: 468px;
}

/* dla stałej wysokości zawartości przy małej jej ilości */
#main #heightline{   
	height: 450px;
	width: 0px;	
}

/* Stopka na dole strony */
#footer {
	position: relative;
	float: left;
	width: 100%;	
	margin: 0px; 
	background: white;
}
#leftarea{
	position: relative;
	float: left;
    /*bottom: 1550px;*/
	margin-left:0px;
	width: 200px;
    background:#FFF9F3;
	border-right: 2px solid #800500;
    font-size: 10px;
}

/* Samo menu */
#menu {
	position: relative;
	float: left;
	width: 200px;
	background: #800500;
	border-bottom: 2px solid #800500;
    overflow: hidden;
}
#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
}
#menu li a {
	text-decoration: none;
	border-top: 1px none;
	border-bottom: 1px solid #DDDDDD;
	border-left: 1px none;
	border-right: 1px none;
    padding: 5px 0px 5px 20px;
    display: block;
    width: 179px;
}
#menu .noborder {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
#menu li a:link, #menu li a:visited {
	color: #FFFFFF;
	background-color: #800500;
}
#menu li a:hover, #menu li a:active {
	color: #600300;
	background:  #FFFFFF;	
}