@charset "UTF-8";

/* ### SKIN - General Styles ###################################################

   This section sets up basic typography and colors for the site; it should
   only define the defaults for elements.
*/

/* --- Body ------------------------ */

html {
    background-color: #FFF;
}

body {
    background-color: #000;
    color: #FFF;
    font-family: Helvetica, Arial, sans-serif;
}

/* --- Headings -------------------- */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
}

h1 {
    font-size: 231%;  /* 30px */
    text-transform: uppercase;
}

h2 {
    font-size: 182%;  /* 24px */
}

/* --- Inline styles --------------- */

em, i, cite {
    font-style: italic;
}

b, strong {
    font-weight: bold;
}

/* --- Quotes ---------------------- */

q:before {
    content: "“";
}

q:after {
    content: "”";
}

q q:before {
    content: "‘";
}

q q:after {
    content: "’";
}

/* --- Body content blocks --------- */

.bodyText p,
.bodyText ul,
.bodyText ol,
.bodyText dl,
.bodyText pre,
.bodyText address,
.bodyText table,
.bodyText form {
    margin-bottom: 1.5em;
}

.bodyText p {
    font-size: 108%;  /* 14px */
    line-height: 2;
}

.mainColumn .bodyText p {
    font-size: 131%;  /* 17px */
}

.bodyText blockquote {
    margin-bottom: 1.5em;
    min-height: 68px;
    padding: 0 3em;
}

p.intro {
    font-size: 153.9%;  /* 20px */
}

/* --- Lists ----------------------- */

ol.navList,
ul.navList {
    overflow: hidden;
}

ol.navList li,
ul.navList li {
    float: left;
}

.bodyText ol,
.bodyText ul {
    line-height: 1.5;
    padding-left: 1.5em;
}

.bodyText ol li {
    list-style: decimal;
}

.bodyText ul li {
    list-style: square;
}

.bodyText ol li,
.bodyText ul li {
    font-size: 108%;  /* 14px */
}

.bodyText ol li li,
.bodyText ul li li {
    font-size: 100%;  /* reset to 14px */
}

.bodyText dl {
    font-size: 108%;  /* 16px */
}

.bodyText dl dt {
    font-weight: bold;
    margin-top: 1em;
}

.bodyText dl dd {
    padding-left: 1.5em;
}

/* --- Tables ---------------------- */

.bodyText th {
    font-weight: bold;
}

/* --- Links ----------------------- */

a,
button.linkButton {
    border-bottom: 1px dotted #7B5C7E;
    color: #5D455D;
    text-decoration: none;
}

