/* HTML5 for IE */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
	display: block; 
}


/* BOX MODEL RENDERING #################################################################################################
   
	Border box
	----------
		- includes borders and padding in the given box width/height (original dimensions are unchanged)
	
	Content box
	----------- 
		- adds borders and padding onto the given box width/height (original dimensions are increased)
		- this is the default box model
	
	Box sizing
	---------- 
		- not supported in IE6/7 
		- box-sizing in IE6/7 is done with jQuery    */

.bm-bb {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;	
}

.bm-cb { 
	-moz-box-sizing: content-box; 
	-webkit-box-sizing: content-box; 
	box-sizing: content-box;
}


/* CSS RESETS AND DEFAULTS #############################################################################################
  
	- standard selectors first
	- custom selectors */

body, div, ul, li, a, fieldset, nav, header, footer, h1, h2, h3, h4, h5, h6, table, th, tr, td, img, span, label, p, 
button, input,
#topBar, #searchContainer,
.customTextbox, .customSearch, .customSearchButton, .customTextarea, .customButton, .customROC, .customSelect {
	border: 0;
	padding: 0;
	margin: 0;
	outline: 0;
	font-size: 100%;
}

ul { list-style: none; }

body {
	width: 100%; 
	height: 100%;
	font: normal normal normal 16px/18px 'Iskon Web', sans-serif;
	color: #424242;
	background: #676767 url(../img/little_pluses.png) top left repeat;
}

/* BORDERS, SHADOWS, GRADIENTS #########################################################################################

	Rounded corners
	---------------
		- not supported in IE6/7/8
	
	Box shadow
	----------
		- not supported in IE6/7/8/9
	
	Text shadow
	-----------
		- not supported in IE6/7/8/9    */

