/**
 * Stilark for nye www.djuice.no
 * 
 * @author        Thomas Sømoen <thomas@apt.no>
 * @version        (2009-08-24)
 */


/*        FARGER
                Bakgrunn på siden:                                #eaeaea
                Tekst, generelt:                                #333
                hover:                                                        #840a84
                
        
        FONTER
                Body:                                                        Arial, Helvetica, sans-serif
*/

/*         DOKUMENTSTRUKTUR:
                =RESET (nullstiller enkelte deklarasjoner)
                =TYPOGRAFI OG FARGER(definerer skrifttype/-størrelse og -farger)
                =RAMMEVERK (sidenes oppsett, grid m.m.)
                =DINGSER (samtlige gjenbrukbare elementer)
                =SPESIAL (eventuelle spesialklasser og "hacks")
*/

/*        REKKEFØLGE PÅ DEKLARASJONER
         * display/visibility styles
    * positioning (with coordinates) styles
    * float/clear styles
    * spacing (margin, padding, border) styles
    * dimensions (width, height) styles
    * typography-related (line-height, color, etc.) styles
    * miscellaneous (list-style, cursors, etc.) styles

*/


/*        =RESET 
        ----------------------------------------------------*/
        
        * {
                margin:0;
                padding:0;
                }
                
        html,
        body {
                height:100%;
                }
                
        fieldset{
                border: none;
                }
        
        img{
                margin:0;
                border: none;
                }
        
        
        
/*        =TYPOGRAFI OG FARGER
        ----------------------------------------------------*/

        body {
                font-size:62.5%;
                font-family:Arial, Helvetica, sans-serif;
                background:#eaeaea url(/images/bg_body.gif) top left repeat-x;
                background:#fff;
                color:#333;
                }
        
        h1,
        h2,
        h3,
        h4 {
                line-height:1.4em;
                }
                
        h1 {
                padding-top:0.65em;
                font-size:2em;
                }
                
        h1.no-padding {
                padding-top:0;
                }
                
        h2 {
                font-size:1.8em;
                }
                
        h3 {
                font-size:1.5em;
                }
                
        a {
                font-size:1.3em;
                /*font-weight:bold;*/
                color:#666;
                text-decoration:none;
                background:url(/images/bg_a_underline.gif) bottom left repeat-x;
                }
                
        a:hover {
                color:#ac3490;
                background-image:url(/images/bg_a_underline_hover.gif);
                }
                
        p {
                font-size:1.3em;
                line-height:1.4em;
                }
                
                p * {
                        font-size:1em !important;
                        }
                
        
        table {
                border-top:1px solid #b3b3b3;
                }
        
        th,
        td {
                padding:0.3em 0;
                text-align:left;
                font-size:1.3em;
                background:url(/images/bg_hr.gif) bottom left repeat-x;
                }
                
        label {
                font-size:1.3em;
                }
                
        div.ingress {
                width: 63.73em;
                margin-bottom:1em;
                font-size:1.5em;
                }
                
        div.ingress * {
                font-size:1em !important;
                }
                
                
        input {
                font-size:15px;
                color:#666;
                }

                
                
