/**********************************************************************************************

    1. DEFAULT STYLES
            1.1 Default
            1.2 Common
    
    2. MAIN
      
    3. SITES
            3.1 Index
            3.2 myAlerts
            3.3 myDeletion
            3.4 myDeletionSuccess
            3.5 mySubscription
            3.6 mySuspense


***********************************************************************************************/



/* 1. DEFAULT STYLES
-----------------------------------------------------------------------------------------------
===============================================================================================*/
/* 1.1 Default
-----------------------------------------------------------------------------------------------*/
#content, p {
    font-size: 11px;    
}
h1 {
    margin:0 0 25px;
}
hr {
    background:url("../../images/dot.gif") repeat-x bottom;
    border:none;
    height:1px;
    margin:0;
    padding:0;
}
label {
    margin:3px 0 0;
    font:bold 12px Tahoma, Geneva, sans-serif;
}
input[type="text"], input[type="password"] {
    border: 1px solid #7f9db9;
    color: #636262;
    /*! float: left; */
    font-size: 11px;
    /*height: 18px;*/
    margin: 0;
    padding: 0 0 0 2px;
    width: 140px;
    display: inline-block;
}


/* 1.2 Common
-----------------------------------------------------------------------------------------------*/
.boxWrapper {
    margin:0 0 10px;
    overflow:hidden;
    padding:15px;
    position:relative;
}
.wrongPass {
    bottom:0;
    color: #ff0000;
    font: bold 12px Arial, Helvetica, sans-serif;
    left:167px;
    margin:0;
    /*position:absolute;*/
}
.inputRow {
    overflow:hidden;
    min-height: 30px;
    width: 100%;
}
.inputRowCenter {
    text-align: center;
}
#alertImg {
    position:absolute;
    right:10px;
    top:60px;
}
#content .bg {
    background:#eee;
    border:1px solid #d6d7d9;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    margin:0 0 12px;
    padding:15px 10px;
}




/* 2. MAIN
-----------------------------------------------------------------------------------------------
===============================================================================================*/
/* 2.1 Main
-----------------------------------------------------------------------------------------------*/
#content {
    float: left;
    margin: 7px 0px 0px 0px;
    width: 100%;
}


/* 2.2 Red menu
-----------------------------------------------------------------------------------------------*/
.redMenu {
    float: left;
    font-size: 12px;
    list-style:none;
    margin-bottom:2px;
    padding: 0;
    width: 802px;
    margin-top: 10px;  
    
    width: 100%;
    display: table;
    table-layout: fixed; /* optional */
}
.redMenu li {
    margin:0;
    display: table-cell;
  width: auto;
  text-align: center;
    
}
.redMenu li:first-child a {
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}
.redMenu li:last-child a {
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
}
.redMenu li a {
    /*background: url(../../images/red_menu_01.jpg) no-repeat;*/
    
    background: rgb(209,32,22); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(209,32,22,1) 0%, rgba(133,31,27,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(209,32,22,1) 0%,rgba(133,31,27,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(209,32,22,1) 0%,rgba(133,31,27,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d12016', endColorstr='#851f1b',GradientType=0 ); /* IE6-9 */
    
    /* shadow */
    -webkit-box-shadow: 0px 2px 7px 1px rgba(0,0,0,0.46);
    -moz-box-shadow: 0px 2px 7px 1px rgba(0,0,0,0.46);
    box-shadow: 0px 2px 7px 1px rgba(0,0,0,0.46);
    
    color: #fff;
    float: left;
    font-size: 13px;
    font-weight: bold;
    height: 31px;
    line-height: 28px;
    text-align: center;
    text-decoration: none;
    width: 100%;
    border: 1px solid #8e4e4f;
}
.redMenu li a:hover, .redMenu li .active {
    background: rgb(215,74,80); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(215,74,80,1) 0%, rgba(159,73,72,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(215,74,80,1) 0%,rgba(159,73,72,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(215,74,80,1) 0%,rgba(159,73,72,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d74a50', endColorstr='#9f4948',GradientType=0 ); /* IE6-9 */
}
/*.redMenu .menu1 a:hover, .redMenu .menu1 .active {
    background: url(../../images/red_menu_hover_01.jpg) no-repeat
}
.redMenu .menu2 a {
    background: url(../../images/red_menu_02.jpg) no-repeat;
    width: 268px;
}
.redMenu .menu2 a:hover, .redMenu .menu2 .active {
    background: url(../../images/red_menu_hover_02.jpg) no-repeat
}
.redMenu .menu3 a {
    background: url(../../images/red_menu_03.jpg) no-repeat;
    width: 268px;
}
.redMenu .menu3 a:hover, .redMenu .menu3 .active {
    background: url(../../images/red_menu_hover_03.jpg) no-repeat
}*/





/* 3. SITES
-----------------------------------------------------------------------------------------------
===============================================================================================*/
/* 3.1 Index
-----------------------------------------------------------------------------------------------*/
#emailInfo {
    min-height:40px;
    overflow:hidden;
    position:relative;
    display:none;
}
#emailInfo label {
    /*! float: left; */
    /*! width: 150px; */
    margin-right: 10px;
}
#emailInfo span {
    /*! color: #424242; */
    /*! float: left; */
    /*! font-size: 11px; */
    /*! line-height:22px; */
    /*! width: 255px; */
}
#emailInfo a {
    color: #cb1c1c;
    font-size: 10px;
    /*! line-height:22px; */
}


#emailchange {
    min-height:40px;
    position:relative;
    /*! display: none; */
}
#emailchange label {
    /*! float: left; */
    /*width: 150px;*/
	margin-right:10px;
    /*! display: inline-block; */
}
#emailchange label.myPass {
    /*! margin-left:100px; */
}
#emailchange button {
    margin:0 0 0 34px;
}
#emailchange button em {
    padding:0 7px 0 3px;
}
.wrongPass.mypass {
    left:523px;
}
.boxWrapper .wait p { 
    padding: 13px 0 14px;
}


