p, h1, h2, h3, h4, body, html { margin: 0; padding: 0 }
	
	body {
		background: white;
	}
	
	a {
		font-weight: bold;
		font-family: Arial, sans-serif;
		color: #ec008c;
		text-decoration: none;	
	}
	a:hover { color: #bd006f; }
	
	a img { 
	  border: none;
	}
	
	h2, .calendar th.monthName {
		font: italic bold 14px/30px Georgia, serif;
		color: #999;
	}
	
	h3, .calendar .dayName, .calendar .dayName abbr {
		font: normal 12px/20px Georgia, serif;
		color: #999;
		border-bottom: none;
	}
	
	p, li, blockquote {
		font: 12px/20px Arial, Helvetica, sans-serif;
	}
	
	.clr, .clear { clear: both; }
	  .clrl { clear: left; }
	.fl { float: left; }
	.fr { float: right; }
	.hint { font: 11px/15px Arial, helvetica, sans-serif; color: #666; }
	
	/*	Tooltip container */
	#tooltip {
		position: absolute;
		z-index: 8080;
		background: white; color: #666;
		padding: 10px;
		border: 1px solid #AAA;
		font: bold 12px/20px Arial, sans;
	}
	#tooltip span {
		font-weight: normal;
		font-size: 10px;
		line-height: 16px;
	}
	
	/*	Temp holder for records while they're dragged */
	#records {
		position: absolute;
		z-index: 4096;
	}
	
	
	/* == Top == */
	
	#top {
		height: 80px;
		background: url(/images/bkg_top.gif) repeat-x;
	}
	
	#head {
	  position: relative;
		height: 80px;
		width: 920px;
		margin: 0 auto;
		background: url(/images/bkg_head.jpg) no-repeat center bottom;
	}
		#head h1 {
			padding-top: 40px;
			padding-left: 20px;
			font: italic bold 18px/40px Georgia, serif;
			color: white;
		}
	
		#head #nav {
			position: absolute;
			top: 0px; left: 50%;
			padding: 0; margin: 0;
			margin-left: -460px;
			width: 560px; height: 30px;
			list-style: none none;
		}
			.head-nav li {
				float: left;
				padding: 0; margin: 0;
			}
				.head-nav li a {
					display: block;
					height: 29px;
					width: 100px;
					padding: 10px 0 0 20px; 
					color: white;
					font: bold 12px/30px Arial, Helvetica, sans-serif;
					text-align: left;
				}
					.head-nav li a:hover {
						background: #a90064;
						/*color: #ec008c;*/
						color: #fff;
					}
				.user-panel-nav li a {
					padding: 0 0 10px 20px;
					margin-top: 1px;
					height: 19px;
				}
				
    /* Home link for not logged-in users */
    #head a#home_link { position: absolute; z-index: 1000; right: 150px; top: 5px; width: 170px; height: 72px; outline: none; }
    #head a#home_link span { display: none; }
		
    /* Links for logged-in users */
		#head #user-panel {
			position: absolute;
			top: 0; left: 50%;
			margin-left: 140px;
			width: 320px; height: 80px;
			background: url(/images/bkg_user-panel.jpg) no-repeat;
		}
		
			#head #user-panel p {
				height: 33px;	width: 300px;
				padding-top: 7px; padding-left: 20px;
				font: italic 14px/30px Georgia, serif;
				color: white;
				overflow: hidden;
			}
			#head #user-panel ul {
				padding: 0; margin: 0;
				list-style: none none;
			}
			
	/* == Main content == */
	
	#mid {
		background: url(/images/bkg_mid.gif) repeat-x;
		padding-bottom: 20px;
	}
		
	#content {
		width: 920px;
		margin: 0 auto;
		position: relative;
		
	}
	
    #content h1 {
        width: 880px;
        padding: 20px 20px 0 20px;
        font: italic bold 18px/50px Georgia, serif;
        color: #ec008c;
    }
    
    #content p {
      padding:10px 20px;
    }
    

	/* == Front page == */
	#dock form p {
		padding-bottom: 0;
	}
	#dock form input[type="text"],
	#dock form input[type="password"] {
		width: 260px;
	}
	/* == Calendar items == */
	
	#draggables {
		position: absolute;
		right: 0; top: 50px;
		width: 320px;
		cursor: default;
		z-index: 8000;
	}
	
		#draggables .container { background: url(/images/dock/bkg_draggable_container_tile.gif) center left; }
		#draggables .top { padding: 10px 0 0 0;background: url(/images/dock/bkg_draggable_container_top.gif) no-repeat top left; }
		#draggables .bottom { padding: 0 0 10px 0; background: url(/images/dock/bkg_draggable_container_bottom.gif) no-repeat bottom left; }
			#draggables .container:hover { background-position: center right; }
			#draggables .container:hover .top { background-position: top right; }
			#draggables .container:hover .bottom { background-position: bottom right; }
			#draggables .container h2, #draggables #legend h2 { background: white; padding-left: 18px; }
	
	
		#draggables p {
			position: relative;
			padding: 0 0 0 16px;
		}
	
		#draggables p .description {
			padding-left: 5px;
		}
	
		#draggables .halfcontainer {}
		#draggables .halfcontainer .top { padding: 10px 0 0 0;background: url(/images/dock/bkg_plain_container_top.gif) no-repeat top left; }
		#draggables .halfcontainer .bottom { background: none }
		

	.calendar {
		text-align: center;
		cursor: default;
	}
		.calendar tr {
		  display: block;
		}
		
		.calendar thead {
			height: 80px;
		}
	
		.calendar thead tr {
			height: auto;
		}
	
		.calendar td, .calendar th {
			vertical-align: top;
			padding: 0;
		}
	
		.calendar th a.prev-month, .calendar th a.next-month {
			display: block;
			padding-top: 20px;
			height: 30px;
			width: 140px;
			text-align: center;
			line-height: 30px;
			font-size: 12px;
			outline: none;
		}
		.calendar th a.prev-month {
			text-align: left;
			padding-left: 20px;
		}
		.calendar th a.next-month {
			text-align: right;
			padding-right: 20px;
		}
	
		.calendar thead .monthName {
			width: 240px;
			line-height: 30px;
			height: 30px; padding-top: 20px;
			text-align: center;
		}
	
		.calendar thead .dayName th {
			height: 30px; width: 80px;
			line-height: 30px;
		}
			/* Lol at soft patch */
			.calendar abbr[title="Četrtek"]:after {
				content: "t";
			}
	
		.calendar tbody tr {
		  height: 80px;
		  clear: both;
		}
		.calendar tbody td {
		  /*
		  FIXME No idea how this came here. It caused IE8 to break calendar layout
			display: block;
			float: left;
			position: relative;
			*/
			width: 80px; height: 80px;
			font: normal 10px/20px Verdana, Geneva, sans-serif;
			background: url(/images/calendar/bkg_day.gif);
		}
			.calendar tbody td .num {
				display: block;
				height: 20px;
			}
	
		.calendar tbody td.day {
			background-position: 0px -80px !important;
		}
			.calendar tbody td.day .num {
				font-weight: bold;
				color: #999;
			}
	
			.calendar tbody td.day:hover .num {
				color: black;
			}
	
		.calendar tbody td.weekendDay {
			background-position: 0px -160px !important;
		}
	
		.calendar tbody td.today {
			background-position: 0px -240px !important;
		}
			.calendar tbody td.today .num {
				color: black;
			}
	
		.calendar tbody td.drophover {
			background-position: 0px -320px !important;
		}
			.calendar tbody td.drophover .num {
				color: black;
			}
	
		.calendar tbody td.otherMonth {
			color: #DDD;
			background-position: 0px 0px !important;
		}
		
		.calendar tbody td .container {
			width: 60px; height: 20px;
			padding: 10px;
		}
  		.calendar tbody td .draggables-container {
  		  padding-bottom: 0;
  		}
  		.calendar tbody td .notifications-container {
  		  padding-top: 0;
  		}
		
		.calendar tbody td.predicted-fertility .draggables-container {
			background: url(/images/calendar/bkg_predicted-fertility.gif) 0 -20px;
		}
		.calendar tbody td.predicted-fertility .notifications-container {
			background: url(/images/calendar/bkg_predicted-fertility.gif) 0 -50px;
		}
		
		.calendar tbody td.predicted-bleeding .draggables-container {
			background: url(/images/calendar/bkg_predicted-bleeding.gif) 0 -20px;
		}
		.calendar tbody td.predicted-bleeding .notifications-container {
			background: url(/images/calendar/bkg_predicted-bleeding.gif) 0 -50px;
		}
	
	.draggable, .icon {
		display: block;
		float: left;
		width: 20px; height: 20px;
	}
	.draggable {
		cursor: move;
	}
	.draggable:hover {
		background-position: -20px 0;
	}
	
		.bleeding-3 { background: url(/images/icons/bleedings.gif) left 0; }
			.bleeding-3:hover { background-position: right 0; }
		.bleeding-2 { background: url(/images/icons/bleedings.gif) left -20px; }
			.bleeding-2:hover { background-position: right -20px; }
		.bleeding-1 { background: url(/images/icons/bleedings.gif) left -40px; }
			.bleeding-1:hover { background-position: right -40px; }
	
		.pain-3 { background: url(/images/icons/pains.gif) left 0; }
			.pain-3:hover { background-position: right 0; }
		.pain-2 { background: url(/images/icons/pains.gif) left -20px; }
			.pain-2:hover { background-position: right -20px; }
		.pain-1 { background: url(/images/icons/pains.gif) left -40px; }
			.pain-1:hover { background-position: right -40px; }
	
		.visit-0 { background: url(/images/icons/visits.gif) left 0; }
			.visit-0:hover { background-position: right 0; }
	
		.print-page { background: url(/images/icons/print-page.gif) 0 0; }
	
		.predicted-reminder { background: url(/images/icons/predicted-reminder.gif) 0 0; }
		.predicted-ovulation { background: url(/images/icons/predicted-ovulation.gif) 0 0; }
		.predicted-fertility { background: url(/images/icons/predicted-fertility.gif) 0 0; }
		.predicted-bleeding { background: url(/images/icons/predicted-bleeding.gif) 0 0; }
		
		.moonphase-0 { background: url(/images/icons/moonphase-0.gif) 0 0; }
		.moonphase-1 { background: url(/images/icons/moonphase-1.gif) 0 0; }
		.moonphase-2 { background: url(/images/icons/moonphase-2.gif) 0 0; }
		.moonphase-3 { background: url(/images/icons/moonphase-3.gif) 0 0; }
		.moonphases { background: url(/images/icons/moonphases.gif) 0 0; }
		