.bdr-r3 { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.bdr-r6 { -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; }
.bdr-r9 { -moz-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 9px; }

.sdw-b1 { -moz-box-shadow: 0px 1px 1px #000; -webkit-box-shadow: 0px 1px 1px #000; box-shadow: 0px 1px 1px #000; }
.sdw-b2 { -moz-box-shadow: 0px 1px 2px #000; -webkit-box-shadow: 0px 1px 2px #000; box-shadow: 0px 1px 2px #000; }
.sdw-b3 { -moz-box-shadow: 0px 1px 5px #000; -webkit-box-shadow: 0px 1px 5px #000; box-shadow: 0px 1px 5px #000; }

.sdw-t1 { text-shadow: 0 1px 1px #000; }
.sdw-t2 { text-shadow: 0 1px 2px #000; }

/* IE8 has issues with this
.ie6 .sdw-b3,
.ie7 .sdw-b3,
.ie8 .sdw-b3 {
	zoom: 1;
	filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=180, Strength=5);
}
*/

/* GENERAL LAYOUT ######################################################################################################

	Default block, inline, inline-block and float containers
	--------------------------------------------------------
		- for centering via margin: 0 auto; to work container must have a defined width!
		- actuall _height value is irrelevant as it will automatiacally expand to fit content
		
	Positioning
	-----------
		- pos-REL must be udes on all containers with absolutely positioned elements inside them
		- centering with negative margins, these are marker classes, actual centering CSS is calculated and applied 
	  	  with jQuery
		- elements centered via negative margins must have defined width/height
		- absolute positioning of child elements should be used instead of float wherever possible

	Default container widths
	------------------------
		- main container, header, etc. are set to 1220px
		- data container is set to 960px

	hasFloats (clearfix)
	--------------------
		- add this class to all containers that have floated elements inside them to make the container properly wrap
		  and scale around the floats

	Fixes
	-----
		- IE6/7 fix for inline-block 
		- IE6/7 fix for .hasFloats    */

.box-B  { display: block; text-align: left; }
.box-Bc { display: block; text-align: left; margin: 0 auto; }
.box-BR { display: block; text-align: left; float: right; }
.box-BL { display: block; text-align: left; float: left; }

.box-I { display: inline; text-align: left; }

.box-IB  { display: inline-block; vertical-align: top; text-align: left; }
.box-IBc { display: inline-block; vertical-align: top; text-align: left; margin: 0 auto; }

.box-FL { float: left;  overflow: auto; text-align: left; }
.box-FR { float: right; overflow: auto; text-align: left; }

.pos-REL { position: relative; }

.pos-cH { position: absolute; } /* horisontal */
.pos-cV { position: absolute; } /* vertical */
.pos-cB { position: absolute; } /* both */

.pos-aTL { position: absolute; top: 0px; left: 10px;}
.pos-aTR { position: absolute; top: 0px; right: 0px; }
.pos-aBL { position: absolute; bottom: 0px; left: 0px; }
.pos-aBR { position: absolute; bottom: 0px; right: 0px; }



.cleared {clear: both; margin-top: 5px;}

.centered {text-align:  center;}

.hasFloats:after {
	display: block;
	content: "/0020";
	clear: both;
	height: 0;
	line-height: 0;
	visibility: hidden;
}

.ie6 .box-IB { zoom: 1; *display: inline; _height: 5px; }
.ie7 .box-IB { zoom: 1; *display: inline; }

.ie6 .hasFloats,
.ie7 .hasFloats { zoom: 1; }


/* DEFAULT LAYOUT CONTAINERS ##########################################################################################

	+#< #formContainer >###################################################################+
	#																					   #
	#  +=[ .formSection ]===============================================================+  #
	#  =																				=  #
	#  = +-< .group >----------------------+  +-< .group >----------------------+       =  #
	#  = |								   |  |								    |       =  #
	#  = | +.< .item >...+ +.< .item >...+ |  | +.< .item >...+ +.< .item >...+ |       =  #
	#  = | .			 . .			 . |  | .			  . .			  . |       =  #
	#  = | .			 . .			 . |  | .			  . .			  . |       =  #
	#  = | .			 . .			 . |  | .			  . .			  . |       =  #
	#  = | +.............+ +.............+ |  | +.............+ +.............+ |       =  #
	#  = |								   |  |								    |       =  #
	#  = +---------------------------------+  +---------------------------------+  ...  =  #
	#  = 																			    =  #
	#  +================================================================================+  #
	# 																					   #
	#                                                                                      #

	#formContainer
	--------------
		- contains .sectionContainer(s)
		- it's the top parent for all content inside of it
		- should be only one per page 

	.formSection
	------------
		- holds and separates different section on the same page
		- block elemet, stacks on top of another .sectionContainer so it should not be floated 
		  or individually positionined (must stay within normal flow)
		- contains .itemGroup(s)
		- spans full width (100%) of #globalContainer

	.group
	----------
		- contains individual .item(s) of same type
		- uses inline-block

	.item
	-----
		- contains individual items made of two or more parts like label+textbox...
		- simpler items like buttons don't have to be wraped in .item, they cn go directly into .group
		- uses inline-block
	
	Fixes
	-----
		- IE6/7 fix for .group
		- IE6/7 fix for .item    */

header,
footer,
#topBarContainer,
#navUserType,
#mainContainer {
	display: block;
	width: 1000px;
	margin: 0 auto;
	text-align: left;
	font-size: 0; /* remove the inline-block space fix */
}

#mainContainer {
	width: 998px; /* + 2px border = 1000px */
	border: 1px solid #333;

	border-bottom: 3px solid #555;
	background-color: #c3c3c3;
	/* specific CSS3 */
	-moz-border-radius: 0px 9px 9px 9px;
	-webkit-border-radius: 0px 9px 9px 9px;
	border-radius: 0px 9px 9px 9px;		
}

#formContainer {
	width: 720px; /* 720px + 2px border + 20px padding = 742 actuall width */
	margin: 15px 0;
	padding: 10px 10px 0px 10px;
	background: #e5e5e5 url(../img/1x1.gif) top left repeat-x;
	border: 1px solid #959595;
	min-height: 400px;
}

.formSection {
	display: block;
	margin-bottom: 18px;
	padding-bottom: 8px; /* collapsing margin fix */
	background: url(../img/hr_solid.png) bottom left repeat-x;
}

.big_panel {
    width: 100%;
    height: 400px;
    overflow: auto;
}

.noHr { background-image: none; }

.framed {
	padding-top: 18px;
	padding-left: 9px;
	margin-top: 9px;
	border: 1px solid #c3c3c3;
	background-color: #f1f1f1;
}

/* framed 2 */
.framed2 {
	border: 2px solid #424242;
	background-color: #424242;
}

.framed2-ttl {
	padding: 5px 0 5px 0;
	text-transform: uppercase;
	font: normal small-caps normal 12px/18px 'Open Sans', sans-serif;
	color: #959595;
	text-indent: 10px;
	background-color: #424242;
}

.framed2-cnt { background-color: #f1f1f1; padding: 10px; }
.framed2-lnk { 
	padding: 0 3px; 
	font-weight: 700;
	color: #959595;
	border: 1px solid #959595;
}
.framed2-lnk:hover { color: #424242; background-color: #959595; }
/* framed 2 */

.group-I,
.item-I { 
	display: inline-block; 
	vertical-align: top; 
	text-align: left; 
	/*margin-right: 20px;
	margin-bottom: 18px;*/

	margin-right: 10px;
	margin-bottom: 9px;		
}

.group-B, /* define width  */
.item-B { 
	display: block;
	/*margin-right: 20px;
	margin-bottom: 18px;*/

	margin-right: 10px;
	margin-bottom: 9px;	
}

.ie6 .group-I, 
.ie6 .item-I { zoom: 1; *display: inline; _height: 5px; }

.ie7 .group-I,
.ie7 .item-I { zoom: 1; *display: inline; }

/* TYPOGRAPHY ##########################################################################################################
*/

h1, h2, h3, h4, h5 { 
	font: normal normal 700 16px/18px 'Open Sans', sans-serif;
	color: #424242;
	margin-bottom: 18px; 
}

h1, h2 		{ line-height: 36px; }
h3, h4, h5 	{ line-height: 18px; }

h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h5 { font-size: 14px; }

p { font: normal normal normal 14px/18px 'Istok Web', sans-serif; }



.plainTxt { color: #424242; }

.infoTxt-R { color: #4a0000; border: 1px solid #a60000; background: #ff0000; }
.infoTxt-G { color: #004505; border: 1px solid #009a0b; background: #00ed11; }
.infoTxt-B { color: #002f4a; border: 1px solid #0069a6; background: #00a2ff; }
.infoTxt-Y { color: #4a2f00; border: 1px solid #a66900; background: #ffa200; }

.infoTxt-R, 
.infoTxt-G, 
.infoTxt-B, 
.infoTxt-Y { font-size: 13px; padding: 3px 5px; }

.sideNote { 
	font: italic normal normal 12px/18px 'Istok Web', sans-serif; 
	color: #424242; margin-right: 0; 
}

.defaultLabel {
	display: block;
	margin-bottom: 3px;
	font-size: 13px;
	color: #424242;		
}

/* LINKS ###############################################################################################################
*/
a { cursor: pointer; text-decoration: none; }

a.standard {
	color: #008ad9;
	text-decoration: underline;
	/*border-bottom: 1px solid #008ad9;*/
}

a.standard:hover {
	color: #fff;
	background-color: #008ad9;
}

a.discreet { color: #959595; }
a.discreet:hover { color: #fff; }


/* BLACK BAR (title, datetime and search) */
/* ------------------------------------------------------------------------------------------------------------------ */
#topBar { height: 54px;	width: 100%; background-color: #000; color: #959595;  }
#topBar strong { font-family:'Open Sans', sans-serif; color: #fff; }

#cometInfo img { 
	float: left; 
	/*width: 72px; height: 54px; */
}

/* title, date, time */
#cometInfo span {
	font-size: 14px;
	line-height: 54px;
}

/* user info */
#userInfoContainer { 
	width: 350px;
	margin-top: 9px; 
	font-size: 13px;
	text-align: left;
}

#userInfoContainer img {
	float: right;
	width: 60px; 
	height: 60px;
	border: 6px solid #fff;
	background: #fff;
	/* specific CSS3 */
 	-moz-border-radius: 3px; 
 	-webkit-border-radius: 3px; 
 	border-radius: 3px;
	-moz-box-shadow: 0px 1px 2px #000; 
	-webkit-box-shadow: 0px 1px 2px #000; 
	box-shadow: 0px 1px 2px #000;	
}

#userInfoContainer iframe {
	float: right;
	width: 60px; 
	height: 60px;
	border: 5px solid #fff;
	background: #fff;
	/* specific CSS3 */
 	-moz-border-radius: 3px; 
 	-webkit-border-radius: 3px; 
 	border-radius: 3px;
	-moz-box-shadow: 0px 1px 2px #000; 
	-webkit-box-shadow: 0px 1px 2px #000; 
	box-shadow: 0px 1px 2px #000;	
}

.ie6 #topBar { overflow: hidden; }

/* HEADER (title, datetime and search) */
/* ------------------------------------------------------------------------------------------------------------------ */


/* MAIN TAB NAV */
/* ------------------------------------------------------------------------------------------------------------------ */
#navUserType { margin-top: 18px; }

#navUserType ul { height: 36px; }

#navUserType li {
	position: relative;
	float: left;
	top: 11px;
	left: 0px;
}

#navUserType a {
	display: block;
	width: 120px;
	font-size: 12px;
	line-height: 24px;
	text-decoration: none; 
	text-align: center; 
	text-transform: uppercase;
	color: #c3c3c3;
	border-top: 1px solid #333;
	border-left: 1px solid #333;
	border-right: 1px solid #333;
	background: #777 url(../img/tab_dark.png) top left repeat-x;
	/* specific CSS3 */
	text-shadow: 0 1px 0px #000;
	-moz-border-radius: 9px 9px 0 0; 
	-webkit-border-radius: 9px 9px 0 0; 
	border-radius: 9px 9px 0 0;
}

#navUserType li.active { top: 0px; left: 0px; }

#navUserType a.active { 
	width: 180px;
	
	font-weight: 700; font-size: 14px; line-height: 36px;
	text-shadow: none;
	
	color: #424242;
	background: #c3c3c3 url(../img/tab_light.png) top left repeat-x;
	/*cursor: default;*/
}

#navUserType a.hover { color: #fff; }

.ie6 #navUserType li { top: 12px; }
.ie6 #navUserType li.active { top: 1px; }

/* USER ACTIONS NAV */
/* ------------------------------------------------------------------------------------------------------------------ */
#navActions { margin-top: 30px; width: 240px; }

#navActions ul,
#navActions li { display: block; }

#navActions a { 	
	display: block;
	width: 240px;
	height: 32px;

	font-size: 13px;
	line-height: 32px;
	text-align: left; 
	text-decoration: none; 
	text-indent: 15px;
		
	color: #424242;
	cursor: pointer;
}

#navActions .hover { 
	color: #e5e5e5;
	background-color: #008ad9;
}

#navActions .active {
	color: #e5e5e5;
	background-color: #959595;
}

/* SUB NAVIGATION */
/* ------------------------------------------------------------------------------------------------------------------ */
#navSubsections {
	margin: 15px 10px 15px 0;
	border-top: 1px solid #959595;
	border-bottom: 1px solid #fff;
}

