@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: BigNoodleTitling;
    src: url(../font/bnt.ttf);
}

body {
    padding: 0px;
    font-family: BigNoodleTitling;
    width: 980px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px;
}

#loginbg {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: -9999;
    width: 100%;
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.dropzone1 {
    display: block;
    float: left;
    width: 160px;
    height: 213px;
    border: 1px solid #eee;
    text-align: center;
    padding: 0px;
    margin-bottom: 20px;
    margin-left: 0px;
    font-family: Arial;
    background: url('../images/front@2x.png');
    background-size: 160px 213px;
}

.dropzone2 {
    display: block;
    float: left;
    width: 160px;
    height: 213px;
    border: 1px solid #eee;
    text-align: center;
    padding: 0px;
    margin-bottom: 20px;
    margin-left: 10px;
    font-family: Arial;
    background: url('../images/center@2x.png');
    background-size: 160px 213px;
}

.dropzone3 {
    display: block;
    float: left;
    width: 160px;
    height: 213px;
    border: 1px solid #eee;
    text-align: center;
    padding: 0px;
    margin-bottom: 20px;
    margin-left: 10px;
    font-family: Arial;
    background: url('../images/back@2x.png');
    background-size: 160px 213px;
}


/* //////////////////////////////////////
/////////////////////////////////////////
//////////////////////////////Menu bar */

#heroText {

    z-index: 99;
    float: right;
    margin-right: 0px;
    display: block;
    top: -190px;
    right: 0px;
    padding: 5px 20px 5px 20px;
    position: relative;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    text-decoration: none;
    color: #000;
    padding-right: 20px;
    padding-left: 10px;
    margin-right: 10px;
    margin-left: 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #fff;
    border-radius: 6px 0px 0px 6px;
    font-size: 20pt;
    background-color: #fff;
    opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
}


.hero {
    margin-top: 440px;
    position: relative;
    top: -360px;
}

.animate-if {
    position: absolute;
    width: 960px;
    height: 330px;
    width: 100%;
    height: 330px;
    margin-left: 10px;
    margin-bottom: 0px;
}

.animate-if.ng-enter, .animate-if.ng-leave {
    transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}

.animate-if.ng-enter {
    opacity: 0;
}

.animate-if.ng-leave.ng-leave-active {
    opacity: 0;
}

.animate-if.ng-enter.ng-enter-active {
    opacity: 1;
}

.pagination {
    margin-bottom: 20px;
    margin-left: 0px;
    top: -20px;
    position: relative;
    cursor: pointer;
}


#header {
    position: fixed;
    width: 100%;
    height: 60px;
    top: 0px;
    left: 0px;
    z-index: 99999;
}

#shopHeader {
    width: 960px;
    height: 80px;
    top: 60px;
    margin: auto;
    padding-left: 10px;
    z-index: 99999;
    background-color: #fff;
}

.blueheader {
    background-color: #4079d5;
}

.greenheader {
    background-color: #41cc68;
}

#loader {
    margin-right: auto;
    margin-left: auto;
    width: 40px;

}

#menuContainer {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
}

input[type="text"],
input[type="email"]{
    float: right;
    margin-top: 15px;
    height: 20px;
    width: 300px;
    display: block;
    border: solid 1px #2e5faf;
    border-radius: 5px;
    background-color: #2e5faf;
    padding: 5px;
    padding-left: 10px;
    padding-right: 30px;
    font-family: 'Open Sans', sans-serif;

    font-size: 14px;
    color: #fff;
}

#collectionSearch input {
    float: right;
    margin-top: 15px;
    height: 20px;
    width: 300px;
    display: block;
    border: solid 1px #34a955;
    border-radius: 5px;
    background-color: #34a955;
    padding: 5px;
    padding-left: 10px;
    padding-right: 30px;
    font-family: 'Open Sans', sans-serif;

    font-size: 14px;
    color: #fff;
}


#collectionSearch input::-webkit-input-placeholder {
    color: #49e174;
}

#collectionSearch input:-moz-placeholder {
    /* FF 4-18 */
    color: #49e174;
}

#collectionSearch input::-moz-placeholder {
    /* FF 19+ */
    color: #49e174;
}

#collectionSearch input:-ms-input-placeholder {
    /* IE 10+ */
    color: #49e174;
}

#resetForm2 {
    float: right;
    margin-top: 21px;
    margin-left: 10px;
    display: block;
    width: 20px;
    height: 20px;
    background: url('../images/resetFormBtn2@2x.png');
    background-size: 20px 20px;
    position: relative;
    left: 335px;
}

#resetForm2:hover {
    float: right;
    margin-top: 21px;
    margin-left: 10px;
    display: block;
    width: 20px;
    height: 20px;
    background: url('../images/resetFormBtnHover2@2x.png');
    background-size: 20px 20px;
    cursor: pointer;
    position: relative;
    left: 335px;
}


input[type="submit"] {
    display: block;
    width: 100px;
    height: 40px;
    text-align: center;
    float: right;
    line-height: 36px;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    margin-left: 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #41cc68;
    border-radius: 6px;
    font-family: BigNoodleTitling;
    font-size: 16pt;
    background-color: #41cc68;
}

input[type="submit"]:disabled, input[type="submit"]:disabled:hover {
    display: block;
    cursor: default;
    width: 100px;
    height: 40px;
    text-align: center;
    float: right;
    line-height: 36px;
    text-decoration: none;
    color: #666666;
    margin-left: 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #666666;
    border-radius: 6px;
    font-family: BigNoodleTitling;
    font-size: 16pt;
    background-color: #ffffff;
}

input[type="submit"]:hover {
    display: block;
    width: 100px;
    height: 40px;
    text-align: center;
    float: right;
    line-height: 36px;
    text-decoration: none;
    color: #fff;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #2d8e49;
    border-radius: 6px;
    font-family: BigNoodleTitling;
    font-size: 16pt;
    background-color: #2d8e49;
}


#resetForm {
    float: right;
    margin-top: 21px;
    margin-left: 10px;
    display: block;
    width: 20px;
    height: 20px;
    background: url('../images/resetFormBtn@2x.png');
    background-size: 20px 20px;
    position: relative;
    left: 335px;
}

#resetForm:hover {
    float: right;
    margin-top: 21px;
    margin-left: 10px;
    display: block;
    width: 20px;
    height: 20px;
    background: url('../images/resetFormBtnHover@2x.png');
    background-size: 20px 20px;
    cursor: pointer;
    position: relative;
    left: 335px;
}

textarea:focus, input:focus, select:focus {
    outline: 0;
}

::-webkit-input-placeholder {
    color: #5a90e8;
}

:-moz-placeholder {
    /* FF 4-18 */
    color: #5a90e8;
}

::-moz-placeholder {
    /* FF 19+ */
    color: #5a90e8;
}

:-ms-input-placeholder {
    /* IE 10+ */
    color: #5a90e8;
}

#menuTitel {
    float: left;
    color: #fff;
    margin-top: 16px;
    font-family: BigNoodleTitling;
    font-size: 28px;
}

#menuTitel a {
    float: left;
    display: block;
    width: 30px;
    height: 30px;
    background: url('../images/backArrow@2x.png');
    background-size: 30px 30px;
    margin-right: 20px;
}

#menuTitel a:hover {
    float: left;
    display: block;
    width: 30px;
    height: 30px;
    background: url('../images/backArrowHL@2x.png');
    background-size: 30px 30px;
    margin-right: 20px;
}


#menuItems {
    margin-left: auto;
    margin-right: 0px;
}