/* == Front page == */

#content .intro {
  font: bold 14px/20px Arial, helvetica, sans-serif;
  color: #888;
}

/* Features */
#content #features h2 { color: #EC008C; font-size: 17px; margin-left: 20px; }

#content ul.features { list-style: none none; margin: 20px 0 0 20px; padding: 0; }
#content ul.features li { float: left; width: 170px; }
  #content ul.features li img { border: 1px solid #ccc; }
  #content ul.features li h3 { 
    font: italic bold 14px/30px Georgia, serif;
  	color: #EC008C;
  }
  
  #content ul.features li p {
    margin: 0; padding: 0;
  }


/* == Article == */

	#article {
		background: url(/images/bkg_article.gif) no-repeat 0 60px;
		overflow: hidden;
		min-height: 230px;
	}
	
	#content h1 {
		width: 880px;
		padding: 30px 20px 0 20px;
		font: italic bold 18px/30px Georgia, serif;
		color: #ec008c;
	}
	
	#article .images {
		float: right;
		width: 320px;
		padding: 0;
	}
	
	#article .images p {
		margin: 0 !important;
		padding: 0 !important;
	}
	
	#article .description {
		width: 520px;
		padding: 10px 20px;
		text-align: justify;
	}
	
	  .source,
	  #article .source,
	  #article .category {
	  	width: 520px;
		padding: 0 20px;
		color: #666;
	  }
	
	
	#errors,
	#notice {
	  font: bold 14px/20px Arial, helvetica, sans-serif;
	  width: 920px;
	  margin: 0 auto;
	  padding: 40px 0 20px 0;
	  color: #00aeef;
	  text-align: center;
	}	
	
	  .fieldWithErrors { margin-left: 20px; }
	  .fieldWithErrors input { border: 1px solid #EC008C; }
	
	#article-show {
		width: 560px;
		background: url(/images/bkg_article-show.gif) 0 60px no-repeat;
	}
	
	h1 {
		width: 540px !important;
	}
	
	#content #article-show h2 {
		padding-left: 20px;
	}
	#content #article-show ul {
		padding-right: 20px;
	}
	
	#content #article-show .images {
    /* float: left;*/
		width: 320px;
		min-height: 300px;
		padding: 15px 15px 0 20px !important; margin: 0 !important;
	}
		#content #article-show .images p {
			padding: 0; margin: 0;
		}

