/* 
 * Primitive style for nikdo.cz by Radek Matej.
 *
 * CONTENT:
 * 	x01 main styles
 * 	x02 header
 * 	x03 main menu
 * 	x04 search
 * 	x05 content
 * 	x06 media (images, video, flash, etc.) 
 * 	x07 sitemap
 * 	x08 contact table
 * 	x09 blog pages
 * 	x10 blog info
 * 	x11 blog under line info
 * 	x12 photos
 *
 * COLORS:
 * 	#333		default text
 * 	#fff		default background, text on black and blue buttons
 * 	#185f85	link
 * 	#000		link hover, headings
 * 	#808080	ligth almost invisible text
 * 	#999		media frame border
 * 	#e0e1e0	media frame bacground
 */
 
/*****************************************************************************/
/* x01 main styles */

/* common styles for whole document */
body
{
	font-size: 75%;
	line-height: 1.5;
	font-family: Verdana, "Geneva CE", lucida, sans-serif;
	color: #333;
	background: #fff;
	margin: 0;
	padding: 0;
}

/* inputs have the same font as text (some browsers needs this to set input's
 * font */
input
{
	font-family: Verdana, "Geneva CE", lucida, sans-serif;
	/* font size fix for konqueror inputs */
	font-size: 100%;
}

/* no margin and padding of forms - some browsers (Opera, Safari) generate
 * it */
form
{
	margin: 0;
	padding: 0;
}

/* always show scrollbar in mozilla */
html
{
	overflow: -moz-scrollbars-vertical;
}

/* page containing everythin in the fixed width */
div#page
{
	width: 800px;
	margin: 0 auto 1.5em auto;;
}

/* all link styles */
a
{
	color: #185f85;
}
a:hover
{
	color: #000;
}
a img
{
	border: 2px solid #185f85;
}
a:hover img
{
	border-color: #000;
}

/* do not display hrs */
hr
{
	display: none;
}

/* lists */
ul
{
	margin: 1em 0;
	padding: 0 0 0 2em;
}
ul li
{
	list-style: none;
	background: transparent url("list_image.gif") no-repeat 0 .6em;
	padding-left: 1em;
}
ul ul
{
	margin: 0 0;
	padding: 0 0 0 1em;
}

/* TODO: replace cleaner by another cleaning - this is the old way */
.cleaner
{
	clear: both;
	height: 0;
	width: 0;
	line-height: 0;
}

/* items which are hidden or shifted away */
.hidden
{
	display: none;
}
.shifted
{
	overflow: hidden;
	text-indent: -2000px;
}

blockquote
{
	font-style: italic;
	background: transparent url("icons/quote.gif") no-repeat 10px 5px;
	margin-left: 0;
	padding-left: 3.5em;
}


/*****************************************************************************/
/* x02 header */

div#header
{
	position: relative;
	height: 65px;
}

/* h1 contains site name and logo */
h1
{
	/* position settings */
	display: block;
	width: 160px;
	position: absolute;
	top: 0;
	margin: 0;
	padding: 0;
	line-height: 1;

	/* logo displaying */
	background: transparent url("nikdo.jpg") no-repeat center 60px;
	height: 550px;

	/* font settings */
	text-align: center;
	font-size: 250%;
	font-weight: normal;
	letter-spacing: 4px;
	text-transform: lowercase;
	color: #333;
}

/* link in h1 contains site name and link to root */
h1 a
{
	text-decoration: none;
	color: #333;
	margin-left: 5px;
	display: block;
	width: 150px;
	height: 60px;
	background: transparent url("logo.png") no-repeat;
	text-indent: -2000px;
	overflow: hidden;
}


/*****************************************************************************/
/* x03 main menu */

ul#menu
{
	list-style: none;
	padding: 0 0 0 20px;
	margin: 0;
	position: absolute;
	top: 0;
	left: 160px;
	height: 60px;
	width: 460px;
	background: transparent url("borders/header.png") no-repeat bottom;
}
ul#menu li
{
	display: block;
	float: left;
	margin: 0;
	padding: 0;
	margin-right: 3px;
	background-position: 0 bottom;
	background-repeat: none;
}
ul#menu li a
{
	display: block;
	height: 2.2em;
	padding: 0em .6em 1em .6em;
	margin: -1.2em 0 0 0;
	font-weight: bold;
	text-transform:lowercase;
	letter-spacing: 3px;
	line-height: 1;
	font-size: 120%;
	text-decoration: none;
	color: #fff;
	background: transparent url("menu/right-primary.png") no-repeat right bottom;
	outline: none
}