#menuItems ul {
    list-style-type: none;
    float: right;
    list-style: none;
    margin: 0;
    padding: 0;
    padding-top: 15px;
    position: relative;
    text-align: center;
}

#menuItems ul li {
    float: left;
    position: relative;
}

#menuItems ul li a {
    display: block;
    width: 30px;
    height: 30px;
    margin-left: 20px;
    margin-right: 0px;
    text-indent: -9999px;
}

#searchTab {
    background: url('../images/tabBarItemOntdek@2x.png');
    background-size: 30px 30px;
}

#searchTab:hover,
#searchTab.isActive {
    background: url('../images/tabBarItemOntdekHighlighted@2x.png');
    background-size: 30px 30px;
}

#wishTab {
    background: url('../images/tabBarItemVerlang@2x.png');
    background-size: 30px 30px;
}

#wishTab:hover,
#wishTab.isActive{
    background: url('../images/tabBarItemVerlangHighlighted@2x.png');
    background-size: 30px 30px;
}

#shopTab {
    background: url('../images/tabBarItemShop@2x.png');
    background-size: 30px 30px;
}

#shopTab:hover,
#shopTab.isActive {
    background: url('../images/tabBarItemShopHighlighted@2x.png');
    background-size: 30px 30px;
}

#nutsTab {
    background: url('../images/tabBarItemNuts@2x.png');
    background-size: 30px 30px;
}

#nutsTab:hover,
#nutsTab.isActive {
    background: url('../images/tabBarItemNutsHighlighted@2x.png');
    background-size: 30px 30px;
}

#mainTab {
    background: url('../images/tabBarItemCollectie@2x.png');
    background-size: 30px 30px;
}

#mainTab:hover,
#mainTab.isActive {
    background: url('../images/tabBarItemCollectieHighlighted@2x.png');
    background-size: 30px 30px;
}

#profileTab {
    background: url('../images/tabBarItemProfiel@2x.png');
    background-size: 30px 30px;
}

#profileTab:hover,
#profileTab.isActive {
    background: url('../images/tabBarItemProfielHighlighted@2x.png');
    background-size: 30px 30px;
}

#moreTab {
    background: url('../images/tabBarItemMeer@2x.png');
    background-size: 30px 30px;
}

#moreTab:hover,
#moreTab.isActive {
    background: url('../images/tabBarItemMeerHighlighted@2x.png');
    background-size: 30px 30px;
}


#popoverBg {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    background-color: #000;
    opacity: 0.6;
    z-index: 999999;
}

#fullscreencontainer {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    background-color: #000;
    z-index: 9999999;
    padding: 1%;
}

#fullscreenimg {

    width: 96%;
    height: 96%;
    left: 0px;
    top: 0px;
    background-color: #000;
    z-index: 9999999;
}

#trashfull {
    width: 40px;
    height: 40px;
    position: fixed;
    z-index: 99999999;
    background: url('../images/trashFullscreen@2x.png');
    background-repeat: no-repeat;
    background-size: 40px 40px;
    right: 20px;
    top: 20px;
    cursor: pointer;
}

#trashfull:hover {
    background: url('../images/trashFullscreenHighlighted@2x.png');
    background-repeat: no-repeat;
    background-size: 40px 40px;
    cursor: pointer;
}

#closefull {
    width: 40px;
    height: 40px;
    position: fixed;
    z-index: 99999999;
    background: url('../images/closeFullscreen@2x.png');
    background-repeat: no-repeat;
    background-size: 40px 40px;
    left: 20px;
    top: 20px;
    cursor: pointer;
}

#closefull:hover {
    background: url('../images/closeFullscreenHighlighted@2x.png');
    background-repeat: no-repeat;
    background-size: 40px 40px;
    cursor: pointer;
}

#prevImg {
    width: 40px;
    height: 40px;
    position: fixed;
    z-index: 99999999;
    background: url('../images/prevFullscreen@2x.png');
    background-repeat: no-repeat;
    background-size: 40px 40px;
    left: 20px;
    top: 50%;
    cursor: pointer;
}

#prevImg:hover {
    background: url('../images/prevFullscreenHighlighted@2x.png');
    background-repeat: no-repeat;
    background-size: 40px 40px;
    cursor: pointer;
}

#nextImg {
    width: 40px;
    height: 40px;
    position: fixed;
    z-index: 99999999;
    background: url('../images/nextFullscreen@2x.png');
    background-repeat: no-repeat;
    background-size: 40px 40px;
    right: 20px;
    top: 50%;
    cursor: pointer;
}

#nextImg:hover {
    background: url('../images/nextFullscreenHighlighted@2x.png');
    background-repeat: no-repeat;
    background-size: 40px 40px;
    cursor: pointer;
}


#popover {
    padding: 20px;
    width: 740px;
    height: 400px;
    position: fixed;
    margin-left: 50%;
    margin-bottom: 50%;
    left: -360px;
    top: 200px;
    background-color: #fff;
    z-index: 9999999;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #fff;
    border-radius: 20px;
    overflow: scroll;
}

#popover2 {
    padding: 20px;
    width: 400px;
    height: 180px;
    position: fixed;
    margin-left: 50%;
    margin-bottom: 50%;
    left: -200px;
    top: 200px;
    background-color: #fff;
    z-index: 9999999;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #fff;
    border-radius: 20px;
    overflow: scroll;
}

/* //////////////////////////////////////
/////////////////////////////////////////
////////////////////////////// Highlight Section */

.clearBoth {
    clear: both;
}

#highlightSectionTitle {
    float: left;
    position: relative;
    left: 10px;
    font-family: BigNoodleTitling;
    font-size: 20px;
    color: #666666;
}

#highlightSectionMoreLink a {
    float: right;
    right: 10px;
    position: relative;
    font-family: BigNoodleTitling;
    font-size: 20px;
    color: #4079d5;
    margin-top: 6px;
    text-decoration: none;
}

#highlightSectionMoreLink a:hover {
    float: right;
    right: 10px;
    position: relative;
    font-family: BigNoodleTitling;
    font-size: 20px;
    color: #000;
    margin-top: 6px;
    text-decoration: none;
}

#highlightSectionItem {
    float: left;
    margin-right: 10px;
    margin-left: 10px;
    margin-top: 20px;
    height: 250px;
}

#highlightSectionItem a {
    text-decoration: none;
}


#highlightImage {
    width: 120px;
    height: 160px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #ababab;
    transition-property: border-radius, border, width, height;
    transition-duration: 0.3s;
    transition-timing-function: linear;
    background-size: cover;
    background-position: center !important;
    margin-bottom: 5px;
}

#highlightImage #serieOverlay {
    width: 120px;
    height: 160px;
    position: relative;
    top: -1px;
    left: -1px;
    background: url('../images/collectionCoverOverlayBig.png');
    background-size: 120px 160px;
}

#bannerSectionItem {
    float: left;
    margin-right: 10px;
    margin-left: 10px;
    margin-top: 20px;
    height: 150px;
}

#banner {
    width: 296px;
    height: 150px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #ababab;
    border-radius: 10px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    text-decoration: none;


}

#bannerTitle {
    padding: 5px;
    position: relative;
    top: -29px;
    text-align: center;
    width: 296px;
    text-decoration: none;
    font-size: 18px;
    color: #666;
    background-color: #fff;
    opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: linear;

}

#bannerSectionItem:hover #bannerTitle {
    color: #4079d5;
    opacity: 0.9;
    filter: alpha(opacity=80); /* For IE8 and earlier */

}