/* Signin & Register */

#signin h2 a,
#register h2 a {
}



/*	Articles */

	#dock {
		width: 320px;
		float: right;
		padding-top: 20px;
	}
	.related {
		background: url(/images/dock/bkg_plain_container_top.gif) 0 40px no-repeat;
	}
		.related h2 {
			padding: 10px 20px 0 20px;
			line-height: 30px;
		}
		.related ul {
			list-style: none none;
			margin: 0; padding: 10px 0 0 20px;
		}

	#content .articles,
	#content .group {
		padding-top: 5px;
		background: url(/images/bkg_category.gif) no-repeat;
		width: 560px;
	}
	
	#content .articles h2,
	#content .group h2 {
		padding: 0 20px;
		line-height: 30px;
	}	
		#content .articles h2 a {
			font: bold 12px Arial, Helvetica, sans-serif;
		}
		
	#content .articles p,
	#content .group p {
		padding-top: 0;
	}
	
	  #content .group ul { margin: 0 0 10px 50px; padding: 0; }
	
/* == Product listing == */

.products {
	list-style: none none;
	margin: 0 !important;
	padding: 0 !important;
	padding-top: 20px !important;
}
	.products li {
		position: relative;
		margin: 0 !important;
		padding: 0 0 20px 20px !important;
	}
	
	.products li .description {
		position: absolute;
		top: 0px; left: 280px;
		width: 260px;
		padding-right: 20px;
		padding-top: 10px;
		text-align: justify;
	}
	
