/*
 * Couponmonkey CSS // Layout Definitions
 * 
 * This file contains all layout specific definitions
 * for the Couponmonkey website.
 *
 * Copyright 2008 Stefan Heckler
 * 
 * @author: Stefan Heckler
 * @version: $Id: layout.css 99 2009-11-16 12:12:45Z sh $
 */
 
/*
 * include reset and fonts.css
 * 
 * these files will be merged with this file before publishing
 */
 
@import url(include/reset.css);
@import url(include/fonts.css);

/* clear fix */
.clear:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  position: relative;
}

/* general definitions */
body,html {
	text-align: center;
	background: #d7d7d7 url('../img/site/body_bg.gif') repeat-x;
}

#wrapper {
	width: 910px;
	margin: 0 auto;
	text-align: left;
}

a {
	color: #4f4f4f;
	text-decoration: none;
}

a:hover {
	color: #333333;
}

strong { font-weight: bold; }

/* main header */
.MainHeader {
	width: 100%;
	height: 67px;
	padding-top: 38px;
}

.MainHeaderLogo {
	width: 288px;
	height: 66px;
	display: block;
	float: left;
	overflow: hidden;
	background: transparent url('../img/site/header_logo.gif') no-repeat;
}

.MainHeaderLogo a {
	width: 100%;
	height: 66px;
	padding-top: 70px;
	display: block;
}

.MainHeaderBox {
	border: 1px solid #d7d7d7;
	float: right;
	padding: 1px;
}

.MainHeaderPress {
	padding: 8px 15px;
	height: 25px;
	overflow: hidden;
}

.MainHeaderPress p,
.MainHeaderPress ul,
.MainHeaderPress ul li,
.MainHeaderPress img {
	float: left;
}

.MainHeaderPress p {
	color: #7e7e7e;
	font-size: 108%;
	line-height: 25px;
	margin-right: 15px;
}

.MainHeaderPress li {
	margin-right: 15px;
}

.MainHeaderPress li.more {
	margin: 0;
	line-height: 25px;
	background: url('../img/site/buttons/arrow_grey.gif') no-repeat 15px 11px;
	padding-left: 23px;
	font-size: 108%;
}