#highlightSectionItem:hover #highlightImage {
    align-content: center;
    width: 120px;
    height: 160px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #000;
}


#itemTitle {
    margin-top: 3px;
    font-size: 16px;
    color: #666666;
    width: 120px;
    text-decoration: none;
}

#recommendedBadge {
    width: 40px;
    height: 40px;
    position: relative;
    top: -1px;
    left: 0px;
    background: url('../images/recommendedBadge.png');
    background-size: 40px 40px;
}

#recommendedBadge2 {
    width: 80px;
    height: 80px;
    position: relative;
    top: -1px;
    left: 10px;
    background: url('../images/recommendedBadgeBig.png');
    background-size: 80px 80px;
}

#itemSubTitle {
    font-size: 14px;
    color: #aaaaaa;
    width: 120px;
    text-decoration: none;
    margin-bottom: 3px;
}

#highlightSectionItem:hover #itemTitle {
    font-size: 16px;
    color: #4079d5;
    width: 120px;
    text-decoration: none;
}

#highlightSectionItem:hover #itemSubTitle {
    font-size: 14px;
    color: #666666;
    width: 120px;
    text-decoration: none;

}

/* //////////////////////////////////////
/////////////////////////////////////////
////////////////////////////// Segmented Control */


#segcon, #segcon2 {
    width: 600px;
    height: 40px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    font-size: 18px;
    display: block;
}

#segcon a {
    display: block;
    width: 200px;
    height: 40px;
    text-align: center;
    float: left;
    line-height: 40px;
    cursor: pointer;
    text-decoration: none;
    color: #41cc68;
}

#segcon2 a {
    display: block;
    width: 200px;
    height: 40px;
    text-align: center;
    float: left;
    line-height: 40px;
    cursor: pointer;
    text-decoration: none;
    color: #437bd2;
}

#segcon a:hover {
    display: block;
    width: 200px;
    height: 40px;
    text-align: center;
    float: left;
    line-height: 40px;
    cursor: pointer;
    text-decoration: none;
    background-color: #41cc68;
    color: #fff;
}

#segcon2 a:hover {
    display: block;
    width: 200px;
    height: 40px;
    text-align: center;
    float: left;
    line-height: 40px;
    cursor: pointer;
    text-decoration: none;
    background-color: #437bd2;
    color: #fff;
}

#leftseg {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #41cc68;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

#middleseg {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-top: 1px solid #41cc68;
    border-bottom: 1px solid #41cc68;
}

#rightseg {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #41cc68;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.activeSeg {
    color: #ffffff !important;
    background-color: #41cc68;
}

#segcon2 #leftseg {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #437bd2;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

#segcon2 #middleseg {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-top: 1px solid #437bd2;
    border-bottom: 1px solid #437bd2;
}

#segcon2 #rightseg {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #437bd2;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

#segcon2 .activeSeg {
    color: #ffffff !important;
    background-color: #437bd2;
}


#editSeriesLink {
    float: left;
    font-family: 'Open Sans', sans-serif;
    font-size: 12pt;
    color: #666;
    text-decoration: none;
    display: block;
    height: 40px;
    text-align: center;
    line-height: 40px;
    margin-left: 10px;
}

#editSeriesLink:hover {
    float: left;
    font-family: 'Open Sans', sans-serif;
    font-size: 12pt;
    color: #000;
    text-decoration: none;
    display: block;
    height: 40px;
    text-align: center;
    line-height: 40px;
    margin-left: 10px;
    cursor: pointer;
}

#optionsMenu {
    list-style: none;
    position: relative;
    float: right;
    margin: 0;
    margin-left: 10px;
    padding: 0;
    z-index: 500;
}

#optionsMenu ul {
    list-style: none;
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
}

#optionsMenu ul #optionsBtn {
    display: block;
    height: 40px;
    width: 40px;
    margin-right: 10px;
    background: url('../images/actionsBtn@2x.png');
    background-repeat: no-repeat;
    background-size: 40px 40px;
    padding-bottom: 10px;
}

#removeSerieBtn2 {
    display: block;
    height: 40px;
    width: 40px;
    margin-right: 10px;
    background: url('../images/removeSerieBtn@2x.png');
    background-repeat: no-repeat;
    background-size: 40px 40px;
    padding-bottom: 10px;
    float: right;
}

#removeSerieBtn2:hover {
    background: url('../images/removeSerieBtnHover@2x.png');
    background-repeat: no-repeat;
    background-size: 40px 40px;
}


#addSerieBtn2 {
    display: block;
    height: 40px;
    width: 40px;
    margin-right: 10px;
    background: url('../images/addSerieBtn@2x.png');
    background-repeat: no-repeat;
    background-size: 40px 40px;
    padding-bottom: 10px;
    float: right;
}

#addSerieBtn2:hover {
    background: url('../images/addSerieBtnHover@2x.png');
    background-repeat: no-repeat;
    background-size: 40px 40px;
}

#optionsMenu:hover #optionsBtn {
    display: block;
    height: 40px;
    width: 40px;
    margin-right: 10px;
    background: url('../images/actionsBtnHover@2x.png');
    background-size: 40px 40px;
    background-repeat: no-repeat;
}

#optionsMenu ul #optionsBtn2 {
    display: block;
    height: 40px;
    width: 40px;
    margin-right: 10px;
    background: url('../images/actionsBtn2@2x.png');
    background-repeat: no-repeat;
    background-size: 40px 40px;
    padding-bottom: 10px;
}

#optionsMenu:hover #optionsBtn2 {
    display: block;
    height: 40px;
    width: 40px;
    margin-right: 10px;
    background: url('../images/actionsBtnHover2@2x.png');
    background-size: 40px 40px;
    background-repeat: no-repeat;
}

#optionsMenu ul #optionsBtn3 {
    display: block;
    height: 40px;
    width: 40px;
    margin-right: 10px;
    background: url('../images/actionsBtn3@2x.png');
    background-repeat: no-repeat;
    background-size: 40px 40px;
    padding-bottom: 10px;
}

#optionsMenu:hover #optionsBtn3 {
    display: block;
    height: 40px;
    width: 40px;
    margin-right: 10px;
    background: url('../images/actionsBtnHover3@2x.png');
    background-size: 40px 40px;
    background-repeat: no-repeat;
}

#optionsMenu ul #optionsBtn4 {
    display: block;
    height: 40px;
    width: 40px;
    margin-right: 10px;
    background: url('../images/sortBtn@2x.png');
    background-repeat: no-repeat;
    background-size: 40px 40px;
    padding-bottom: 10px;
}

#optionsMenu:hover #optionsBtn4 {
    display: block;
    height: 40px;
    width: 40px;
    margin-right: 10px;
    background: url('../images/sortBtn@2x.png');
    background-size: 40px 40px;
    background-repeat: no-repeat;
}

#optionsMenu ul #shareBtn {
    display: block;
    height: 40px;
    width: 40px;
    margin-right: 10px;
    background-image: url('../images/shareBtn.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 28px 28px;
    border: 1px solid #437bd2;
    border-radius: 50%;
}

#optionsMenu:hover #shareBtn {
    background-image: url('../images/shareBtnHovered.png');
    background-color: #437bd2;
}


#optionsMenu ul a {
    display: block;
    height: 40px;
    width: 40px;
    margin-right: 10px;
}

#optionsMenu ul a:hover {
    display: block;
    height: 40px;
    width: 40px;
    margin-right: 10px;
}

#optionsMenu ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: -160px;
    padding: 0;
    padding-top: 0;
    background: #fff;
    box-shadow: 4px 4px 4px #cecece;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #cecece;
}