/*        =RAMMEVERK 
        ----------------------------------------------------*/
        
        div#frame {
                position:relative;
                min-height:100%;
                width:100%;
                }
                
        div#header,
        div#main,
        div#footer {
                margin:0 auto;
                width:95.6em;
                font-size:1em;
                overflow-x:hidden;
                }
                
        div#content {
                width:99.9em;
                }
        
        div#header {
                }
                
        div#main {
                padding-bottom:0;
                }
                
        div.hr {
                margin-bottom:1em;
                }
        
        /* Generell klasse for alle knapper */        
        a.button {
                display:block;
                padding:0 0 0 13px;
                background:url(/images/bg_buttons.gif) top left no-repeat;
                font-size:13px;
                line-height:28px;
                text-align:center;
                color:#666;
                overflow:hidden;
                font-weight: bold;
                }
                
                a.button span {
                        display:block;
                        padding:0 13px 0 0;
                        line-height:28px;
                        background:url(/images/bg_buttons.gif) 100% -31px no-repeat;
                        }
                        
        a.button:hover {
                color:#333;
                background-position:0 -60px;
                }
                
                a.button:hover span {
                        background:url(/images/bg_buttons.gif) 100% -89px no-repeat;
                        }
        
        /* Klasse for knapp av typen "Velg" */                
        a.add {
                width:54px;
                height:28px;
                color:#fff;
                background-position:0 -118px;
                }
                
                a.add span {
                        background-position:100% -147px;
                        }
                
        div#footer {
                margin-top:4.3em;
                clear: both;
                }
                
                div#footer div.hr {
                        margin-bottom:1.8em;
                        }
                
                div#footer ul {
                        display:block;
                        margin-bottom:7em;
                        width:100%;
                        overflow:hidden;
                        }
                        
                        div#footer ul li {
                                display:block;
                                float:left;
                                margin-right:0.7em;
                                padding:0;
                                width:15.9%;
                                }
                                
                        div#footer ul li h3 {
                                font-size:1.2em;
                                font-weight:bold;
                                line-height:1.5em;
                                color:#858585;
                                }
                                
                                div#footer ul li ul {
                                        margin:0;
                                        width:100%;
                                        }
                                        
                                        div#footer ul li ul li {
                                                float:none;
                                                width:100%;
                                                }
                                                
                                                div#footer ul li ul li a {
                                                        font-size:1.2em;
                                                        line-height:1.5em;
                                                        text-decoration:none;
                                                        font-weight:normal;
                                                        color:#858585;
                                                        background:none;
                                                        }
                                                        
                                                        div#footer ul li ul li a:hover {
                                                                text-decoration:underline;
                                                                }
                                                                
                        div#footer ul li.abo {
                                width:15.5em;
                                }
                                
                        div#footer ul li.mob {
                                width:15.4em;
                                }
                                
                        div#footer ul li.tje {
                                width:15.5em;
                                }
                                
                        div#footer ul li.mag {
                                width:14.5em;
                                }
                                
                        div#footer ul li.kun {
                                width:15.4em;
                                }
                                
                        div#footer ul li.min {
                                margin-right:0;
                                width:15.5em;
                                }
                                
                div#footer div.copyright {
                        padding-bottom:2em;
                        }
                        
                        div#footer div.copyright * {
                                padding-right:0.5em;
                                font-size:1.2em;
                                color:#858585;
                                }
                                
                        div#footer div.copyright a {
                                text-decoration:none;
                                }
                                
                        div#footer div.copyright a:hover {
                                text-decoration:underline;
                                }
                
        div.columns-three div#content {
                overflow:hidden;
                }

                
