/*
	Company: Institut za tranfuziju krvi Srbije, http://www.nbti.org/
	Date (create): 22-09-2007
	Date (update): 06-10-2007
	
	******************************
	*****      Index       *****
	******************************
	ID: 
		#contents
*/



/* 
	************************************
	***** 		#CONTENTS 		 *****
	************************************
	Class:
		0. Ilustration
		1. ticker
		2. main
*/

#contents ul, #contents li ul { list-style: none; margin: 0px; padding: 0px;}
#contents { clear: both; }
#contents li { float: left; overflow: hidden;}
#contents li ul li { display: block; text-align: left;}

#contents {	
 	background: #ffffff;
}

/* Glavni boxovi */
#contents .left {
	width: 240px; 
	overflow: hidden;
	margin-right: 20px;
}

/* Centre box */
#contents .center {
	width: 613px;
	text-align: left;
}


/* 
	************************************
	***** 		BOX #navigation 		 *****
	************************************
	Class:
		1. title
		2. text
		2.1. a
		2.2. a.sec
*/
#navigation {
	width: 240px;
	padding: 0; margin: 0px;
	text-align: left;
}
#navigation li {
	width: 240px; /*height: 32px;*/
	background: url(../../img/bg_nav_list.gif) bottom no-repeat;
	display: block; clear: both;
	padding-bottom: 10px;
	font-weight: bold;
}
#navigation .more {
	text-align: left;
	background: transparent;
}
#navigation .more a, #navigation .more a:hover {
	background: transparent;
}
#navigation a {
	color: #333333; 
	display: block;
	margin: 5px 0 0px 0; line-height: 15px;
	padding: 0 0 4px 27px;
	background: url(../../img/icon_heart_g.gif) 7px 0 no-repeat;
}
#navigation a:hover {
	color: #ca0404;
	background: url(../../img/icon_heart_r.gif) 7px 0 no-repeat;
	text-decoration: none;
}
	/* Secondary  */
#navigation .sec,
#navigation .nd {
	margin: 0; line-height: 12px;
	padding: 0 0 0 10px;
	background: transparent;
	color: #555555;
}
#navigation .sec a,
#navigation .nd a {
	color: #555555; margin: 0;
	background: url(../../img/icon_subnav.gif) 10px 5px no-repeat;
}
#navigation .sec a:hover,
#navigation .nd a:hover {
	color: #CA0404;
	background: url(../../img/icon_subnav_on.gif) 10px 5px no-repeat;
}
	/* Third */
#navigation .third, 
#navigation .rd {
	margin: 0; line-height: 12px;
	padding: 0 0 0 25px;
	background: transparent;
	color: #555555;
}
#navigation .third a,
#navigation .rd a {
	color: #555555; margin: 0;
	background: url(../../img/icon_subnav2.gif) 10px 5px no-repeat;
}
#navigation .third a:hover,
#navigation .rd a:hover {
	color: #CA0404;
	background: url(../../img/icon_subnav2_on.gif) 10px 5px no-repeat;
}
	/* Fourth */
#navigation .fourth,
#navigation .th {
	margin: 0; line-height: 12px;
	padding: 0 0 0 40px;
	background: transparent;
}
#navigation .fourth a,
#navigation .th a {
	color: #555555; margin: 0;
	background: url(../../img/icon_subnav2_on.gif) 10px 5px no-repeat;
}
#navigation .fourth a:hover,
#navigation .th a:hover {
	color: #CA0404;
	background: url(../../img/icon_subnav2_on.gif) 2px 5px no-repeat;
}

/* LEFT */
#contents .left .snippet {
	width: 240px; 
	padding: 10px 0 10px 0;
	text-align: center;
}