a:hover,
button.linkButton:hover {
    border-bottom: 1px solid #5D455D;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

h1 a, .h1 a, h1 a:hover, .h1 a:hover,
h2 a, .h2 a, h2 a:hover, .h2 a:hover,
h3 a, .h3 a, h3 a:hover, .h3 a:hover,
h4 a, .h4 a, h4 a:hover, .h4 a:hover,
h5 a, .h5 a, h5 a:hover, .h5 a:hover,
h6 a, .h6 a, h6 a:hover, .h6 a:hover {
    border-bottom: none;
}

/* --- Forms ----------------------- */

label {
    display: block;
    font-size: 123.1%;  /* 16px */
    position: relative;
    width: 100%;
}

/* --- Form elements --------------- */

input[type="text"],
input.text,
textarea {
    background-color: #FFF;
    border-color: #808080;
    border-style: solid;
    border-width: 1px;
    min-height: 1.1em;
    padding: 0.45em;

    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;

    box-shadow: 0 0.1em 1em rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 0.1em 1em rgba(0, 0, 0, 0.2) inset;
    -webkit-box-shadow: 0 0.1em 1em rgba(0, 0, 0, 0.2) inset;
}

input[type="text"]:focus,
input.text:focus,
textarea:focus {
    background-color: rgb(267, 255, 217);
    border-color: #7D98B8;

    box-shadow: 0 0.1em 1em rgba(133, 133, 133, 0.5) inset;
    -moz-box-shadow: 0 0.1em 1em rgba(133, 133, 133, 0.5) inset;
    -webkit-box-shadow: 0 0.1em 1em rgba(133, 133, 133, 0.5) inset;
}

fieldset.radioGroup label {
    float: left;
}

fieldset.radioGroup label span {
    float: left;
}

/* ### SKIN - Generic components ###############################################

   Simple, basic components that are reused throughout the site, e.g. forms,
   buttons, notification messages. This should also include skinning of layout
   elements (if required).
*/

/* --- Forms ----------------------- */

/* --- Form elements --------------- */


/* ### Page structure ##########################################################

   Layout of page elements; this should only define the template and grid,
   not the positioning of specific components.
*/

/* --- Page ------------------------ */

.myPage /* extends OOCSS/template/page */ {
    max-width: 2000px;
    margin: 0 auto;
    min-width: 740px;
    overflow: hidden;
    width: auto;
}

.myBody /* extends OOCSS/template/body */ {
    background-color: #EEE;
    color: #333;
}

.page .topNav {
    margin: 10px 10px 0 10px;
}

/* --- Header ---------------------- */

.myHead /* extends OOCSS/template/head */ {
    background: #000 url("topbraning.png") no-repeat 50% 0;
    height: 76px;
    text-indent: -9999px;
}

.page .head {
    display: none;
}

/* --- Homepage --- */

.indexPage .head {
    display: block;
}

.indexPage #tabsPopular {
    margin-bottom: 20px;
    margin-right: 10px;
}

.indexPage .ui-coverslide-stack {
    margin: 10px auto 10px auto;
}

.indexPage .recipeCategories {
    margin: 0 10px 10px 10px;
}

.indexPage .articleList {
    margin: 0 10px;
}

.indexPage .achievementList {
    margin: 0 10px 10px 0;
}

/* --- Recipies page --- */

.recipiesPage .featureImage {
    margin: 10px 5px 10px 10px;
}

/* --- Footer ---------------------- */

.foot {
    background-color: #AEE;
}

.page.guidance .foot {
    display: none;
}

/* ### Page components #########################################################

   Most declarations should go in here; each component is self-contained and
   should organise its internal layout. Look-and-feel should be mostly
   inherited from general styles and generic components
*/

.filmstrip {
    background-color: #000;
    color: #000;
}

.filmstrip-content {
    padding: 30px 10px 10px 10px;
    position: relative;
    overflow-x: auto;
}

