@import "reset.css";

body {
  background-color: #f2f2f2 !important;
  overflow: hidden;
  overflow-x: hidden !important;
  width: 1024px;
  margin: 0 auto;
}

/* @group Framework */
#main-wrapper {
  width: 990px;
  margin: 1em auto 1em 20px;
  text-align: left;
  position: relative;
}
.header {
  position: absolute;
  top: 0px;
  left: 850px;
  text-align: center;
  width: 140px;
}
#container {
  position: relative;
  /* width: 780px; */ /* 840-60 780, 30 + 195 + 195 + 195 + 195 +30 */
  width: 800px;
  height: 500px;
  padding: 20px 29px; /* 29+1 for border = 30px */
  padding-right: 9px; /* extra space for scrollbar */
  margin-left: 0;
  margin-right: auto;
  text-align: left;
  border: 1px solid #D6D6D6;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
  background: #FFFFFF url(img/player-gradient-bg.png) repeat-x;
}
.text-teaser {
  width: 780px; 
  text-align: left;
  padding: 0 29px 0 29px;
}
.text-teaser p {
  text-align: center;
  margin: 7px 0 7px 0;
}
.text-teaser p a {
  color: #09C;
}
.ads-container {
  width: 780px;
  height: 80px;
  padding: 7px 29px;
  text-align: left;
  border: 1px solid #D6D6D6;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
  background: #FFFFFF url(img/player-gradient-bg.png) repeat-x;
}
/* @end */
/* @group Header links */

.header ul {
  list-style-image: none;
  list-style-type: none;
  margin: 19px 0 0 0;
  padding: 0;
  text-align: left;
}
.header li {
  height: 29px;
  width: 100%;
  background: url(img/link-element-bg.png) no-repeat left top;
  margin-bottom: 3px;
}
.header li a {
  display: block;
  padding-top: 6px;
  padding-left: 1em;

}
.header-illustration {
  margin-top: 40px ;
}
/* @end */


/* @group Content elementst */

#heading {
  color: #666666;
  font-size: 2em;
  font-weight: bold;
  letter-spacing: -1px;
/*  padding-bottom: 11px; */
  background-image: url(img/heading-underline.png);
  background-position: bottom left;
  background-repeat: no-repeat;
  /* Ico: fiksna velikost, da se pozicija .content ne spreminja */
  height: 24px;
  margin-top: 8px; 
  margin-bottom: 15px;  

}
.subheading {
  color: #666666;
  font-size: 1.3em;
  font-weight: bold;
  /* Ico: fiksna velikost, da se pozicija .content ne spreminja */
  height: 23px;
  margin: 0;
  padding: 0;
}
.text {
  float: left;
  color: #777777;
  text-align: right;
/*  padding: 4px 0px; */
}

.text.left {
  float: left;
  text-align: left;
  width: 185px;
  margin-right: 10px; 
}

.text.right {
  float: right;
  text-align: left;
}

.interactive-area {
/*  padding: 4px 14px; */
  float: left;
}
.interactive-area.with-left {
  float: left;
  width: 565px; /* 2  x 195 - 10px margin */
}
.interactive-area.with-left div p {
  width: 380px; /* 2  x 195 - 10px margin */
  margin-bottom: 1em;
}


/*
.navigation-buttons {
  float: left;
  margin: 0.6em 1em 0.6em 0;   
  text-align: right;
}
.extra-buttons {
  float: right;
  text-align: right;
  margin: 0.6em 1em 0.6em 0;
}
*/
/* @end */

