app.css

/*
 CSS specifically for the nodesign sample pages.
*/
Body {
    font-family: "Arial", "sans-serif";
    margin: 10px; padding: 0;
}

h2, h1 {
    margin: 0; padding: 0;
}
h1 {
    padding: 5px;
    background-color: #D0BFA6;
}
h2 a {
    font-size: small;
    font-weight: normal;
    border: none;
}
.hints li {
    margin-left: 20px;
    font-size: smaller;
}

a {
    text-decoration: none;
    padding-left: 2px;
    padding-right: 10px;
    margin-right: 5px;
    border-bottom: 1px solid #D0BFA6;
    border-left: 4px solid #D0BFA6;
}

div#pagecontent > div {
    margin-top: 20px;
}
.hints {
    font-style: italic;
    padding: 30px;
    clear: both;
}
.header {
    float: right;
}
.header > div {
    display: inline-block;
}
label {
    display: inline-block;
    width: 8em;
}
input[type="text"], input[type="email"] {
    width: 200px;
}
button {
    background-color:  #D0BFA6;
    border-style: none;
    border-radius: 5px;
    padding: 10px;
    margin: 5px;
}
input:required {
    border-left: 1px solid red;
}

:invalid {                         /* Disable default type-based check: https://developer.mozilla.org/de/docs/Web/CSS/:invalid */
  box-shadow: none;  }
:-moz-submit-invalid { box-shadow: none; }
:-moz-ui-invalid { box-shadow: none; }

#nd-left {
    float: left;
    width: 24%;
}
#nd-right {
    float: right;
    width: 75%;
}
.nd-container {
    margin: 0;
    padding: 0;
    width: 100%;
}
div#pagecontent > div#nd-left, div#pagecontent > div#nd-right {
    margin: 0;
    padding: 0;
    padding-top: 20px;
}

div.oo-navi-head {                /* example for a header. See shop1.html, you may add a top-level related image that way */
    height: 100px;
    background-color: #ffeed4;
    text-align: center;
    vertical-align: middle;
    background-size: cover;
    padding: 60px;
    font-size: 30px;
    color: white;
    background-position: center;
}

/* example tickers based on server provided template */

#myticker1 {
    width: 600px;
}
#myticker1 .oo-ticker-item {
    width: 200px;
}

#myticker2 .oo-ticker-pane {
}
#myticker2 .oo-ticker-item {
    display: inline-block;
    margin: 20px;
    width: 210px;
}
#myticker2 {
    width: 500px;
}

.index1-ticker {
    float: left;
}
.index1-ticker .oo-ticker {
    display: inline-block;
}

/* finetuning components, overrides CSS in oo.css */

/****** Navigation Component */

#oo-navi LI {                 /* make it horizontal */
    display: inline-block;
    list-style: none;
}
#oo-navi LI UL LI {
    float: left;              /* renderer bug fix */
}
#oo-navi > ul {
    margin-top: 20px;
    padding-left: 5px;
    clear: both;
}
#oo-navi .oo-navi-2nd-pane {     /* see also component-shared css below */
    padding: 20px;
}




/****** Subnavi Component */
.oo-subnavi-data-type-NoItem {
    font-weight: bold;
}
.oo-subnavi-2nd-pane, .oo-subnavi-3rd-pane {
    margin-left: 40px;
}

/****** Status Component */

/****** Flash Component */

/****** Path & Last Component  */

#oo-path UL, #oo-last UL  {                   /* make it horizontal */
    margin:0;
}
#oo-path  li ,#oo-last  li  {
    display: inline;
    list-style-image: none;
    font-size: smaller;
}
#oo-path  li + li:before, #oo-last  li + li:before {
    content: '> ';
}

/****** Date Component */

/****** Ticker Component */

/****** Cart Page */

#cart1 .oo-date-dcnote {      /* addresses cart component on cart1.html */
    display: none;            /* we dont need shipping in this example */
}
#cart1 .oo-profile-nocore {      /* we dont want all options in this page */
    line-height:0;               /* display: none; will not work, thats used internally. This css set is an alternative */
    overflow: hidden;
    padding: 0;
    margin:0;
    border:0;
}
#cart1 .oo-date-msg {            /* finetune embedded date component */
    display: inline;
}
#cart1 .oo-date-pane-txt {
    display:none;
}
#cart1 .oo-date-itemcount:after, #cart1 .oo-date-abocount:after {        /* put a nice icon here ? */
    content: inherit;
}
#cart1 .oo-date-abocount , #cart1 .oo-date-itemcount {
    border-radius: 3px;
    padding-left: 3px;
    padding-right: 3px;
    border: 1px solid;
}
#cart1 .oo-date-abocount {        /* a nice icon here ? */
    border-color:silver;
}
#cart1 .oo-date-itemcount {
    border-color: green;
}

tbody.oo-cart-pane-extra .oo-cart-pane-extra-td, .oo-cart-info-osh {                           /* separate headline */
    border-bottom: 1px solid gray;
}
.oo-cart-denyreasons {
    color: red;
}
#oo-cart A.oo-cart-pos-rm {
    margin-right: 10px;
}