.filmstrip .mod-bd button {
    background-color: #333;
    background-image: url("arrow-white.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border: none;
    cursor: pointer;
    height: 50px;
    margin: 0 5px;
    padding: 0;
    position: absolute;
    right: 5px;
    text-indent: -9999px;
    top: 20px;
    width: 50px;
    z-index: 50;

    box-shadow: 33px 20px 50px -22px rgba(255, 255, 255, 0.66) inset;
    -moz-box-shadow: 33px 20px 50px -22px rgba(255, 255, 255, 0.66) inset;
    -webkit-box-shadow: 33px 20px 50px -22px rgba(255, 255, 255, 0.66) inset;

    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 2em;
}

.filmstrip .mod-bd button:focus,
.filmstrip .mod-bd button:hover {
    box-shadow:         33px 20px 50px -22px rgba(255, 255, 255, 0.75) inset,
                        2px 2px 2px rgba(0,0,0,0.5);
    -moz-box-shadow:    33px 20px 50px -22px rgba(255, 255, 255, 0.75) inset,
                        2px 2px 2px rgba(0,0,0,0.5);
    -webkit-box-shadow: 33px 20px 50px -22px rgba(255, 255, 255, 0.75) inset,
                        2px 2px 2px rgba(0,0,0,0.5);
}

.filmstrip .mod-bd button:first-child {
    background-image: url("arrow-white-L.png");
    background-position: 40% 50%;
    right: auto;
    left: 5px;
}

.filmstrip .mod-bd ol {
    background-color: #777;
    height: 1px;
    margin: 15px 60px 54px 60px;
    position: relative;
    white-space: nowrap;
}

.filmstrip .mod-bd li {
    background-color: #4C4C4C;
    border: 5px solid #4C4C4C;
    display: inline-block;
    font-size: 108%;  /* 14px */
    height: 50px;
    margin: 0 5px;
    position: relative;
    text-align: center;
    top: -37px;
    width: 50px;

    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

.filmstrip .mod-bd li a {
    color: #FFF;
    display: block;
    border-bottom: none;
    height: 50px;
    text-transform: uppercase;
}

.filmstrip .mod-bd li:first-child {
    margin-left: 30px;
}

.filmstrip .mod-bd li.selected {
    background-color: #FFF;
    border-color: #FFF;
    font-size: 138.5%;  /* 18 */
    height: 60px;
    top: -35px;
    width: 60px;

    box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}

.filmstrip .mod-bd li.selected a {
    color: #000;
}

.filmstrip .mod-bd li:focus,
.filmstrip .mod-bd li:hover {
    height: 56px;
    left: -3px;
    top: -39px;
    width: 56px;
    margin-right: -1px;

    box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
    -moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
    -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}

.filmstrip .mod-bd li.selected:focus,
.filmstrip .mod-bd li.selected:hover {
    height: 60px;
    left: 0;
    top: -35px;
    width: 60px;

    margin-right: 5px;

    box-shadow: 5px 5px 5px rgba(0,0,0,0.75);
    -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.75);
    -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.75);
}

.filmstrip .mod-ft {
    color: #656565;
    font-size: 108%;  /* 14px */
    padding: 6px 10px;
}

.filmstrip .mod-ft h5 {
    float: left;
}

.filmstrip .mod-ft li {
    margin-left: 15px;
}

.filmstrip .mod-ft li.command {
    text-transform: uppercase;
}


.filmstrip .mod-ft .musicControl {
    position: absolute;
    right: 20px;
    bottom: 15px;
}

/* --- music control --- */

.musicControl .mute {
    background-color: transparent;
    background-image: url("no-music.png");
    background-repeat: no-repeat;
    border: none;
    bottom: 12px;
    cursor: pointer;
    display: inline-block;
    height: 30px;
    padding: 2px 5px 2px 24px;
    text-indent: -9999px;
}

.musicControl p {
    display: inline-block;
}

/* --- slide --- */

.slide {
    color: #000;
}

.slide-content {
    border: 10px solid #000;
    position: relative;
}

.slide .mod-hd {
    background-color: rgba(255, 255, 255, 0.7);
    position: absolute;
    width: 100%;
}

.slide .mod-hd h1 {
    float: left;
    padding: 5px 5px 5px 10px;
}

.slide .mod-hd p {
    float: right;
    padding: 10px;
}

.slide .mod-bd {
    color: #FFF;
    height: 566px;
}

.slide .slideText {
    font-size: 41.67px;
    padding: 80px 110px 30px 30px;
}

.slide .slideText p {
    line-height: 1.33em;
}

.slide .slideFeatures {
    position: absolute;
    right: 30px;
    top: 190px;
    width: 60px;
}

.slide .slideFeatures .slideImages,
.slide .slideFeatures .slideMovies,
.slide .slideFeatures .slideVoice,
.slide .slideFeatures .slideIngredients {
    overflow: hidden;
    height: 60px;
    width: 60px;
}

.slide .slideFeatures a {
    border-bottom: none;
    display: block;
    height: 60px;
    text-indent: -9999px;
    width: 60px;
}

.slide .slideFeatures .slideImages a {
    background: url("image.png") no-repeat;
}

.slide .slideFeatures .slideMovies a {
    background: url("movie.png") no-repeat;
}