#optionsMenu ul ul li {
    float: none;
    width: 220px;
}

#optionsMenu ul ul li img {
    float: left;
    margin-right: 15px;
    margin-left: 5px;
    margin-top: 16px;
}

#optionsMenu ul ul li:hover {
    float: none;
    width: 220px;
    background: #e2e5ec;
}

#optionsMenu ul ul a {
    padding-left: 10px;
    width: 200px;
    height: 50px;
    text-align: left;
    text-decoration: none;
    line-height: 50px;
    color: #666;
    font-size: 18px;
}

#optionsMenu ul ul a:hover {
    padding-left: 10px;
    width: 200px;
    height: 50px;
    text-align: left;
    text-decoration: none;
    line-height: 50px;
    color: #666;
    font-size: 18px;
}

#optionsMenu ul li:hover > ul {
    display: block;
}

/* //////////////////////////////////////
/////////////////////////////////////////
////////////////////////////// Divider */

.divider {
    clear: both;
    display: block;
    width: 960px;
    height: 20px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 40px;
    border-bottom: 1px solid #e6e6e8;
}

.dividershop {
    clear: both;
    display: block;
    width: 960px;
    height: 20px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 40px;
    border-bottom: 1px solid #cecece;
}


/* //////////////////////////////////////
/////////////////////////////////////////
////////////////////////////// Comic Grid Cells */


#comicGridCells {
    clear: both;
    margin-right: 10px;
    margin-left: 9px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#comicGridCell, #comicGridCellGray {
    display: block;
    float: left;
    height: 120px;
    width: 480px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 0.5px solid #cecece;
    padding: 10px;
    text-decoration: none;
}

.shopItems {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-between;
}

.shopItems .comicGridCell{
    height: inherit !important;
    width: 330px !important;
    margin-top: 10px;
    margin-bottom: 10px;
}


.recensie {
    color: #000;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    width: 700px;
    text-decoration: none;
    padding: 0px;
    padding-top: 20px;
    padding-bottom: 10px;

    margin: 0px;
    display: block;
}

.recensieContainer {
    padding-bottom: 20px;
    border-bottom: 1px solid #e6e6e8;
}


.recensie #smallavatar {
    height: 36px;
    width: 36px;
    padding: 0px;
    margin: 0px;
    margin-right: 10px;
    margin-top: 5px;
    border-radius: 50%;
    float: left;
    overflow: auto;
}

.recensie #stars {
    width: 80px;
    border: 0px;
    margin-right: 10px;
}

.recensie #metatxt {
    color: #aaa;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    margin-top: 6px;
    margin-bottom: 0px;
}

#like, #liked {
    float: right;
    margin: 0px;
    padding: 5px;
    margin-top: 10px;
    border: 1px solid #fff;
    border-radius: 5px;
    margin-left: 5px;
    margin-bottom: 5px;
}

#liked:hover, #like:hover {
    float: right;
    margin: 0px;
    padding: 5px;
    margin-top: 10px;
    border: 1px solid #9fbcea;
    border-radius: 5px;
    margin-left: 5px;
    margin-bottom: 5px;
    cursor: pointer;
}

#likeNew {
    color: #aaa;
    padding: 5px;
    margin-top: 15px;
    border: 1px solid #aaa;
    border-radius: 20px;
    font-size: 13px;
    text-align: center;
    width: 70px;

}

#likedNew, #likeNew:hover {
    color: #fff;
    background-color: #4079d5;
    padding: 5px;
    margin-top: 15px;
    border: 1px solid #4079d5;
    border-radius: 20px;
    font-size: 13px;
    text-align: center;
    width: 70px;
    cursor: pointer;
}

#likedNew:hover {
    color: #fff;
    background-color: #3567b9;
    padding: 5px;
    margin-top: 15px;
    border: 1px solid #3567b9;
    border-radius: 20px;
    font-size: 13px;
    text-align: center;
    width: 70px;
    cursor: pointer;
}

#like #liketxt {
    color: #aaa;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    float: right;
    margin-left: 5px;
}

#like #liketxt2 {
    color: #aaa;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    float: right;
    margin-left: 5px;
}

#like #likeBtn {
    width: 14px;
    height: 14px;
    border: none;
    margin: 0px;
    padding: 0px;
    background: url('../images/thumbIcon@2x.png') center center;
    background-repeat: no-repeat;
    background-size: 14px 14px;
    float: left;
}

#like #likeBtn2 {
    width: 20px;
    height: 20px;
    border: none;
    margin: 0px;
    padding: 0px;
    background: url('../images/thumbIcon@2x.png') center center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    float: left;
}

#liked #liketxt, #like:hover #liketxt {
    color: #4079d5;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    float: right;
    margin-left: 5px;
}

#liked #liketxt2, #like:hover #liketxt2 {
    color: #4079d5;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    float: right;
    margin-left: 5px;
}

#liked #likeBtn, #like:hover #likeBtn {
    width: 14px;
    height: 14px;
    border: none;
    margin: 0px;
    padding: 0px;
    background: url('../images/thumbIconBlauw@2x.png') center center;
    background-repeat: no-repeat;
    background-size: 14px 14px;
    float: left;
}

#grayLikeIcon {
    width: 14px;
    height: 14px;
    border: none;
    margin: 0px;
    padding: 0px;
    background: url('../images/thumbIcon@2x.png') center center;
    background-repeat: no-repeat;
    background-size: 14px 14px;
    float: left;
}

#blueLikeIcon {
    width: 14px;
    height: 14px;
    border: none;
    margin: 0px;
    padding: 0px;
    background: url('../images/thumbIconBlauw@2x.png') center center;
    background-repeat: no-repeat;
    background-size: 14px 14px;
    float: left;
}

#grayLikeTxt {
    color: #aaa;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    float: left;
    margin-left: 5px;
    top: -1px;
    position: relative;
}

#blueLikeTxt {
    color: #4079d5;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    float: left;
    margin-left: 5px;
    top: -1px;
    position: relative;
}

#liked #likeBtn2, #like:hover #likeBtn2 {
    width: 20px;
    height: 20px;
    border: none;
    margin: 0px;
    padding: 0px;
    background: url('../images/thumbIconBlauw@2x.png') center center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    float: left;
}


.blacktxtsmallbold {
    margin-bottom: 10px;
    color: #000;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    display: block;
    float: left;
    padding: 10px;
    margin-right: 10px;
    margin-top: 5px;
}

.blacktxtsmallbold2 {
    color: #000;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
}


#comicGridCellRemove {
    display: block;
    float: left;
    height: 120px;
    width: 480px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-right: 1px solid #cecece;
    border-bottom: 1px solid #cecece;
    padding: 10px;
    text-decoration: none;
}


#comicGridCellTitle {
    font-size: 16px;
    color: #aaaaaa;
    width: 360px;
}

#comicGridLentTo {
    float: right;
    margin-right: 10px;
    font-size: 16px;
    color: #aaaaaa;
}


#comicGridCellSubTitle {
    font-size: 24px;
    color: #000;
    width: 360px;
}

#comicGridCellSubTitleGray {
    font-size: 24px;
    color: #ababab;
    width: 360px;
}


#progressCircle {
    float: right;
    margin-right: 10px;
    display: block;
    height: 70px;
    width: 70px;
    text-align: center;
    line-height: 66px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 4px solid #e2e5ec;
    border-radius: 35px;
    top: 15px;
    position: relative;
    font-size: 14px;
    color: #ababab;
}