.MainHeaderPress li.more a { color: #7e7e7e; }
.MainHeaderPress li.more a:hover { text-decoration: underline; }

/* breadcrumb navigation */
.BreadcrumbNavigation {
	width: 100%;
	height: 21px;
	line-height: 20px;
	margin-bottom: 10px;
}

.BreadcrumbNavigation p {
	float: left;
	color: #fd7402;
	font-size: 93%;
	margin-right: 10px;
}

.BreadcrumbNavigation ol,
.BreadcrumbNavigation ol li {
	display: inline;
	float: left;
}

.BreadcrumbNavigation ol li {
	font-size: 93%;
	padding-left: 6px;
	margin-right: 10px;
	background: transparent url('../img/site/buttons/arrow.gif') no-repeat 0px 7px;
}

.BreadcrumbNavigation a {
	color: #4f4f4f;
}

.BreadcrumbNavigation a:hover {
	color: #fd7402;
}

/* main teaser */
.MainTeaser {
	width: 760px;
	height: 320px;
	overflow: hidden;
	background: #f2f2f2;
	margin-bottom: 45px;
}

/* columns */
.LeftCol {
	width: 180px;
	padding: 10px;
	float: left;
	background: #fff;
	margin-bottom: 10px;
}

.MainCol {
	float: right;
	width: 700px;
}


/* main footer */
.MainFooter {
	width: 100%;
	background: transparent url('../img/site/footer_bg.gif') repeat-x;
	clear: both;
	height: 162px;
	text-align: center;
}

.MainFooterCenter {
	width: 910px;
	margin: 0 auto;
	text-align: left;
	padding-top: 15px;
}

.MainFooterLogo {
	width: 200px;
	height: 40px;
	display: block;
	float: left;
	font-size: 0px;
	line-height: 200px;
	overflow: hidden;
	background: transparent url('../img/site/footer_logo.gif') no-repeat;
	margin-right: 20px;
	margin-bottom: 40px;
}
* + html p.MainFooterCopy {
   margin-top: -5px;
}
.MainFooter p.MainFooterCopy {
	clear: both;
	color: #fff;
	font-size: 93%;
	text-align: left;
	padding-top: 10px !important;
    *padding-top: 5px;
}

      

/* left column definitions */
.LeftCol h2 {
	color: #fd7402;
	font-size: 116%;
	margin-bottom: 4px;
}

.LeftCol ul {
	border-bottom: 1px solid #e2e2e2;
	padding-bottom: 4px;
	margin-bottom: 8px;
}

.LeftCol ul li {
	background: transparent url('../img/site/buttons/arrow.gif') no-repeat 0 7px;
	padding: 1px 0 2px 10px;
}

.LeftCol ul li:hover {
	background-position: 0 -43px;	
}

.LeftCol ul li.showall {
	background: none;
	padding: 3px;
	padding-left: 0;
	font-weight: bold;
}

.LeftCol li a:hover {
	color: #c10000;
	text-decoration: underline;
}

/* special definitions for the last menu in left column */
.LeftCol ul.last {
	margin: 0;
	padding: 0;
	border: 0;
}

.LeftCol ul.last a {
	color: #fd7402;
}

.LeftCol ul.last a:hover {
	color: #c10000;
}

/* short stats */
.LeftCol p {
	margin-bottom: 5px;
	line-height: 105%;
}

.LeftCol p span.small {
	font-size: 83%;
	color: #6e6e6e;
}

.LeftCol p.last {
	border-bottom: 1px solid #e2e2e2;
	padding-bottom: 6px;
	margin-bottom: 6px;
}


/*
 * General MainCol definitions
 */
.MainCol h1,
.MainCol h2 {
	width: 660px;
	height: 24px;
	padding: 13px 20px;
	display: block;
	background: #c10000 url('../img/site/headline_bg.gif') repeat-y;
	color: #fff;
	font-size: 138.5%;
}


/* HomeTeaser */
.HomeTeaser {
	width: 100%;
	height: 69px;
	padding-top: 115px;
	background: transparent url('../img/site/teaser_home_bg.gif') no-repeat;
}

.HomeTeaser li {
	padding-left: 45px;
	padding-right: 23px;
	float: left;
	line-height: 115%;
	color: #fff;
}

.HomeTeaser li.l01 {
	width: 215px;
}

.HomeTeaser li.l02 {
	width: 137px;
}

.HomeTeaser li.l03 {
	width: 127px;
}

/* 
 * ContentBox definitions
 */
.ContentBox {
	border: 1px solid #e2e2e2;
	background: #fff;
	padding: 13px 18px;
	color: #4f4f4f;
	margin-bottom: 10px;
}

.ContentBox h3 {
	color: #fd7402;
	font-size: 138.5%;
	margin-bottom: 10px;
}

.ContentBox p {
	line-height: 138.5%;
}

.ShopImage {
	float: left;
	margin-right: 10px;
	margin-bottom: 0;
}

.ShopImages{
	float: right;
	padding: 0 0 10px 10px;
	text-align: center;
	line-height: 17px;
    width: 202px;
}
.ShopImages .ShopThumb{
	margin-bottom: 15px;
	border: 1px solid #E2E2E2;

}
.ShopImages .ShopImage{
	float: none;
	margin: 0;	
}

.ShopDescriptionBig {
    width: 445px;
    padding-bottom: 15px;
}
.ShopDescriptionBig ol {
    padding-left: 20px;
    padding-top: 12px;
}
.ShopDescriptionBig ol,
.ShopDescriptionBig ol li {
    list-style: decimal;
}

.ShopDescriptionBig ol li {
    padding: 2px 0;
}

/*
 * RoundBox Button
 */
.RoundButton {
	width: 161px;
	height: 31px;
	line-height: 30px;
	background: transparent url('../img/site/buttons/redeem_voucher.gif') no-repeat 0 0;
	color: #c10000;
	font-weight: bold;
	font-size: 100%;
	display: block;
}

.RoundButton:hover {
	background-position: 0 -31px;
	color: #c10000;
}

/*
 * Coupon Listing
 */
.CouponList,
.CouponListDetail {
	padding: 0;
	padding-top: 10px;
	border-top: 0;
	border-bottom: 0;
}

.CouponList.Search .CouponContainer{
	padding-bottom: 10px;
}
/*
.CouponListShopLinkContainer{
	line-height:150%;
	width: 150px; 
	border:1px solid #cacaca;
	margin: 0 auto;
	text-align: center;

}*/
.CouponContainer{
	position: relative; 
	float: left;
	margin: 0;
	padding: 0;
	border: 0;
	width: 100%;
}

.CouponContainer .ShopLinkOuterContainer{
	width: 145px;
	position: relative; 
	display: table;

	float: left;
}

.CouponContainer .ShopLinkInnerContainer{
	width: 100%;
	display: table-cell;
	vertical-align: middle;
}

.CouponListDetail {
	padding-left: 18px;
	margin-bottom: 0;
}

.CouponListShopLink {
	float: left;
	padding-left: 5px;
	width: 140px;
	font-size: 83%;
	text-align: center;
	margin: 0 auto;
	position: relative;
	margin-right: 10px;
	padding-bottom: 10px;
	height: 100%;
}

.CouponListShopLink img {
	margin: 0 26px;
}

.CouponListShopLink span {
	color: #fd7402;
}

.CouponListShopLink:hover { color: #c10000; }

.CouponList h3,
.CouponListDetail h3 {
	margin-bottom: 0px;
	font-size: 116%;
}

.CouponList h3,
.CouponList h3 a,
.CouponListDetail h3,
.CouponListDetail h3 a {
	color: #c10000;
	font-weight: bold;
}

.CouponList p,
.CouponListDetail p {
	width: 350px;
	float: left;
	padding-bottom: 10px;
}
.CouponListDetail h3 {
	float: left;
	width: 350px;
}

.CouponList hr,
.CouponListDetail hr {
	background-color: #e2e2e2;
	color: #e2e2e2;
	font-size: 0px;
	line-height: 0px;
	height: 1px;
	border: 0;
	margin: 10px 0px;
	clear: both;
}

.RedeemVoucher {
	width: 131px;
	padding-left: 30px;
	background: transparent url('../img/site/buttons/redeem_voucher.gif') no-repeat 0 0;
	float: right;
	/*float: left;*/
	position: relative;
	margin-right: 10px;
}

.CouponList p.CouponValidity,
.CouponListDetail p.CouponValidity {
	width: 85px;
	padding-left: 30px;
}

/*
 * Content Navigation
 */
.ContentNavigation {
	border: 1px solid #e2e2e2;
	border-top: 0;
	padding-left: 15px;
	background: #fff;
	display: block;
	margin-top: -1px;
}

.ContentNavigation li {
	float: left;
	border-top: 1px solid #e2e2e2;
	border-left: 1px solid #e2e2e2;
	display: block;
	height: 30px;
}

.ContentNavigation li.last {
	border-right: 1px solid #e2e2e2;
}

.ContentNavigation li a {
	height: 30px;
	float: left;
	padding: 0px 10px;
	line-height: 30px;
	display: block;
	border-bottom: 1px solid #e2e2e2;
	position: relative;
	margin-bottom: -1px;
	background: #f2f2f2;
	outline: 0;
}

.ContentNavigation li a.active {
	border-color: #fff;
	background: #fff;
	color: #fd7402;
}

.ContentNavigation li a:hover {
	color: #c10000;
	background: #fff;
}

/* 
 * ShopList
 */
.ShopListNavigation li,
.ShopListNavigation li a,
.ShopListNavigation li span {
	height: 25px;
}

.ShopListNavigation li a,
.ShopListNavigation li span {
	padding: 0 7px;
	padding-right: 7px;
	line-height: 25px;
}

.ShopListBox {
	padding: 0;
	border-top: 0;
	padding-top: 10px;
}

.ShopListBox h3 {
	border-bottom: 1px solid #e2e2e2;
	padding: 0 18px;
}

.ShopList {
  padding: 0 18px;
  margin-bottom: 10px;
}

.ShopList li
{
  /* Stipulate the height of each item so that 
  vertical return = items * height */

  line-height: 22px;

  /* Clear the default margins & padding 
  so we can style the list from scratch */

  margin: 0;
  padding: 0;
}

.ShopList li.col1 { margin-left: 0px; }
.ShopList li.col2 { margin-left: 220px; }
.ShopList li.col3 { margin-left: 440px; }

/* Bring the first item of each column 
back up to the level of item 1.
Vertical return = items * height.
Here, 5 items * 1.2em line-height = 6em */

.ShopList li.reset {
	margin-top: -152px;
}

.ShopList li a {
	color: #fd7402;
}

.ShopList li a:hover {
	color: #c10000;
	text-decoration: underline;
}

.Comments h3{
	color: #adadad;
	font-size: 14px;
	font-weight: bold;
}
.Comments h4{
	margin-bottom: 3px;
}
.Comments h4 span{
	color: #fd7402;
}

.Comments .comment p{
	padding: 18px 17px;
	border-bottom: 1px solid #e2e2e2;
	border-left: 1px solid #e2e2e2;
	border-right: 1px solid #e2e2e2;
	color: #4f4f4f;
	margin-bottom: 28px;
}
.Comments .comment div.triangle{
	height: 15px;
	width: 100%;
	background: url('../img/site/triangle.gif') repeat-x;

}

.Comments form{
	background: #f2f2f2;
	border: 1px solid #e2e2e2;
	padding: 7px 33px 15px 0;
}
.Comments form input, .Comments form textarea{
	border: 1px solid #e2e2e2;
}
.Comments form label{
	width: 100px;
	height: 18px;
	float: left;
	clear: both;
	padding: 13px 15px 0px 20px;
	color: #4f4f4f;
}
.Comments form input{
	width: 218px;
	height: 18px;
	float: left;
	clear: none;
	margin-top: 7px;
	padding: 3px 5px;
	color: #4f4f4f;
}
.Comments form .EmailNotice{
	float: right;
	color: #919191;
	margin-top: 13px;
}
.Comments form textarea{
	width: 477px;
	height: 167px;
	float: left;
	clear: none;
	margin-top: 7px;
	padding: 3px 5px;
	color: #4f4f4f;
}
.Comments form input.submit{
	width: 178px;
	height: 31px;
	float: right;
	clear: none;
	border: none;
	margin-top: 7px;
	padding: 0;
	color: #4f4f4f;
}
.Comments #recaptcha_image{
	float: left;
	width: 300px;
	height: 57px;
	margin: 5px 0 0 135px;
}

.CalendarIcon{
	padding-right: 5px;
}


.ShopListDescription{
	/*clear: left;*/
	position: relative;
	float: left;
	width: 515px;
	padding-right: 20px;
}
.ShopListDescription p{
	width: auto;
}

.searchContainer{
	width: 100%;
	border-bottom: 1px solid #e2e2e2;
	padding-top: 5px;
	padding-bottom: 12px;
	margin-bottom: 12px;

}
input#sword{
	float: left;
	width: 140px;
	height: 18px;
	padding: 3px 5px 1px 5px;
	border: 1px solid #e2e2e2;
	font-size: 13px;
}
input#searchButton{
	float: left;
	width: 27px;
	height: 24px;
}