/* 
	************************************
	***** 		BOX #content_page		 *****
	************************************
	Class:
		0. location
		1. h1, h2, h3
		2. text
			2.1. date
			2.2. name
			2.3. ul li
			2.4. images

*/
#content_page {
	width: 100%;
	padding: 0; margin: 0;
	text-align: left;
}
#content_page .title {	
	background: url(../../img/bg_h1.jpg) 0 3px no-repeat;
	margin: 0px;
	padding-left: 30px;
}
#content_page h1 {	
	clear: left;
	font-size: 26px; line-height: 34px;
	color: #ca0404; text-align: left;
	padding: 0; margin: 0;
}
#content_page h2 {	
	font-size: 18px; line-height: 20px;
	color: #ca0404;
	margin: 20px 0 10px 0; padding: 0;
}
#content_page h3 {	
	font-size: 16px; line-height: 16px;
	margin: 20px 0 5px 0; padding: 0;
}
#content_page p {	
	padding: 0 0 10px 0; margin: 0;
}
#content_page .location {
	padding: 0px 0 10px 0px;
}
#content_page .text {
	width: 100%;	/* ??? nesto ga tera 5px  */
	padding: 0px 0px 10px 0; margin: 0 0 10px 0;
	text-align: justify;
	color: #333333; font-size: 13px; line-height: 18px;
	clear: both;
}
#content_page .textLine {
	width: 100%;	/* ??? nesto ga tera 5px  */
	padding: 0px 0px 10px 0; margin: 0 0 10px 0;
	text-align: justify;
	color: #333333;
	clear: both;
	background: url(../../img/bg_text.gif) bottom no-repeat;
}

	/* podeljen text na dva boxa, koristis za kontakt */
#content_page .text_left {	
	float: left;
	width: 340px;
	margin-right: 20px;
}
#content_page .text_right {	
	float: left;
	width: 253px;
	padding: 0; margin: 0;
}
#content_page .text_right .text {  text-align: left; }

#content_page .text img {
	border: solid 1px #cfcece;
	padding: 2px; margin-right: 10px;
}

/* Ostalo za text */
#content_page .date {	
	clear: both; 
	font-weight: bold;
}
#content_page .name {	
	clear: both; float: right;
	font-weight: bold;
}
#content_page .short_description {	
	width: 100%;	/* ??? nesto ga tera 5px  */
	padding: 0px 0px 10px 0; margin: 0 0 10px 0;
	text-align: justify;
	color: #333333;
	clear: both;
	font: 12px/18px tahoma, arial, helvetica, sans-serif;
	font-style: italic; /*font-weight: bolder;*/
}


/* A linkovi */
#content_page .text a {	
	color: #ca0404;
	text-decoration: none;
}
#content_page .text a:hover {	
	color: #666666;
	text-decoration: underline;
}
#content_page .text a.more {	
	clear: right; float: right;
	font-weight: bold;
}
#content_page .text .top {	
	background: url(../../img/icon_top.jpg) 0 0 no-repeat;
	float: right;
	width: 22px; height: 28px;
	text-indent: -9999px;
}

/* Lista */
#content_page .text ul {
	float: none; margin: 10px 0 10px 20px;
	clear: both;
}
#content_page .text ul li {	
	float: none; display: list-item;
	margin: 0;
	padding: 2px 0 0 20px;
	background:  url(../../img/icon_li.gif) 0 6px no-repeat; 
}
#content_page .text ol {	
	float: none; margin: 10px 0 10px 0px;
	padding: 0 0 0 40px;
	clear: both;
}
#content_page .text ol li {	
	list-style: decimal; overflow: visible;
	float: none; display: list-item;
	margin: 0; 	padding: 0;
}

/* IMAGES */
#content_page .images {
	display: block;
	margin: 15px 0;
	font-size: smaller;
	text-align: left;
}
#content_page .images.imgLeft {
	float: left;
	width: 50%; margin-right: 20px 
}
#content_page .images.imgRight {
	float: left;
	width: 50%; margin-right: 20px 
}
#content_page .images .none img {
	border: solid 1px #cfcece;
	padding: 2px;
}
/* small */
#content_page .images .img {
	width: 100px; height: 60px;
	display: block;
	overflow: hidden;
	border: solid 1px #cfcece;
	padding: 2px; margin-right: 10px;
	float: left;
}
#content_page .images .img .none {
	display: block;
	width: 100px; height: 60px;
	overflow: hidden;
}
#content_page .images .img .none img { border: none; padding: 0;}

/* Document */
#content_page .document {
	float: left; clear: both;
	/*height: 40px; */
	margin: 0 10px 10px 0; padding: 0;
/*	background: url(../../img/bg_download.gif) right no-repeat;*/
}
#content_page .document a.more {
	/*height: 25px;*/ display: block; float: left;
	padding: 5px 20px 5px 40px; min-height: 25px;
	background: #ca0404 url(../../img/icon_download_start.png) 10px 5px no-repeat;
	color: #ffffff; line-height: 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;	