#progressCircleFull {
    float: right;
    margin-right: 10px;
    display: block;
    height: 70px;
    width: 70px;
    text-align: center;
    line-height: 66px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 4px solid #41cc68;
    border-radius: 35px;
    top: 15px;
    position: relative;
    font-size: 14px;
    color: #ababab;
}

#collectionCircleEmpty {
    z-index: 99;
    float: right;
    margin-right: 0px;
    display: block;
    height: 120px;
    width: 80px;
    top: -10px;
    left: 10px;
    position: relative;
    background: url('../images/addBtn@2x.png') center center;
    background-repeat: no-repeat;
    background-size: 40px 40px;
}

#firstprint {
    z-index: 99;
    float: right;
    margin-right: 0px;
    display: block;
    height: 120px;
    width: 45px;
    top: -10px;
    right: 10px;
    position: relative;
    background: url('../images/badgeFirstPrint@2x.png') center center;
    background-repeat: no-repeat;
    background-size: 40px 40px;
}


#signed {
    z-index: 99;
    float: right;
    margin-right: 0px;
    display: block;
    height: 120px;
    width: 45px;
    top: -10px;
    right: 10px;
    position: relative;
    background: url('../images/badgeSigned@2x.png') center center;
    background-repeat: no-repeat;
    background-size: 40px 40px;
}

#luxe {
    z-index: 99;
    float: right;
    margin-right: 0px;
    display: block;
    height: 120px;
    width: 45px;
    top: -10px;
    right: 10px;
    position: relative;
    background: url('../images/badgeLuxe@2x.png') center center;
    background-repeat: no-repeat;
    background-size: 40px 40px;
}


#collectionCircleFull {
    z-index: 99;
    float: right;
    margin-right: 0px;
    display: block;
    height: 120px;
    width: 80px;
    top: -10px;
    left: 10px;
    position: relative;
    background: url('../images/addBtnActive@2x.png') center center;
    background-repeat: no-repeat;
    background-size: 40px 40px;
}

#collectionCircleEmpty:hover {
    background: url('../images/addBtnHover@2x.png') center center;
    background-repeat: no-repeat;
    background-size: 40px 40px;
}

#collectionCircleFull:hover {
    background: url('../images/addBtnActiveHover@2x.png') center center;
    background-repeat: no-repeat;
    background-size: 40px 40px;
}

#removeBtn {
    float: right;
    margin-right: 10px;
    display: block;
    height: 40px;
    width: 40px;
    top: 30px;
    position: relative;
    background: url('../images/deleteBtn@2x.png');
    background-size: 40px 40px;
}

#removeBtn2 {
    float: right;
    margin-right: 10px;
    display: block;
    height: 40px;
    width: 40px;
    top: 30px;
    position: relative;
    background: url('../images/delete2Btn@2x.png');
    background-size: 40px 40px;
}

#hideBtn {
    float: right;
    margin-right: 10px;
    display: block;
    height: 40px;
    width: 40px;
    top: 30px;
    position: relative;
    background: url('../images/hideBtn@2x.png');
    background-size: 40px 40px;
}

#showBtn {
    float: right;
    margin-right: 10px;
    display: block;
    height: 40px;
    width: 40px;
    top: 30px;
    position: relative;
    background: url('../images/showBtn@2x.png');
    background-size: 40px 40px;
}

#comicGridCell:hover #removeBtn {
    float: right;
    margin-right: 10px;
    display: block;
    height: 40px;
    width: 40px;
    top: 30px;
    position: relative;
    background: url('../images/deleteBtnHover@2x.png');
    background-size: 40px 40px;
}

#comicGridCell:hover #showBtn {
    float: right;
    margin-right: 10px;
    display: block;
    height: 40px;
    width: 40px;
    top: 30px;
    position: relative;
    background: url('../images/showBtnHover@2x.png');
    background-size: 40px 40px;
}

#comicGridCell:hover #hideBtn {
    float: right;
    margin-right: 10px;
    display: block;
    height: 40px;
    width: 40px;
    top: 30px;
    position: relative;
    background: url('../images/hideBtnHover@2x.png');
    background-size: 40px 40px;
}

#addSerieBtn {
    float: right;
    margin-right: 10px;
    display: block;
    height: 40px;
    width: 40px;
    top: 30px;
    position: relative;
    background: url('../images/addBtnBlue@2x.png');
    background-size: 40px 40px;
}

#addSerieBtn:hover {
    float: right;
    margin-right: 10px;
    display: block;
    height: 40px;
    width: 40px;
    top: 30px;
    position: relative;
    background: url('../images/addBtnBlueHover@2x.png');
    background-size: 40px 40px;
}


#addSerieBtnIn {
    float: right;
    margin-right: 10px;
    display: block;
    height: 40px;
    width: 40px;
    top: 30px;
    position: relative;
    background: url('../images/addBtnActiveBlue@2x.png');
    background-size: 40px 40px;
}

#expectedMessage {
    float: right;
    margin-right: 10px;
    width: 70px;
    text-align: right;
    top: 35px;
    position: relative;
    font-size: 14px;
    color: #ababab;
}

#comicGridCell:hover {
    display: block;
    float: left;
    height: 120px;
    width: 480px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 0.1px solid #cecece;
    padding: 10px;
    background-color: #e2e5ec;
    color: #41cc68;
    cursor: pointer;

}

#comicGridCellRemove:hover {
    display: block;
    float: left;
    height: 120px;
    width: 480px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-right: 1px solid #cecece;
    border-bottom: 1px solid #cecece;
    padding: 10px;
    background-color: #ff1b46;
    color: #fff;
    cursor: pointer;

}

#comicGridCellRemove:hover #comicGridCellTitle {
    font-size: 16px;
    color: #fff;
    width: 360px;
}

#comicGridCellRemove:hover #comicGridCellSubTitle {
    font-size: 24px;
    color: #fff;
    width: 360px;
}

#addSerieCell {
    display: block;
    float: left;
    height: 120px;
    width: 480px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-right: 1px solid #cecece;
    border-bottom: 1px solid #cecece;
    padding: 10px;
    background-color: #e2e5ec;
    color: #666;
    text-align: center;
    line-height: 110px;

}

#comicGridImage {
    float: left;
    width: 75px;
    height: 100px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #ababab;
    margin-right: 10px;
    background-position: center !important;
}

#comicGridCell #serieOverlay, #comicGridCellRemove #serieOverlay {
    width: 75px;
    height: 100px;
    position: relative;
    top: -1px;
    left: -1px;
    background: url('../images/collectionCoverOverlaySmall.png');
    background-size: 75px 100px;
}

#comicGridCell:hover #serieOverlay {
    width: 75px;
    height: 100px;
    position: relative;
    top: -1px;
    left: -1px;
    background: url('../images/collectionCoverOverlaySmallHover.png');
    background-size: 75px 100px;
}

#comicGridCellRemove:hover #serieOverlay {
    width: 75px;
    height: 100px;
    position: relative;
    top: -1px;
    left: -1px;
    background: url('../images/collectionCoverOverlaySmallRemoveHover.png');
    background-size: 75px 100px;
}

#comicGridImageGray {
    float: left;
    width: 75px;
    height: 100px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #ababab;
    margin-right: 10px;
    -moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(100%);
    filter: gray;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    opacity: 0.2;
}

#comicGridCell:hover #comicGridImage {
    width: 75px;
    height: 100px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #000;
}