/* left part of image - special for every link */
ul#menu li#go-blog { background-image: url("menu/left-bubble.png"); }
ul#menu li#go-photo { background-image: url("menu/left-photo.png"); }
ul#menu li#go-work { background-image: url("menu/left-worker.png"); }
ul#menu li#go-me { background-image: url("menu/left-man.png"); }
ul#menu li#go-sitemap { background-image: url("menu/signpost.png"); }

/* special styles for sitemap */
ul#menu li#go-sitemap a
{
	text-indent: -2000px;
	overflow: hidden;
	padding-left: 0;
	padding-right: 0;
	width: 40px;
	background-image: none;
}

/* hovered (used only when javascript disabled - the do-not-animate class) and 
 * active menu item */
ul#menu li.do-not-animate a:hover,
ul#menu li.active a
{
	margin-top: 0;
	padding-top: .2em;
}

ul#menu li.active a
{
	/* we can not use fast rollowers because of positioning to right bottom */
	background: transparent url("menu/right-secondary.png") no-repeat right bottom;
}

ul#menu li.active
{
	background-position: -200px bottom;
}

/* another shift for hovered and active sitemap */
ul#menu li#go-sitemap.do-not-animate a:hover,
ul#menu li#go-sitemap.active a
{
	margin-top: -0.7em;
}

/* another active state for sitemap */
ul#menu li#go-sitemap.active
{
	background-position: -40px bottom;
}


/*****************************************************************************/
/* x04 search */

/* absolutely positioned container of search */
div#search
{
	position: absolute;
	left: 655px;
	/* this is needed by opera because of floated content, else the search button
	 * is wrapped under textbox */
	width: 145px;
	margin-top: 10px;
}

/* label has to be displayed block to stay above textbox and button */
div#search label
{
	display: block;
}

/* label moved by javascript */
div#search label.over
{
	position: absolute;
	top: .1em;
	left: 5px;
	z-index: 1;
}

div#search input#q
{
	border: 1px solid black;
	width: 96px;
	margin: 0;
	padding: 1px 4px;
	display: block;
	float: left;
}

div#search button
{
	height: 20px;
	width: 20px;
	border: none;
	margin: 0;
	padding: 0;
	margin-left: 4px;
	background-color: #fff;
	background: transparent url("buttons/search.png") no-repeat left bottom;
	overflow: hidden;
	text-indent: -2000px;
	cursor: pointer;
	float: left;
}

div#search button:hover
{
	background-position: left top;
}


/*****************************************************************************/
/* x05 content */

div#content
{
	position: relative;
	float: left;
	width: 440px;
	min-height: 450px;
	padding: 13px 20px 30px 20px;
	margin-left: 160px;
	background: #fff url("borders/contentrepeat.png") repeat-y;
}

div#content div#content-top
{
	position: absolute;
	left: 0;
	top: 0;
	width: 480px;
	height: 13px;
	background: #fff url("borders/contenttop.png") no-repeat left bottom;
}

div#content div#content-bottom
{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 480px;
	height: 13px;
	background: #fff url("borders/contentbottom.png") no-repeat left bottom;
}

div#content:hover div#content-top
{
	background-position: left top;
}

/* all heading styles */
h2, h3, h4
{
	color: #000;
	letter-spacing: 2px;
	text-transform: uppercase;
	line-height: 1.2;
}

/* h2 is main heading of content */
h2
{
	margin: 0 0 .8em 0;
	font-size: 125%;
}

/* normal color and no decoration for links in headings */
h2 a, h3 a, h4 a
{
	text-decoration: none;
	color: #000;
}

/* h3 is subheading in content */
h3
{
	font-size: 100%;
	margin: 2em 0 .7em;
	/* it does make sense to clear both when section heading comes */
	clear: both;
}

h4
{
	letter-spacing: 1px;
	font-size: 90%;
	margin-bottom: .1em;
	/* it does make sense to clear both when section heading comes */
	clear: both;
}

/* rss icon */
a.rss-link
{
	display: block;
	width: 20px;
	height: 20px;
	background: transparent url("buttons/rss.png") no-repeat left bottom;
	overflow: hidden;
	text-indent: -2000px;
	/* TODO: there will be other types of the RSS icon, which will not float right */
	float: right;
}
a.rss-link:hover
{
	background-position: left top;
}