/****** Shop Component */

#oo-shop .oo-shop-item:hover .oo-shop-item-select, #oo-shop .oo-shop-item:hover .oo-shop-favorite {   /* fade in the controls */
    animation: nodesign-fadein 0.5s;
}
@keyframes nodesign-fadein { from { opacity: 0; } to   { opacity: 1; }   }

#oo-shop .oo-shop-item:hover  .blend {        /* blend a bit the image below */
    animation: nodesign-fadeinb 0.5s;
}
#oo-shop .oo-shop-item:hover.oo-shop-data-type-AssortmentGroup .blend, #oo-shop .oo-shop-item:hover.oo-shop-data-type-AssortmentGroup .oo-shop-item-select {
    animation: none;
}
@keyframes nodesign-fadeinb { from { opacity: 0; } to   { opacity: 0.5; }   }

.oo-shop-sl-pane > DIV.oo-shop-item.oo-shop-data-type-NoItem {
    height: 80px;
    background-position: 0;
}
.oo-shop-sl-pane .oo-shop-item h3 {
    opacity: 0.8;
}
.oo-shop-sl-pane > DIV.oo-shop-item.oo-shop-data-type-AssortmentGroup, .oo-shop-data-type-Pointer-AssortmentGroup {
    height: 400px;
}
.oo-shop-abogroup-size {    /* number of persons */
    display: none;
}
.oo-shop-sub-loaded {       /* loaded and subscription indicators */
    width: 20px;
    height: 20px;
    background-color: red;
}
.oo-shop-item-loaded  {      /* green triangle indicating that item is in cart */  /* shared with ticker */
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 30px 30px;
    border-color: transparent transparent #3b9c4a    transparent;
    z-index: 100;
    right: 0;
    top: 170px;
}

.oo-shop-sl-pane .oo-shop-item {
    border-bottom: 1px solid #D0BFA6;
    border-left: 4px solid #D0BFA6;
    background-color: #fcebcf;
}

/* regio info is in cart as well as in item display */
.oo-item-regiotag:before {
    content: "Regional!";
    color: red;
    font-size: smaller;
}
.oo-cart-pos.oo-item-regio TD:first-child:before {
    content: "Regional!";
    color: red;
    font-size: smaller;
    position: absolute;
    bottom: 0;
    right:0;
}

.oo-cart-pos-abodates .oo-text {               /* no text info about abos */
    display: none;
}

/* tags */
.oo-shop-singleitem-select .oo-shop-tags SPAN { /* and style the other */
    display: block;
    border: 1px solid green;
    text-align: center;
    margin-left: 10px;
    margin-bottom: 2px;
}

.oo-shop-item .oo-shop-tags SPAN {
    color: green;
    border: 1px solid green;
    background-color: floralwhite;
    padding: 1px;
    float: right;
    clear: both;
}

#oo-shop .oo-shop-item-allergy-content {
    line-height: 2em;
}
.oo-producer-thumb {       /* tab in item detail */
    float: right;
}
.oo-producer-links, .oo-producer-address {
    padding: 5px;
}

/* overriding the amount indicator */
#oo-status .oo-status-cart .oo-status-cart-count:before {
    content: "";
}
#oo-status .oo-status-cart .oo-status-cart-count:after {
    content: "";
}

#oo-status .oo-status-cart-link {
    position:relative;
}
#oo-status .oo-status-cart .oo-status-cart-count {
    background: gray radial-gradient(circle at 5px -9px , gray, gray) repeat scroll 0 0;
    border-radius: 16px;
    color: white;
    font-weight: bold;
    font-size: smaller;
    height: 16px;
    min-width: 16px;
    padding: 0 3px;
    text-align: center;
    position: absolute;
    top: -8px;
    right: -8px;
}
#oo-status .oo-status-cart.oo-status-cart-modified .oo-status-cart-count {
    background: red radial-gradient(circle at 5px -9px , red, red) repeat scroll 0 0;
    color: white;
}
/****** Chat Component */

/* place chat */
#oo-chat {
   z-index: 2000;
   position: fixed;
   bottom: 10px;
   right: 10px;
}
#oo-chat .oo-chat-offline {
    background-color: white;
    color: silver;
    text-align: center;
}
/****** Search Component */
.oo-search-btn {
    background-image: url(oo_icons.svg#oo-search);
    background-size: 1.4em 1.4em;
    width: 1.4em;
    height: 1.4em;
    background-position: 0px 1px;
    display: inline-block;
}
/****** Mail Component */
.oo-mail-unsent TEXTAREA {
    display: block;
}

/****** Profile Component */
.oo-profile-location {
    float: right;
}
.oo-profile-address > div {
    clear:both;
}


/****** Loading pseudo Component */

/****** Logon Component */

/****** filter component */

/****** some shared assignments for components */

/*        End highlighting components **/

/****** oo Framework */


/*         end oo **/