#activateEmail {
    overflow:hidden;
}
#activateEmail h2 {
    color: #ce1012;
    font:bold 14px Arial, Helvetica, sans-serif;
    margin:0 0 25px;
    padding:0 0 5px;
}
#activateEmail strong {
    color: #383838;
    display:block;
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    padding:0 0 15px;
    text-align: center;
    width: 100%;
}
#activateEmail ul {
    border: 1px solid #d6d7d9;
    -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;
    float: left;
    margin: 0 0 0 90px;
    width: 270px;
    padding: 17px 19px;
}
#activateEmail li {
    background: url(../../images/ok_accept.png) no-repeat left;
    color:#424242;
    font-size: 11px;
    list-style: none;
    margin: 5px 0;
    padding-left: 18px;
}


#email {
    float: left;
    position:relative;
    text-align: center;
    max-width: 355px;
    padding-top: 20px;
}
#email .btn {
    /*! margin:20px 0 0; */
}
#email .btn em {
    padding:0 40px 0 35px;
}
#email .wrongPass {
    font-size: 12px;
    font-weight: bold;
    margin: 20px 0 0;
    position:static;
}


#myPasswordForm {
    overflow:hidden;
}
#myPasswordForm .inputRow small {
    font-size:11px;
    margin:10px 0 0;
    line-height:22px;
}
#myPassword label {
    /*! float: left; */
    /*! width: 220px; */
}
#email a {
    color: #cb1c1c;
    font-size: 11px;
    font-weight:bold;
    margin: 10px 0 0 0;
    display: inline-block;
    margin-left: 20px;
}
#myPassword div {
    font-size: 11px;
}
#myPassword .wrongPass {
    /*! float: left; */
    margin: 3px 0 0 12px;
    position:static;
}
#myPassword div button {
    /*! margin: 0 0 0 350px; */
    margin-top: 10px;
}
#myPassword div button em {
    padding: 0 30px 0 25px;
}
#myPassword .wait {
    padding:32px 0;
}
#myPassword .wait p {
    padding:0;
}

.clickHere {
    background:url("../../images/dot.gif") repeat-x top;
    font-size: 11px;
    margin: 10px 0px 0 0px;
    padding: 12px 0 0 0;
}
.clickHere a {
    color: #636262;
}