/*        =DINGSER 
        ----------------------------------------------------*/                
        
        a.logo {
                display:block;
                width:227px;
                height:100px;
                background:url(/images/bg_giffer_main.gif) top left no-repeat;
                text-indent:-100em;
                overflow:hidden;
                }
                
        div.hr {
                display:block;
                height:1px;
                overflow:hidden;
                background:url(/images/bg_hr.gif) top left repeat-x;
                }
                
                div.hr hr {
                        display:none;
                        }
                
        input {
                padding:0;
                }
                
        span.image {
                display:block;
                overflow:hidden;
                }
                
        div.image {
                position:relative;
                overflow:hidden;
                }
                
        div.fieldrow {
                position:relative;
                margin-bottom:0.5em;
                width:100%;
                height:1.8em;
                }
                
                div.radio input,
                div.radio label {
                        position:absolute;
                        }
                        
                div.radio input {
                        left:0;
                        top:2px;
                        }
                        
                div.radio label {
                        top:0;
                        left:1.7em;
                        position:absolute;
                        }
                
        div.main-menu {
                position:relative;
                margin-bottom:1em;
                height:38px;
                width:100%;
                background:#2b2b2b url(/images/bg_main_menu.gif) 0.1em 0 repeat-x;
                overflow:hidden;
                clear: both;
                }
                
                div.main-menu ul {
                        position:absolute;
                        top:0;
                        left:0;
                        height:38px;
                        width:64.8em;
                        background:url(/images/bg_main_menu_corners_left.gif) top left no-repeat;
                        overflow:hidden;
                        }
                        
                        div.main-menu ul li {
                                display:block;
                                float:left;
                                width:40px;
                                height:38px;
                                line-height:38px;
                                list-style:none;
                                }
                                
                                div.main-menu ul li a {
                                        display:block;
                                        height:38px;
                                        line-height:38px;
                                        font-size:13px;
                                        font-weight:bold;
                                        letter-spacing:1px;
                                        text-transform:uppercase;
                                        text-indent:-100em;
                                        overflow:hidden;
                                        background:none;
                                        }
                                
                        div.main-menu ul li a:hover {
                                background:url(/images/bg_main_menu_hover.gif) 0 0 no-repeat;
                                }
                                        
                        div.main-menu ul li a.selected,
                        div.main-menu ul li a.selected:hover {
                                background:url(/images/bg_main_menu_hover.gif) 0 -42px no-repeat;
                                }
                                        
                        div.main-menu ul li.abo {
                                width:115px;
                                }
                                
                                div.main-menu ul li.abo a {
                                        width:115px;
                                        }
                                        
                        div.main-menu ul li.mob {
                                width:63px;
                                }
                                
                                div.main-menu ul li.mob a {
                                        width:63px;
                                        }
                                        
                                div.main-menu ul li.mob a:hover {
                                        background-position:-115px 0;
                                        }
                                        
                                div.main-menu ul li.mob a.selected,
                                div.main-menu ul li.mob a.selected:hover {
                                        background-position:-115px -42px;
                                        }
                                        
                                        
                                        
                        div.main-menu ul li.tje {
                                width:89px;
                                }
                                
                                div.main-menu ul li.tje a:hover {
                                        background-position:-178px 0;
                                        }
                                        
                                div.main-menu ul li.tje a.selected,
                                div.main-menu ul li.tje a.selected:hover {
                                        background-position:-178px -42px;
                                        }
                                        
                        div.main-menu ul li.mag {
                                width:82px;
                                }
                                
                                div.main-menu ul li.mag a:hover {
                                        background-position:-267px 0;
                                        }
                                        
                                div.main-menu ul li.mag a.selected,
                                div.main-menu ul li.mag a.selected:hover {
                                        background-position:-267px -42px;
                                        }
                                        
                        div.main-menu ul li.kun {
                                width:116px;
                                }
                                
                                div.main-menu ul li.kun a:hover {
                                        background-position:-349px 0;
                                        }
                                        
                                div.main-menu ul li.kun a.selected,
                                div.main-menu ul li.kun a.selected:hover {
                                        background-position:-349px -42px;
                                        }
                                        
                        div.main-menu ul li.min {
                                width:94px;
                                }
                                
                                div.main-menu ul li.min a:hover {
                                        background-position:-465px 0;
                                        }
                                        
                                div.main-menu ul li.min a.selected,
                                div.main-menu ul li.min a.selected:hover {
                                        background-position:-465px -42px;
                                        }
                                        
                                
                                
                                
                                
                div.main-menu div.search-form {
                        position:absolute;
                        top:0;
                        right:0;
                        width:315px;
                        height:38px;
                        background:url(/images/bg_main_menu_corners_right.gif) top right no-repeat;
                        }
                        
                div.main-menu div.search-form:hover {
                        background:url(/images/bg_main_menu_hover.gif) top right no-repeat;
                        }
                        
                        div.main-menu div.search-form legend {
                                display:none;
                                }
                                
                        div.main-menu div.search-form fieldset {
                                margin:7px 0 0 10px;
                                height:24px;
                                background:url(/images/bg_giffer_main.gif) 0 -106px no-repeat;
                                overflow:hidden;
                                }
                                
                                div.main-menu div.search-form fieldset input {
                                        float:left;
                                        margin:3px 0 0 3px;
                                        border:1px solid #fff;
                                        width:253px;
                                        height:19px;
                                        }
                                        
                                div.main-menu div.search-form fieldset input.button {
                                        border:none;
                                        margin:0 0 0 12px;
                                        padding:0;
                                        width:24px;
                                        height:24px;
                                        text-indent:-100em;
                                        background:url(/images/bg_giffer_main.gif) 0 -132px no-repeat;
                                        overflow:hidden;
                                        }
                                        
                div.main-menu div.search-form:hover input.button {
                        background-position:-27px -132px;
                        }
                        
        /* Brødsmuler */
        div.breadcrumbs {
                border-bottom:0.1em solid #999;
                padding:1.7em 0 0.9em 0;
                }
                
                div.breadcrumbs *, div.breadcrumbs a {
                        padding-right:0.3em;
                        font-size:1.3em;
                        color:#666;
                        text-decoration:none;
                        background:none no-repeat;
                        }
                        
                div.breadcrumbs a:hover {
                        text-decoration:underline;
                        }
        
        /* Sorteringsvalg */                
        form.sorting {
                /*border-bottom:0.1em solid #999;*/
                position:relative;
                margin-bottom:1em;
                padding:1em 0;
                width:100%;
                z-index: 2;
                background:url(/images/bg_hr.gif) bottom left repeat-x;
                }
                
                form.sorting legend {
                        display:none;
                        }
        
        
        /* Hjørebilder */
        .cor-top-left {
                background:url(/images/bg_corner_top_left.png) top left no-repeat;
                }                
        .cor-top-right {
                background:url(/images/bg_corner_top_right.png) top right no-repeat;
                }
                
        .cor-bottom-left {
                background:url(/images/bg_corner_bottom_left.png) bottom left no-repeat;
                }
                
        .cor-bottom-right {
                background:url(/images/bg_corner_bottom_right.png) bottom right no-repeat;
                }
        
        /* overordnet stil for bokser */                        
        div.box {
                float:left;
                position:relative;
                margin:0 1.6em 1em 0;
                width:30.8em;
                }
                
        div.box .item,
                div.box .cor-top-left,
                div.box .cor-top-right,
                div.box .cor-bottom-left,
                div.box .cor-bottom-right {
                        display:block;
                        position:absolute;
                        }
                        
                div.box .cor-top-left,
                div.box .cor-top-right,
                div.box .cor-bottom-left,
                div.box .cor-bottom-right {
                        width:5px;
                        height:5px;
                        }
                        
                div.box .cor-top-left,
                div.box .cor-top-right {
                        top:0;
                        }
                        
                div.box .cor-top-right,
                div.box .cor-bottom-right {
                        right:0;
                        }
                        
                div.box .cor-bottom-left,
                div.box .cor-bottom-right {
                        bottom:0;
                        }
                        
                div.box .cor-top-left,
                div.box .cor-bottom-left {
                        left:0;
                        }
                
        div.double {
                width:63.2em;
                }
                
        div.campaign {
                
                float:left;
                width:30.8em;
                height:17.8em;
                overflow:hidden;
                }
                        
                /* generell klasse som settes på hovedinnholdet */
                div.campaign .item {
                        width:30.8em;
                        height:17.8em;
                        background:#eee;
                        }
                
                div.campaign a.item,        
                div.campaign a.item:hover {
                        background:none;
                        color:#fff;
                        }
                
                div.campaign .html{        
                        padding:1em 1.5em 2em 1em;
                        width:28.3em;
                        height:14.8em;
                        }
                
                /* Stort kampanjefelt som går over to kolonner og to rader */        
                div.campaign-big,
                div.campaign-big .item {
                        width:63.2em;
                        height:36.9em;
                        }
                        
                        div.campaign-big .html {
                                width:28.3em;
                                height:14.8em;
                                }
                
                /* Halvt kampanjefelt som går over to kolonner og en rad */                        
                div.campaign-small,
                div.campaign-small .item {
                        width:63.2em;
                        height:17.8em;
                        }
                        
                        div.campaign-small .html {
                                width:60.7em;
                                height:14.8em;
                                }
        
        
        /* boksen med pålogging, opplading og nyheter. */        
        div.fuctions {
                background: #333;
                padding:0.3em;
                width:30.2em;
                height:36.3em;
                }
                
                div.fuctions ul {
                        width:30.2em !important;
                        height:36.3em !important;
                        background: #333 !important;
                        }
                        
                        div.fuctions ul li {
                                position:relative;
                                display:block;
                                width:100%;
                                color:#fff;
                                overflow:hidden;
                                }
                                
                                div.fuctions form div.message {
                                        position:absolute;
                                        top:0;
                                        left:50%;
                                        margin-left:-15em;
                                        padding:1.3em;
                                        width:30em;
                                        height:100%;
                                        background:#333;
                                        }
                                        
                                        div.fuctions form div.message h1 {
                                                font-size:1.6em;
                                                }
                                                
                                        div.fuctions form div.message p {
                                                font-size:1.3em;
                                                }
                                
                                div.fuctions ul li h2 {
                                        margin-bottom:0.2em;
                                        padding:0;
                                        width:302px;
                                        height:30px;
                                        background:url(/images/bg_functions_h.gif) top left repeat-x;
                                        }
                                
                                div.fuctions ul li h2:hover {
                                        background-position:-612px 0;
                                        }
                                         
                                div.fuctions ul li h2.open {
                                        background-position:-308px 0;
                                        }
                                        
                                        div.fuctions ul li h2 a {
                                                display:block;
                                                width:302px;
                                                height:30px;
                                                text-indent:-100em;
                                                outline:none;
                                                overflow:hidden;
                                                background:none;
                                                }
                                                
                                                div.fuctions ul li h2 a:hover {
                                                        background:none;
                                                        }
                                                
                                div.fuctions ul li div.content {
                                        position:relative;
                                        display:none;
                                        padding:1.8em 0.4em 0.5em 1.3em;
                                        height:24.3em;
                                        background:#333;
                                        overflow:hidden;
                                        }
                                        
                                div.fuctions ul li div.open {
                                        display:block;
                                        }
                                        
                                div.fuctions ul li legend {
                                        display:none;
                                        }
                                        
                                div.fuctions ul li label {
                                        display:block;
                                        margin-bottom:4px;
                                        font-size:1.3em;
                                        font-weight:bold;
                                        }
                                        
                                div.fuctions ul li div.text-input {
                                        margin-bottom:14px;
                                        padding:3px 1px 1px 3px;
                                        height:24px;
                                        background:url(/images/bg_functions_input.gif) top left no-repeat;
                                        overflow:hidden;
                                        }
                                        
                                        div.fuctions ul li div.text-input input {
                                                border:1px solid #fff;
                                                height:18px;
                                                }
                                                
                                div.fuctions ul li div.focus {
                                        background-image:url(/images/bg_functions_input_focus.gif);
                                        }
                                        
                                        div.fuctions ul li div.focus input {
                                                border-color:#ff9999;
                                                background:#ff9999;
                                                }
                                                
                                div.fuctions ul li div.password {
                                        width:196px;
                                        background-position:0 -38px;
                                        }
                                        
                                        div.fuctions ul li div.password input {
                                                width:189px;
                                                }
                                                
                                div.fuctions ul li div.mobile {
                                        width:99px;
                                        }
                                        
                                        div.fuctions ul li div.mobile input {
                                                width:91px;
                                                }
                                                
                                div.fuctions ul li div.amount {
                                        width:55px;
                                        background-position:0 -76px;
                                        }
                                        
                                        div.fuctions ul li div.amount input {
                                                width:47px;
                                                }
                                                
                        div.fuctions ul li.logon {
                                }
                                
                                div.fuctions ul li.logon div.content a {
                                        color:#ccc;
                                        margin-bottom:0.5em;
                                        font-size:1.3em;
                                        text-decoration:none;
                                        border-bottom:1px dotted #666;
                                        background:none;
                                        }
                                        
                        div.fuctions ul li.recharge {
                                }
                                                
                                div.fuctions ul li.recharge h2 {
                                        background-position:0 -31px;
                                        }
                                
                                div.fuctions ul li.recharge h2:hover {
                                        background-position:-612px -31px;
                                        }
                                        
                                div.fuctions ul li.recharge h2.open {
                                        background-position:-308px -31px;
                                        }
                                        
                                div.fuctions ul li.recharge input.button {
                                        border:none;
                                        margin-left:-3px;
                                        width:78px;
                                        height:30px;
                                        }
                                
                                div.fuctions ul li.news h2 {
                                        background-position:0 -62px;
                                        }
                                
                                div.fuctions ul li.news h2:hover {
                                        background-position:-612px -62px;
                                        }
                                
                                div.fuctions ul li.news h2.open {
                                        background-position:-308px -62px;
                                        }
                                        
                                div.fuctions ul li.news span.image {
                                        width:100px;
                                        height:80px;
                                        }
                                        
                                div.fuctions ul li.news div.content {
                                        padding:0;
                                        height:26.6em;
                                        }
                                        
                                div.fuctions ul li.news ul {
                                        margin-top:-0.3em;
                                        }
                                        
                                        div.fuctions ul li.news ul li {
                                                display:block;
                                                padding:0.5em 0 0 0;
                                                width:100%;
                                                height:8.6em;
                                                background:url(/images/bg_functions_hr.gif) bottom left repeat-x;
                                                }
                                                
                                                div.fuctions ul li.news ul li a {
                                                        font-size:1em;
                                                        text-decoration:none;
                                                        color:#ccc;
                                                        outline:none;
                                                        }
                                                        
                                                div.fuctions ul li.news ul li a:hover {
                                                        color:#fff;
                                                        }
                                                        
                                                        div.fuctions ul li.news ul li a br {
                                                                display:none;
                                                                }
                                                        
                                                        div.fuctions ul li.news ul li a strong {
                                                                display:block;
                                                                padding-left:0.6em;
                                                                font-size:1.2em;
                                                                }
                                                                
                                                        div.fuctions ul li.news ul li a span {
                                                                display:block;
                                                                padding-left:0.6em;
                                                                font-size:1.2em;
                                                                font-weight:normal;
                                                                }
                                                                
                                                        div.fuctions ul li.news ul li a span.image {
                                                                display:block;
                                                                padding-left:0;
                                                                margin-left:1em;
                                                                float:right;
                                                                }
        
        span.deal {
                top:-0.5em;
                right:0.9em;
                z-index:1;
                width:48px;
                height:69px;
                background:url(/images/bg_deal.png) top left no-repeat;
                text-indent:-100em;
                overflow:hidden;
                }
                
        div.price {
                display:block;
                /*padding-top:1em;*/
                font-size:1.4em !important;
                }
        
                                                                
        div.phone {
                position:relative;
                margin-bottom:1.3em;
                width:29.8em;
                padding-left: 1em;
                height:20.3em;
                background:url(/images/bg_hr.gif) bottom left repeat-x;
                overflow:visible;
                }
                
                div.phone h2 {
                        font-size:1.5em;
                        }
                        
                div.phone h3 {
                        font-weight:normal;
                        }
                
        div.bottom {
                background:none;
                }
                
                div.focused h2 {
                        
                        }
                
                div.focused h3 {
                        font-size:1.3em;
                        }
                
                div.phone a.add {
                        position:absolute;
                        bottom:1em;
                        left:0.7em;
                        }
                        
                div.phone div.image {
                        float:right;
                        width:12.4em;
                        height:16.1em;
                        overflow:visible;
                        }
                        
                        div.phone div.image img,
                        div.phone div.image span.deal {
                                position:absolute;
                                }
                                
                        div.phone div.image img {
                                top:0;
                                right: 3em;
                                z-index:0;
                                }
                                
                        
                        
        div.focused {
                height:28.5em;
                }
                
                div.focused h2 {
                        font-size:1.8em;
                        }
                
                div.focused h3 {
                        font-size:1.4em;
                        margin-bottom:1em;
                        }
                        
                div.focused p {
                        line-height: 1.23em;
                        }

                div.focused div.price {
                       padding-top: 2em;
                       font-size: 1.8em !important;
                       }
                        
                div.focused div.image {
                        width:16.7em;
                        height:22.5em;
                        }
                        
                        div.focused div.image img,
                        div.focused div.image span.deal {
                                position:absolute;
                                top:0;
                                }
                                
                        div.focused div.image img {
                                left: auto;
                                right: 4.5em;
                                bottom: 2.5em;
                                top: auto;
                                z-index:0;
                                }
                                
                        div.focused div.image span.deal {
                                top:0;
                                right:0.9em;
                                width:66px;
                                height:97px;
                                background:url(/images/bg_deal_big.png) top left no-repeat;
                                }
                                
        div.phone-list {
                min-height: 215px;
                padding-top:0.5em;
                width:100%;
                }
                        
        

/*        =SPESIAL 
        ----------------------------------------------------*/
        
        /* brukes til å skjule elementer som allikevel skal være synlige for roboter og talegjenkjenning */
        .hidden {
                position:absolute;
                width:99em;
                left:-99.9em;
                height:0;
                }
                
        legend.hidden {
                display:none;
                }