html { font-size: 62.5%; } 
body
{
    margin:0;
    padding:0;
    text-align:center;
    font-family:Arial,Tahoma, Verdana, Helvetica, sans-serif;
    background-color: #ddd;
    font-size: 1.4rem;
}
#wrapper
{
    text-align:left;
    font-size:1.4rem;
    width: 80%;
    margin:0 auto;
    color:#777;
}
@media only screen and (max-width: 1000px) {
/*    html { font-size: 100%; } 
    body{padding:0; font-size:100%; font-size: 1.4rem;}*/
    #wrapper{width: 100%;}
}
/*##################### GENERAL STYLES #####################*/
.centered{text-align:center}
.darkBg{background: #ddd;}
.green{color:#669933;}
.darkBlueBg{background: #336;color:#fff;}
a.noborder{text-decoration: none;}
table.full-width{width:100%;}
table tr.greenBg{background:#aaa;color:#fff;}
table caption{font-weight:bold;margin:10px 0;}
table.hoverBg tr:hover,.rowActive{background:#0f0;}
table thead tr{background: #999;color:#eee;}
.pads{padding:5px;}
.boldTxt{font-weight:bold;}
.redText{color: #f00;font-weight:bold;}
.greenText{color: #3BBF5C;font-weight:bold;}
.errorButton,.okButton
{
    background: transparent url('../images/error.png') no-repeat left;
    padding:10px 5px 10px 40px;
    display: inline-block;
}
.okButton{background: transparent url('../images/ok.png') no-repeat left;}
.clearFix{clear:both;}
h2.leftAlign,h3.leftAlign{text-align: left;}
.bottomMargin{margin-bottom: 10px;}
p.dbErrors{font-size: 0.8rem;}
em.reducedFonts{font-size: 0.9rem;font-weight: normal;}
.invisible{display: none;}
.visible{display: inline-block;}
.rowBgOne{background: #dfdfdf;}
.rowBgTwo{background: #fff;}
table tr#rowActive{background:#0f0;}
.rightAligned{text-align: right; margin-right: 10px;}
.button,a.logout_button,.generalButton
{
/*   -webkit-border-radius: 3px;  Saf3-4, iOS 1-3.2, Android ≤1.6 
   -moz-border-radius: 3px;  FF1-3.6 
   border-radius: 3px;  Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
  /* useful if you don't want a bg color from leaking outside the border: */
  -webkit-background-clip: padding-box; 
   background-clip: padding-box;
   border: 1px solid #669933;
/*   -webkit-box-shadow: 0px 0px 4px 0px #000;  Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ 
   -moz-box-shadow: 0px 0px 4px 0px #000;  FF3.5 - 3.6 
   box-shadow: 0px 0px 4px 0px #000;  Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
   /*background-color:#005b1d;*/
   background-color:#669933;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#669933), to(#669933)); /* Saf4+, Chrome */
   background-image: -webkit-linear-gradient(top, #669933, #669933); /* Chrome 10+, Saf5.1+, iOS 5+ */
   background-image: -moz-linear-gradient(top, #669933, #669933); /* FF3.6 */
   background-image: -ms-linear-gradient(top, #669933, #669933); /* IE10 */
   background-image: -o-linear-gradient(top, #669933, #669933); /* Opera 11.10+ */
   background-image: linear-gradient(to bottom, #669933, #669933);       
   color:#fff;
   font-size: 1.4rem;
   padding: 5px 15px;
   cursor:pointer;
   font-weight: normal;
   text-decoration: none;
}
.button:hover{color:#fff;}
img{border:none;}
.errorMessage,.message,.warning
{
    background: transparent url('../images/error.png') no-repeat 4px;
    border: 1px solid #f00;
    text-align: center;
    width: auto;
    margin: 10px auto;
    padding: 8px 2px 8px 35px;
}
.message{
    background: transparent url('../images/ok.png') no-repeat 4px;
    border: 1px solid #00f;
}
.warning{
    background: transparent url('../images/attention.png') no-repeat 4px;
    border: 1px solid #00f;
}
#content h1,#content h2,#content h3,#content h4{font-weight: bold;}

@media screen and (max-width: 768px) {
    h1{font-size: 1.6rem !important}
    h2{font-size: 1.5rem !important}
    h3{font-size: 1.4rem !important}
    h4{font-size: 1.3rem !important}
    h5,h6{font-size: 1.3rem !important}
}

.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('../images/ajax-loader.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}
img.responsive{max-width: 100%; height: auto;}

/*############################# HEADER ######################*/
header{margin-bottom: 10px;}
div#page-header
{
    /*margin:0 0 10px 0;*/ 
    background:#2FA8EC ;
    /*background: #fff;*/
    padding:1px 5px 2px 0;
    text-align: center;
    /*color:#000;*/
}
div#page-header h1{color: #fff; margin-top: 35px;}
div#page-header div.header-left{float:left; width: 20%;}
div#page-header div.header-right{float:right; width: 40%; text-align: right;}
div#page-header div.header-left p{margin:0; text-align: left;}
div#page-header div.header-left p a{border: none; text-decoration: none;}
@media screen and (max-width: 768px) {
    div#page-header{padding: 10px 5px 2px 0;}
    div#page-header h1{float: right; margin-top: 10px;}
}
/*h1#pageTitle{margin:0 0 4px 0; background:#336; padding:10px 5px;color:#fff;}*/
/*div#topNavi{width:100%;font-size:1.1rem;position:relative;background:#eee;}*/
div#page-header h2.centered{font-size: 1.6rem;font-weight: bold;}
nav{width:100%;background: #FFF; margin-bottom: 10px;}
nav div.main-navi{padding: 1px;}
nav div.main-navi p#flags{text-align: right;}
nav div.main-navi p#flags span{margin-right: 10px;}
/*################## CONTENT #####################*/
div#content{padding: 1px;}
div#content table.full-width{width:100%;}
div#content h1,div#content h2{margin:15px; text-align:center;font-size:1.8rem;}
div#content h2{font-size:1.6rem;}
div#content h4,div#content h3{margin:10px 0;font-size:1.5rem;}
div#content h3.message{margin: 10px auto;}
div#content h4{font-size:1.4rem;}

@media only screen and (max-width: 600px) {
    div#content h1,div#content h2{margin:15px; text-align:center;font-size:2.8rem;}
    div#content h2{font-size:2.6rem;}
    div#content h4,div#content h3{margin:10px 0;font-size:1.5rem;}
    div#content h3.message{margin: 10px auto;}
    div#content h4{font-size:1.4rem;}
}

/*--------- HOME ----------------*/
div.home-image-wrap{
    background: #fff;
/*    padding: 15% 15%;
    width: 100%;
    height: auto;*/
    position: relative;
}
div.home-image-wrap h1{
    position: absolute;
    bottom: -25px;
    left:-15px;
    background: #669933;
    margin: 0;
    color:#fff;
    padding: 5px 15px;
}

label{font-weight:bold;}
input, textarea, select{}
input.error, textarea.error, select.error{border:3px solid #f00;}
input,select{font-weight:bold;color:#760000;}

div.dataBorder,div.templates{padding:4px; background: #fff;}
div.whiteBg{background: #fff; padding:2px;}

/*############## VOUCHERS #########################*/
div#current-subscription-wrap{
    background: #eee;
    padding: 1px;
    text-align: center;
}
div#current-subscription-wrap h3.centered{font-size: 3.0rem; color:#2FA8EC}
div#current-subscription-wrap p{font-size: 1.8rem; font-weight: bold;}

div#voucher_list{
    text-align: center; 
    margin: 25px 20px 25px 20px;
    font-size: 1.0rem;
}
@media only screen and (max-width: 600px) {
    div#voucher_list{margin: 25px 5px 25px 5px;}
}
div#voucher_list div.voucher_content{
    padding: 5px 10px 0 10px;;
    /*margin: 0 20px 0 0;*/
    background: #eee;
    text-align: center;
    -webkit-box-shadow: 0px 0px 4px 0px #000;  /*Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+*/ 
   -moz-box-shadow: 0px 0px 4px 0px #000;  /*FF3.5 - 3.6*/
    box-shadow: 0px 0px 4px 0px #000;  /*Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
   /*background-color:#005b1d;*/
   min-height: 240px;
   position: relative;
}
@media only screen and (max-width: 600px) {
    div#voucher_list div.voucher_content{min-height: 200px;}
}
div#voucher_list div.voucher_content:hover{background: #ccc;}
div#voucher_list div#active{background: #aaa;}
div#voucher_list div.voucher_content h2{color:#669933;font-weight: bold; font-size: 1.8rem; padding-top:25px;}
@media only screen and (max-width: 600px) {
    div#voucher_list div.voucher_content h2{padding-top:1px;}
}

div#voucher_list div.voucher_content div.description p{font-size: 1.4rem;}
div#voucher_list div.voucher_content div.description h3{font-size: 1.6rem;}

div#voucher_list div.voucher_content p.price{color:#2FA8EC; font-weight: bold; font-size: 4.0rem; padding: 25% 0;}

@media screen and (max-width: 768px) {
    div#voucher_list div.voucher_content p.price{font-size: 2.0rem; padding: 2% 0 28% 0;}
}

/*div#voucher_list div.voucher_content a.button{padding: 8px 18px;}*/
form#variable_voucher_form{margin-top: 10px;}
form#variable_voucher_form label{display: block; margin-bottom: 5px;}


div#voucher_list div.voucher_content p.select-button-wrap{
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #669933;
    width: 100%;
    margin: 0;
    text-align: center;
}
div#voucher_list div.voucher_content p.select-button-wrap a
{display: block; padding: 8px 18px; color:#fff; font-size: 1.4rem; font-weight: bold;}
div#voucher_list div.voucher_content input.variable_price_button{width: 100%; padding: 8px 0;color: #fff;font-size: 1.4rem;}
div#voucher_list div.voucher_content input.variable_price_button{background: none; border:none; text-align: center;}



div.voucher_worth_wrap{font-size: 1.3rem;}
div.voucher_worth_wrap label{margin-bottom: 0px; margin-top: 0;}
div.voucher_worth_wrap label > span{font-size: 1.1rem;}
div.voucher_worth_wrap div.input-group{width:80%; margin: 0 auto 20px auto;}
div.voucher_worth_wrap div.input-group input{padding-right: 0;}
div.voucher_worth_wrap div.input-group span#basic-addon2{color: #669933; font-weight: bold;font-size: 2.0rem;}
@media only screen and (max-width: 600px) {
    div.voucher_worth_wrap div.input-group span#basic-addon2{font-size: 1.4rem;}
}

/*-------------- VOUCHER TEMPLATES -----------------------
div.templates{background: #fff;padding:10px 0 5px 0;}
div.selected-voucher-wrap{width: 40%; background: #eee; text-align: center;}
@media only screen and (max-width: 600px) {
    div.selected-voucher-wrap{width: 80%;}
}

div#content div.selected-voucher-wrap h1{background: #669933; padding: 5px; margin: 0; color:#fff;}
div.selected-voucher-wrap div.selected-voucher-content{padding: 20px 0;}
div#content div.selected-voucher-wrap h3{font-size: 1.6rem; color:#3399CC;}
div#content div.selected-voucher-wrap p.price{font-size: 2.0rem;font-weight: bold;}
div.templates-wrap,div.templates div.checkout-form-wrap{margin: 20px auto; background: #fff; width:98%; padding: 0 1%;}
div.templates-wrap label.btn{margin-right: 10px; margin-bottom: 10px;}

div.templates div.checkout-form-wrap{margin: 0 auto;}*/

/*----------------------- PAYPAL PAYMENT -------------------------*/
@media screen and (min-width: 480px) {
    div#payment-summary-wrap{ width: 100%;}
    div#paypal-payment-wrap{width: 100%;}
}
@media screen and (min-width: 992px) {
    div#payment-summary-wrap{ width: 80%; margin: 0 auto;}
    div#payment-summary-wrap div.retailer-data-wrap,div#payment-summary-wrap div.subscription-data-wrap{min-height: 200px;}
    div#paypal-payment-wrap{width: 50%; margin: 0 auto;}
}

@media screen and (min-width: 1024px) {
    div#payment-summary-wrap div.retailer-data-wrap,div#payment-summary-wrap div.subscription-data-wrap{min-height: 200px;}
    div#payment-summary-wrap{ width: 60%; margin: 0 auto;}
    div#paypal-payment-wrap{width: 40%; margin: 0 auto;}
}

div#payment-summary-wrap div.retailer-data-wrap{background: #eee; margin-right: 10px; padding: 10px 30px;}
div#payment-summary-wrap div.retailer-data-wrap address{margin: 20px 0;}
div#payment-summary-wrap div.subscription-data-wrap,
div#paypal-payment-wrap div.data-wrap{background: #ddd; padding: 10px; text-align: center;}

div#payment-summary-wrap p.price,p.sub-price{color:#2FA8EC; font-weight: bold; font-size: 3.0rem;}

div#payment-summary-wrap p.select-button-wrap
{
    margin: 30px 0;
    text-align: center;
}
div#payment-summary-wrap p.select-button-wrap span{margin-right: 10px;}
div#payment-summary-wrap p.select-button-wrap a
{background-color: #FFF; padding: 15px 18px; color:#2FA8EC; font-size: 1.6rem; font-weight: bold; border: 2px solid #2FA8EC;}
div#payment-summary-wrap p.select-button-wrap a:hover,div#paypal-payment-wrap p.checkout-button-wrap a:hover{text-decoration: none;background-color: #eee; }

div#paypal-payment-wrap p.checkout-button-wrap{margin: 0 0 10px 0; text-align: center; background-color: #2FA8EC; padding: 10px 0;}
div#paypal-payment-wrap p.checkout-button-wrap a{background-color: #FFF; padding: 15px 18px; color:#2FA8EC; font-size: 1.6rem; font-weight: bold; border: 2px solid #2FA8EC;}


div.agb-wrap{margin: 15px 0;}
div.agb-wrap a{color:#669933;}
p.agb-check-wrap label{font-weight: normal;}
p.popup-wrap{margin: 5px 0;}
p.popup-wrap span{ margin-right: 10px;}

div.paypal-notice{background: #eee; padding: 5px;}
div.paypal-notice h3{margin-bottom: 0;}

/*p.checkout-button-wrap{margin: 25px 0 10px 0;}
p.checkout-button-wrap input.paypal-button{
    background: #669933 url('../images/checkout_button.png') no-repeat right;
    width: 185px;
    height: 32px;
    padding: 0px 100px 0 10px;
    text-align: left;
    border: none;
    color:#fff;
}*/

div#purchase-success p.buttons-wrap{}
div#content .btn-primary{background-color: #669933; border-radius: 0px; border: none;}
div#content .btn-primary:hover{text-decoration: underline;}

footer{margin: 0;}
div#footer{clear: both; color:#fff; background: #2FA8EC; min-height: 30px; padding: 10px 5px; margin-top: 10px;}
div#footer p.copyright{text-align: left; padding: 4px 5px;}
div#footer p.copyright span{float:right; font-size: 1.4rem;}