.slide .slideFeatures .slideVoice a {
    background: url("voice.png") no-repeat;
}

.slide .slideFeatures .slideIngredients a {
    background: url("ingrediens-icon.png") no-repeat;
}

.slide.slideVideo .mod-bd {
    background-image: url("pastavideoimage.png");
}

/* --- sponsor --- */

.sponsor {
    background-position: 100% 50%;
    background-repeat: no-repeat;
    display: inline-block;
    padding: 5px;
    text-indent: -9999px;
}

.sponsor.tine {
    background-image: url("tine_logo.png");
    padding-right: 46px;
}

/* --- main nav --- */

.mainNav {
    background: #1F1F1F url("gradient-menu.png") repeat-x;
}

.mainNav li {
    border-right: 1px solid #707070;
}

.mainNav li a {
    background-image: url("icons-menu.png");
    background-position: 50% 0;
    background-repeat: no-repeat;
    border-bottom: none;
    color: #FFF;
    display: block;
    padding: 32px 15px 6px 10px;
}

.mainNav li a:focus,
.mainNav li a:hover {
    box-shadow: 0 1em 1em -0.5em rgba(255,255,255,0.75) inset;
    -moz-box-shadow: 0 1em 1em -0.5em rgba(255,255,255,0.75) inset;
    -webkit-box-shadow: 0 1em 1em -0.5em rgba(255,255,255,0.75) inset;
}

.mainNav li a:active {
    box-shadow: 0 2em 2em -0.25em rgba(255,255,255,0.75) inset;
    -moz-box-shadow: 0 2em 2em -0.25em rgba(255,255,255,0.75) inset;
    -webkit-box-shadow: 0 2em 2em -0.25em rgba(255,255,255,0.75) inset;
}


.mainNav li.vg a {
    background-position: 50% -695px;
    text-indent: -9999px;
    width: 70px;
}

.mainNav li.home a {
    background-position: 50% -118px;
}

.mainNav li.recipes a {
    background-position: 50% -583px;
}

.mainNav li.chefs a {
    background-position: 50% -306px;
}

.mainNav li.challenge a {
    background-position: 50% -494px;
}

.mainNav li.restaurant a {
    background-position: 50% -212px;
}

.mainNav li.profile a {
    background-position: 50% -389px;
}

.mainNav li.search a {
    background-position: 50% -19px;
}

.mainNav li a:hover,
.mainNav li a:focus,
.mainNav li a:active {
    border-bottom: none;
}

/* --- tabs homepage --- */

.indexPage .tabs.ui-tabs .ui-tabs-panel {
    height: 130px;
    overflow-y: auto;
}

/* --- top nav buttons --- */

.topNav a {
    background: #D6DDE1 url("bg_button.png") repeat-x;
    border: 1px solid #8B979F;
    display: block;
    font-size: 123.1%;  /* 16px; */
    padding: 6px 15px;

    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

.topNav .back span {
    background: transparent url("arrow-on-button.png") no-repeat 0 50%;
    padding-left: 30px;
}

/* --- recipe categories --- */

.recipeCategories li {
    margin-right: 10px;
}

.recipeCategories a {
    border-bottom: none;
    background-repeat: no-repeat;
    display: block;
    height: 70px;
    width: 167px;
    text-indent: -9999px;
}

.recipeCategories a.quick {
    background-image: url("Raskt.png");
}

.recipeCategories a.healthy {
    background-image: url("Sunt.png");
}

.recipeCategories a.party {
    background-image: url("Fest.png");
}

.recipeCategories a.bake {
    background-image: url("Bake.png");
}

.recipeCategories label {
    margin-left: 10px;
    margin-top: 5px;
}

.recipeCategories input {
    background-image: url("search.png");
    background-position: 10px 7px;
    background-repeat: no-repeat;
    padding-left: 25px;
    margin-left: 10px;
    margin-top: 10px;
    width: 227px;
}

/* --- article listing --- */

.articleList li {
    background-color: #2B2B2B;
    margin-bottom: 10px;
    min-height: 50px;
    padding: 10px 10px 10px 80px;
}

.articleList li {
    background-repeat: no-repeat;
}

.articleList li.article1 {
    background-image: url("sitrusmat.png");
}

.articleList li.article2 {
    background-image: url("drikke.png");
}

.articleList li.article3 {
    background-image: url("panne.png");
}

.articleList ul li a {
    border-bottom: none;
    color: #FFF;
    display: block;
    min-height: 50px;
}

.articleList ul li a:hover,
.articleList ul li a:focus,
.articleList ul li a:active {
    text-decoration: underline;
}

/* --- achievement listing --- */

.achievementList li {
    background-repeat: no-repeat;
    background-image: url("pokal.png");
    margin-bottom: 20px;
    margin-top: 10px;
    min-height: 25px;
    padding-left: 30px;
}

.achievementList ul li a {
    border-bottom: none;
    color: #FFF;
    display: block;
    min-height: 25px;
}

.achievementList ul li a:hover,
.achievementList ul li a:focus,
.achievementList ul li a:active {
    text-decoration: underline;
}

/* --- tabs --- */

#tabsPopular img {
    float: left;
    margin: 0 10px 10px 0;
}