-webkit-box-shadow: 2px 2px 2px 2px rgba(255,255,255,255);
box-shadow: 2px 2px 2px 2px rgba(255,255,255,255);
}
#content_page .document a.more:hover { text-decoration: none; color: #FF8888; }

/* TABLE */
#content_page table {
	border-right: solid 1px #CECECE;
	border-bottom: solid 1px #CECECE;
}
#content_page table td {
	padding: 0 0 0 2px;
	border-left: solid 1px #CECECE;
	border-top: solid 1px #CECECE;
	text-align: left;
}
#content_page .noborder table
, #content_page  .noborder table td
 {
	border: none;
}

/* FORM */ 
#content_page select {
	height: 20px; min-width: 50px;
	border: solid 1px #666666;
	margin:  0px 5px 0px 5px;
	padding: 0px 0px 0px 3px;
	vertical-align: middle;
}
#content_page option {
	margin: 0px;
	padding: 2px 10px 0px 3px;
	color: #666666;
}
#content_page input, #content_page textarea  {
	border: none;
	margin:  0; padding: 7px;
	vertical-align: middle;
	outline: none;
}
#content_page input {
	height: 15px;
}
#content_page input.button {
	background: #ca0404;
	border: solid 1px #CFCECE;
	width: 30px; height: 25px;
	color: #ffffff;
	vertical-align: middle;
}

/* Contact */
#content_page ul.contact 
,#content_page ul.form { 
	float: left; list-style: none;
	margin: 0; padding: 0;
	width: 100%; 
}
#content_page .contact li
, #content_page .form li
 { 
	list-style: none;
	margin: 0; padding: 0px; 
	float: left;
}
#content_page .contact .name {
	clear: both; font-weight: bold;	
	width: 100%; margin-top: 10px;
}
#content_page .contact input {
	width: 326px; 
	background: url(../../img/bg_contact_input.gif) 0 0 no-repeat; 
}
#content_page .contact textarea {
	width: 326px; height: 126px;
	background: url(../../img/bg_contact_textarea.gif) 0 0 no-repeat; 
}
#content_page .contact .button {
	width: 115px; height: 37px;
	color: #ffffff; 	font-weight: bold;
	background: url(../../img/bg_button.gif) 0 0 no-repeat;
	border: none;
	cursor: pointer;
	text-align: center;
}


/* Download */
#content_page ul.download  { 
	float: left; list-style: none;
	margin: 0 0 20px 0; padding: 0;
	width: 100%; 
}
#content_page .download li { 
	list-style: none;
	margin: 0; padding: 0px; 
	float: left;
}
#content_page .download .img { 
	width: 90px; height: 60px;
	padding-right: 10px;
	overflow: hidden;
	float: left;
}
#content_page .download .data { 
	width: 500px;
	padding-left: 5px;
	border-left: solid 1px #cecece;
	float: left;
	clear: none;
}
#content_page .download .data .name {
	padding-left: 10px; 
	clear: both;
	float: left;
} 
#content_page .download .data .date {
	width: 200px;
	padding-left: 10px; 
	float: left;
	color: #CA0404;
} 

/* Video */
#content_page ul.video  { 
	float: left; list-style: none;
	margin: 0 7px 20px 0; padding: 0;
	width: 250px; /* width: 278px;  */
	height: 180px;
	background: url(../../img/bg_video.jpg) 0 0 no-repeat;
	padding: 0px 14px 0 14px;
}
#content_page .video li { 
	margin: 0px; padding: 0px;
	list-style: none;
	float: left; clear: both;
	overflow: hidden; display: block;
}
#content_page .video .img { 
	width: 246px; height: 86px;
	margin-top: 14px;
	border: solid 2px #ffffff;
	position: relative;
	visibility: visible; 
	overflow: hidden;
}

#content_page .video .data { 
	width: 195px; height: 30px;
	padding: 10px 0px 0px 65px;
	line-height: 14px;
}
#content_page .video .data a {
	font-weight: bold;
	color:  #333333;
}
#content_page .video .data a:hover {
	color:  #CA0404;
	text-decoration: none;
}

