/* --------------------------------------------------------------------
	Project: 		Welenga
	Version:	 	1.0 
	Last change: 	1/8/2008
	Assigned to: 	Zahon (sladek@webend.cz)	
-----------------------------------------------------------------------
	[colors]
	black - #000
	white - #fff
	red (dark) - #861701 (background)
	red - #cd2f11 (small column)
	red (light, almost pink) - #aa3e2a (navigation - hover, footer)
	gray - #a7a7a7 (small black navigation (right upper corner))
	gray (light) - #c5c0ba (read more)
	gray (middle) - #c7c2bc (small column)
	gray (or brown, dark) - #d7cec5 (small column) 
	gray (dark) - #8b8379 (headings in big column)
	gray (really dark) - #685a53 (big column - welcome strong text)
	brown (light) - #ebe6d8 (column big)
	brown (light - different one) - #eee9db (big column)
	
	[fonts]
	texts: Georgia (Palatino, Times New Roman)
	headings, buttons: Verdana (Geneva, Arial, Helvetica, sans-serif)
-----------------------------------------------------------------------
	[common definitions]
	Last change: 	1/8/2008 [file created]
	Assigned to:	Zahon (sladek@webend.cz)
	
	[structure]
	1. browser reset ala Eric A. Meyer
	2. html
		3. body
			3.1. link
			3.2. primary styles for html elements
			3.3. classes which efects whole site			
--------------------------------------------------------------------- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit;	vertical-align: baseline; text-align: left}
:focus {outline: 0}
ol, ul {list-style: none}
table {border-collapse: separate}
caption, th, td {text-align: left; font-weight: normal}

html {font-size: 100.01%}
	body {background: #861701 url("../img/background.gif") 0 0 repeat-x; color: #000; font: 80%/1.4em Georgia, Palatino, "Times New Roman"; text-align: center}
		a:link, a:active {color: #000; text-decoration: underline}
		a:visited {color: #000}
		a:hover, a:focus, a:active {text-decoration: none}
		
		h1 {margin: 35px 0 10px 50px}
		strong {font-weight: bold}
		hr {display: none}
		em {font-style: italic} 

		.clear {clear: both; display: block; line-height: 1px; height: 1px}
		.corner {position: absolute; background: transparent}
		.top {top: 0}
		.bottom {bottom: 0}
		.right {float: right}
		.left {float: left}
		.date {float: left; margin-top: 16px; margin: 5px 0 5px 16px}
		.date, a.read_more {background: #cd2f11; color: #fff; font: bold 80%/1.1em Verdana, Geneva, Arial, Helvetica, sans-serif; padding: 3px 6px}
		a.read_more {background: #c5c0ba; text-decoration: none; margin: 5px 0 5px 16px}
		a.read_more:hover {background: #8b8379}
/* --------------------------------------------------------------------
	[layout]
	Last change: 	1/8/2008 [file created]
	Assigned to:	Zahon (sladek@webend.cz)
	
	[used hacks]
	html>body - IE6 can't read this selector
	definition with !important followed by another one without important - IE6> is not capable to handle it and read incorrectly the second one (example: strong {color: red !important; color: blue} => IE6> will have blue strong elements, other browsers red)
	=selector - this selector reads only IE (not valid hack)
	_selector - this selector reads only IE6> (not valid hack)
	
	[structure]
	1. whole page | #page
		1.1 small black navigation (right upper corner) | #nav_small
		1.1 content | #content
			1.1.1 space inside content (without shadows) | #inside 
				a. navigation/menu | #nav
				b. headings in columns | .column h2
				c. small column (typically on the left) | .small
					1. content under heading "služby" (second block in small column) | .services
				d. big column (typically on the right) | .big
					1. main text area | .text
					2. special area with interesting article etc. (first block on homepage in big column) | .welcome
					3. another interesting article (second blog on the homepage in big column) | .interesting
				e. one column on the side (most of it is merged with .big class) | .whole 
			1.1.2 round corners of the content on the top | #bcg_top
		1.2 round corners of the content on the bottom | #bcg_bottom
		1.3 footer | #footer
--------------------------------------------------------------------- */
#page {margin: 0 auto; width: 721px; position: relative}
	#nav_small {background-image: url("../img/nav_small_bcg.png") !important; background: transparent url("../img/nav_small_bcg.gif") 0 0 repeat-x; color: #a7a7a7; font-size: 90%; height: 42px; line-height: 50px; top: 34px; =top: 64px; right: 52px; position: absolute; z-index: 3}
		#nav_small a {color: #a7a7a7; padding: 1px}
		#nav_small span.corner {height: 42px}
		#nav_small span.left {background-image: url("../img/nav_small_corner_left.png") !important; background-image: url("../img/nav_small_corner_left.gif"); left: -18px; width: 18px}
		#nav_small span.right {background-image: url("../img/nav_small_corner_right.png") !important; background-image: url("../img/nav_small_corner_right.gif"); right: -23px; width: 23px}
	
	#content {background-image: url("../img/content_bcg.png") !important; background: transparent url("../img/content_bcg.gif") 0 0 repeat-y; clear: both; position: relative; text-align: left; top: 27px; margin-bottom: 27px}
		#inside {background: #fff; margin: 0 8px 0 8px; overflow: hidden; position: static; width: 705px; min-height: 500px;}
	
		#nav {float: left; position: absolute; left: 60px; top: 35px; z-index: 2; text-transform: uppercase}
			#nav li{line-height: 23px}
			#nav li a {background: transparent url("../img/nav_dot.gif") 0 50% no-repeat; display: block; padding: 2px 2px 2px 24px}
			#nav li a:hover {color: #aa3e2a; text-transform: uppercase}
	
		.column h2 {display: block; font: 200%/1.1em Verdana, Geneva, Arial, Helvetica, sans-serif; font-variant: small-caps; margin-bottom: 1px; overflow: hidden; padding: 10px 30px}
		.column h5 {display: block; font: 200%/1.1em Verdana, Geneva, Arial, Helvetica, sans-serif; font-variant: small-caps; margin-bottom: 10px; overflow: hidden;}
			.column h2 span {background-image:  url("../img/heading_dot.png") !important; background: transparent url("../img/heading_dot.gif") 0 14px no-repeat; =background-position: 0 50%; padding-left: 17px}
		
		.small {float: left; margin-left: 21px; width: 249px; display: inline}
			.small a.read_more {clear: both}
			.small h2 {background: #d7cec5 url("../img/column_small_corners_top.gif") 0 0 no-repeat; color: #fff}	
				.small h2.services {background: #c7c2bc url("../img/column_small_corners_dark_top.gif") 0 0 no-repeat; margin-top: 30px}
			.small h3, .small p{clear: both; margin: 5px 0 5px 16px}
			.small h3 a{color: #cd2f11}
			.small div.services {background: #c7c2bc url("../img/column_small_corners_dark_bottom.gif") 0 100% no-repeat; padding: 15px 30px}
				.small div.services ul li {color: #fff; list-style-type: square}
					.small div.services ul li a{color: #fff; font-size: 90%}
					.small div.services a{color: #fff; font-size: 90%}
		
		.big {float: right; margin-right: 17px; width: 400px; display: inline}
			.big h2, .whole h2 {background: #ebe6d8 url("../img/column_big_corners_top.gif") 0 0 no-repeat; color: #8b8379}
			h2.classic {color: #8b8379 !important; background: none !important; padding-left: 0 !important;}
			.big .welcome, .big .text, .whole .text {background: #eee9db url(../img/column_big_corner_right_bottom.gif) 100% 100% no-repeat; margin-bottom: 30px; min-height: 1px; height: 1px}
			.big .perex, .whole .perex {background: #eee9db; margin-bottom: 10px; min-height: 1px; height: 1px; font-style: italic; padding: 5px;}
				html>body .big .welcome, html>body .big .text, html>body .whole .text {height: auto} 
				html>body .big .perex, html>body .whole .perex {height: auto} 
				.big .welcome p a{color: #8b8379; padding-right: 10px; display: block; margin-bottom: 20px}
					.big .welcome h3 a{color: #685a53; display: block; font-weight: bold; padding: 20px 20px 15px 20px}
				.big .welcome img {float: left; _margin-left: -3px}
				.big .welcome .read_more {margin-left: 40px}
			.big h3 a{color: #861701; font-weight: bold}
			.big p.interesting {color: #8b8379; margin-bottom: 10px}
			.big a.interesting {margin: 0 147px 0 0; _margin: 0 143px 0 0; float: right}
		
			.big .text, .whole .text {padding: 10px; line-height: 1.6em; margin-bottom: 0;}
		
		.whole {width: 665px; margin: 0 17px 0 21px}
			.whole h2 {background-image: url("../img/column_one.gif")}
			
		#bcg_top {background-image: url("../img/content_bcg_top.png") !important; background-image: url("../img/content_bcg_top.gif"); height: 35px; left:0; _left: -8px; top: -35px;  width: 721px}
	#bcg_bottom {position: static; background-image: url("../img/content_bcg_bottom.png") !important; background-image: url("../img/content_bcg_bottom.gif"); height: 35px; width: 721px}
		
	#footer {margin: 0 0 40px 50px; font-size: 90%; color: #aa3e2a}	
		#footer a {color: #aa3e2a}
	
	.article strong {font-weight: bold; margin: 0;}
	.article img {margin: 5px;}
		
		
		/* STYLY ADMINISTRACE */
		
	div#center {width: 200px; margin: 0 auto 0 auto; font-weight: bold; font-size: 100%; margin-top: 15px; text-align: center; }
  div#admin-cont {margin: 15px 15px 0 15px;}
  div#admin-cont h1 {font-weight: bold; font-size: 18px; margin: 0 0 10px 0;}
  div#admin-cont table { width:100%; }
    div#admin-cont table td { background:#EEE; padding: 2px 4px; }
    div#admin-cont table th { font-weight: bold; text-align: center; }
    div.child-list {margin: 0 0 20px 0;}
    div.child-list p {display: inline;}
    tr.interesting a {color: #8b8379;}
    tr.interesting {color: #8b8379;}
    div.admin-text{margin: 0 auto 0 auto; width: 400px;}
  div#article-list {margin-top: 15px;}
    div#article-list h4 {margin: 10px 0 0 0;}
      div#article-list h4 a {color: #861701;}
    div#article-list p {margin:0;}