/* link button */
span.btn
{
	display: block;
	background: transparent url("buttons/text-left.png") no-repeat left bottom;
	/* it has to be floated, otherwise the width is 100% */
	float: right;
}
span.btn a
{
	display: block;
	height: 20px;
	padding: 0 1em;
	margin: 0;
	color: #fff;
	background: transparent url("buttons/text-right.png") no-repeat right bottom;
	text-decoration: none;
	text-transform: lowercase;
	font-weight: bold;
}
span.btn:hover
{
	background-position: left top;
}
span.btn a:hover
{
	background-position: right top;
}


/* paragraph */
p
{
	margin: .2em 0 1em 0;
	text-indent: 1em;
}
h2 + p
{
	text-indent: 0;
}

/* submenu */
div#submenu
{
	float: right;
	width: 150px;
	padding: 15px 0;
	margin: 0 0 0 5px;
}
div#submenu ul
{
	list-style: none;
	margin: 0 auto 2em auto;
	padding: 0;
	width: 135px;
}
div#submenu ul li
{
	display: block;
	width: 135px;
	margin: 0 0 3px 0;
	padding: 0;
}

div#submenu ul li a
{
	/* TODO: why this color? */
	background: #333 url("submenu/anonymous.png") no-repeat;
	display: block;
	width: 122px;
	height: 26px;
	margin: 0;
	padding: 0 0 0 13px;
	line-height: 26px;
	text-transform: lowercase;
	text-decoration: none;
	letter-spacing: 1px;
	font-weight: bold;
	color: #fff;
	outline: none
}

div#submenu ul li#pages a { background-image: url("submenu/page.png"); }
div#submenu ul li#reading a { background-image: url("submenu/glasses.png"); }
div#submenu ul li#webdesign a { background-image: url("submenu/write.png"); }
div#submenu ul li#graphic a { background-image: url("submenu/brush.png"); }
div#submenu ul li#contact a { background-image: url("submenu/letter.png"); }
div#submenu ul li#tutorials a { background-image: url("submenu/go.png"); }
div#submenu ul li#cv a { background-image: url("submenu/list.png"); }
/* TODO: categories should be short-named by nucleus and better id should be asociated */
div#submenu ul li#category-1 a { background-image: url("submenu/pc.png"); }
div#submenu ul li#category-2 a { background-image: url("submenu/man.png"); }
div#submenu ul li#category-3 a { background-image: url("submenu/write.png"); }
div#submenu ul li#category-4 a { background-image: url("submenu/lamp.png"); }
div#submenu ul li#category-8 a { background-image: url("submenu/watch.png"); }

div#submenu ul li:hover,
div#submenu ul li.active
{
	width: 135px;
}
div#submenu ul li.active a,
div#submenu ul li a:hover
{
	width: 122px;
	background-position: 0 -26px;
}


/*****************************************************************************/
/* x06 media (images, video, flash, etc.)  */

/* div containing all media information */
.media
{
	display: block;
	margin: .5em auto;
	text-align: center;
	border: 1px solid #999;
	background: #e0e1e0 url("mediafill.png") repeat-x;
	padding: 5px;
}

/* container for caption */
.media p
{
	font-size: 85%;
	text-align: center;
	margin: .1em;
}

/* TODO: texy sets now zoom class to all links to images and it can cause
 * troubles when link is text->image */
/* link to zoomed image */
.media a.zoom
{
	position: relative;
	display: block;
	padding: 0;
	margin: 0;
}
.media a.zoom img
{
	margin:0;
	padding: 0;
}

/* TODO: can it be p? */
/* container for hint "click to zoom" */
.media a.zoom span
{
	position: absolute;
	right: 5px;
	top: 5px;
	height: 14px;
	width: 14px;
	text-indent: -2000px;
	overflow: hidden;
	background: transparent url("icons/imagezoom.png") no-repeat;
	border: 1px solid #fff;
}

.media img
{
	/* TODO: auto? */
	margin: 0 auto;
}

/* left and right aligned media (can be img or div.media) */
.left
{
	float: left;
	margin: .5em 1em 1em 0;
}
.right
{
	float: right;
	margin: .5em 0 1em 1em;
}


#lightbox
{
	border: 2px solid #000;
}
#lightbox a
{
	display: block;
	margin: 0;
	padding: 0;
}

#lightbox img{ border: none; clear: both; } 
#overlay img{ border: none; }
#overlay{ background-image: url("overlay.png"); }

/* TODO: use this IE6 hack stuff? */
/*
* html #overlay{
	background-color: #333;
	back\ground-color: transparent;
	background-image: url(blank.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
	}
		*/
	

/*****************************************************************************/
/* x07 sitemap */