/* Archive, search */
#content_page .archive, #content_page .archive  { 
	clear: both;
	margin: 5px 0px 5px 0px;
	padding: 10px 0 10px 0;
	display: block; float: left;
	width: 100%; /*height: 35px;*/
}
#content_page .archive li {
	width: 100%;
	margin: 0px; padding: 0;
	font: 12px/18px tahoma, arial, helvetica, sans-serif;
	font-weight: bold; 
}
#content_page .archive  li.search {
	text-align: left;
}
#content_page .archive  li.search .on {
	float: left; display: block;
	color: #CA0404;
	padding: 5px 5px 2px 5px;
}
#content_page .archive  a {
	float: left;
	padding: 5px 5px 2px 5px;
	color: #000000;
}
#content_page .archive a:hover {
	color: #ca0404; text-decoration: none;
}
#content_page .archive a.next {
	padding: 0; margin: 0;
	width: 30px; height: 29px;
	overflow: hidden; display: block;
	text-indent: -999px;
	background: url(../../img/icon_next.gif) no-repeat;
}
#content_page .archive a.back {
	padding: 0; margin: 0;
	width: 30px; height: 29px;
	overflow: hidden; display: block;
	text-indent: -999px;
	background: url(../../img/icon_back.gif) no-repeat;
}



/* Site map */
#content_page .navigation li {
	width: 100%;
	background: url(../../img/bg_text.gif) bottom no-repeat;
	padding: 10px 0 15px 0;
}
#content_page .navigation  a {
	color: #333333;	font-weight: bold;
	display: block;
	padding-left: 20px;
	background: url(../../img/icon_heart_g.gif) 0 0 no-repeat;
}
#content_page .navigation a:hover {
	color: #ca0404;
	background: url(../../img/icon_heart_r.gif) 0 0 no-repeat;
	text-decoration: none;
}
	/* Secondary  */
#content_page .navigation .sec {
	line-height: 15px;
	background: transparent;
	padding: 4px 0 4px 20px;
}
#content_page .navigation .sec a {
	color: #555555;
	background: url(../../img/icon_subnav.gif) 2px 5px no-repeat;
}
#content_page .navigation .sec a:hover {
	color: #CA0404;
	background: url(../../img/icon_subnav_on.gif) 2px 5px no-repeat;
}
	/* Third */
#content_page .navigation .third {
	line-height: 15px;
	background: transparent;
	padding: 2px 0 2px 40px;
}
#content_page .navigation  .third a {
	color: #555555;
	font-weight: normal;
	background: url(../../img/icon_subnav2_on.gif) 2px 5px no-repeat;
}
#content_page .navigation .third a:hover {
	color: #CA0404;
	background: url(../../img/icon_subnav2_on.gif) 2px 5px no-repeat;
}
	/* Fourth */
#content_page .navigation .fourth {
	line-height: 15px;
	background: transparent;
	padding: 5px 0 5px 60px;
}
#content_page .navigation .fourth a {
	font-weight: normal;
	background: url(../../img/icon_subnav2.gif) 2px 5px no-repeat;
}
#content_page .navigation .fourth a:hover {
	background: url(../../img/icon_subnav2_on.gif) 2px 5px no-repeat;
}

/* Poll */
#content_page #poll {
	width: 200px;
}
#content_page #poll table
, #content_page #poll tr
, #content_page #poll td {
	border: none;
	background: #ffffff; color: #333333;
	font: 11px/18px tahoma, arial, helvetica, sans-serif;
}
#content_page #poll img
, #content_page #poll .none  {
	padding: 0px; margin: 0px;
}
#content_page #poll .button {
	width: 115px; height: 37px;
	color: #ffffff; 	font-weight: bold;
	background: url(../../img/bg_button.gif) 0 0 no-repeat;
	border: none;
	cursor: pointer;
	text-align: center;
}



/* Google */ 
#content_page .google {
	width: 208px; height: 150px; 
	overflow: hidden; clear: both;
}
#content_page #google {
	width: 100px; height: 50px; 
	overflow: hidden;
	color: #000;
} 
#content_page #google h3 {
	color: #000;
}


/* +60px */
@media screen and (min-width: 1200px) {
	.page_width {
    	width: 1020px!important;
	}
	#header .content {
   	width: 765px!important;
	}
	#contents .center {
    	width: 750px!important;
	}
	#contents .news .odd, #contents .news .even {
    	width: 320px!important;
	}
}