/* --- feature image --- */

.featureImage-content {
    background-repeat: no-repeat;
    border: 5px solid #E2E2E2;
    height: 288px;
    overflow: hidden;
    position: relative;
    width: 495px;
}

.featureImage.recipeApplesinbiff .featureImage-content {
    background-image: url("Appelsinbiff.png");
}

.featureImage.recipeSpaghetti .featureImage-content {
    background-image: url("spagetti.png");
}

.featureImage img {
    float: left;
    margin: 0 10px 0 0;
}

.featureImage .imageCaption {
    background-color: rgba(255, 255, 255, 0.7);
    bottom: 0;
    color: #000000;
    padding: 10px;
    position: absolute;
    width: 100%;
}

.featureImage .imageCaption h2 {
    text-transform: uppercase;
}

.featureImage .rating {
    margin-left: 65px;
}

/* --- Rating --- */

.rating.stars3of5 {
    background-image: url("stars3of5.png");
    background-repeat: no-repeat;
    min-height: 20px;
    padding-left: 107px;
    padding-top: 4px;
}

/* --- recipies mockups --- */

.recipiesPage .unit-c2 .unit-c1 {
    background-image: url("recipies-mockup1.png");
    background-position: 10px 10px;
    background-repeat: no-repeat;
    height: 215px;
}

.recipiesPage .unit-c2 .unit-c2 {
    background-image: url("recipies-mockup2.png");
    background-position: 0 10px;
    background-repeat: no-repeat;
    height: 215px;
    padding-top: 10px;
}

.recipiesPage .unit-f2 {
    background-image: url("recipies-mockup3.png");
    background-position: 10px 10px;
    background-repeat: no-repeat;
    height: 342px;
    padding-top: 10px;
}

.recipiesPage .mockButton {
    background-color: transparent;
    background-image: url("recipies-mockup4.png");
    background-position: 10px 10px;
    background-repeat: no-repeat;
    border: none;
    display: block;
    height: 80px;
    margin-top: 15px;
    text-indent: -9999px;
    width: 100%;
}

/* --- placeholder page --- */

.placeholderPage {
    margin: 10px;
    height: 650px;
}

.placeholderPage a {
    background-color: #EE11EE;
    border-color: #FFF;
    color: #000;
    padding: 2px 5px;
}

.placeholderPage p {
    font-size: 138.5%;  /* 18px */
    margin-top: 20px;
}

/* ### Overrides ###############################################################
*/

.pp_pic_holder {
    color: #000;
}

.pp_pic_holder a {
    border: none;
}

.ui-tabs .ui-tabs-nav a {
    border-bottom: none;
}

.myPage .ui-widget {
    font-size: 1em;
}