/*=====================================================================
 *
 * Filename: design.css
 * Website: www.oneilltv.com
 * Author: Markus Baeck (Visualacting GmbH)
 * Date Created: 04/09/2008
 * Last Update: 04/09/2008
 * Media: Screen, Projection
 *
 * Description
 * -----------
 * design css
 *
 *=====================================================================*/

@media screen, projection {
  html {
    font-size: 100%
  }
  body {
    font: 62.5%/1.3 Arial, Verdana, Helvetica, sans-serif;
    background: #000;
    color: #fff
  }
  strong, b {
    font-weight: bold
  }
  em {
    font-style: italic
  }
  a, a:link, a:visited {
  	position: relative;
  	z-index: 9999;
  	background-color: transparent;
    text-decoration: underline;
    color: #fff
  }
  a:hover {
  	color: #fff;
  	text-decoration: underline
  }
  th {
    font-weight: bold
  }
  p {
    font-size: 1.1em;
    padding-bottom: 1em;
    line-height: 1.5em
  }

  /** header */
  .header h1, .header h2 {margin:0;padding:0}


  /* headlines */
  h2,h3,h4,h5,h6 {
  	font-weight: bold
  }
  h2,h3 {
  	padding-bottom: .5em
  }
  h4,h5,h6 {
  	padding-bottom: .3em
  }

  h2 {font-size:1.5em}
  h3 {font-size:1.4em}
  h4 {font-size:1.3em}
  h5 {font-size:1.2em}
  h6 {font-size:1.1em}


  /** menues */
  .menu {
  	position: absolute;
  	right: 146px;
  	bottom: 5px;
  }
  .menu ul.menuTop {
 		font-size: 1.1em;
  	position: relative;
  	text-align: center;
		width: auto;
		padding: 0 0 4px 0;
  }
  .menu ul.menuTop li {
  	border-left: 1px solid #fff;
    display: inline;
  }
  .menu ul.menuTop li a,
	.menu ul.menuTop li a:visited {
  	color: #fff;
  	padding: 0 3px 0 5px;
  	text-decoration: none
  }
  .menu ul.menuTop li a:hover {
		color: #fff;
		text-decoration: underline
	}
  .menu ul.menuTop li.active a {
    color: #000
  }
  .menu ul.menuTop li.first {
  	border-left: 0
  }
	ul.menuLeft {
		margin-bottom: 40px;
	}
  ul.menuLeft li a,
  ul.menuLeft li a:visited,
  ul.menuDetails li a,
	ul.menuDetails li a:visited {
  	text-transform: uppercase;
  	font-size: 1.2em;
  	display: block;
  	height: 20px;
  	border-bottom: 1px solid #2f2f2f;
  	margin: 0;
  	text-decoration: none
  }
  ul.menuDetails li a,
	ul.menuDetails li a:visited {
		padding-left: 0;
		border-bottom: none;
		display: inline;
		line-height: 18px
	}
  ul.menuLeft li a:hover,
  ul.menuDetails li a:hover {
		color: #fe0065;
  }
  ul.menuDetails li a span {
		background: url(../images/menuLeftIcon.jpg) 0 3px no-repeat;
		padding: 0 0 0 15px;
  }
  ul.menuLeft li {
  	padding-left: 0
  }
  ul.menuLeft li a {
		background: url(../images/menuLeftIcon.jpg) 10px 9px no-repeat;
		padding: 6px 0 0 28px;
  }

  ul.menuDetails li a span {
		background: url(../images/iconDesc.gif) 0 3px no-repeat;
  }

  /* tagcloud */
  .tags {
  	width: 185px;
  	margin: 10px auto 10px auto;
  	text-align: center
  }
  .tags a,
  .tags a:visited  {
  	text-decoration: none;
  	padding: 2px;
	}
	.tags a:hover  {
  	background: #fe0065;
  	padding: 2px;
  	text-decoration: none;
	}

  /* clips */
  .clips .clipsContainer {
  	position: relative;
  	width: 202px;
  	float: left;
  	display: inline;
  	margin: 0 35px 0 0;
  	overflow: hidden
  }
  .clips .clipsContainer .clipsImg {
  	/*height: 128px;*/
  	overflow: hidden;
  	vertical-align: middle;
  	display: table-cell;
  }
  .clips .clipsContainer a {
  	z-index: 1
  }
  .clips .clipsContainer img {
		margin-bottom:-15px;
  }
  * html .clips .clipsContainer .clipsImg .imgBorder {
  	margin-bottom: 0;
  }
  .clips .clipsContainer .clipsImg .imgBorder {
  	position: absolute;
  	z-index:0;
  	left: 0;
  	top: 19px;
		width: 199px;
		height: 111px;
  	border: 1px solid #555656;
  	display: block;
  }
  * html .clips .clipsContainer .clipsImg .imgBorder {
  	height: 111px;
  }
  .clips .clipsContainer .clipsImg .imgBorder a {
		text-indent: -9999px;
		width: 199px;
		height: 112px;
		*height: 108px;
		background: url(../images/fake.gif) no-repeat;
  	display: block;
  	position: relative;
  	z-index: 999
  }
  .clips .clipsContainer span {
  	width: 190px;
  	height: 30px;
  	display: block;
  	margin-top: 10px;
  	font-size: 1.1em;
  	padding-left: 12px;
  	background: url(../images/iconDesc.gif) 0 3px no-repeat;
  }
  .details-right h2,
  .details-right h4 {
  	color: #fe0065;
  }
  .details-right p {
  	font-size: 1.2em;
  	font-weight: bold;
  }
  .details-right .backBtn {padding-top:10px}
  .details-right .backBtn a {
  	color: #fe0065;
  	font-size: 1.2em;
  	text-decoration: none;
  }
  .detailsTags {
  	margin: 10px 0
  }
  .clipDetails .clipDetailImg img {
  	border: 1px solid #555656;
  }
  .clipDetailImg{
  	float:left;
  }
  .clipDetails .detailsTags {
  	margin-bottom: 15px;
  	font-size: 1.2em;
  	font-weight: bold;
  }
  .clipDetails .detailsTags span {
  	color: #fe0065;
  	padding: 0 5px 0 0
  }

  /* pagebrowser */
  .pageBrowser
  {
  	position:absolute;
  	bottom: 0;
  }
  .pageBrowser span.active {
  	color: #000;
  	background: url(../images/pageBrowerActive.jpg) no-repeat;
  	padding: 4px 9px 5px;
  	display: block;
  	float: left;
  }
  .pageBrowser span {
  	font-size: 1.2em;
  	font-weight: bold;
  }
  .pageBrowser a,
  .pageBrowser a:visited {
  	font-size: 1.2em;
  	font-weight: bold;
  	text-decoration: none;
  	padding: 5px 10px 10px;
  	display: block;
  	float: left;
  }
  .pageBrowser a:hover {
  	color: #fe0065;
  	padding: 5px 10px 10px;
  	text-decoration: underline
  }

  /* sitemap */
  .sitemap ul {
  	padding-bottom: .5em;
  }
  .sitemap ul li a,
  .sitemap ul li a:visited {
  	font-size: 1.1em;
  	line-height: 1.5em;
  	text-decoration: none;
  }
  .sitemap ul li a:hover {
  	color: #fe0065;
  }
	.sitemap ul li {
  	display: block;
  	padding-left: 19px;
  	background: url(../images/iconDesc.gif) 5px 4px no-repeat;
  }
  .sitemap h2 {
  	padding-bottom: .2em;
  }
  .copyright h3
  {
  	font-size: 1em;
  	font-weight: normal;
	}
}