/* 3.2 myAlerts
-----------------------------------------------------------------------------------------------*/
.myAlerts .checkboxes {
    width:525px;
}
.myAlerts {
    margin:0;
}
.myAlerts strong {
    color: #333333;
    display:block;
    font-size: 12px;
    font-weight: bold;
    padding:25px 0 0;
}
.myAlerts hr {
    margin:8px 0 0;
}
.myAlerts form p {
    color: #3c3c3c;
    margin: 0px;
    /*overflow:hidden;*/
    padding: 13px 0 7px 10px;
}
.myAlerts form p input {
    float: left;
    vertical-align:bottom;
}
.myAlerts form p label {
    /*float: left;*/
    font: normal 12px Tahoma;
    /*margin:1px 0 0;*/
}
.myAlerts .save {
    text-align:center;
}
.myAlerts .save .btn em {
    padding:0 30px 0 25px;
}
.myAlerts .success {
    margin:0 auto;
    padding:20px 0 20px 20px;
    width:200px;
}
.myAlerts .noSuccess {
    padding:20px 0 20px;
}
.myAlerts .wait {
    padding:150px 0 150px;
    width:525px;
}
#SafetyIDialog {
    bottom:35px;
    position:absolute;
    right:35px;
}
#wrapper .infoDialog {
	left:450px;
	top:400px;
}

/* 3.3 myDeletion
-----------------------------------------------------------------------------------------------*/
#myDeletion .boxWrapper p {
    /*! margin:0; */
    padding:0 0 15px;
}
#myDeletion .wrongPass {
    /*! float: left; */
    /*! margin: 3px 0 0 12px; */
    /*! position: static; */
    /*! padding-bottom: 15px; */
}
#myDeletion label {
    float: left;
    /*! margin:3px 0 0; */
    /*! width: 200px; */
}
#myDeletion input {
    max-width: 100px;
}
#myDeletion .inputRow {
    height: 24px;
}
#myDeletion .note {
    padding:10px 0 0;
    color:#940202;
}
#myDeletion #content strong {
    display:block;
    margin:0 0 5px;
}
#myDeletion #content ul {
    margin:0;
    padding-bottom: 15px;
    margin-left: 40px;
}
#myDeletion #content > div > div {
    /*! overflow:hidden; */
}
#myDeletion .wait {
	padding:27px 0 10px;
}
#boxConfirmDeletion {
	display:none;
}
#myDeletion #content .btn em {
    padding:0 25px 0 20px;
}
#myDeletion #content button {
    /*! float:left; */
    /*! margin:20px 20px 0 240px; */
}
#myDeletion #content .btn {
    /*! float:left; */
    /*! margin:20px 0 0; */
    margin-left: 10px;
    margin-right: 10px;
}


/* 3.4 myDeletionSuccess
-----------------------------------------------------------------------------------------------*/
#myDeletionSuccess {
    background: #ccc;
    /*! left:50%; */
    /*! margin-left:-282px; */
    /*! position:absolute; */
    top:25%;
    padding: 15px;
    padding-top: 15px;
    padding-top: 50px;
}
#myDeletionSuccess #wrapper {
    background:#FFF;
    border: 1px solid #d5d1e9;
    margin:0 auto;
    max-width: 560px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    -webkit-box-shadow: 3px 3px 10px 2px #999999;
    -moz-box-shadow: 3px 3px 10px 2px #999999;
    box-shadow: 3px 3px 10px 2px #999999;
}
#myDeletionSuccess #head {
    background:url("../../images/mydeletionsuccess_head.png") repeat-x;
    height: 41px;
    margin: 2px;
    padding: 0 10px;
    -moz-border-radius:2px;
    -webkit-border-radius:2px; 
    border-radius:2px;
}
#myDeletionSuccess #head strong {
    color: #FFF;
    display: block;
    font:bold 15px Arial, sans-serif;
    line-height: 41px;
}
#myDeletionSuccess #main {
    color: #424242;
    font-size:12px;
    padding:13px;    
}
#myDeletionSuccess #main span {
    color: #c40000;
    font-family:Arial sans-serif;
    font-weight:bold;
}
#myDeletionSuccess #main p {
    background:#f4f4f4;
    font-size:12px;
    padding:20px 16px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px; 
    border-radius:3px;
}
#myDeletionSuccess #foot {
    background:url("../../images/mydeletionsuccess_foot.png") repeat-x;
    height: 60px;
    position:relative;
}
#myDeletionSuccess #foot a {
    bottom: 18px;
    position:absolute;
    right: 18px;
}
#myDeletionSuccess #main a {
    color:#C40000;
    font-weight:bold;
}