dl#sitemap dt
{
	margin-left: .2em;
	padding-left: 1em;
	background: transparent url("icons/page.gif") no-repeat left center;
	font-size: 100%;
}

dl#sitemap dd
{
	font-size: 90%;
	margin-left: 0;
	margin-bottom: .5em;
}

dl#sitemap dd dl
{
	margin-left: 2em;
	font-size: 111.11%;
}

a#details-switch
{
	float: right;
	text-indent: -2000px;
	overflow: hidden;
	width: 40px;
	height: 20px;
	background: transparent url("buttons/loudswitch.png") no-repeat;
	outline: none
}
a#details-switch.on
{
	background-position: 0 -20px;
}

ul.faviconed
{
	list-style: none;
	margin-left: 2em;
	padding-left: 0;
}
ul.faviconed li
{
	margin-bottom: .5em;
	background: none;
	padding-left: 0;
}
ul.faviconed li img
{
	vertical-align: middle;
}


/*****************************************************************************/
/* x08 contact table */

table.contact th
{
	text-align: right;
	padding-right: .5em;
}
table.contact td
{
	margin-top: .3em;
}
table.contact img
{
	vertical-align: bottom;
	border: none;
}


/*****************************************************************************/
/* x09 blog pages */

/* subheading alias subtitle */
p.subheading
{
	margin: -0.5em 0 2em .5em;
	color: #808080;
}


/* perex alias lead */
div.lead
{
	margin-bottom: 1.5em;
	border: 1px solid #999;
	/* TODO: maybe something lighter then mediafill - it's purpose is to make
	 * borders  */
	background: #e0e1e0 url("mediafill.png") repeat-x;
	padding: 5px;
	/* TODO: or this? */
	/*padding: .5em;
	background: #e0e1e0 url("borders/light.png") no-repeat left bottom;*/
}
div.lead p
{
	margin: .5em;
	text-indent: 0;
}
/* display images on article lead only on blog items index, not on articel */
div.lead img
{
	display: none;
}

/* article preview wrapping div */
div.article-preview
{
	/* wrap floated content */
	overflow: auto;
	/* this is necessary because Firefox shows scrollbars when outline
	 * on button appears */
	padding: 1px;
}
div.article-preview + div.article-preview
{
	margin-top: 1.5em;
	padding-top: 1em;
	/* TODO: is this better? */
	border-top: 1px dotted #808080;
}

div.article-preview h3
{
	clear: none;
	margin-top: 0;
}

div.article-preview span.btn
{
	float: right;
	/* put it next to underline */
	clear: left;
}

/* article image */
div.article-preview img
{
	float: left;
	margin: 0 1em .6em 0;
}

/* article lead */
div.article-preview p
{
	text-indent: 0;
	margin-bottom: .5em;
}

/* underline info on article preview */
div.article-preview dl.underline
{
	margin-top: .5em;
	margin-bottom: 0;
	clear: left;
}

body.blog-item h2
{
	font-size: 120%;
}

/* make space on bottom for underline */
body.blog-item div#content
{
	padding-bottom: 3em;
}
/* underline on item is fixed to bottom for the case
 * of short blog items. */
body.blog-item div#content dl.underline
{
	position: absolute;
	bottom: 0em;
	left: 20px;
}

pre
{
	padding: .6em;
	border: 1px solid #999;
}
code
{
	font-size: 115%;
	font-family: monospace;
}


/*****************************************************************************/
/* x10 blog info */

dl#elsewhere dt
{
	font-weight: bold;
}
dl#elsewhere dd
{
	margin-left: 0;
}
/* TODO: remove, just test of links out from pages */
dl#elsewhere dd a
{
	padding-right: 11px;
	background: transparent url("icons/somewhere.png") no-repeat right center;
}
dl#elsewhere ul
{
	margin-top: 0;
}

/* prev and next spot */
dl#see-also
{
	position: absolute;
	width: 440px;
	bottom: 20px;
	left: 20px;
	margin: 0;
	padding: 0;
}
dl#see-also dd
{
	margin: 0;
	padding: 0;
}
dl#see-also dd a
{
	bottom: -10px;
	position: absolute;
	height: 40px;
	width: 20px;
	text-indent: -2000px;
	overflow: hidden;
}
dl#see-also dd#prev-spot a
{
	left: -40px;
	background: transparent url("buttons/prev-small.png") no-repeat left top;
}
dl#see-also dd#next-spot a
{
	right: -40px;
	background: transparent url("buttons/next-small.png") no-repeat right top;
}
dl#see-also dd a:hover
{
	width: 25px;
}
dl#see-also dd#prev-spot a:hover
{
	left: -45px;
}
dl#see-also dd#next-spot a:hover
{
	right: -45px;
}


