﻿/****************************************************************************************/
/*                                                                                      */
/* cyberstream.cz website - CONTENT DESIGN                                              */
/*                                                                                      */
/* Central menu:    top, horizontal                                                     */
/* Submenu:         left, vertical                                                      */
/*                                                                                      */
/* Version:         2009-01-21 15:00                                                    */
/* Last changed by: Michal Pelech                                                       */
/*                                                                                      */
/****************************************************************************************/

/* MAIN CONTENT ========================================================================*/

#mainContent p
{
	font-size: 70%;
}

#mainContent h1
{
	margin: 5px 0 10px 0;
	letter-spacing: -1px;
	font-size: 110%;
	font-weight: normal;
	font-family: "Trebuchet MS";
	font-family: Trebuchet MS;
	color: #e7f05d;
}

#mainContent #leftPanel p
{
	padding: 0 10px 0 0;
}

#mainContent #leftPanel ul li
{
	margin: 0;
	padding: 0 0 0 40px;
	display: block;
}

#mainContent #leftPanel ul li a
{
	padding: 4px 50px 10px 0;
	display: block;
	color: #fff;
	font-size: 70%;
	text-decoration: none;
	background: url(../images/design/left_menu_bg.gif) left 23px no-repeat;
	letter-spacing: 1px;
}

#mainContent #leftPanel ul li a:hover
{
	color: #e7f05d;
}

#mainContent #leftPanel ul li.select
{
	background: url(../images/design/side_menu_active.gif) left 4px no-repeat;
}

#mainContent #leftPanel ul li.select a
{
	color: #e7f05d;
}

#mainContent #rightPanel h2
{
	margin: 0 0 20px 0;
	/*letter-spacing: -1px;*/
	color: #e7f05d;
	font-family: Trebuchet MS;
	font-family: "Trebuchet MS";
}

#mainContent #rightPanel table h2,
#mainContent #rightPanel h2.ceo
{
	margin: 0;
}

#mainContent #rightPanel h2 a
{
	position: static;
	color: #e7f05d;
	font-size: 90%;
	text-decoration: none;
}

#mainContent #rightPanel h2 a:hover
{
	text-decoration: underline;
}

#mainContent #rightPanel p
{
	padding: 5px 10px;
}

#mainContent h2
{
	color: #fff;
}

#mainContent #rightPanel a.reference
{
	padding: 0 0 0 7px;
	position: absolute;
	bottom: 9px;
	color: #ffffff;
	font-size: 80%;
	text-decoration: none;
}

#mainContent #rightPanel a.reference:hover
{
	text-decoration: underline;
}

#mainContent #rightPanel ul,
#pageContent ul
{
	margin: 5px 0 0 10px;
	font-size: 70%;
	list-style: disc;
}

#mainContent #rightPanel ul li,
#pageContent ul li
{
	margin: 0 0 0 5px;
	padding: 0;
}

#mainContent #rightPanel ul.products li
{
	width: 170px;
	height: 155px;
	margin: 0;
	display: block;
	float: left;
}

#mainContent #rightPanel ul li.last
{
	width: 165px;
}

#mainContent #rightPanel .rightPanelContent p,
#mainContent #rightPanel .leftPanelContent p
{
	padding: 0;
	font-size: 70%;
}

#mainContent #rightPanel .leftPanelContent p
{
	padding: 0 25px 0 0;
}

/* LAST PROJECT ======================================================================*/

#lastProject .projectInfo
{
	margin: 20px 0 0 0;
}

#lastProject p.projectName
{
	width: 195px;
	height: 25px;
	margin: 0;
	padding: 5px 0 0 0;
	/*line-height: 26px;*/
	color: #ffffff;
	font-size: 90%;
	font-weight: bold;
	text-align: center;
}

#lastProject p.projectName a
{
	color: #ffffff;
	text-decoration: none;
}

#lastProject p
{
	width: 180px;
	margin: 20px 0 0 15px;
	font-size: 70%;
	color: #ffffff;
}