/* 3.5 mySubscription
-----------------------------------------------------------------------------------------------*/
#mySubscription .boxWrapper div {
    overflow: hidden;
    padding: 8px 0;
}
#mySubscription #content .bg {
    background: #eeeeee;
    margin:0;
    border:none;
    -moz-border-radius:0;
    -webkit-border-radius:90;
    border-radius:0;
}
#mySubscription #content strong {
    font-weight: bold;
    float: left;
    padding: 0 0 0 10px;
    /*! width: 300px; */
    display: table-cell;
    width: 41%;
    padding-right: 5px;
}
#mySubscription #content p {
    margin: 0;
    /*! float: left; */
    width: 400px;
    display: table-cell;
}
#mySubscription #content a {
    color: #ce1012;
    margin-right: 5px;
}


/* 3.6 mySuspense
-----------------------------------------------------------------------------------------------*/
#mySuspense #content .bg strong {
    background:url("../../images/dot.gif") repeat-x bottom;
    display:block;
    padding:0 0 10px;
}
#mySuspense #content .boxWrapper > div {
    min-height:240px;
    width:530px;
}
#mySuspense #content .boxWrapper .wait p {
    padding-top:43px;
}
#mySuspense #content form {
    /*float:right;*/
    /*display:inline-block;*/
}
#mySuspense #content a.btn {
    /*! float:left; */
}
#mySuspense #content ul {
    padding:0 0 0 15px;
}
#mySuspense #content li {
    line-height:1.5;
    margin:0 0 7px;
}
#mySuspense #content li span {
    color:#f00;
}


/* 3.7 subscriptionIndex
-----------------------------------------------------------------------------------------------*/
#myDeletion.subscriptionIndex #content .note {
    /*! float:left; */
    /*! margin:-78px 0 0; */
}

/* glej kodo od 3.4 myDeletion. */
#myDeletion.subscriptionIndex #content button {
    /*! float:right; */
    /*! margin:65px 392px 0 0; */
}
#myDeletion.subscriptionIndex #content a.btn {
    /*! float:left; */
    /*! margin:-25px 0 10px 392px; */
}

/* 3.8 subscriptionDetails
-----------------------------------------------------------------------------------------------*/
#mySuspense.subscriptionDetails #content .bg {
    padding-top:5px;
}
#mySuspense.subscriptionDetails #content .bg strong {
    background: none;
    border:none;
    display: inline;
    /*! margin: 0 0 0 5px; */ 
}
#mySuspense.subscriptionDetails #content .bg p {
    margin-top: 10px;
}
#mySuspense.subscriptionDetails #content .bg a {
    color: #ce1012;
    /*! margin: 0 0 0 6px; */
}
 #mySuspense.subscriptionDetails #content .bg .payments {  
    background:url("../../images/headingArrowRight.png") no-repeat;
    padding: 0 0 0 15px;
}
#mySuspense.subscriptionDetails #content .bg h2 {
    background:url("../../images/dot.gif") repeat-x bottom;
    color: #ce1012;
    font: bold 15px Arial, Helvetica, sans-serif;
    margin: 0 0 10px 0;
    padding: 0 0 6px;
}
#mySuspense.subscriptionDetails #content .bg.inner { 
    background: #f4f4f4;
    overflow: hidden;
    padding: 5px;
    margin: 20px 0;
}
#mySuspense.subscriptionDetails #content .bg.inner ul {
    float:left;
    list-style: none;
    margin: 0;
    padding: 0;
    width:170px;
}
#mySuspense.subscriptionDetails #content .bg.inner li {
    line-height:1.3;
}
#mySuspense.subscriptionDetails #content .bg.inner ul.list2 { 
    width:170px;
}

#mySuspense.subscriptionDetails #content .bg.inner ul.list3 { 
    width:90px;
}

#mySuspense.subscriptionDetails #content .bg.inner ul.list4 { 
    width:66px;
}
#mySuspense.subscriptionDetails #content .bg .seeAll {
    background:url("../../images/headingArrowDown.png") no-repeat left center;
    padding: 0 0 0 15px;
    display: inline-block;
    margin-top: 10px;
}
#mySuspense #tblSubscriptions {
    width: 100%;
}
#mySuspense #tblSubscriptions td {
	padding-left:10px;
	/*background: rgba(0, 0, 0, 0) url("/images/dot.gif") repeat-x scroll center bottom;*/
	border-bottom: 1px dotted;
}





.responsiveRow {
    float:left;
    margin-right: 15px;
}


.responsiveContainerTable {
        display: table;
        width: 100%;
        max-width: 400px;
}
#BillOrderForm .responsiveContainerTable {
    margin: 0 auto;
}
.responsiveRowTable {
    display: table-row;
    margin-right: 15px;
}
.responsiveRowTable span {   
        display: table-cell;
        width: 50%;
        padding: 3px;
        vertical-align: middle;
}
.responsiveRowTable span input {
     width: 100%;
}