#navSubsections li { float: left; }

#navSubsections a {
	display: block;
	padding: 1px 5px;

	font-size: 12px; 
	line-height: 18px;
	text-align: center;
	text-decoration: none;
	color: #959595;

	border-right: 1px solid #c3c3c3;
	border-bottom: 1px solid #c3c3c3;
	background: url(../img/btn36_gray.png) top left repeat-x;
}

#navSubsections a.hover { color: #676767; }

#navSubsections a.active {
	color: #676767;
	background: #c3c3c3 url(../img/gradientKr.png) top left repeat-x;
	cursor: default;
}

#navSubsections a.first { 
	border-left: 1px solid #c3c3c3;
	-moz-border-radius: 3px 0 0 3px;
	-webkit-border-radius: 3px 0 0 3px;
	border-radius: 3px 0 0 3px;
}

#navSubsections a.last { 
	-moz-border-radius: 0 3px 3px 0;
	-webkit-border-radius: 0 3px 3px 0;
	border-radius: 0 3px 3px 0;
}

/*********** NAV SUB TAB ************/

#navSubTab { 
	/*margin-top: 18px;*/
        margin-bottom: 18px;
	border-bottom: 1px solid #959595; 
}

#navSubTab ul { height: 26px; padding-top: 6px; }

#navSubTab li {
	position: relative;
	float: left;
	top: 3px;
	left: 0px;
	margin-left: 2px;
}