#dock .checklist {
	padding: 10px 20px 0 20px;
	list-style-type: circle;
}
#dock .checklist li {
	margin-left: 10px;
}

/* == Reports for gynecologist == */

#report {
	background: url(/images/bkg_article-show.gif) 0 60px no-repeat;
}

#report table {
  margin: 0;
  padding: 10px 20px 40px 20px;
  font: 12px/20px Arial, Helvetica, sans-serif;
  width: 880px;
}

  #report table th.year {
    text-align: left;
    padding-top: 20px;
  }
  
  #report table th.day {
    text-align: center;
    padding-top: 20px;
  }
  
  #report table th.month {
    text-align: left;
    border-top: 1px solid #e5e5e5;
  }

  #report table td {
    width: 20px;
    padding: 2px;
    background: url(/images/calendar/bkg_report_cell.gif) no-repeat;
  }

	#report table tr.ts td{
		background: url(/images/calendar/bkg_report.gif) repeat-x;
		padding-top: 10px;
	}

  #report table div { /* placeholder for icons */
    width: 20px;
    height: 20px;
  }

  #report table td {
    height: 24px;
  }
  
  #report #legend {
    margin-left: 20px;
  }
  
    #report #legend p { padding: 2px 0; }
    #report #legend img { float: left; margin-right: 5px; }
  
  /* Override default icon rollover */
  #report .draggable { cursor: default; }
  
  #report .bleeding-3:hover { background-position: left 0; }
	#report .bleeding-2:hover { background-position: left -20px; }
	#report .bleeding-1:hover { background-position: left -40px; }
	#report .pain-3:hover { background-position: left 0; }
	#report .pain-2:hover { background-position: left -20px; }
	#report .pain-1:hover { background-position: left -40px; }
	#report .visit-0:hover { background-position: left 0; }  

#report .container {
  float: left;
  width: 260px;
}

#report #pains {
  position: absolute;
  left: 250px;
}

#report #other {
  position: absolute;
  left: 470px;
}
  
/* == Footer == */
  
#bot {
	clear: both;
	height: 80px;
	padding-top: 40px;
	padding-bottom: 20px;
	background: url(/images/bkg_bot.gif) repeat-x;
}

	#foot {
		width: 920px;
		margin: 0 auto;
		position: relative;
		height: 80px;
	}
	
		#foot #copy {
			width: 560px;
			padding-top: 40px;
			line-height: 30px;
			text-align: right;
			color: #999;
		}
		
		  #foot #copy a.author { color: #999; }
		  #foot #copy a.author:hover { color: #BD006F; }
	
		#foot #logo {
			position: absolute;
			top: 0; right: 160px;
			width: 160px; height: 80px;
			background: url(/images/logo.gif) no-repeat;
		}
			#foot #logo span {
				display: none;
			}