/*

    Universal iPhone UI Kit 1.0
    Author: Diego Martin Lafuente.
    E-Mail: dlafuente@gmail.com
    AIM: Minidixier
    Licence: AGPLv3
    date: 2008-08-09

    URL: www.minid.net
    SVN URL: http://code.google.com/p/iphone-universal/source/checkout
    Download: http://code.google.com/p/iphone-universal/downloads/list

    */


    body {
        background: rgb(197,204,211) url(../img/s/stripes.png);
        font-family: Helvetica;
        margin: 0 0 0 10px;
        padding: 0;
        -webkit-user-select: none;
        -webkit-text-size-adjust: none;
        }















        /* standard header on body */

        div#header + h1, ul + h1 {
            color: rgb(76,86,108);
            font: bold 18px Helvetica;
            text-shadow: #fff 0 1px 0;
            margin: 15px 0 0 10px;
            }



        /* standard paragraph on body */

        ul + p, ul.data + p + p, ul.form + p + p {
            color: rgb(76,86,108);
            font: 14px Helvetica;
            text-align: center;
            text-shadow: white 0 1px 0;
            margin: 0 10px 17px 0;
            }















        /* headers */

        div#header {
            background: rgb(109,133,163) url(../img/s/bgHeader.png) repeat-x top;
            border-top: 1px solid rgb(205,213,223);
            border-bottom: 1px solid rgb(46,55,68);
            padding: 10px;
            margin: 0 0 0 -10px;
            min-height: 44px;
            -webkit-box-sizing: border-box;
            }


                div#header h1 {
                    color: #fff;
                    font: bold 20px/30px Helvetica;
                    text-shadow: #2d3642 0 -1px 0;
                    text-align: center;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    width: 49%;
                    padding: 5px 0;
                    margin: 2px 0 0 -24%;
                    position: absolute;
                    top: 0;
                    left: 50%;
                    }

                    div#header a {
                        color: #FFF;
                        background: none;
                        font: bold 12px/30px Helvetica;
                        border-width: 0 5px;
                        margin: 0;
                        padding: 0 3px;
                        width: auto;
                        height: 30px;
                        text-shadow: rgb(46,55,68) 0 -1px 0;
                        text-overflow: ellipsis;
                        text-decoration: none;
                        white-space: nowrap;
                        position: absolute;
                        overflow: hidden;
                        top: 7px;
                        right: 6px;
                        -webkit-border-image: url(../img/s/toolButton.png) 0 5 0 5;
                        }

                        div#header #backButton {
                            left: 6px;
                            right: auto;
                            padding: 0;
                            max-width: 55px;
                            border-width: 0 8px 0 14px;
                            -webkit-border-image: url(../img/s/backButton.png) 0 8 0 14;
                            }


                        .Action {
                            border-width: 0 5px;
                            -webkit-border-image: url(../img/s/actionButton.png) 0 5 0 5;
                        }



                        div#header ul {
                            margin-top: 15px;
                        }

                        div#header p {
                            color: rgb(60,70,80);
                            font-weight: bold;
                            font-size: 13px;
                            text-align: center;
                            clear: both;
                            position: absolute;
                            top: 4px;
                            left: 35px;
                            right: 35px;
                            margin: 0;
                            text-shadow: #C0CBDB 0 1px 0;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            overflow: hidden;
                        }

                        div.pre {
                            height: 60px;
                            }


                            div.pre h1 {
                                top: 18px !important;
                                }

                            div.pre a {
                                top: 25px !important;
                                right: 6px;
                                }

                            div.pre a#Backbutton {
                                left: 6px !important;
                            }





        /***** List (base) ******/

        ul {
            color: black;
            background: #fff;
            border: 1px solid #B4B4B4;
            font: bold 17px Helvetica;
            padding: 0;
            margin: 15px 10px 17px 0;
            -webkit-border-radius: 8px;
            }


            ul li {
                color: #666;
                border-top: 1px solid #B4B4B4;
                list-style-type: none;
                padding: 10px 10px 10px 10px;
                }



                /* when you have a first LI item on any list */

                li:first-child {
                    border-top: 0;
                    -webkit-border-top-left-radius: 8px;
                    -webkit-border-top-right-radius: 8px;
                    }

                li:last-child {
                    -webkit-border-bottom-left-radius: 8px;
                    -webkit-border-bottom-right-radius: 8px;
                    }


                /* universal arrows */

                ul li.arrow {
                    background-image: url(../img/s/chevron.png);
                    background-position: right center;
                    background-repeat: no-repeat;
                    }


                #plastic ul li.arrow, #metal ul li.arrow {
                    background-image: url(../img/s/chevron_dg.png);
                    background-position: right center;
                    background-repeat: no-repeat;
                    }



                /* universal links on list */

                ul li a, li.img a + a {
                    color: #000;
                    text-decoration: none;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    display: block;
                    padding: 12px 10px 12px 10px;
                    margin: -10px;
                    -webkit-tap-highlight-color:rgba(0,0,0,0);
                }

                    ul li.img a + a {
                        margin: -10px 10px -20px -5px;
                        font-size: 17px;
                        font-weight: bold;
                    }

                    ul li.img a + a + a {
                            font-size: 14px;
                            font-weight: normal;
                            margin-left: -10px;
                            margin-bottom: -10px;
                            margin-top: 0;
                        }


                        ul li.img a + small + a {
                            margin-left: -5px;
                        }


                        ul li.img a + small + a + a {
                            margin-left: -10px;
                            margin-top: -20px;
                            margin-bottom: -10px;
                            font-size: 14px;
                            font-weight: normal;
                            }

                            ul li.img a + small + a + a + a {
                                margin-left: 0px !important;
                                margin-bottom: 0;
                            }


                    ul li a + a {
                        color: #000;
                        font: 14px Helvetica;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                        display: block;
                        margin: 0;
                        padding: 0;
                        }

                        ul li a + a + a, ul li.img a + a + a + a, ul li.img a + small + a + a + a {
                            color: #666;
                            font: 13px Helvetica;
                            margin: 0;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            overflow: hidden;
                            display: block;
                            padding: 0;
                        }





                /* standard mini-label */

                ul li small {
                    color: #369;
                    font: 17px Helvetica;
                    text-align: right;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    display: block;
                    width: 23%;
                    float: right;
                    padding: 3px 0px;
                    }



                    ul li.arrow small {
                        padding: 0 15px;
                    }

                    ul li small.counter {
                        font-size: 17px !important;
                        line-height: 13px !important;
                        font-weight: bold;
                        background: rgb(154,159,170);
                        color: #fff;
                        -webkit-border-radius: 11px;
                        padding: 4px 10px 5px 10px;
                        display: inline !important;
                        width: auto;
                        margin-top: 2px;
                    }


                    ul li.arrow small.counter {
                        margin-right: 15px;
                    }




                    /* resize without labels */

                    ul li.arrow a {
                        width: 95%;
                        }

                        /* with labels */

                        ul li small + a {
                            width: 75%;
                        }

                        ul li.arrow small + a {
                            width: 70%;
                        }



        /* images */

            ul li.img {
                padding-left: 115px;
            }

            ul li.img a.img {
                background: url(../img/s/standard-img.png) no-repeat;
                display: inline-block;
                width: 100px;
                height: 75px;
                margin: -10px 0 -20px -115px;
                float: left;
            }



        /* individuals */



            ul.individual {
                border: 0;
                background: none;
                clear: both;
                height: 45px;
            }

                ul.individual li {
                    color: rgb(183,190,205);
                    background: white;
                    border: 1px solid rgb(180,180,180);
                    font-size: 14px;
                    text-align: center;
                    -webkit-border-radius: 8px;
                    -webkit-box-sizing: border-box;
                    width: 48%;
                    float:left;
                    display: block;
                    padding: 11px 10px 14px 10px;
                    }

                    ul.individual li + li {
                        float: right;

                    }


                    ul.individual li a {
                        color: rgb(50,79,133);
                        line-height: 16px;
                        margin: -11px -10px -14px -10px;
                        padding: 11px 10px 14px 10px;
                        -webkit-border-radius: 8px;
                    }

                        ul.individual li a:hover {
                            color: #fff;
                            background: #36c;
                            }




                            /* Normal lists and metal */

                            body#normal h4 {
                                color: #fff;
                                background: rgb(154,159,170) url(../img/s/bglight.png) top left repeat-x;
                                border-top: 1px solid rgb(165,177,186);
                                text-shadow: #666 0 1px 0;
                                margin: 0;
                                padding: 2px 10px;
                            }


                            body#normal, body#metal {
                                margin: 0;
                                padding: 0;
                                background-color: rgb(255,255,255);
                            }

                            body#normal ul, body#metal ul, body#plastic ul {
                                -webkit-border-radius: 0;
                                margin: 0;
                                border-left: 0;
                                border-right: 0;
                                border-top: 0;
                                }

                                body#metal ul {
                                    border-top: 0;
                                    border-bottom: 0;
                                    background: rgb(180,180,180);
                                }




                                body#normal ul li {
                                    font-size: 20px;
                                }

                                    body#normal ul li small {
                                        font-size: 16px;
                                        line-height: 28px;
                                    }

                                    body#normal li, body#metal li {
                                        -webkit-border-radius: 0;
                                        }

                                    body#normal li em {
                                        font-weight: normal;
                                        font-style: normal;
                                        }

                                body#normal h4 + ul {
                                    border-top: 1px solid rgb(152,158,164);
                                    border-bottom: 1px solid rgb(113,125,133);
                                }


                                body#metal ul li {
                                    border-top: 1px solid rgb(238,238,238);
                                    border-bottom: 1px solid rgb(156,158,165);
                                    background: url(../img/s/bgMetal.png) top left repeat-x;
                                    font-size: 26px;
                                    text-shadow: #fff 0 1px 0;
                                    }

                                    body#metal ul li a {
                                        line-height: 26px;
                                        margin: 0;
                                        padding: 13px 0;
                                    }

                                        body#metal ul li a:hover {
                                            color: rgb(0,0,0);
                                        }

                                            body#metal ul li:hover small {
                                                color: inherit;
                                            }


                                    body#metal ul li a em {
                                        display: block;
                                        font-size: 14px;
                                        font-style: normal;
                                        color: #444;
                                        width: 50%;
                                        line-height: 14px;
                                    }

                                    body#metal ul li small {
                                        float: right;
                                        position: relative;
                                        margin-top: 10px;
                                        font-weight: bold;
                                        }


                                        body#metal ul li.arrow a small {
                                            padding-right: 0;
                                            line-height: 17px;
                                        }


                                        body#metal ul li.arrow {
                                            background: url(../img/s/bgMetal.png) top left repeat-x,
                                            url(../img/s/chevron_dg.png) right center no-repeat;
                                        }



                                        /* option panel */

                                            div#optionpanel {
                                                background: url(../img/s/blackbg.png) top left repeat-x;
                                                text-align: center;
                                                padding: 20px 10px 15px 10px;
                                                position: absolute;
                                                left: 0;
                                                right: 0;
                                                bottom: 0;
                                                }

                                                div#optionpanel h2 {
                                                    font-size: 17px;
                                                    color: #fff;
                                                    text-shadow: #000 0 1px 0;
                                                }





                                        /***** BUTTONS *****/

                                        .button {
                                            color: #fff;
                                            font: bold 20px/46px Helvetica;
                                            text-decoration: none;
                                            text-align: center;
                                            text-shadow: #000 0 1px 0;
                                            border-width: 0px 14px 0px 14px;
                                            display: block;
                                            margin: 3px 0;
                                            }

                                            .green { -webkit-border-image: url(../img/s/greenButton.png) 0 14 0 14; }
                                            .red { -webkit-border-image: url(../img/s/redButton.png) 0 14 0 14; }

                                            .white {
                                                color: #000;
                                                text-shadow: #fff 0px 1px 0;
                                                -webkit-border-image: url(../img/s/whiteButton.png) 0 14 0 14;
                                                }

                                            .black { -webkit-border-image: url(../img/s/grayButton.png) 0 14 0 14; }