#navSubTab a {
	display: block;
	padding: 0 15px 0 15px;
	font-size: 11px;
	line-height: 22px;
	text-decoration: none; 
	text-align: center; 
	text-transform: uppercase;
	color: #676767;
	border-top: 1px solid #959595;
	border-left: 1px solid #959595;
	border-right: 1px solid #959595;
	background: #c3c3c3 url(../img/gradientKr.png) top left repeat-x;
	/* specific CSS3 */
	-moz-border-radius: 3px 3px 0 0; 
	-webkit-border-radius: 3px 3px 0 0; 
	border-radius: 3px 3px 0 0;
}

#navSubTab li.active { top: 0px; left: 0px; }

#navSubTab a.active { 
	line-height: 26px;
	font-weight: 700;
	color: #424242;
	background: #e5e5e5 url(../img/btn36_gray.png) top left repeat-x;
	cursor: default;
}

#navSubTab a.hover { color: #fff; }

.ie6 #navSubTab li { top: 12px; }
.ie6 #navSubTab li.active { top: 1px; }


/* CUSTOM TEXTBOX & TEXTAREA */
/* ------------------------------------------------------------------------------------------------------------------ */
.customTextbox,
.customTextarea {
	font: normal normal normal 13px/18px 'Istok Web', sans-serif;
	color: #959595;
	border: 1px solid #c3c3c3;
	background: #fff;
	/*overflow: scroll;*/
	font-size: 11px;
}

.customTextbox { /*display: block;*/
	width: 228px;/* + 2px border = 240px */
	height: 30px;/* + 2px border = 36px */
	text-indent: 5px;
}

