/* $Id: main.css,v 1.43 2008/05/04 17:36:42 alankralj Exp $ */
body {
	padding: 0;
	margin: 0;
	font-family: Verdana, Tahoma, Arial, sans-serif;
	font-size: 75%;
	line-height: 1.3em;
	color: #333;
	text-align: center;
	background-color: #e3e3e3;
}

div#container {
	text-align: left;
	width: 980px;
	margin: 0 auto;
	background: url(/img/pageBG.gif) repeat-y right top;
}


div#content {
	background: #fff url(/img/contentBG.gif) repeat-y left top;
	margin-right: 6px;
	border: 1px solid #aaa;
}


/* --------[ common elements ]-------- */

h1, h2 {
	margin: 0 0 1em; font: normal 2.35em/1.5em Arial, sans-serif; color: #7e96ad; letter-spacing: -2px; 
}

h1 { background: url(/img/h1BG.gif) no-repeat left bottom; padding-bottom: .3em; }
h2, .form h1 { font-size: 1.8em; line-height: 1.3em; padding: 0; margin: 1.5em 0 .5em; letter-spacing: -1px; }

p { margin: 0 0 1em 0; }
	p.emp { font-size: 1.2em; font-weight: bold; line-height: 1.3em; color: #555;}
	p.error { font-size: 1.2em; font-style: italic; color: red; }
	p.desc { margin: .35em 0 0; font-size: .85em; line-height: 1.3em; color: #666; }
	p.alert { color: #d9643b; }
	
img { margin: 0; vertical-align: middle; }

a { font-weight: bold; text-decoration: none; }
	/*a:link { color: #d9643b; }
	a:visited { color: #c7a89d; }*/
	a:link, a:visited { color: #d9643b; }
	
	a:hover { text-decoration: underline; color: #777; }
a img { border: 0; } 

	a.icon { margin: 2px 0 0 3px; }
	a.icon img { background-image: url(/img/iconBG.gif); background-repeat: no-repeat; background-position: 0 center;}
	a.icon.emp img { background-image: url(/img/iconBGemp.gif); }
	a.icon:hover img { background-position: -980px center; }
	


ul, ol { list-style-type: none; margin: 0; }
	ol.ord { margin-left: 2em; list-style-type: decimal; }
	ul.ord { margin-left: 2em; list-style-type: square; }
		ol.ord li, ul.ord li { font-size: 1.2em; line-height: 1.3em; margin-bottom:1em ; font-weight: bold; color: #e48d6f; }
	.ord li span { font-size: .9em; font-weight: normal; color: #3f3f3f; }

	ul.ord.step { margin-top: -1em; margin-left: 0; padding: 0; }
	ul.ord.step li { display: block; float: left; width: 200px; font-size: 1.5em; color: #FFD5C7; }
	ul.ord.step li span { font-size: .7em; color: #aaa; }
		ul.ord.step li.active { color: #D9643B; }
		ul.ord.step li.active span { color: #3f3f3f; font-weight: bold; }


dt {
	font-size: 1.2em;
	font-style: italic;
	margin: 0 0 .35em;
	color: #555;
}	
	
dd {
	margin: 0 0 1.5em;
}	
	
div.clear { clear:both; }
	div.clear.brd {
		border-bottom: 3px solid #fff;
		width: 270px;
	}

.hidden { display: none; }

.emp {
	font-size: 12px;
}

.imp { color: red; }

.nl { display: block; margin: 1em 0; }

.oneliner { white-space: nowrap; }


/* --------[ forms & controls ]-------- */

form { margin: 0; }

label {
	display: block;
	font-size: 12px;
	font-weight: bold;
	color: #777;
	margin: 0 0 4px;
	clear: both;
	position: relative;
}

label span { color: #d9643b; }
label em { font-weight: normal; }
	label em span { font-weight: bold }
span.emp { color: #7e96ad }

span.emp.star { color: #d9643b; }

input, select, textarea { 
	border: 1px solid #aaa; 
	font-size: 14px; 
	background: #fff; 
	padding: 2px 0; 
	/*width: 90%; */
	width: 260px;
	margin-bottom: 2px;
}

select {
	padding: 0;
}

textarea {
	width: 430px;
}

	input.submit, input.command {
		border: 1px solid #fff; 
		float: left; 
		background: #d9643b; 
		font-size: 1em; 
		line-height: 1.2em; 
		color: #fff; 
		padding: .3em .25em; 
		display: block; 
		margin: 15px 10px 5px 0; 
		width: auto; 
		cursor: pointer;
	}
	
	input.single { float: none; margin: 15px auto 5px; }
	
	input.command { margin-top: 0; margin-right: 0;  }

	input.reset, input.command.noimp, input.command.noimp:focus  { background-color: #999; }

input:focus, textarea:focus { background-color: #FDF5F2; }
input:hover, textarea:hover, select:hover { border-color: #000; }
	
	input.submit.disabled { background-color: #D8CAC5; color: #fff; cursor: auto; }
	input.submit.disabled:hover, input.submit.disabled:focus { border-color: #fff; }
	
	input.submit:focus, input.command:focus { background-color: #d9643b; }
	input.reset:focus { background-color: #999; }
	input.radio:focus { background-color: #fff; }
	.chk input:focus { background-color: #fff; }
	
input.r { float: right; margin-left: .35em; }




/* --------[ header ]-------- */

div#header {
	padding: .5em .5em .5em;
	background: #e3e3e3;
}
	div#header h3 {
	font-size: 1.2em; margin: 0; padding: .15em 0 0; color: #888; float: left;
	}
	
	div#header h3 span { display: block; font-weight: normal; color: #666; margin: .1em 0 0; font-size: .85em; line-height: 1.1em; }

	a.sIcon:link, a.sIcon:visited {
		font-size: .85em;
		padding: .35em 0 .2em 0;
		background: no-repeat left center;
		color: #d9643b;
		float: right;
		font-weight: bold;
		margin: 0 1em;
	}
	
	#container #languages { width: 70px; float: right; margin: .3em 0 .3em 2em; }
		#languages img { border: 0; margin: 0; width: 26px; height: 13px; padding: 0; }
		#languages a:link, #languages a:visited { margin: 0 0 0 3px; border: 1px solid #e3e3e3; display: block; float: left; line-height: 13px;}
		#languages a:hover { border-color: #333; }
	
	
	/*oh, please make me prettier... ;)*/
	div#header div.form {
		margin: 0 100px 0 0; padding: 0; height: 1%;
	}
	div#header label {
		display: inline; font-weight: normal; color: #333; font-size: .86em; margin-right: .5em;
	}
	div#header input {
		width: auto; margin: 1px .5em;  font-size: 1em; float: none; display: inline; vertical-align: middle; 
	}
	div#header input.submit {
		font-size: .9em; padding: .2em;
	}

	
/* --------[ sidebar ]-------- */
	
div#sidebar { float: left; width: 270px; }
	div#sidebar div.container { position: relative; }
	
	a.logo { margin: 0; }
	
	#logo {
		border: solid #fff;
		border-width: 3px 0 3px 3px;
		margin: 0;
		padding: 0;
		display: block;
	}
	
ul#nav {
	margin: 1.5em 0;
	padding: 0 0 1px 3px;
	background: url(/img/navBG.gif) no-repeat 3px bottom;
}

	ul#nav li {
		display: block;
		border: 0;
		margin: 0;
		padding: 1px 0 0;
		line-height: 1.2em;
		background: url(/img/navBG.gif) no-repeat left top;
	}

	ul#nav li a {
		font-size: 1.1em;
		display: block;
		padding: .5em .5em .5em 2.5em;
		font-weight: normal; 
		margin: 0;
		color: #fff;
		background: repeat-y left top;
	}

		ul#nav li a:hover { background-image: url(/img/navBG_hover.gif); display: block; text-decoration: none; }
		* html ul#nav a, * html ul#nav li, * html ul#nav { height: 1%; }
		*:first-child+html ul#nav a, *:first-child+html ul#nav li, *:first-child+html ul#nav { height: 1%; }

	ul#nav li.active a { background-image: url(/img/navBG_active.gif); font-weight: bold; }
	
div#sidebar h2 {
	color: #fff;
	font-size: 16px;
	letter-spacing: -1px;
	/*background: #526ECA;*/
	margin: 2px 2px 0;
	line-height: 24px;
	padding: 4px;
}




/* --------[ main content ]-------- */

div#body { 
	margin: 0 0 2em 285px;
	padding: 165px 1.5em 1em;
	background: url(/img/welcome.jpg) no-repeat right top;
	overflow: visible;
	}

	div#body .container {
		float: left; width: 100%;
	}

	div.halfBlock {
		width: 48%;
		float: left;
	}
	
	div.halfBlock.r {
		float: right;
	}
	
	div.content {
		background: no-repeat 0px 3px;
		padding: 0 1em 1em 185px;
	}

	div#indexContent { background-image: url(/img/index.jpg); }
	div#aboutContent { background-image: url(/img/generalTerms.jpg); padding-bottom: 30px; }
	div#whyRegisterContent { background-image: url(/img/whyRegister.jpg); }
	div#helpContent { background-image: url(/img/help.jpg); }
	div#pricesContent { background-image: url(/img/statistics.jpg); }
	/*div#pricesContent table.list td { font-size: .85em; }*/
	
	div#contactContent { background-image: url(/img/editAccount.jpg); padding-bottom: 60px; text-align: center; }
		div#contactContent h2 { margin: 0; }
		div#contactContent p { color: #777; line-height: 1.5em; }
		div#contactContent .halfBlock {  text-align: left; margin-top: 1.5em; }
	
	div#generalTermsContent { background-image: url(/img/about.jpg); }
	div#recommendContent, div#recommendedContent { background-image: url(/img/recommendUs.jpg); font-size: .9em; }
		div#recommendedContent { padding-bottom: 60px; font-size: 1em; }
	div#logoutContent { background-image: url(/img/logout.jpg); padding-bottom: 120px; }
	
	div.form {
		margin: 0 0 25px 0;
		background: no-repeat 0px 3px;
		padding: 0 1em 1em 185px;
	}

	div#editReminderForm { background-image: url(/img/newEvent.jpg); }
	div#editAccountForm { background-image: url(/img/editAccount.jpg); padding-bottom: 60px; }
	div#changePasswordForm, div#loginForm { background-image: url(/img/login.jpg); }
	div#statisticsForm { background-image: url(/img/statistics.jpg); padding-bottom: 110px; }
	div#sendSMSForm { background-image: url(/img/sendSMS.jpg); }
	div#registerForm, div#activateForm { background-image: url(/img/register.jpg); }
	div#addressBookForm { background-image: url(/img/addressBook.jpg); }
	
	#container #emailForm { clear: both; padding-top: 2.5em; margin-top: 0; }
	
	div.form div {
		margin-bottom: 1.5em;
		position: relative;
		clear: both;
	}

	div.form h1 { margin: 2em 0 .5em; background: 0; } 

	div.form div.chk { margin-top: 4px; }
	div.chk label { color: #3f3f3f; }
	.chk input, div input.radio { width: auto; border: 0; display: inline; background: 0; padding: 0; margin: 0 5px 0 0; vertical-align: top;}
		* html .chk input { margin-top: -2px; }
	.chk input.hiddenValue { display: none; }

	div.form p.desc { width: 90%; }
	
	div.form img {
		vertical-align: top;
	}
	
	div#repeatingFields input, div#repeatingFields select, div#senderFields input, div.oneliner input, div.oneliner select {
		width: auto;
		display: inline;
		vertical-align: middle;
		margin: 0 2px;
	}
	
	div#repeatingFields #repeatCount {
		vertical-align: bottom; 
	}
	
		* html div.form div.radio, * html div#repeatingFields div {height: 1%;}
	
	div.chk label { display: inline; font-weight: normal; }
	
	label.multi {
		display: inline;
	}
	
	label.counted { position: relative; padding-right: 53px; }
	span.counter { position: absolute; right: 23px; }
		* html label.counted { padding-right: 63px; }
		* html span.counter { right: 33px; }
	
	label.radio { font-weight: normal; }
	
	div.form div.radio { margin: 0 0 .35em; }
		div.radio label.radio { display: inline; }
		/*div.radio input {width: auto; }*/
	
	div.form div.date {
		z-index: 15;
	}
	
	#notifyBySMSFields textarea { width: 410px; float: left;  }
	#notifyBySMSFields .icon { float: left; margin: 0 0 0 .75em; }
	#notifyBySMSFields p { clear: both; }
	#notifyBySMSFields span.counter { right: 48px; }
	
	div.form div.long input, div.form div.long textarea { width: 420px; }
	
	div.form div.short { float: left; width: 48%; clear: none;  }
	div#container div.form div.clear { clear: both; padding: 1px 0 0 0; float: none; margin: 0; height: 1px; line-height: 1px }
	
	div.form div.short input, div.form div.short select, div.form div.short textarea { width: 95%;  }
	div.form div.short.wIcon input, div.form div.short.wIcon select { width: 70%; }
	
	div.form div.date select { display: inline; width: auto; margin-right: .2em; font-size: .9em;}
	/*div.form div.date span { margin-right: 1.3em; }*/
	div.form div.date .icon { margin-right: 1.5em; } 
	
	
	div#loginFirst { font-size: .9em; margin-bottom: 2em; margin-top: 0; }
	div#loginFirst ul { margin-bottom: 1em; }
	
	
	div.event {
		margin: 0;
		padding: 5px;
		/*	display: none;*/
		border: solid #dfdfdf;
		border-width: 0 1px 1px;
	}

	div.event h3 {
		color: #555;
		margin: 0 0 12px;
		padding: 0 0 4px;
		font-size: 14px;
		border-bottom: 1px solid #ccc;
	}
	
	div.event p {
		margin: 6px 0;
		text-align: left;
	}
	div.event p span { margin: 0 10px 0 0; }

	div.event textarea { width: 400px; margin: 0 auto;}
	
	
	/* lista evenata i adresar */
	
	table.list {
		margin: 0 0 1em;
		border-collapse: collapse;
		text-align: center;
		width: 100%;
		clear: both;
	}
	
	table.list td {
		padding: .3em;
		background: #efefef;
		border: solid #fff;
		border-width: 1px 1px 0;
	}
	
		
	table.list tr.h td {
		background: #7e96ad;
		color: #fff;
		font-size: .85em;
		font-weight: bold;
	}
	
	table.list tr.h a:link, table.list tr.h a:visited {
		color: #fff; display: block; text-decoration: underline;
	}

	table.list tr.h a:hover {
		color: #fff;
		text-decoration: none;
	}

			table.list tr.h a.sortUp, table.list tr.h a.sortDown {
				background: url(/img/icon-sortArrowsWhite.gif) no-repeat right 3px;
				padding: 0 15px;
			}
			
			table.list tr.h a.sortUp {
				background-position: right -187px;
			}
	
	table.list tr.h span.sortarrow {
		font-size: 1.5em;
	}
	
	table.list td.details {
		padding: 0;
		border-width: 0 1px;
		background: #fff;
		color: #5f5f5f;
		font-size: .9em;
		text-align: left;
		}
	
	
	table.list td.cmds {
		white-space: nowrap;
	}

	table.list td.cmds a { margin: 0 .35em; }
		table.list td.cmds a:hover {
			text-decoration: none;
		}
	
	table.list ul li {
		margin-left: 2em;
		list-style-type: square;
	}
	
		table.list td.chk input { background: #fff; }
			* html table.list td.chk input { background: 0; }
	
	div#events {
		overflow: auto; width: 99%;
	}
	
div#container div.tooltip {
	display: none;
	position: absolute;
	top: 50px;
	left: 0;
	width: 320px;
	background: #FFFCF3 url(/img/tooltipBG_info.gif) no-repeat 18px 12px;
	padding: 5px 10px 5px 82px; 
	border: 1px solid #aaa;
	z-index: 20;
}
	* html div#container div.tooltip  { position: relative; margin: 10px 0; height: 1%; top: 0; }
	*:first-child+html div#container div.tooltip { position: relative; margin: 10px 0; height: 1%; top: 0; }
	
	div.tooltip h3 { font-size: .9em; color: #555; margin: 5px 0; }
	div.tooltip p { font-size: .85em; line-height: 1.3em; color: #555; }
	div.tooltip span.emp { font-size: 1.2em; font-weight: bold; color: #777; font-family: "courier new", monospace; }
	div.tooltip a.close {
		display: block; 
		font-size: 24px; 
		float: right; 
		font-family: "courier new", monospace; 
		color: #555; 
		border: 1px solid #ccc; 
		line-height: 18px;
	}
		div.tooltip a.close:hover { text-decoration: none; }
	


/* --- kalendar --- */
div.calendarC { position: relative; z-index: 20; border: 0; padding: 0; height: 1px;   }

div#calendar { position: absolute; }

div#container div.calendar {
	background-color: #f1f1f1;
	padding: 2px;
	border: 1px solid #555;
	position: absolute;
	width: 210px;
	top: 0;
	left: 0;
	margin: 1px 0 1em;
	line-height: 1em;
	text-align: left;
	z-index: 30;
}

	div#container div.calendar div.h {
		text-align: right;
		padding: .25em;
		margin-bottom: .25em;
		font-size: .8em;
	}

	div#container div.calendar div.h a { font-size: 20px; line-height: 15px; margin-left: 30px; }

	div#container div.calendar a.control:link, div#container div.calendar a.control:visited { 
		padding: 0; 
		font-size: 1.35em; 
		line-height: .8em;
		text-align: center;
		color: #fff;
	}

	div#container div.form div.calendar table { width: 100%; border-collapse: collapse; text-align: center; margin: 0; }
	div#container div.calendar table td  { border: 1px solid #fff; background-color: #f1f1f1; padding: .25em 0; font-size: 10px; width: 30px; }

	div#container div.calendar table tr.h td { background-color: #7E96AD; font-weight: bold; color: #fff; width: auto; }
	div#container div.calendar table tr.h td.emp { background-color: #d9643b; }
	div#container div.calendar table tr.days td { background-color: #ccc; font-weight: bold; }
	div#container div.calendar td.free { padding: 0; }
	div.calendar td.free a:link, div.calendar td.free a:visited { text-decoration: none; display: block; color: #457099; padding: .25em 0; }
	div.calendar td.selected a:link, div.calendar td.selected a:visited { background-color: #555; color: #fff; }
	div#container div.calendar .free a:hover { text-decoration: none; background-color: #457099; color: #ffffff; }
	div.calendar .taken { color: red; }

	* html calendar td.free a:link, * html div.calendar td.free a:visited  {
		height: 1%;
	}

div#footer { 
	clear: both; 
	padding: 8px; 
	text-align: center; 
	color: #333;
	font-size: .9em;
	background: #e3e3e3 url(/img/pageBG_bottom.gif) repeat-x top left; 
	border: solid #e3e3e3;
	border-width: 0 4px 0 3px;
}
	
#footer p {
	margin: 0;
}



/* ------[ clearanje floatova ]------ */


/*{ overflow: hidden; }*/

* html div.form div, * html div.form 
{ overflow: visible; height: 1%; }


/* clearanje floatova za elemente koji ne smiju imati overflow:hidden  */
div.form div:after
	{ content: ".";  display: block; height: 0; clear: both; visibility: hidden; line-height: 0; }

/* IE7 */
*:first-child+html div.form div, *:first-child+html div.form { min-height: 0; }