#comicGridCell:hover #progressCircle {
    float: right;
    margin-right: 10px;
    display: block;
    height: 70px;
    width: 70px;
    text-align: center;
    line-height: 66px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 4px solid #fff;
    border-radius: 35px;
    top: 15px;
    position: relative;
    font-size: 14px;
    color: #ababab;
}

/* //////////////////////////////////////
/////////////////////////////////////////
////////////////////////////// My collection */

#mySeriesBtnContainer {
    clear: both;
    background-color: #efeff4;
    width: 960px;
    margin-right: auto;
    margin-left: auto;
    height: 100px;
    position: relative;
    top: -20px;
}

#mySeriesBtnContainer a {
    display: block;
    background-color: #41cc68;
    border-radius: 6px;
    text-decoration: none;
    color: #fff;
    font-size: 24px;
    line-height: 60px;
    text-align: center;
    cursor: pointer;
    margin: 20px;
    position: relative;
    top: 20px;

}

#mySeriesBtnContainer a:hover {
    display: block;
    background-color: #2ba14c;
    border-radius: 6px;
    text-decoration: none;
    color: #fff;
    font-size: 24px;
    line-height: 60px;
    text-align: center;
    cursor: pointer;
}

#mySeriesBtnContainer a img {
    float: left;
    margin: 10px;
}

#totalSeries {
    float: right;
    margin: 10px;
    color: #fff;
    font-size: 24px;
    position: relative;
    top: -8px;
}

/* //////////////////////////////////////
/////////////////////////////////////////
////////////////////////////// Stat Grid Cells */


#statGridCell {
    display: block;
    float: left;
    height: 70px;
    width: 120px;
    padding: 10px;
    margin-bottom: 20px;
    text-decoration: none;
}


#statGridCellTitel {
    font-size: 18px;
    color: #666;
}

#statGridCellNumber {
    font-size: 40px;
    color: #4079d5;
}

#leadingZeros {
    font-size: 40px;
    color: #efeff4;
    float: left;
}

#statGridCell:hover #statGridCellTitel {
    font-size: 18px;
    color: #000;
}

#statGridCell:hover #statGridCellNumber {
    font-size: 40px;
    color: #000;
}

#statGridCell:hover #leadingZeros {
    font-size: 40px;
    color: #aaaaaa;
    float: left;
}

/* //////////////////////////////////////
/////////////////////////////////////////
////////////////////////////// Progress Bar */


#progressBar {
    float: left;
    margin: 10px;
    width: 960px;
    height: 40px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-bottom: 2px solid #e6e6e8;
    margin-bottom: 40px;
}

#progressBarFill {
    float: left;
    margin-left: 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-bottom: 2px solid #4079d5;
    position: relative;
    top: -42px;
    z-index: 999;
}

#progressText {
    font-size: 18px;
    color: #666;
    margin-left: 10px;
    position: relative;
    top: 40px;
}

#progressBar2 {
    float: left;
    margin-left: 0px;
    margin-top: 0px;
    width: 700px;
    height: 9px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-bottom: 2px solid #e6e6e8;
    margin-bottom: 0px;
}

#progressBarFill2 {
    float: left;
    margin-left: 0px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-bottom: 2px solid #666666;
    position: relative;
    top: -2px;
    z-index: 999;
}

#progressText2 {
    font-size: 18px;
    color: #666;
    margin-right: 0px;
    position: relative;
    margin-top: 10px;

}

#progressText2 img {
    margin-left: 0px;
    position: relative;
    margin-top: 10px;
}

#ratingCell {
    height: 40px;
    display: block;
    background-color: #fff;
    margin: 0px;
    padding: 0px;
}

#ratingCell2 {
    height: 40px;
    display: block;
    background-color: #fff;
    margin: 0px;
    padding: 0px;
}


#ratingCelllll:hover {
    background-color: #f2f2f2;
    cursor: default;
}

/* //////////////////////////////////////
/////////////////////////////////////////
////////////////////////////// Comic Detail */

#comicDetail {
    width: 960px;
    margin: 10px;
    position: relative;
}

#comicDetail img {
    float: left;
    margin-right: 20px;
    width: 240px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #ababab;
}

#detailImgLink {
    float: left;
    margin-right: 20px;
    width: 240px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    position: fixed;
}

#detailImgLink img:hover {
    float: left;
    margin-right: 20px;
    width: 240px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #000;
    position: fixed;

}


#detailEmptyImg {
    float: left;
    margin-right: 20px;
    width: 240px;
    height: 320px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #ababab;
    background: url('../images/albumPlaceholder@2x.png');
    background-size: 240px 320px;
}

#comicDetailContent {
    width: 700px;
    float: right;
}

#comicDetailContent input[type="text"], #comicDetailContent input[type="email"] {
    width: 660px;
    height: 28px;
    display: block;
    line-height: 28px;
    border: solid 1px #efeff4;
    border-radius: 5px;
    background-color: #efeff4;
    padding-left: 10px;
    margin-right: 10px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #000;
    position: relative;
    top: -10px;
    float: left;
}

#comicDetailContent input[type="radio"] {

    margin: 10px;
    margin-left: 20px;
}


#comicDetailContent textarea {
    width: 670px;
    height: 100px;
    display: block;
    border: solid 1px #efeff4;
    border-radius: 5px;
    background-color: #efeff4;
    padding-left: 10px;
    margin-right: 10px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #000;
    position: relative;
    float: left;
    top: 20px;
}

.error {
    clear: left;
    margin-left: 5px;
    color: #ff1b46;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
}


#comicDetailContent input[type="password"] {
    width: 673px;
    height: 38px;
    display: block;
    line-height: 28px;
    border: solid 1px #efeff4;
    border-radius: 5px;
    background-color: #efeff4;
    padding-left: 10px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #000;
    float: none;
}

#comicDetailContent select {
    width: 660px;
    height: 40px;
    display: block;
    line-height: 40px;
    border: solid 1px #efeff4;
    border-radius: 5px;
    background-color: #efeff4;
    padding-left: 10px;
    margin-right: 10px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #000;
    position: relative;
    top: 3px;
    float: left;
    -webkit-appearance: none;
}


#comicDetailContent #divider {
    float: left;
    width: 700px;
    height: 40px;
    margin-bottom: 40px;
    border-bottom: 1px solid #e6e6e8;

}

#comicDetailContent #divider1 {
    float: left;
    width: 700px;
    height: 20px;
    margin-bottom: 20px;
}

#comicTitle {
    font-size: 20px;
    color: #aaaaaa;
}

#avgRating {
    font-size: 12px;
    font-family: 'Open Sans', sans-serif;
    color: #aaaaaa;
}

#comicSubTitle {
    font-size: 28px;
    color: #000;
}

#collectionCircleEmpty1 {
    float: right;
    display: block;
    height: 40px;
    width: 40px;
    background: url('../images/addBtn@2x.png');
    background-size: 40px 40px;
    margin-right: 10px;
}

#collectionCircleEmpty1:hover {
    float: right;
    display: block;
    height: 40px;
    width: 40px;
    background: url('../images/addBtnHover@2x.png');
    background-size: 40px 40px;
    margin-right: 10px;
}

#menuBadge {
    display: block;
    z-index: 999999;
    position: relative;
    float: right;
    left: 10px;
    top: -35px;
    height: 20px;
    width: 20px;
    text-align: center;
    line-height: 18px;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid red;
    border-radius: 10px;
    font-size: 10pt;
    background-color: red;
}

#cartShopBtn {
    float: right;
    display: block;
    height: 39px;
    width: 39px;
    background-image: url('../images/shopBtn@3x.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 32px 32px;
    margin-right: 5px;
    border: 1px solid #4079d5;
    border-radius: 50%;
}