/* @group Buttons */
/* Button styles */
.button, .button-blue, .button-gray {
	padding: 1px 10px;
	border: none;
	font-size: 12px;
	border-width: 1px;
	border-style: solid;

	-moz-border-radius: 11px;
	-khtml-border-radius: 11px;
	-webkit-border-radius: 11px;
	border-radius: 11px;

	cursor: pointer;
	text-decoration: none;
	margin-top: -3px;
	display: -moz-inline-box;
	display: inline-block;
}
.button,.submit input,input[type=button],input[type=submit] {
	border-color: #bbb;
	color: #464646;
}
.button:hover,.submit input:hover,input[type=button]:hover,input[type=submit]:hover {
	color: #000;
	border-color: #666;
}
.button,.submit input {
	background: #eee url(img/white-grad.png) repeat-x scroll left top;
	text-shadow: rgba(255,255,255,1) 0 1px 0;
}
.button:active,.submit input:active {
	background: #eee url(img/white-grad-active.png) repeat-x scroll left top;
}
.button-disabled,.button[disabled],.button:disabled,a.button.disabled {
	color: #aaa!important;
	background: #ddd!important;
	border-color: #ddd!important;
}
/* Math notation colors style in FF. */
a.button span, a.button-blue span, a.button-gray span {
  color: inherit !important; 
  text-decoration: inherit !important;
}
a.button a, a.button-blue a, a.button-gray a {
  color: inherit !important; 
  text-decoration: inherit !important;
}

/* Button-blue styles */
input.button-blue,button.button-blue,a.button-blue {
	border-color: #298cba;
	font-weight: bold;
	color: #fff;
	background: #21759B url(img/blue-grad-active.png) repeat-x scroll left top;
	text-shadow: rgba(0,0,0,0.3) 0 -1px 0;
    padding: 2px 10px;
}
input.button-blue:active,button.button-blue:active,a.button-blue:active {
	background: #21759b url(img/blue-grad-active.png) repeat-x scroll left top;
	color: #eaf2fa;
}
input.button-blue:hover,button.button-blue:hover,a.button-blue:hover,a.button-blue:focus,a.button-blue:active {
	border-color: #21759b;
	color: #eaf2fa;
}
.button-blue-disabled,.button-blue[disabled],.button-blue:disabled {
	color: #9FD0D5!important;
	background: #298CBA!important;
	border-color: #298CBA!important;
}

/* Button-gray styles */
input.button-gray,button.button-gray,a.button-gray {
	border-color: #666;
	color: #464646;
	background: #eee url(img/gray-grad.png) repeat-x scroll left top;
}
input.button-gray:active,button.button-gray:active,a.button-gray:active {
	background: #eee url(img/gray-grad-active.png) repeat-x scroll left top;
	color: #464646;
}
input.button-gray:hover,button.button-gray:hover,a.button-gray:hover,a.button-gray:focus,a.button-gray:active {
	border-color: #0099CC;
	color: #0099CC;
}
.button-gray-disabled,.button-gray[disabled],.button-gray:disabled {
	color: #aaa!important;
	background: #ddd!important;
	border-color: #ddd!important;
}
/* @end */
/* @group Toolbox-left */
#toolbox-left {
  position: absolute;
  width:54px;
  margin-left: -55px;
  padding: 0;
  height: 84%;
  top: 10px;
  z-index: 110;
}
/* @end */
/* @group Toolbox-right */
#toolbox-right {
  position: absolute;
  /*width:54px;*/
  width: 0;
  margin-left: 780px;
  padding: 0;
  height: 84%;
  top: 10px;
  z-index: 110;
}
/* Toolbox Close */

#toolbox-close {
  position: absolute;
  z-index: 115;
  margin-left: 0px;
  height: 26px;
  width: 26px;
  margin-top: -18px;
  margin-left: 14px
}

#toolbox-close a {
  display: block;
  height: 26px;
  width: 26px;
  background-image: url(img/icon-close-off.png);
}

#toolbox-close a:hover {
  display: block;
  height: 26px;
  width: 26px;
  background-image: url(img/icon-close.png);
}

#toolbox-close a span {
  display: none;
}

/* @end */
/* @group Arrows left and right */

#toolbox-arrow-left,
#toolbox-arrow-right {
  
}

#toolbox-arrow-left {
  position: absolute;
  top: 61.2%;
  z-index: 115;
}
#toolbox-arrow-right {
  position: absolute;
  top: 60%;
  z-index: 115;
}
#toolbox-arrow-left {
  margin-left: 1px;
}