/*****************************************************************************/
/* x11 blog under line info */

/* TODO: no bottom padding of the content on item -- there are icons */

/* wrap floated content */
dl.underline
{
	overflow: auto;
}

dl.underline dt,
dl.underline dd
{
	float: left;
	margin: 0;
	padding: 0;
}

dl.underline dt
{
	width: 15px;
	height: 1.5em;
	text-indent: -2000px;
	overflow: hidden;
	background: transparent url("list_image.gif") no-repeat left center;
}

dl.underline dt a
{
	display: block;
	width: 15px;
	height: 1.5em;
}

dl.underline dd
{
	margin: 0 1.2em 0 .2em;
}

dt.karma
{
	text-indent: 0;
}

dl.underline dt#spot-date
{
	background: transparent url("icons/calendar.png") no-repeat left center;
}
dl.underline dt#sections
{
	background: transparent url("icons/folder.png") no-repeat left center;
}

dl.underline dt#go-comments
{
	text-indent: 0;
}
dl.underline dt#go-comments a
{
	text-indent: -2000px;
	overflow: hidden;
	background: transparent url("icons/bubble.png") no-repeat left center;
}


/*****************************************************************************/
/* x12 photos */

ul.photo-groups
{
	margin-left: 0;
	padding-left: 0;
}
ul.photo-groups li
{
	margin: 0 0 2em 0;
	padding: 0;
	background: none;
	/* this fixes IE6&IE7 bad horizontal align of right text */
	border-top: 1px solid transparent;
}
ul.photo-groups a
{
	float: left;
	clear: left;
	margin-right: 1em;
}
ul.photo-groups span.group-name
{
	display: block;
	font-weight: bold;
}

div#photo-list a img
{
	margin: 10px;
	vertical-align: top;
}
span.date-range
{
	padding-left: 18px;
	background: transparent url("icons/calendar.png") no-repeat left center;
}

div#photo-list span.date-range
{
	float: right;
	margin-left: 2em;
}
ul#photo-nav
{
	margin: 0;
	padding: 0; position: relative;
}
ul#photo-nav li
{
	/* no list image */
	background: none;
	display: block;
	height: 0;
	margin: 0;
	padding: 0;
}
ul#photo-nav li a
{
	margin: 0;
	padding: 0;
	display: block;
	position: absolute;
	text-indent: -2000px;
	overflow: hidden;
	width: 25px;
	height: 120px;
	top: 10px;
	background: transparent none no-repeat;
}
ul#photo-nav li a:hover
{
	width: 35px;
}
ul#photo-nav li.prev a
{
	left: -35px;
	background: transparent url("buttons/left.png") no-repeat left 10px;
}
ul#photo-nav li.next a
{
	right: -35px;
	background: transparent url("buttons/right.png") no-repeat right 10px;
}
ul#photo-nav li.prev a:hover
{
	left: -45px;
}
ul#photo-nav li.next a:hover
{
	right: -45px;
}
a#go-up
{
	display: block;
	position: relative;
	top: -5px;
	width: 40px;
	height: 25px;
	margin: 0 auto;
	padding: 0 5px;
	text-indent: -2000px;
	overflow: hidden;
	background: transparent url("buttons/up.png") no-repeat 5px 0;
}
a#go-up:hover
{
	background-position: 5px -25px;
}
body.one-photo h1
{
	background: none;
}
body.one-photo h2
{
	width: 45%;
}
body.one-photo div#content
{
	width: 680px;
	padding: 13px 10px 33px 10px;
	margin-left: 50px;
	background-image: url("borders/long-contentrepeat.png");
}
img#single-photo
{
	margin: 0 auto;
	display: block;
	border: 4px solid black;
}

body.one-photo div#content div#content-top
{
	width: 700px;
	background-image: url("borders/long-contenttop.png");
}

body.one-photo div#content div#content-bottom
{
	width: 700px;
	background-image: url("borders/long-contentbottom.png");
}

/* ladeni */
/*
div#submenu { width: 156px; }
div#content { border: 1px solid blue; }
div#logo { border: 1px solid red; }
div#page { border: 1px solid black; }
div#submenu { border: 1px solid green; }
div#header { border: 1px dotted blue; }
h1 { border: 1px dotted red; }
.newlineshould { color: red; }
div#search { border: 1px solid red; }
*/
/*
	border: 1px solid red; /* TEST */
/**/