/*
 * Form
 */
.clearfix {
	clear: both;
	height: 0px;
	line-height: 0;
	font-size: 0;
}

.Form {
	padding-bottom: 10px;
	padding-top: 20px;
}

.FormLabel {
	display: block;
	width: 150px;
	height: 24px;
	line-height: 24px;
	margin-bottom: 8px;
	float: left;
	font-weight: bold;
}

.FormLabelError {
	color: #c10000;
}

.FormText {
	float: left;
	border: 1px solid #e2e2e2;
	height: 18px;
	width: 400px;
	padding: 3px 6px;
	margin-bottom: 8px;
}



.FormSelect {
	float: left;
}

.FormTextarea {
	float: left;
	border: 1px solid #e2e2e2;
	height: 200px;
	width: 400px;
	padding: 6px;
	margin-bottom: 8px;
}

.FormText:focus,
.FormTextarea:focus {
	border-color: #fd7402;
}

.FormTextError {
	border-color: #c10000;
}

.FormSubmit {
	background: #fd7402;
	color: #fff;
	font-weight: bold;
	height: 28px;
	line-height: 12px;
	padding: 0px 12px;
	float: right;
	margin-right: 97px;
	cursor: pointer;
}

.FormSubmit:hover {
	background: #c10000;
}

/*
 * SystemMessages
 */
.SysNotice,
.SysNoticeError,
.SysNoticeComplete {
	padding: 10px 10px;
	width: 642px;
	font-weight: bold;
	color: #fff;
	margin-top: 20px;
}

.SysNoticeError {
	background: #c10000;
}

.SysNoticeComplete {
	background: #199c3b;
}


/*
 * Racheshop
 */
.RacheshopCol {}

.RacheshopCol h2 {
    background-color: #C10000;
    background-image: url(../img/site/racheshop/headline_bg.jpg);
    background-position: top right;
    background-repeat: no-repeat;
}

.RacheshopCol .Teaser {
    background: #fff;
}

.RacheshopCol .ContentBox {
    border-color: #fff;
}

.RacheshopCol .RedeemVoucher {
    background-image: url(../img/site/racheshop/button_redeem.jpg);
    display: block;
    float: none;
    padding: 0;
    margin: 0;
    margin: 0 auto;
    text-indent: -6000px;
    height: 44px;
    width: 318px;
}

/*
 * reset functions
 */
.NoMargin { margin: 0; }