/* 
Cvičení s Viviente
Vytvořil Martin Winkler
*/

/* CSS Reset  */

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,
b, u, i, center,
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-size: 100%;
	vertical-align: baseline;
	background: transparent;	
}
body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: '';	content: none; }

:focus { outline: 0; }

ins {	 text-decoration: none;}
del {	 text-decoration: line-through; }

table { border-collapse: collapse; border-spacing: 0; }

/* Main structure */
	
body {
	font-family: 'Verdana';
	font-size: 13px;
	color: #3c2648;
	background: #3c2648 url('../img/bg.gif') center top repeat-x;
	margin: 0;
	padding: 0;
}

#container { width: 900px; margin: 0 auto; position: relative; }
#bg-top { width: 1642px; height: 391px; position: absolute; left: -371px; top: 0; background: transparent url('../img/bg-top.jpg') center top no-repeat; }
#page { width: 900px; padding: 3px 0 20px 0; margin-bottom: 30px; background: #fff; }
#top-page { height: 255px; }

/* Header */

#logo { position: absolute; left: 0; top: 70px; width: 200px; height: 60px; }
#logo a { font-family: 'Century Gothic'; color: #fff; }
#logo a span { position: absolute; left: 0; top: 0; background: #3c2648 url('../img/logo.gif') left top no-repeat; width: 200px; height: 60px; }

#switch { font-family: 'Century Gothic'; font-size: 13px; color: #cfb2de; position: absolute; right: 30px; top: 5px; }
#switch a { color: #cfb2de; text-decoration: none; }
#switch a:hover { color: #fff; text-decoration: none; }

#header { width: 900px; height: 170px; }

/* Teaser */

#menu-head { font-family: 'Century Gothic'; font-size: 15px; padding: 12px 0 12px 29px; color: #f1d6ff; text-transform: uppercase; border-bottom: 1px solid #9e79b2; }

#v-menu { float: left; position: relative; width: 200px; height: 255px; background: #6c497f url('../img/menu.gif') left top no-repeat; }
#v-menu li { position: relative; background: transparent url('../img/list-ico.gif') 13px 8px no-repeat; padding-left: 30px; line-height: 33px; border-bottom: 1px solid #9e79b2; }
#v-menu li a { font-family: 'Century Gothic'; font-size: 13px; color: #fff; text-decoration: none; }
#v-menu li.active a,
#v-menu li a:hover { color: #c9ff75; }

#teaser { font-size: 12px; float: left; position: relative; width: 640px; height: 235px; padding: 20px 30px 0 30px; background: #e5f3cf url('../img/teaser.gif') right top no-repeat; }
#teaser a, .box a { color: #3c2648; }
#teaser a:hover, .box a:hover { color: #3c2648; }
#teaser p { width: 440px; }

#visual { position: absolute; right: 30px; bottom: 0; width: 180px; height: 284px; background: transparent url('../img/visual.png') left top no-repeat; }

/* Sidebar */

.col-2 .box { font-size: 12px; }

/* Cols */

.col-1, .col-2, .col-3, .col-4 { float: left; }

.col2-set { margin: 0; }

.col-1 { width: 580px; margin: 0 30px; display: inline; }
.col-2 { width: 230px; margin: 0 30px 0 0; padding-top: 27px; display: inline; }

/* Headers */

h1 { font-family: 'Century Gothic'; font-size: 24px; font-weight: normal; color: #3c2648; margin-bottom: 20px; }
h2 { font-family: 'Century Gothic'; font-size: 22px; font-weight: normal; color: #9360af; padding-bottom: 15px; margin: 27px 0 15px 0; border-bottom: 1px solid #e9d7f3; }
h3 { font-family: 'Century Gothic'; font-size: 17px; font-weight: normal; color: #9360af; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #e9d7f3; }

.col-2 h3 { font-size: 15px; color: #fff; background: transparent url('../img/box-head.gif') left top no-repeat; padding: 12px 0 13px 20px; margin-bottom: 1px; border: none; }

/* Tables */

table.comm {
  color: #fff;
  text-align: left;
  margin: 20px auto 0 auto;
  border-spacing: 0;
  border-top: 1px solid #a0b1b7;
  border-left: 1px solid #a0b1b7;
  background: #7e8c8f;
  width: 100%;
}

table.comm td {
  border-bottom: 1px solid #a0b1b7;
  border-right: 1px solid #a0b1b7;
  padding: 2px 10px;	
}

table.comm tr .dark, table.comm td .dark, table.comm thead  { background: #6f8185; font-weight: bold; color: #d9ff68; }

/* Standard classes */

p,ul,ol { line-height: 23px; margin: 0 0 23px 0; }

ul li { background: transparent url('../img/list-item.gif') left 6px no-repeat; padding-left: 20px; }
ol li { list-style-type: decimal; margin-left: 20px; }

a { color: #9360af; text-decoration: underline; }
a:hover { color: #9360af; text-decoration: none; }

/* Various classes */

.cell { position: relative; }
.cell:hover a.more { visibility: visible; }
.box { padding: 20px; background: #e5f3cf; margin-bottom: 30px; position: relative; }
.box h3 { font-size: 22px; color: #3c2648; padding: 20px; margin: 0 0 25px 0; padding: 0; border: none; }

#inbody { position: absolute; right: -7px; bottom: -13px; width: 110px; height: 163px; background: transparent url('../img/inbody.png') left top no-repeat; }
.schedule { width: 100%; margin-bottom: 20px; }
.schedule td { padding: 8px 0; }

a.button { font-family: 'Century Gothic'; font-size: 12px; color: #fff; display: block; text-decoration: none; width: 103px; height: 19px; text-align: center; padding-top: 7px; background: transparent url('../img/but-purple.gif') left top no-repeat; }
a:hover.button { color: #fff; background: transparent url('../img/but-purple.gif') left -26px no-repeat; }
a:active.button { background: transparent url('../img/but-purple.gif') left -52px no-repeat; }

a.more { visibility: hidden; position: absolute; top: 0; right: 0; background: transparent url('../img/but-green.gif') left top no-repeat; }
a:hover.more { color: #fff; background: transparent url('../img/but-green.gif') left -26px no-repeat; }
a:active.more { background: transparent url('../img/but-green.gif') left -52px no-repeat; }

.bold { font-weight: bold; }
.light { color: #937e9f; }

.left { float: left; }
.right { float: right; }

.a-left { text-align: left; }
.a-right { text-align: right; }
.a-center { text-align: center; }

/* Clearfix */

.clearfix:after,
.col2-set:after,
#top-page:after {
	content:".";
	display: block;
	clear: both;
	height: 0;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	overflow: hidden;
}