#cartShopBtn:hover {
    background-color: #4079d5;
    background-image: url('../images/shopBtnHovered@3x.png');
}

#cartAmount {
    display: block;
    width: 54px;
    height: 40px;
    text-align: center;
    float: right;
    line-height: 40px;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    margin-right: 5px;
    margin-bottom: 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1.5px solid #4079d5;
    border-radius: 20px;
    font-size: 16pt;
    background-color: #4079d5;
}

#cartAddBtn {
    float: right;
    display: block;
    height: 40px;
    width: 40px;
    background: url('../images/addSerieBtn2@2x.png');
    background-size: 40px 40px;
    margin-right: 5px;
}

#cartAddBtn:hover {
    float: right;
    display: block;
    height: 40px;
    width: 40px;
    background: url('../images/addSerieBtnHover2@2x.png');
    background-size: 40px 40px;
    margin-right: 5px;
}

#cartSubBtn {
    float: right;
    display: block;
    height: 40px;
    width: 40px;
    background: url('../images/removeSerieBtn2@2x.png');
    background-size: 40px 40px;
    margin-right: 5px;
}

#cartSubBtn:hover {
    float: right;
    display: block;
    height: 40px;
    width: 40px;
    background: url('../images/removeSerieBtnHover2@2x.png');
    background-size: 40px 40px;
    margin-right: 5px;
}

#collectionCircleFull1 {
    float: right;
    display: block;
    height: 40px;
    width: 40px;
    background: url('../images/addBtnActive@2x.png');
    background-size: 40px 40px;
    margin-right: 10px;
}


#wishCircleEmpty {
    float: right;
    display: block;
    height: 40px;
    width: 40px;
    background: url('../images/wishBtn@2x.png');
    background-size: 40px 40px;
    margin-right: 10px;
}

#wishCircleEmpty:hover {
    float: right;
    display: block;
    height: 40px;
    width: 40px;
    background: url('../images/wishBtnHover@2x.png');
    background-size: 40px 40px;
    margin-right: 10px;
}

#wishCircleFull {
    float: right;
    display: block;
    height: 40px;
    width: 40px;
    background: url('../images/wishBtnActive@2x.png');
    background-size: 40px 40px;
    margin-right: 10px;
}

#expectedMessage1 {
    float: right;
    width: 70px;
    text-align: right;
    font-size: 14px;
    color: #ababab;
}

#summary {
    clear: left;
    font-family: 'Open Sans', sans-serif;
    font-size: 12pt;
    text-align: justify;
}

#nutText {
    font-family: 'Open Sans', sans-serif;
    font-size: 12pt;
    text-align: justify;
    color: #000;
}

#lentToTxt {
    clear: left;
    font-family: 'Open Sans', sans-serif;
    font-size: 12pt;
    text-align: justify;
}

#lentToTxt:hover {
    clear: left;
    font-family: 'Open Sans', sans-serif;
    font-size: 12pt;
    text-align: justify;
    cursor: pointer;
}

.grayInfoTitle {
    float: left;
    width: 100px;
    font-family: 'Open Sans', sans-serif;
    font-size: 12pt;
    text-align: justify;
    color: #666;
}

.grayInfo {
    margin-right: 10px;
    font-family: 'Open Sans', sans-serif;
    font-size: 12pt;
    text-align: justify;
    color: #000;
}

.greenInfoBtn {
    margin-right: 10px;
    text-decoration: none;
    cursor: pointer;
    font-family: 'Open Sans', sans-serif;
    font-size: 12pt;
    text-align: justify;
    color: #41cc68;
}

.blueInfoBtn {
    margin-right: 10px;
    text-decoration: none;
    cursor: pointer;
    font-family: 'Open Sans', sans-serif;
    font-size: 12pt;
    text-align: justify;
    color: #437bd2;
}

.blueInfoBtn:hover, .greenInfoBtn:hover {
    margin-right: 10px;
    text-decoration: underline;
    cursor: pointer;
    font-family: 'Open Sans', sans-serif;
    font-size: 12pt;
    text-align: justify;
}

#grayBtn {
    margin-right: 10px;
    margin-top: 20px;
    display: block;
    width: 150px;
    height: 40px;
    text-align: center;
    float: left;
    line-height: 40px;
    color: #666666;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #666666;
    border-radius: 6px;
    font-size: 16pt;
}

#blueBtn {
    margin-right: 10px;
    margin-top: 20px;
    display: block;
    width: 100px;
    height: 40px;
    text-align: center;
    float: left;
    line-height: 40px;
    cursor: pointer;
    text-decoration: none;
    color: #4079d5;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #4079d5;
    border-radius: 6px;
    font-size: 16pt;
}

#blueBtn:hover {
    margin-right: 10px;
    margin-top: 20px;
    display: block;
    width: 100px;
    height: 40px;
    text-align: center;
    float: left;
    line-height: 40px;
    cursor: pointer;
    text-decoration: none;
    color: #000;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #000;
    border-radius: 6px;
    font-size: 16pt;
}

#blueBtnRight {
    display: block;
    width: 100px;
    height: 40px;
    text-align: center;
    float: right;
    line-height: 40px;
    cursor: pointer;
    text-decoration: none;
    color: #4079d5;
    margin-left: 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #4079d5;
    border-radius: 6px;
    font-size: 16pt;
}

#blueBtnRight:hover {
    display: block;
    width: 100px;
    height: 40px;
    text-align: center;
    float: right;
    line-height: 40px;
    cursor: pointer;
    text-decoration: none;
    color: #000;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #000;
    border-radius: 6px;
    font-size: 16pt;
}

#redBtn {
    display: block;
    width: 100px;
    height: 40px;
    text-align: center;
    float: left;
    line-height: 40px;
    cursor: pointer;
    text-decoration: none;
    color: red;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid red;
    border-radius: 6px;
    font-size: 16pt;
}

#redBtn:hover {
    display: block;
    width: 100px;
    height: 40px;
    text-align: center;
    float: left;
    line-height: 40px;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid red;
    border-radius: 6px;
    font-size: 16pt;
    background-color: red;
}

#regBtn {
    display: block;
    width: 100px;
    height: 40px;
    text-align: center;
    float: left;
    line-height: 40px;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #fff;
    border-radius: 6px;
    font-size: 16pt;
}

#regBtn:hover {
    display: block;
    width: 100px;
    height: 40px;
    text-align: center;
    float: left;
    line-height: 40px;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #4079d5;
    border-radius: 6px;
    font-size: 16pt;
    background-color: #4079d5;
}

#greenBtn {
    display: block;
    width: 100px;
    height: 40px;
    text-align: center;
    float: right;
    line-height: 40px;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    margin-left: 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #41cc68;
    border-radius: 6px;
    font-size: 16pt;
    background-color: #41cc68;
}

#greenBtn2 {
    display: block;
    width: 100px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    margin-left: 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #41cc68;
    border-radius: 6px;
    font-size: 16pt;
    background-color: #41cc68;
}

#shopBtn {
    display: block;
    width: 120px;
    height: 40px;
    text-align: center;
    float: right;
    line-height: 40px;
    cursor: pointer;
    text-decoration: none;
    color: #4079d5;
    margin-right: 10px;
    margin-bottom: 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #4079d5;
    border-radius: 20px;
    font-size: 16pt;
    background-color: #fff;
}

#shopBtnGray {
    display: block;
    line-height: 40px;
    cursor: pointer;
    text-decoration: none;
    color: #666666;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    font-size: 16pt;
    background-color: #fff;
}