/***** FORMS *****/

/* fields list */

        ul.form {

        }

            ul.form li {
                padding: 7px 10px;
            }

            ul.form li.error { border: 2px solid red; }
            ul.form li.error + li.error { border-top: 0; }

            ul.form li:hover { background: #fff; }

            ul li input[type="text"], ul li input[type="password"], ul li textarea, ul li select {
                color: #777;
                background: #fff url(../.png); /* this is a hack due the default input shadow that iphones uses on textfields */
                border: 0;
                font: normal 17px Helvetica;
                padding: 0;
                display: inline-block;
                margin-left: 0px;
                width: 100%;
                -webkit-appearance: textarea;
                }

                ul li textarea {
                    height: 120px;
                    padding: 0;
                    text-indent: -2px;
                }

                ul li select {
                    text-indent: 0px;
                    background: transparent url(../img/s/chevron.png) no-repeat 103% 3px;
                    -webkit-appearance: textfield;
                    margin-left: -6px;
                    width: 104%;
                }

                ul li input[type="checkbox"], ul li input[type="radio"] {
                    margin: 0;
                    color: rgb(50,79,133);
                    padding: 10px 10px;
                    }

                ul li input[type="checkbox"]:after, ul li input[type="radio"]:after {
                    content: attr(title);
                    font: 17px Helvetica;
                    display: block;
                    width: 246px;
                    margin: -12px 0 0 17px;
                    }



                    /**** INFORMATION FIELDS ****/

                    ul.data li h4 {
                        margin: -4px 0 5px 0;
                    }

                        ul.data li p {
                            text-align: left;
                            font-size: 14px;
                            line-height: 18px;
                            font-weight: normal;
                            margin: 0;
                            }

                            ul.data li p + p { margin-top: 10px; }


                            ul.data li {
                                background: none;
                                padding: 15px 10px;
                                color: #222;
                            }

                            ul.data li a {
                                display: inline;
                                color: #2E3744;
                                text-decoration: underline;
                            }


                            ul.field li small {
                                position: absolute;
                                right: 25px;
                                margin-top: 3px;
                                z-index: 3;
                            }

                            ul.field li h3 {
                                color: rgb(76,86,108);
                                width: 25%;
                                font-size: 13px;
                                line-height: 18px;
                                margin: 0 10px 0 0;
                                float: left;
                                text-align: right;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                padding: 0;
                                }

                                ul.field li a {
                                    font-size: 13px;
                                    line-height: 18px;
                                    overflow: visible;
                                    white-space: normal;
                                    display: inline-block;
                                    width: 60%;
                                    padding: 0;
                                    margin: 0 0 0 0;
                                    vertical-align: top;
                                    }

                                ul.field li big {
                                    font-size: 13px;
                                    line-height: 18px;
                                    font-weight: normal;
                                    overflow: visible;
                                    white-space: normal;
                                    display: inline-block;
                                    width: 60%;
                                    }






                                ul.field li small {
                                    font-size: 13px;
                                    font-weight: bold;
                                }


                        /* this is for profiling */

                        ul.profile {
                            border: 0;
                            background: none;
                            clear: both;
                            min-height: 62px;
                            position: relative;
                            }

                            ul.profile li {
                                background: #fff url(../img/s/profile-user.png) no-repeat;
                                border: 1px solid #B4B4B4;
                                width: 62px;
                                height: 62px;
                                -webkit-border-radius: 4px;
                                -webkit-box-sizing: border-box;
                                float: left;
                                }

                            ul.profile li + li {
                                border: 0;
                                background: none;
                                width: 70%;
                                }


                                ul.profile li + li h2, ul.profile li + li p {
                                    color: rgb(46,55,68);
                                    text-shadow: #fff 0 1px 0;
                                    margin: 0;
                                }

                                ul.profile li + li h2 {
                                    font: bold 18px/22px Helvetica;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    }

                                ul.profile li + li p {
                                    font: 14px/18px Helvetica;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    }


                                /* any A element inside this kind of field list will scale 62x62 */

                                ul.profile li a {
                                    display: block;
                                    width: 62px;
                                    height: 62px;
                                    color: transparent;
                                }



    /***** PLASTIC LISTS *****/

    body#plastic {
        margin: 0;
        padding: 0;
        background: rgb(173,173,173);
    }

    body#plastic ul {
        -webkit-border-radius: 0;
        margin: 0;
        border-left: 0;
        border-right: 0;
        border-top: 0;
        background-color: rgb(173,173,173);
        }


        body#plastic ul li {
            -webkit-border-radius: 0;
            border-top: 1px solid rgb(191,191,191);
            border-bottom: 1px solid rgb(157,157,157);
        }


            body#plastic ul li:nth-child(odd) {
                background-color: rgb(152,152,152);
                border-top: 1px solid rgb(181,181,181);
                border-bottom: 1px solid rgb(138,138,138);
            }


        body#plastic ul + p {
            font-size: 11px;
            color: #2f3237;
            text-shadow: none;
            padding: 10px 10px;
            }

            body#plastic ul + p strong {
                font-size: 14px;
                line-height: 18px;
                text-shadow: #fff 0 1px 0;
            }

            body#plastic ul li a {
                text-shadow: rgb(211,211,211) 0 1px 0;
            }

            body#plastic ul li:nth-child(odd) a {
                text-shadow: rgb(191,191,191) 0 1px 0;
            }


            body#plastic ul li small {
                color: #3C3C3C;
                text-shadow: rgb(211,211,211) 0 1px 0;
                font-size: 13px;
                font-weight: bold;
                text-transform: uppercase;
                line-height: 24px;
                }



    /**** MINI & BIG BANNERS ****/

            #plastic ul.minibanner, #plastic ul.bigbanner {
                margin: 10px;
                border: 0;
                height: 81px;
                clear: both;
                }

                #plastic ul.bigbanner {
                    height: 140px !important;
                }

                #plastic ul.minibanner li {
                    border: 1px solid rgb(138,138,138);
                    background-color: rgb(152,152,152);
                    width: 145px;
                    height: 81px;
                    float: left;
                    -webkit-border-radius: 5px;
                    padding: 0;
                    }

                #plastic ul.bigbanner li {
                    border: 1px solid rgb(138,138,138);
                    background-color: rgb(152,152,152);
                    width: 296px;
                    height: 140px;
                    float: left;
                    -webkit-border-radius: 5px;
                    padding: 0;
                    margin-bottom: 4px;
                    }

                    #plastic ul.minibanner li:first-child {
                        margin-right: 6px;
                    }


                    #plastic ul.minibanner li a {
                        color: transparent;
                        text-shadow: none;
                        display: block;
                        width: 145px;
                        height: 81px;
                        }

                    #plastic ul.bigbanner li a {
                        color: transparent;
                        text-shadow: none;
                        display: block;
                        width: 296px;
                        height: 145px;
                        }



    /**** CHAT ****/


    body#chat {
        background: #DBE1ED;
        }

        body#chat div.bubble {
            margin: 10px 10px 0 0px;
            width: 80%;
            clear: both;
        }



        body#chat div.right {
            float: right;
            }

        body#chat div.left {
            float: left;
            }


            body#chat div.right p {
                border-width: 10px 20px 12px 10px;
            }

            body#chat div.left p {
                border-width: 10px 10px 12px 20px;
            }

            /* lefties */

            body#chat div.left p.lime {
                -webkit-border-image: url(../img/s/chat_bubbles_lime_l.png) 10 10 13 19;
                }

            body#chat div.left p.lemon {
                -webkit-border-image: url(../img/s/chat_bubbles_lemon_l.png) 10 10 13 19;
                }

            body#chat div.left p.orange {
                -webkit-border-image: url(../img/s/chat_bubbles_orange_l.png) 10 10 13 19;
                }

            body#chat div.left p.aqua {
                -webkit-border-image: url(../img/s/chat_bubbles_aqua_l.png) 10 10 13 19;
                }

            body#chat div.left p.purple {
                -webkit-border-image: url(../img/s/chat_bubbles_purple_l.png) 10 10 13 19;
                }

            body#chat div.left p.pink {
                -webkit-border-image: url(../img/s/chat_bubbles_pink_l.png) 10 10 13 19;
                }

            body#chat div.left p.graphite {
                -webkit-border-image: url(../img/s/chat_bubbles_graphite_l.png) 10 10 13 19;
                }

            body#chat div.left p.clear {
                -webkit-border-image: url(../img/s/chat_bubbles_clear_l.png) 10 10 13 19;
                }




            /*rights*/

            body#chat div.right p.aqua {
                -webkit-border-image: url(../img/s/chat_bubbles_aqua_r.png) 10 19 13 10;
                }

            body#chat div.right p.lemon {
                -webkit-border-image: url(../img/s/chat_bubbles_lemon_r.png) 10 19 13 10;
                }

            body#chat div.right p.lime {
                -webkit-border-image: url(../img/s/chat_bubbles_lime_r.png) 10 19 13 10;
                }

            body#chat div.right p.purple {
                -webkit-border-image: url(../img/s/chat_bubbles_purple_r.png) 10 19 13 10;
                }

            body#chat div.right p.pink {
                -webkit-border-image: url(../img/s/chat_bubbles_pink_r.png) 10 19 13 10;
                }

            body#chat div.right p.graphite {
                -webkit-border-image: url(../img/s/chat_bubbles_graphite_r.png) 10 19 13 10;
                }

            body#chat div.right p.clear {
                -webkit-border-image: url(../img/s/chat_bubbles_clear_r.png) 10 19 13 10;
                }







        body#chat div.bubble p {
            color: #000;
            font-size: 16px;
            margin: 0;
        }

            body#chat div.bubble + p {
                color: #666;
                text-align: center;
                font-size: 12px;
                font-weight: bold;
                margin: 0;
                padding: 10px 0 0 0;
                clear: both;
            }






        /**** image grids ****/


        body#images {
            background: #fff;
            margin: 0;
        }

            body#images ul {
                margin: 4px 4px 4px 0;
                border: 0;
                -webkit-border-radius: 0;
                }

                body#images ul li {
                    border: 1px solid #C0D5DD;
                    -webkit-border-radius: 0;
                    width: 73px;
                    height: 73px;
                    float: left;
                    margin: 0 0 4px 4px;
                    background: #F4FBFE url(../img/s/image-loading.gif) no-repeat center center;
                    padding: 0;
                    }

                    body#images ul li a {
                        display: block;
                        width: 100%;
                        height: 100%;
                        margin: 0;
                        padding: 0;
                    }


        /*** BLANK PAGES ***/

        body#blank {
            background: #fff;
        }


        body#blank p {
            color: #898989;
            text-align: center;
            margin: 250px 0 0 0;
            }




            /**** ICONFIED LIST ****/


            ul li a img.ico, ul li img.ico {
                float: left;
                display: block;
                margin: -4px 10px -4px -1px;
            }