#lastProject img
{
	margin: 0 0 0 9px;
	display: block;
}

#lastProject img.lastIco
{
	width: 50px;
	height: 51px;
	position: absolute;
	left: 90px;
	top: 55px;
}

/* PAGE CONTENT ======================================================================*/

#pageContent p
{
	font-size: 70%;
}

#pageContent p.null
{
	margin: 0 0 5px 0;
}

#pageContent a.leftArrow,
#pageContent a.leftArrow span
{
	width: 16px;
	height: 64px;
	display: block;
	position: absolute;
	left: 8px;
	top: 40px;
	overflow: hidden;
	text-decoration: none;
}

#pageContent a.leftArrow span
{
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/design/left_arrow.png) left top no-repeat;
}

#pageContent a.rightArrow,
#pageContent a.rightArrow span
{
	width: 16px;
	height: 64px;
	display: block;
	position: absolute;
	right: 8px;
	top: 40px;
	overflow: hidden;
	text-decoration: none;
}

#pageContent a.rightArrow span
{
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/design/right_arrow.png) left top no-repeat;
}

#pageContent #references p
{
	padding: 5px 0 0 0;
}

#pageContent .searchItem
{
	margin: 5px 10px;
	padding: 5px;
	border-bottom: 1px solid #000;
}

#pageContent .last
{
	border: none;
}

#pageContent .lastReference
{
	margin: 5px 10px 0 0;
	float: left;
}

#pageContent .pageHeader
{
	color: #000000;
	font-size: 70%;
	font-weight: normal;
}

#pageContent .leftPageContent h2
{
	margin: 0 0 5px 0;
	font-size: 70%;
}

#pageContent .leftPageContent h2.separate
{
	margin: 60px 0 0 0;
	color: #20409a;
}

#pageContent .rightPageContent h3
{
	margin: 0 0 5px 0;
	font-size: 70%;
}

#pageContent #leftProject h2
{
	margin: 0 0 5px 0;
	font-size: 70%;
}

#pageContent #rightContent .specification
{
	float: left;
}

#pageContent #rightContent .gallery img
{
	margin: 0 0 0 10px;
}

/* Contact form ===========================================================================*/

#contactForm .formResult
{
	font-size: 130%;
}

#contactForm
{
	width: 400px;
	margin: 0 0 0 280px;
	font-size: 70%;
}

#forms input
{
	width: 220px;
	height: 18px;
	padding: 2px 0 0 0;
	border: none;
	background: #e7eff2;
}

#forms textarea {
  width:340px;
  height:105px;
  border: none;
  background: #e7eff2;
}

#forms .TextAreata,
#forms.TextAreata div {
  float:left;
}

#forms .TbTextSTextBox,
#forms .TaTextSTextArea {
  width:150px;
  font-weight:bold;
  margin:3px 0 0 0;
}

.TextBoxTB,
.TextAreaTA {
	clear: left;
	margin-top: 5px;
}

.TBTextSTextBox,
.TATextSTextArea {
	width: 80px;
}

.TATextSTextArea {
	float:left;
}

.TBTextBox {}
.TATextArea {
	float: left;
}

.TBTextETextBox {
	width: 260px;
	margin-left: 2px;
	font-weight: bold;
	color: #f48000;
}

.TATextETextArea {
	display: none;
}

.fClear {
  float: none;
  clear:both;
  overflow:hidden;
  height:1px;
}

.cfLeft {
  width: 60px;
  margin: 5px 0 0 0;
}

.cfCenter {
  margin: 5px 0 0 0;
}

#forms .TextArea .cfLeft {
  float: left;
}

#forms .TextArea div {
  float: left;
}

#formButtons 
{
	width: 405px;
	margin: 5px auto 15px auto;
	text-align: right;
}

#btnResetForm,
#btnSubmitForm {
  width: auto;
  margin: 0 5px;
  padding: 2px;
  cursor: pointer;
  border: none;
  background: #e7eff2;
  color: #000000;
  text-transform: uppercase;
}