#shopBtn:hover {
    display: block;
    width: 120px;
    height: 40px;
    text-align: center;
    float: right;
    line-height: 40px;
    cursor: pointer;
    text-decoration: none;
    color: #4079d5;
    margin-right: 10px;
    margin-bottom: 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #4079d5;
    border-radius: 20px;
    font-size: 16pt;
    background-color: #c5d7f2;
}

#langBtnEnabled {
    display: block;
    width: 100px;
    height: 40px;
    text-align: center;
    float: left;
    line-height: 40px;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    margin-right: 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #41cc68;
    border-radius: 6px;
    font-size: 16pt;
    background-color: #41cc68;
}

#langBtnDisabled {
    display: block;
    width: 100px;
    height: 40px;
    text-align: center;
    float: left;
    line-height: 40px;
    cursor: pointer;
    text-decoration: none;
    color: #a2a2a2;
    margin-right: 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #efeff4;
    border-radius: 6px;
    font-size: 16pt;
    background-color: #efeff4;
}

#disabledBtn {
    display: block;
    width: 100px;
    height: 40px;
    text-align: center;
    float: right;
    line-height: 40px;
    cursor: pointer;
    text-decoration: none;
    color: #666666;
    margin-left: 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #666666;
    border-radius: 6px;
    font-size: 16pt;
    background-color: #fff;
}

#greenBtn:hover {
    display: block;
    width: 100px;
    height: 40px;
    text-align: center;
    float: right;
    line-height: 40px;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #2d8e49;
    border-radius: 6px;
    font-size: 16pt;
    background-color: #2d8e49;
}


#blueBtnActive {
    margin-right: 10px;
    margin-top: 20px;
    display: block;
    width: 100px;
    height: 40px;
    text-align: center;
    float: left;
    line-height: 40px;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #4079d5;
    border-radius: 6px;
    font-size: 16pt;
    background-color: #4079d5;
}

#blueBtnActive:hover {
    margin-right: 10px;
    margin-top: 20px;
    display: block;
    width: 100px;
    height: 40px;
    text-align: center;
    float: left;
    line-height: 40px;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #000;
    border-radius: 6px;
    font-size: 16pt;
    background-color: #000;

}

#star {
    float: left;
    display: block;
    width: 30px;
    height: 30px;
    background: url('../images/star@2x.png');
    background-size: 30px 30px;
    margin-right: 10px;
}

#starActive {
    float: left;
    display: block;
    width: 30px;
    height: 30px;
    background: url('../images/starActive@2x.png');
    background-size: 30px 30px;
    margin-right: 10px;
}

.greentxt {
    clear: both;
    margin-bottom: 10px;
    color: #41cc68;
    font-size: 20px;
}

.redtxt {
    clear: both;
    margin-bottom: 10px;
    color: red;
    font-size: 20px;
}


.bluetxt {
    clear: both;
    margin-bottom: 10px;
    color: #4079d5;
    font-size: 20px;
}

.graytxt, .graytxt a {
    clear: both;
    margin-bottom: 10px;
    color: #666;
    font-size: 16px;
}

.bluetxtsmall {
    margin-bottom: 10px;
    color: #5a90e8;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    display: block;
    float: left;
    padding: 10px;
    margin-right: 10px;
    margin-top: 5px;
}

.greentxtsmall {
    margin-bottom: 10px;
    color: #41cc68;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    display: block;
    float: left;
    padding: 10px;
    margin-right: 10px;
    margin-top: 5px;
}

.graytxtsmall {
    margin-bottom: 10px;
    color: #666;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    display: block;
    float: left;
    padding: 10px;
    margin-right: 10px;
    margin-top: 5px;
}

.graytxtsmallnopadding {
    color: #666;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
}

.bluetxtsmall2 {
    margin-bottom: 10px;
    color: #5a90e8;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    display: block;
    float: left;
    padding: 0px;
    margin-right: 10px;
    margin-top: 20px;
}

.whitetxtsmall {
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 10px;
    display: block;
    float: left;
    padding: 10px;
    text-decoration: none;
}

.whitetxtsmall:hover {
    color: #5a90e8;
    font-family: 'Open Sans', sans-serif;
    font-size: 10px;
    display: block;
    float: left;
    padding: 10px;
    text-decoration: none;
}


/* //////////////////////////////////////
/////////////////////////////////////////
////////////////////////////// More */

#infoCells {
    float: right;
    height: 360px;
    width: 700px;
    margin-right: 10px;
}

#infoCells #divider2 {
    float: right;
    width: 700px;
    height: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #e6e6e8;
}

#infoCell {
    display: block;
    float: left;
    height: 80px;
    width: 700px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-bottom: 1px solid #efeff4;
    padding: 10px;
    padding-left: 0px;
    padding-top: 20px;
    text-decoration: none;
}

#infoCell2 {
    display: block;
    float: left;
    height: 80px;
    width: 700px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-bottom: 1px solid #efeff4;
    padding: 10px;
    padding-left: 0px;
    padding-top: 20px;
    text-decoration: none;
}

#infoCell:hover {
    display: block;
    float: left;
    height: 80px;
    width: 700px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-bottom: 1px solid #efeff4;
    padding: 10px;
    padding-left: 0px;
    padding-top: 20px;
    background-color: #e2e5ec;
    color: #41cc68;
    cursor: pointer;
}

#infoCellHalf {
    display: block;
    float: left;
    height: 80px;
    width: 350px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-bottom: 1px solid #efeff4;
    padding: 10px;
    text-decoration: none;
}

#infoCellHalf:hover {
    display: block;
    float: left;
    height: 80px;
    width: 350px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-bottom: 1px solid #efeff4;
    padding: 10px;
    background-color: #e2e5ec;
    color: #41cc68;
    cursor: pointer;
}

#infoCellTitle {
    font-size: 16px;
    color: #aaaaaa;
    width: 360px;
}

#infoCellSubTitle {
    font-size: 24px;
    color: #000;
    width: 360px;
}

#infoCell:hover #moreCellSubTitle {
    font-size: 24px;
    color: #437bd2;
    width: 360px;
}

#infoCell:hover #moreCellTitle {
    font-size: 16px;
    color: #000;
    width: 360px;
}

#leftImg {
    float: left;
    margin-right: 40px;
    margin-left: 30px;
    width: 180px;
    height: 180px;
}

#avatar {
    float: left;
    margin-right: 40px;
    margin-left: 30px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
}

#infoImgSmall {
    float: left;
    margin-right: 20px;
    width: 36px;
    height: 36px;
    position: relative;
    top: 11px;
}


#termsCells {
    float: left;
    width: 100%;
    margin-left: 10px;
    margin-top: -80px;
}

#termsCells #divider2 {
    float: right;
    width: 700px;
    height: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #e6e6e8;
}

#termsCell {
    display: block;
    float: left;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-bottom: 1px solid #efeff4;
    padding: 10px;
    padding-left: 0px;
    padding-top: 20px;
    text-decoration: none;
}

#termsCellTitle {
    font-size: 16px;
    color: #666;
    width: 100%;
    font-family: Arial
}

#termsCellSubTitle {
    font-size: 24px;
    color: #000;
    width: 100%;
    height: 40px;
    font-family: Arial;
}

.fb-like > span {
    width: 200px !important;
}

.fb-like > span > iframe {
    width: 200px !important;
}

.cursor-progress div, .cursor-progress img {
    cursor: progress !important;
}

.cursor-pointer div, .cursor-pointer img {
    cursor: pointer !important;
}