.customTextarea { /*display: block;*/
	resize: none; 
	overflow: auto;	
	padding: 2px 5px;
}

.txt_active {
	color: #424242;
	border: 1px solid #00a2ff;
	background: #fff;	
}

.ie6 .customTextbox,
.ie7 .customTextbox,
.ie8 .customTextbox { line-height: 30px; }

.smallTextbox {
   font: normal normal normal 13px/18px 'Istok Web', sans-serif;
	color: #222;
	border: 1px solid #c3c3c3;
	background: #fff;
	/*overflow: scroll;*/
	font-size: 10px; 
        width: 250px;/* + 2px border = 240px */
	height: 15px;/* + 2px border = 36px */
	text-indent: 5px;
}


/* CUSTOM SELECT */
/* ------------------------------------------------------------------------------------------------------------------ */
select {	
	width: 228px;/* + 2px border = 240px */
	height: 30px;/* + 2px border = 36px */
	text-indent: 5px;
}

/* CUSTOM RADIOBUTTON & CHECKBOX */
/* ------------------------------------------------------------------------------------------------------------------ */
fieldset {
	padding-top: 18px;
	padding-left: 10px;
	border: 1px solid #c3c3c3;
	background-color: #fff;
}

.customLegend,
.inlineLabel { font: normal normal normal 13px/18px 'Open Sans', sans-serif; }

.customLegend {
	float: left; /* mora biti floatano zbog pozicioniranja */
	margin-top: -28px;
	padding: 0 5px 2px 5px;
	color: #fff;
	background-color: #959595;
}

.inlineLabel { 
	display: inline;
	padding-left: 5px;
	color: #424242;
}

.defaultROC { 
	display: inline;
	cursor: pointer; 
}

.customROC {
	display: block; float: left;
	width: 18px;
	height: 18px;
	cursor: pointer;
}

.customRadio { background: url(../img/radio.png) top left no-repeat; }
.customRadio.selected { background: url(../img/radio.png) top right no-repeat; }
.customRadio.hover { background: url(../img/radio.png) top center no-repeat; }

.customCheck { background: url(../img/check.png) top left no-repeat; }
.customCheck.checked {	background: url(../img/check.png) top right no-repeat; }
.customCheck.hover { background: url(../img/check.png) top center no-repeat; }

/* .ie6 .customLegend { } */

/* CUSTOM BUTTON */
/* ------------------------------------------------------------------------------------------------------------------ */
.customButton {
	padding: 3px 0;
	font: normal normal 700 13px/18px 'Open Sans', sans-serif;
	text-transform: uppercase; text-align: center;
	color: #676767;
	margin-right: 10px;
	border: 1px solid #959595;
	background: #f1f1f1 url(../img/btn36_gray.png) top left repeat-x;
	cursor: pointer;
} /* padding + line-height + 4 = button height = 36px */

.customButton.btnS { width: 85px; }
.customButton.btnM { width: 125px; }
.customButton.btnL { width: 195px; }
.customButton.btnXL { width: 395px; }

.customButton.btnR.hover {
	color: #fff;
	border: 1px solid #730000;
	background: url(../img/btn36_red.png) top left repeat-x;
}

.customButton.btnG.hover {
	color: #fff;
	border: 1px solid #006b08;
	background: url(../img/btn36_green.png) top left repeat-x;
}

.customButton.btnB.hover {
	color: #fff;
	border: 1px solid #004973;
	background: url(../img/btn36_blue.png) top left repeat-x;
}

.modernBrowser .customButton.shadow { 
	text-shadow: 0 1px 1px #002C40;
  	-moz-box-shadow: 0px 1px 1px #676767;
  	-webkit-box-shadow: 0px 1px 1px #676767;
  	box-shadow: 0px 1px 1px #676767;
}

.flatButton {
	border: 0;
	border-radius: 8px;
	color: white;
}