/* FOOTER ==============================================================================*/

#footer p
{
	font-size: 80%;
}

#footer #bottomMenu ul
{
	list-style: none;
}

#footer #bottomMenu ul li
{
	float: left;
	border-right: 1px solid #000000;
}

#footer #bottomMenu ul li.last
{
	border: none;
}

#footer #bottomMenu ul li a
{
	padding: 0 5px;
	display: block;
	font-size: 70%;
	text-decoration: none;
	color: #000000;
}

#footer #bottomMenu ul li a:hover
{
	text-decoration: underline;
}

#footer #contact .phone,
#footer #contact .phone span
{
	width: 213px;
	height: 32px;
	margin: 0 0 10px 0;
	display: block;
	position: relative;
	overflow: hidden;
}

#footer #contact .phone span
{
	margin: 0;
	position: absolute;
	left: 0;
	top: 0;
	background: transparent url(../images/design/phone_number.png) left top no-repeat;
}

#footer #contact address
{
	width: 220px;
	font-style: normal;
}

#footer #contact address p
{
	margin: 0 0 5px 5px;
}

#footer #copyright
{
	margin: 0 0 0 35px;
}

#footer #copyright p
{
	font-size: 70%;
}

/* TOP MENU ============================================================================*/

#topMenu ul
{
	list-style: none;
	margin: 29px 0 0 80px;/*margin: 29px 0 0 30px;*/
}

#topMenu ul li
{
	margin: 0 10px 0 0;
	float: left;
}

#topMenu ul li a,
#topMenu ul li a span
{
	height: 23px;
	display: block;
	position: relative;
	text-decoration: none;
	overflow: hidden;
	color: #ffffff;
	font-size: 80%;
	
}

#topMenu ul li a span
{
	position: absolute;
	left: 0;
	top: 0;
	background-repeat: no-repeat;
}

#topMenu ul li a.home
{
	width: 55px;
	background: url(../images/design/home_bt.png) 0 -23px;
}

#topMenu ul li a.home span
{
	width: 55px;
	background: url(../images/design/home_bt.png) 0 0;
}

#topMenu ul li a.about
{
	width: 56px;
	background: url(../images/design/o_nas_bt.png) 0 -23px;
}

#topMenu ul li a.about span
{
	width: 56px;
	background: url(../images/design/o_nas_bt.png) 0 0;
}

#topMenu ul li a.contact
{
	width: 76px;
	background: url(../images/design/contact_bt.png) 0 -23px;
}

#topMenu ul li a.contact span
{
	width: 76px;
	background: url(../images/design/contact_bt.png) 0 0;
}

#topMenu ul li a.references
{
	width: 84px;
	background: url(../images/design/reference_bt.png) 0 -23px;
}

#topMenu ul li a.references span
{
	width: 84px;
	background: url(../images/design/reference_bt.png) 0 0;
}

#topMenu ul li a.products
{
	width: 86px;
	background: url(../images/design/product_bt.png) 0 -23px;
}

#topMenu ul li a.products span
{
	width: 86px;
	background: url(../images/design/product_bt.png) 0 0;
}

#topMenu ul li a.clients
{
	width: 126px;
	background: url(../images/design/clients_bt.png) 0 -23px;
}

#topMenu ul li a.clients span
{
	width: 126px;
	background: url(../images/design/clients_bt.png) 0 0;
}

#topMenu ul li a.services
{
	width: 60px;
	background: url(../images/design/services_bt.png) 0 -23px;
}

#topMenu ul li a.services span
{
	width: 60px;
	background: url(../images/design/services_bt.png) 0 0;
}

#topMenu ul li a.active span,
#page #topMenu ul li a:hover span
{
	background: none;
}

#page #topMenu ul li a:hover em,
#page #topMenu ul li a.active em
{
	visibility: hidden;
}

/* CLIENTS CENTER ======================================================================*/
/* =====================================================================================*/