#toolbox-arrow-right {
  margin-left: 4px;
}

#toolbox-arrow-right p a {
  display: block;
  width: 50px;
  height: 110px;
  background-image: url(img/arrow-right-label.png);
}

#toolbox-arrow-right p a:hover,
#toolbox-arrow-right p a:active {
  display: block;
  width: 50px;
  height: 110px;
  background-image: url(img/arrow-right-label-dark.png);
}

#toolbox-arrow-left p a {
  display: block;
  width: 50px;
  height: 110px;
  background-image: url(img/arrow-left-label.png);
}

#toolbox-arrow-left p a:hover,
#toolbox-arrow-left p a:active {
  display: block;
  width: 50px;
  height: 110px;
  background-image: url(img/arrow-left-label-dark.png);
}

#toolbox-arrow-left p a span,
#toolbox-arrow-right p a span {
  display: none;
}

.content {
  overflow: auto;
  height: 480px;
  font-size:1.2em;
}

/* @end */

/* @group eplxTitleslie */
.eplxTitleslide {
  padding-left: 195px; /* we jump right right into col2 region */
  overflow: auto;
  height: 100%;
}
.logo_hq {
  overflow: hidden;
  margin-top: 40px;
}
.eplxTitleslide h3 {
  font-size: 14px;
  color: #666;
  max-width: 400px;
}
.eplxTitleslide h3 .fw-meta-key {
  color: #666;
  font-weight: bold;
}
.eplxTitleslide .title-navigation-buttons {
   margin-top: 35px; 
   float: left;
}
.eplxTitleslide .title-extra-buttons {
   margin-top: 35px; 
   margin-left: 2em;
   float: left;
}

/* @end */


/* @group forma */
/* --- contact ---- */
.logo_txt form {
  width: 400px;
}
.pfg-form {
/*	background-color: #C2C2C3; */
  margin-top:15px;
  width: 400px;
  clear: both;
}
.pfg-form .field {
	display: inline-block;
	margin-right: 10px;
	width:  185px;
}
.pfg-form .field input {
	width:  180px;
}
.pfg-form .formControls {	
}
#pfg-fieldwrapper {
	clear: both;
/*	width: 400px; */
}
#pfg-fieldwrapper fieldset.PFGFieldsetWidget {
  padding: 10px;
}
#pfg-fieldwrapper fieldset.PFGFieldsetWidget legend {
  background: #000;
  color: #fff;
  padding: 5px 5px 0 10px;
  margin-left:-10px;
  text-decoration: none;
  font-family: 'HelserifMedRegular', sans-serif;
  font-size: 1.5em;
}
#pfg-fieldwrapper div.ArchetypesStringWidget {
  font-size: 12px;
}
#pfg-fieldwrapper div.ArchetypesStringWidget label.formQuestion {
}
#pfg-fieldwrapper div.ArchetypesStringWidget input {
  margin: 0 0 5px 0;
}
#archetypes-fieldname-e-mail input {
	width: 378px;
}
/* Submit button is positioned right, via float 
and moved up a row via negative margin */
.formControls {
  float: right;
  margin-right: 15px;
  margin-top: 45px; 
}

div.ArchetypesStringWidget.error {
  background: none;
  border-color: none;
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-left: none;
  color: #0066CC; 
/*
  background: #FBE3E4;
  border-color: #FBC2C4;
  color: #8A1F11; 
*/
  margin: 0 20px 0 0;
  padding: 0;
  display: block-inline;
}
div.ArchetypesStringWidget.error label.formQuestion  {
  padding-left: 10px;
}
div.ArchetypesStringWidget.error div.fieldErrorBox {
  padding-left: 10px;
/*  background-color: #FBE3E4; */
} 

/* switch main title and subtitle */

#heading { margin-top: 35px; }

p.subheading { 
   margin-top: -70px;
   margin-bottom: 46px; 
}

/* @end */