#btnSuspendAccount, #btnReactivateAccount {
    float: right;
}

#myDeletion .responsiveContainerTable {
    max-width: 450px;
}

.frmButtons {
    text-align: center;
    margin-top: 5px;
}








@media only screen and (max-width: 820px) {
    .responsiveContainer {
        display: table;
        width: 100%;
        max-width: 400px;
    }
    .responsiveRow {
        float: none;  
        display: table-row;
    }  
    .responsiveRow span {   
        display: table-cell;
        width: 50%;
        padding: 3px;
        vertical-align: middle;
    }
    .responsiveRow span input {
        width: 100%;
    }
    #emailchange button {
        margin: 0;
    }
    #emailchange button em {
        padding-left: 7px;
        padding-right: 13px;
    }
    .responsiveCenter {
        text-align: center;
    }

    /* Email box */
    #email {
        float:none;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
    #email a {
        margin-left: 0px;
    }
    #activateEmail ul {
        float: none;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        box-sizing: border-box;
        max-width: 270px;
    }
    #activateEmail h2 {
        margin-bottom:15px;
    }
    #activateEmail strong {
        padding-bottom: 25px;
    }
    
    /* myalerts.php */
    .myAlerts .checkboxes {
        width: 62%;        
        width: -webkit-calc(100% - 257px);
        width: -moz-calc(100% - 257px);
        width: calc(100% - 257px);
    }
    /* mysuspense.php */
    #mySuspense #content .boxWrapper > div {
        width: 62%;        
        width: -webkit-calc(100% - 237px);
        width: -moz-calc(100% - 237px);
        width: calc(100% - 237px);
    }
    /* mydeletion.php */
    #myDeletion #content .btn {
        margin-bottom: 20px;
        margin-top: 10px;
    }
}
@media only screen and (max-width: 768px) {
	/* products/r/unsubscribe.php */
	.forward {
		text-align:center;
	}
}
@media only screen and (max-width: 750px) {
    /* myalerts.php */
    #alertImg {
        width: 190px;
    }
    #SafetyIDialog img {
        width: 150px;
    }
    #SafetyIDialog {
        bottom: 70px;
    }    
    .myAlerts .checkboxes {
        width: 62%;        
        width: -webkit-calc(100% - 205px);
        width: -moz-calc(100% - 205px);
        width: calc(100% - 205px);
    }
    /* mysuspense.php */
    #mySuspense #content .boxWrapper > div {
        width: 62%;        
        width: -webkit-calc(100% - 205px);
        width: -moz-calc(100% - 205px);
        width: calc(100% - 205px);
    }
}
@media only screen and (max-width: 570px) {
    /* myalerts.php */
    #alertImg {
        display: none;
    }
    .myAlerts .checkboxes {
        width: 100%
    }
    #SafetyIDialog {
        position: static;
        margin-top: 76px;
        display: inline-block;
        margin-bottom: 30px;
    }
    #SafetyIDialogWrapper {
        text-align: center;
    }
    /* mysuspense.php */
    #mySuspense #content .boxWrapper > div {
        width: 100%;
    }
    /* products/myproducts.php */
    #mySuspense.myproducts #tblSubscriptions .myproductstableplacano {
		display:none;
    }
    #mySuspense.myproducts .myproductshideresponsive {
		display:none;
    }
}
@media only screen and (max-width: 380px) {
    #myPassword div button em {
        padding-left: 0px;
        padding-right: 5px;
    }
    #activateEmail h2 {
        text-align: center;
    }
    /* mysuspense.php */
    #btnSuspendAccount, #btnReactivateAccount {
        float: none;
    }
    #frmSuspendAccount, #frmReactivateAccount {
        text-align: center;
    }
    #frmSuspendAccount .btn, #frmReactivateAccount .btn, #myDeletion #content .btn {       
        margin-left: 30px;
        margin-right: 30px;
        margin-bottom: 30px;
    }
    #content .bg {
        margin-bottom: 20px;
    }
    /* mydeletion.php */
    #myDeletion #content ul {
        margin-left: 20px;
    }
    /* /subscrition/subscriptiondetails.php */
    #mySuspense #tblSubscriptions .colProduct {
        display: none;
    }
    #mySuspense #tblSubscriptions .responsiveHideRacunText {
        display: none;
    }
}