#mainClients #header a
{
	text-decoration: none;
}

/* CLIENT MENU ======================================================================== */

#mainClients #menuClients ul
{
	height: 55px;
	list-style: none;
}

#mainClients #menuClients ul li
{
	margin: 0 0 0 20px;
	padding: 0 25px 0 0;
	float: left;
	display: inline;
	background: url(../images/design/clients_menu_bg.png) right top no-repeat;
}

#mainClients #menuClients ul li.last
{
	background: none;
}

#mainClients #menuClients ul li a,
#mainClients #menuClients ul li a span
{
	height: 55px;
	display: block;
	position: relative;
	text-decoration: none;
	overflow: hidden;
	font-size: 80%;
	color: #000;
}

#mainClients #menuClients ul li a.home
{
	width: 27px;
}

#mainClients #menuClients ul li a.home span
{
	width: 27px;
	position: absolute;
	left: 0;
	top: 0;
	background: url(../images/design/clients_home_bt.png) left top no-repeat;
}

#mainClients #menuClients ul li a.join
{
	width: 61px;
}

#mainClients #menuClients ul li a.join span
{
	width: 61px;
	position: absolute;
	left: 0;
	top: 0;
	background: url(../images/design/clients_join_bt.png) left top no-repeat;
}

#mainClients #menuClients ul li a.system
{
	width: 62px;
}

#mainClients #menuClients ul li a.system span
{
	width: 62px;
	position: absolute;
	left: 0;
	top: 0;
	background: url(../images/design/clients_system_bt.png) left top no-repeat;
}

#mainClients #menuClients ul li a.help
{
	width: 52px;
}

#mainClients #menuClients ul li a.help span
{
	width: 52px;
	position: absolute;
	left: 0;
	top: 0;
	background: url(../images/design/clients_help_bt.png) left top no-repeat;
}

/* CLIENT NAVIGATION ===================================================================== */

#mainClients #navigation ul
{
	list-style: none;
}

#mainClients #navigation ul li
{
	margin: 0 10px;
	float: left;
}

#mainClients #navigation ul li a,
#mainClients #navigation ul li a span
{
	height: 12px;
	display: block;
	position: relative;
	text-decoration: none;
	overflow: hidden;
	font-size: 80%;
	color: #000;
}

#mainClients #navigation ul li a.home
{
	width: 40px;
}

#mainClients #navigation ul li a.home span
{
	width: 40px;
	position: absolute;
	left: 0;
	top: 0;
	background: url(../images/design/home_bg.png) left top no-repeat;
}

#mainClients #navigation ul li a.siteMap
{
	width: 40px;
}

#mainClients #navigation ul li a.siteMap span
{
	width: 40px;
	position: absolute;
	left: 0;
	top: 0;
	background: url(../images/design/site_map_bg.png) left top no-repeat;
}

#mainClients #navigation ul li a.mail
{
	width: 41px;
}

#mainClients #navigation ul li a.mail span
{
	width: 41px;
	position: absolute;
	left: 0;
	top: 0;
	background: url(../images/design/mail_bg.png) left top no-repeat;
}

#mainClients #contentClients p
{
	margin: 0 0 10px 0;
}

#mainClients #contentClients .login h3
{
	margin: 0 0 20px 0;
	font-size: 70%;
	font-weight: normal;
	text-transform: uppercase;
}

#mainClients #contentClients .login h3 em
{
	display: block;
	font-size: 130%;
	font-style: normal;
	text-transform: uppercase;
}

/* CLIENT LOGIN FORM ====================================================================== */

#mainClients #contentClients .login
{
	font-size: 80%;
}

#mainClients #contentClients .login label
{
	width: 80px;
	margin: 5px 0 0 0;
	display: block;
	float: left;
	clear: left;
}

#mainClients #contentClients .login input
{
	width: 150px;
	margin: 5px 0 0 0;
}

#mainClients #contentClients p
{
	font-size: 70%;
}