.flatButton.btnR {background: #ff4646;}
.flatButton.btnG {background: #55a937;}
.flatButton.btnB {background: #0071d4;}

.flatButton.btnR.hover {background: #fa7979; border: 0;}
.flatButton.btnG.hover {background: #6fcf4c; border: 0;}
.flatButton.btnB.hover {background: #378cd6; border: 0;}

.flatButton.hover {border: 0;}
.modernBrowser .flatButton.shadow {text-shadow:none; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none;}
/* HINT, TAG, FLAG */
/* ------------------------------------------------------------------------------------------------------------------ */
.hint {
	width: 22px; height: 22px;
	
	position: relative; float: right; right: 10px; top: 5px;

	font: normal normal 700 11px/22px 'Open Sans', sans-serif; color: #fff;
	text-indent: 0px; text-transform: uppercase; text-align: center;
} 	/*display: inline-block;*/

.hintB {
	width: 22px; height: 22px;
	
	margin: 3px auto;
} 	/*display: inline-block;*/

.hintR { background: url(../img/iconR.png) top left no-repeat; }
.hintB { background: url(../img/iconB.png) top left no-repeat; }
.hintG { background: url(../img/iconG.png) top left no-repeat; }
.hintK { background: url(../img/iconK.png) top left no-repeat; }
.hintNo { background: url(../img/iconNo.png) top left no-repeat; }
.hintInfo { background: url(../img/iconInfo.png) top left no-repeat; }
.hintWarning { background: url(../img/iconWarning.png) top left no-repeat; }
.hintForbiden { background: url(../img/iconForbiden.png) top left no-repeat; }


.flag {
	width: 22px; height: 28px;
	
	position: relative; float: right; top: -2px; right: 10px;	

	font: normal normal 700 12px/22px 'Open Sans', sans-serif; color: #fff;
	text-indent: 0px; text-transform: uppercase; text-align: center;
}

.flagR { background: url(../img/flagR.png) top left no-repeat; }
.flagG { background: url(../img/flagG.png) top left no-repeat; }
.flagB { background: url(../img/flagB.png) top left no-repeat; }
.flagY { background: url(../img/flagY.png) top left no-repeat; }
.flagK { background: url(../img/flagK.png) top left no-repeat; }

/* TABLE */
/* ------------------------------------------------------------------------------------------------------------------ */
table {
	border: 2px solid #424242; /*padding: 2px;*/
	border-collapse: separate; /*collapse separate;*/
	border-spacing: 0px;
	font: normal normal normal 11px/13px 'Istok Web', sans-serif;
	color: #424242;
	background-color: #424242;
	width: 100%;
	margin-bottom: 18px;
}

table caption {
	padding: 5px 0 5px 0;
	text-transform: uppercase;
	font: normal small-caps normal 12px/18px 'Open Sans', sans-serif;
	color: #959595;
	text-indent: 10px;
	background-color: #424242;
}

/* rows */
.tableHeader { background: #676767 url(../img/table_header.png) bottom left repeat-x; }
.tableData { min-height: 30px; background: #eee; }
.oddRow { background: #fff; }
.cellwidth20 { width: 5%;}

/* cells col, colgroup */
th { 
	width: 20%;
	padding: 5px;
	font: normal normal normal 12px/18px 'Open Sans', sans-serif;
	color: #fff;
	text-transform: uppercase;
	text-align: left;
	border-top: 1px solid #959595;
	border-right: 1px dotted #424242;
	border-bottom: 1px solid #000;
}

td {
	padding: 5px;
	vertical-align: top;
	border-right: 1px dotted #959595;
	border-bottom: 1px dotted #959595;
}

.noBr { border-right: 0; }
.noBb { border-bottom: 0; }

/* table pop-up menu */
.tablePopupTrigger {
	position: relative;
	float: right;
	top: -5px; right: -5px;
	width: 18px; height: 18px;
	cursor: pointer;
}

.tablePopupTrigger0 {
	position: relative;
	float: right;
	top: 0px; right: 0px;
	width: 18px; height: 18px;
	cursor: pointer;
}

.tablePopupMenu {
	position: absolute;
	padding: 3px;
	background: #424242;
	z-index: 1000;
	display: none;
}

.tablePopupMenu ul,
.tablePopupMenu li {
	display: block;	/*clear: left;*/
}

.tablePopupMenu li a {
	display: block;
	padding: 3px 10px;
	font: normal normal normal 13px/18px 'Open Sans', sans-serif;
	color: #fff;
	text-decoration: none;
}

.tablePopupMenu li a:hover {
	color: #fff;
	background: #676767;
}

.tablePopupMenu .item_hover {
	color: #fff;
	background: #676767;
}

.ie6 table,
.ie7 table { border-collapse: collapse; margin-bottom: 18px; }

/* FOOTER */
/* ------------------------------------------------------------------------------------------------------------------ */
footer { padding: 18px 20px; }

#footerContainer { 
	font: normal normal normal 12px/18px 'Istok Web', sans-serif; 
	color: #999;
}

#footerContainer img { 
	top: -10px;
	left: 10px;
}

/* MODAL WINDOW */
/* ------------------------------------------------------------------------------------------------------------------ */
#modalWindow, .modalWindow {
	
	position: absolute;
	/*width: 740px;
	top: 150px;
	left: 50%;
	margin-left: -373px; /* window width / 2 */

	border: 3px solid #424242;
	background-color: #e5e5e5;
	z-index: 2000;
	/*display: none;*/
}

#modalWindowHeader {	
	height: 32px;
	border-top: 1px solid #959595;
	border-bottom: 1px solid #000;
	background: #676767 url(../img/table_header.png) bottom left repeat-x;
}

#modalWindowTitle {
	color: #fff;
	font-weight: 400;
	margin: 6px 0 0 10px;
}

.closeGlyph {
	width: 22px;
	height: 22px;
	position: absolute;
	margin: -11px 10px 0 -11px;
	top: 50%; right: 0px;
	cursor: pointer;
}

#modalWindowContent {	
	padding: 15px 10px 0 10px;
	border-top: 1px solid #fff;
}

#modalWindowButtons { margin-left: 10px; }

.modernBrowser #modalWindow, .modernBrowser .modalWindow { 
	-moz-box-shadow: 0px 1px 15px #000;
  	-webkit-box-shadow: 0px 1px 15px #000;
  	box-shadow: 0px 1px 15px #000;
}

#modalOverlay, .modalOverlay { 
	position: absolute; 
	top: 0; left: 0;
	display: none;
	background-color: #000; 
	opacity: 0.75;
	z-index: 1900;
}

.ie6 #modalOverlay, .ie6 .modalOverlay,
.ie7 #modalOverlay, .ie7 .modalOverlay,
.ie8 #modalOverlay, .ie8 .modalOverlay { filter: alpha(opacity=75); }

/* INFO POP-UP */
/* ------------------------------------------------------------------------------------------------------------------ */
.infoPopup { 
	position: absolute;
	border: 1px solid #cdcd00;
	z-index: 20000;
	cursor: pointer;
}

.infoPopupBox { 
	display: block;
	padding: 9px 0px 9px 9px;
	background: #ffffa0;
}

.infoPopup p { 
	font-size: 13px; 
	vertical-align: top;
	margin-left: 9px;
	padding-right: 9px;
	color: #6b6b00;
}

.arrow-1-t {
	width: 0; height: 0;
	top: -10px;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #ffffa0;
	margin-left: 10px;
}

.arrow-1-b {
	width: 0; height: 0;
	top: -11px;
	border-left: 11px solid transparent;
	border-right: 11px solid transparent;
	border-bottom: 11px solid #cdcd00;
	margin-left: 9px;
}


.arrow-2-t {
	width: 0; height: 0;
	bottom: -10px;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #ffffa0;
	margin-left: 10px;
}

.arrow-2-b {
	width: 0; height: 0;
	bottom: -11px;
	border-left: 11px solid transparent;
	border-right: 11px solid transparent;
	border-top: 11px solid #cdcd00;
	margin-left: 9px;
}

.targetMark { 
	border: 1px solid red;
	color: #000;
	background-color: #ffcccc; 
}


/* FANCY LIST ##########################################################################################################
*/
.fancyListBox { 
	display: block;
	margin-bottom: 18px;
	border-left: 1px solid #c3c3c3;
	border-right: 1px solid #c3c3c3;
}

.fancyListTitle {  overflow: hidden; 
	margin: 0;
	padding: 3px 0 3px 5px;
	background-color: #959595;
	color: #f1f1f1;
}

.fancyListItem {
	float: left;
	width: 100%;
	border-bottom: 1px solid #c3c3c3;
	background: url(../img/btn36_gray.png) top left repeat-x;
}

.fancyListLink {
	float: left;
	display: block;
	width: 250px;
	font-size: 12px;
	line-height: 14px;
	padding: 9px;
	color: #959595; 
}

.fancyListStatus { 
	float: left;
	font-size: 12px;
	line-height: 14px;
	padding: 9px;
	color: #676767;
}
/* FORMS ##########################################################################################################
*/

.form_row {
    width: 450px;
    font-size: 12px;
    margin-top: 3px;
   
}

.form_desc {
    width: 100px;
    float: left;
 }

.form_field {
    width: 350px
}

/* PAPER INFO ##########################################################################################################
*/

.pinfo .abstract {
    border-top: 1px solid black;
    padding: 4px;
}

.pinfo .abstract p {
    text-align: justify;
    font-size: 11px;
}
/** EVERYTHING ELSE ##############################################################
*/
.section_title {
    font-size: 26px;
    color: #999;
    font-weight: bold;
    text-align: right;
    width: 90%;
    position: absolute;
}

.issues_title {
    font-size: 12px;
    font-weight: bold;
    border-bottom: 1px solid #888;
}

.px9, .px9 p {font-size: 9px;}
.px10, .px10 p {font-size: 10px;}
.px11, .px11 p {font-size: 11px;}
.px12, .px12 p {font-size: 12px;}
.px14, .px14 p {font-size: 14px;}
.px20, .px20 p {font-size: 20px;}

.h10 {height: 10px;}
.h20 {height: 20px;}

.w40  { width:  40px; }
.w80  { width:  80px; }
.w110 { width: 110px; }
.w160 { width: 160px; }
.w200 { width: 200px; }
.w240 { width: 240px; }
.w300 { width: 300px; }
.w320 { width: 320px; }
.w400 { width: 400px; }
.w480 { width: 480px; }
.w560 { width: 560px; }
.w640 { width: 640px; }
.w720 { width: 720px; }
.w800 { width: 800px; }
.w880 { width: 880px; }
.w960 { width: 960px; }
.w1220 { width: 1220px; }

.shadowed {
 	-moz-box-shadow: 0px 1px 15px #000;
  	-webkit-box-shadow: 0px 1px 15px #000;
  	box-shadow: 0px 1px 15px #000;
}

.session_list a {
    color: black; 
    border: 1px solid gray; 
    margin: 2px; 
    padding: 2px;
}

.session_list a:hover {
    color: #eee; 
    background-color: black;
}

.editable {
   background: url(../img/editable_p.png) top right no-repeat; 
}


/* CUSTOM SYMBOL */
/* ------------------------------------------------------------------------------------------------------------------ */
/*
.symbol {
	position: relative;
	width: 22px;
	height: 22px;
}

.smblLeft { float: left; top: -2px; left: 9px; }
.smblRight { float: right; top: -2px; right: 59px; }

.smblTopLeft { float: left; top: 0px; left: -3px; }




.smblLeft { float: left; top: -2px; left: 9px; }
.smblRight { float: right; top: -2px; right: 59px; }

.smblTopLeft { float: left; top: 0px; left: -3px; }


.symbol2 {
	position: relative;
	float: left;
	top: -11px;
	left: -3px;
	width: 22px;
	height: 22px;
}
*/

 
/* SNIPPETS ------------------------------------------------------------------------------------------------------------
 
Positioning - float, margins, display, position 
.pos-defLeft {}

Dimensions - width, height, padding 
.dim-btnLarge {}

Skin - background, border, cursor
.skn-style1  {}

Event - everything that changes on special events
.evt-active1 {}

 testirat: input[type="text"] {color: lime;};

 div.foo { color: inherit;}
.ie6 div.foo { color: #ff8000; }

IE6 bug - double padding and margins on floated elements / use fix _margin or _padding, only IE6 will see it
	
background: -o-linear-gradient(top,  #006EA1,  #00577F);
background: -moz-linear-gradient(top,  #006EA1,  #00577F);
background: -webkit-linear-gradient(top,  #006EA1,  #00577F);
background: -ms-linear-gradient(top,  #006EA1,  #00577F);
background: linear-gradient(top,  #006EA1,  #00577F);

	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	
  	-moz-box-shadow: 0px 1px 15px #000;
  	-webkit-box-shadow: 0px 1px 15px #000;
  	box-shadow: 0px 1px 15px #000;	

IE9+ podrzava: box-shadow, border-radius / ne podrzava: text-shadow

pure block level: DIV, FIELDSET, FORM, H1..6, HR, P, PRE, UL
may be considered block level: LI
if inside inline or P then also inline: BUTTON
inline: IMG, A, LABEL, SELECT, SPAN, TEXTAREA, INPUT

IE6 does not understand -> float: inherit;

complex CSS selectors in jQuery work even if undelying browser does not understand them?!

Yes, the Node constructor function is not mandated to be visible at window level, and TEXT_NODE would 
normally be found only on the prototype, not the constructor. The ‘correct’ way would be this.nodeType==this.TEXT_NODE, 
however even that still doesn't work on IE, so typically you have to define your own var TEXT_NODE= 3;


/// clearfix

.group:after {
	visibility: hidden;
	display: block;
	content: ""; ili "/0020"
	clear: both;
	height: 0;
	}
* html .group             { zoom: 1; } IE6 // breaks validation of css?
*:first-child+html .group { zoom: 1; } IE7 

...ili kao bez haklanja...

The wrapper contains the float because – as per the spec – block formatting contexts always contain floats.
If you can apply a width to the element containing floats, then your best option is to use:

display: inline-block;
width: <any explicit value>;

.wrapper {
  width:740px;
  display:inline-block;
}

.mainContent {
  overflow:hidden;
}
--------------------------------------------------------------------------------------------------------------------- */