/*
 * CONFIDENTIAL MATERIAL. DO NOT DISTRIBUTE.
 * Copyright (c) 2010-2014, Flipboard, Inc. All Rights Reserved.
 */
    body,menu,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,input,textarea,p,blockquote,th,td { 
      margin:0; padding:0; 
      }
      
    table { border-collapse:collapse; border-spacing:0; }
    fieldset,img { border:0; }
    address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
    em { font-style: italic; }
    strong { font-weight: bold; }
    ol,ul { list-style:none; }
    caption,th { text-align:left; }
    h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
    q:before,q:after { content:''; }
    abbr,acronym { border:0; }

 

      html,body{
        height:100%;
      }
      html{
        background:#888 url(../images/background-greytile.png);  
      }
      body{
        overflow-y:scroll;
        font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
      }
      .main{
         min-height:100%;
         background:url(../images/bg-gradient.png) repeat-x 0px 0px;
      }
      a, a:active, a:hover{ color:#990000;text-decoration:none;}
      a:hover{ color:#333;text-decoration:underline;}
      
      p { text-indent:20px; }
      
       .flipContent{
            margin:0px 0px 40px 0px;
            width: 662px;
            float: left; 
            display: block;
            text-align:center;
            padding: 0px 20px;
        }
 
        #container { 
            margin: auto auto 0px;
            width:1054px;
            height:100%;
        }

 
    
/*    HEADER
      -------------------------------------------------------- */ 
      .header{
        text-align:center;
      }
      .header h1{
        margin:0px 0px 40px 0px;
        padding:10px 0px 15px 0px;
        border-bottom:1px solid rgba(0,0,0,0.15);
        color:rgba(0,0,0,0.5);
        font-weight:bold;
        text-shadow: 0px 1px 0px rgba(255,255,255,0.2);
      }
    
     .header .logo{
        float:left;
        background:url(../images/engraved-flipboard-f-logo.png);
        width:23px;
        height:23px;
        display:block;
        margin:10px 0px 0px 0px;
        display:none;
     }
     .header .logo span{
        display:none;
     }
     
/*    FOOTER
      -------------------------------------------------------- */
    .footer{
        border-top:1px solid rgba(0,0,0,0.15);
        clear:both;
        text-align:center;
        color:#333;
        margin:20px 0px 0px 0px;
        padding:16px 0px;
        font-family: Georgia, Times, serif;
        font-size:14px;
    }
    .footer a{
        color:#222;
    }
/*    BUBBLE
      -------------------------------------------------------- */
        .bubble {
            width:651px;
            text-align:left;
            color:#333;
            margin:auto;
            margin-bottom:5px;
            z-index:1;
            width:auto; background:transparent url(../images/background-bubble-tip-big.png) no-repeat center bottom; 
            padding-bottom:1px;
        }
        .bubble .inner { 
             background:#E9E9E9;
             margin:0px auto;
             background:-webkit-gradient(linear,left bottom,left top,color-stop(0.0, #E5E5E5),color-stop(1.0, #FFFFFF));
             padding:20px 22px 16px;
    
             margin-bottom:13px;
             height:auto;
             border-radius: 5px; 
              -moz-border-radius: 5px; 
              -khtml-border-radius: 5px; 
              -webkit-border-radius: 5px;
              
             box-shadow:0px 0px 8px rgba(0,0,0,0.22); 
             -webkit-box-shadow:0px 0px 8px rgba(0,0,0,0.22); 
             -moz-box-shadow:0px 0px 8px rgba(0,0,0,0.22); 
        }
      
        .bubble .hgroup{
          bottom: 0px;
          position: relative;
          clear: both;
          margin-top:15px;
          clear:both;
         }
         .bubble .hgroup:after{
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
          }
          
          .bubble time,
          .bubble author,
          .bubble .avatar {
            display: block;
            float:left;
            }

          .bubble h1 {
            font-family: Georgia, Times, serif;
            font-weight: normal;
            font-size: 21px;
            line-height: 1.4em;
            margin: 0px;
            color: #333;
            text-shadow: 1px 1px 0px #fff;
            }

          .bubble img {
            margin-right:5px;
            width: 24px;
            margin-top: 3px;
            border: 1px solid rgba(0,0,0,0.5);
            padding: 0px;
            }
  
          .bubble author{
            text-transform: Capitalize;
            letter-spacing: 0em;
            font-size: 13px;
            color:#333;
            font-weight: bold;
            margin-right:6px;
            margin-top:4px;
            }
     
          .bubble time{
            color:#999;
            font-size:12px;
            margin-top: 6px;
            text-shadow: 1px 1px 0px #fff;
            }
            
          .bubble span.posted_by { 
            float: right;
            font-size: 12px;
            margin-top: 6px;
            color: #999;
            text-shadow: 1px 1px 0px #fff;
            }
            
            .bubble span.posted_by a { font-style: normal; }
     
 

      .media {
        margin: 0px auto 10px;
        } 
  
      .image {
        padding-bottom:4px;
        display: inline;
        background: url("../images/dropshadow-portrait.png") no-repeat bottom ;
        background-size: 100%;
        -moz-background-size: 100%;
        -webkit-background-size: 100%;
        -o-background-size: 100%;
        width: inherit;
        }
        
       
        .image img {
          max-height: 655px;
          max-width: 655px;
          -webkit-box-shadow: rgba(0, 0, 0, 0.0976562) 1px 0px 1px, rgba(0, 0, 0, 0.046875) 1px -1px 0px, rgba(0, 0, 0, 0.0976562) 0px 1px 0px, rgba(0, 0, 0, 0.0976562) -1px 0px 1px, rgba(0, 0, 0, 0.046875) -1px -1px 0px, rgba(0, 0, 0, 0.148438) 0px 2px 1px;
          background-color: #fff;
          padding: 10px;
          }
   
/*    NO COMMENT
   -------------------------------------------------------- */
    .bubble.noMessage{
        width:468px;
        padding-top:0px;
    }
    .bubble.noMessage .inner{
        padding-top:1px;
    }
    
/*    SCREEN SHOT
   -------------------------------------------------------- */
    #container.screenshot.portrait .media{
        background:url(/images/background-ipad-frame.png) no-repeat 0px 0px;
        padding:97px 0px 180px;
    }
    #container.screenshot.landscape .media{
        background:url(/images/background-ipad-frame-landscape.png) no-repeat 0px 0px;
        padding: 84px 76px 180px 62px;
        margin:0px;
        /*width:630px;*/
    }
    #container.screenshot.landscape.statusBar .media,
    #container.screenshot.portrait.statusBar .media {
        padding-top: 85px;
    }
    #container.screenshot.statusBar #clock{
        display:none;
    }
    #container.screenshot.landscape .flipContent{
        width:795px;
    }
    #container.screenshot.landscape .bubble{
        margin: 0 90px 5px 80px;
    }
    #container.screenshot.landscape .bubble.noMessage{
        margin: 0px 0px 5px 166px;
    }
    #container.screenshot.landscape .column{
        padding-top:0px;
        margin: 180px 0px 0px 0px;
        width:210px;
    }
    #container.screenshot.landscape .column .logo{
        background:transparent url(../images/logo_square_black.png) no-repeat;
        width:110px;
        height:150px;
    }
    #container.screenshot.landscape .column .tagline{
        width:100%;
    }
    #container.screenshot.landscape .column .appstorebadge,
    #container.screenshot.landscape .column .download{
         margin:10px auto;
    }
    #container.screenshot.portrait .image img{
        width:512px;
        height:auto;
        padding:0px 0px;
        background:transparent;
    }
    #container.screenshot.landscape .image img{
        background: transparent;
        height: auto;
/*        max-height: none;*/
/*        max-width: none;*/
        padding: 0px;
        width: 625px;
    }
    #container.screenshot .header h1{
        margin-bottom:25px;
    }
    #container #clock{
        display:none;
    }
    #container.screenshot #clock{
        display:block;
        background: black;
        color: #E7E7E7;
        font-size: 9px;
        height: 0px;
        margin: auto;
        position: relative;
        top: -11px;
        width: 300px;
    }   
 
/*    SOCIAL
      -------------------------------------------------------- */
      .social {
        background: rgba(0, 0, 0, 0.7);
        bottom: 75px;
        margin: 0px auto -50px;
        padding: 15px 0px 10px;
        position: relative;
        width: 400px;
        
        border-radius: 10px; 
        -moz-border-radius: 10px; 
        -khtml-border-radius: 10px; 
        -webkit-border-radius: 10px;

        }
        
        .image .social { visibility:hidden; }
        .image:hover .social { visibility:visible; }

        .likebutton{
            border:none;
            padding:0px 0px 0px 0px;
            margin:0px 10px 0px 0px;
            width: 82px; 
            height: 20px;
            overflow-x: hidden; 
            overflow-y: hidden;
            background:rgba(255,255,255,0);
            display:inline-block;
          }
  
        .twitter-share-button{
            margin-top:0px;
            display:inline-block;
          }


/*    LEFT COLUMN
      -------------------------------------------------------- */ 
      .column{
        margin: 200px 0px 0px 50px;
        padding: 0px;
        width: 296px;
        float:left;
      }
      
      .clearer:after,
      .column:after{
         content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }
      
    
      .tagline{
        color: #333;
        width: 290px;
        float: left;
        font-size: 16px;
        line-height: 1.4em;
        letter-spacing:-0.06em;
        font-family: Georgia, Times, serif;
        display: block;
        margin-top:20px;
        margin-bottom: 20px;
        text-align: justify;
        text-shadow: 0px 1px 0px rgba(255,255,255,0.1);
        }
        
        .column a { float: left; }

      .downloadbutton{ margin-top:50px; }

      .appstorebadge span,
      .download span { display:none; }

      .download {
        background:url('http://flpbd.it/images/free-download-button.png') no-repeat;
        padding:5px;
        display:block;
        height:34px;
        width:200px;
        margin: 20px 0px;
        margin-left:40px
        }

      .appstorebadge {
        background:url('http://flpbd.it/images/available-on-the-app-store.png') no-repeat;
        padding:5px;
        display:block;
        height:60px;
        width:200px;
        margin:10px 0px;
        margin-left:40px
        }
             

        .logo           { 
            display: block; 
            background:url(../images/logo_60.png)no-repeat;
            width: 290px;
            height:70px;
            float: left; 
            margin-right: 15px;
        }
        .logo:hover{
            background:url(../images/logo_60.png)no-repeat 0px -71px;
        }
        .logo h1{display:none;}
        .tagline        { display: block; }
        .download       { display: block; margin-bottom: 10px; }
        .appstorebadge  { margin-top: 0px; }

      .image img { max-width: 620px;  }
        .image:hover .social { display: block; }
 
 /*    ERROR
       ------------------------------------------------------- */
       .error{
            clear:both;
            display:block;
            margin:20px auto;
            font-size:22px;
            text-align:center;
            font-family: Georgia, Times, serif;
            padding:38px;
            min-height:600px;
            width:auto;

       }
       .error h1{
            font-size:24px;
       }
       .error p{
            font-size:18px;
            text-align:center;
            margin:20px 0px;
            font-style:italic;
            color:#444;
       }
       .error .logo{
            float:none;
            margin:0 auto;
            background:transparent url(../images/logo_square_black.png) no-repeat;
            width:110px;
            height:110px;
       }
       .error .bubble{
            display:inline-block;
       }
       .error .message{
            margin:40px;
       }
 
 /*    Narrow Monitor
       ------------------------------------------------------- */
        @media screen and (max-width:1050px){
   

            #container {    margin: auto auto 0px; width:710px;  }
            #container.screenshot .flipContent {margin:0px;}
            #container.screenshot.portrait .column {margin-top:0px;margin-left:3px;}
            #container.screenshot.landscape {width:816px;}
            #container.screenshot.landscape .column {margin:0px;width:685px;display:block;padding:0px 65px;}
            #container.screenshot.landscape .column .download,
            #container.screenshot.landscape .column .logo,
            #container.screenshot.landscape .column .tagline{
                margin-top:0px;
            }
            #container.screenshot.landscape .column .download,
            #container.screenshot.landscape .column .appstorebadge{
                margin-left:20px;   
            }
            .column { margin-top: 20px; margin-left: 50px; width: 180px; padding: 0px;width:100%; }
            .flipContent{   margin-top:0px; }
            .header h1{     margin:0px 0px 20px 0px;}
            .logo           { 
                background:transparent url(../images/logo_square_black.png) no-repeat;
                width:110px;
                height:145px;
                display: block; 
                margin-top:20px;
                
            }
            .logo:hover{
                background:transparent url(../images/logo_square_black.png) no-repeat;
            }
            #container.screenshot.landscape .column .tagline,
            .tagline        {width:326px;line-height: 1.5em;color:#222;}



          
        }
 
/*     iPhone PORTRAIT 
       ----------------------------------------------------------------- */
       @media screen and (max-device-width: 480px) and (orientation:portrait) {
       
            #container.screenshot.portrait .media,
            #container.screenshot.landscape .media{
                background:transparent;
                padding:0px;
                width:320px;
            }
           body         { background:transparent; margin:0px; }
           #container.screenshot.portrait .image img { 
            max-width: none;
            max-height:none;
            width:270px;
            height:auto;
            }
           #container.screenshot.portrait,
           #container.screenshot.landscape,
           #container.screenshot.landscape .flipContent,
           #container.screenshot.portrait .flipContent,
           #container   { width:320px;margin: auto auto 0px; }
           #container.screenshot.landscape .column,
           #container.screenshot.portrait .column,
           .column      { width:320px; padding:0px; margin:0px;padding-top:20px; }
           .flipContent { width:320px; padding:0px; margin:0px; }
           #container.screenshot.portrait .flipContent .bubble,
           #container.screenshot.landscape .flipContent .bubble,
           .bubble.noMessage,
           .bubble      { width:auto; background:transparent url(../images/background-bubble-tip.png) no-repeat center bottom; padding-bottom:1px; margin:0px;}
           .bubble .inner { 
                background:#E9E9E9;
                margin:0px auto;
                background:-webkit-gradient(linear,left bottom,left top,color-stop(0.0, #E7E7E7),color-stop(1.0, #FFFFFF));
                width:270px;
                font-size:14px;
                padding:10px;
                padding-bottom:10px;
                margin-bottom:13px;
                height:auto;
                -webkit-border-radius: 4px 4px 4px 4px;
                -webkit-box-shadow:0px 0px 8px rgba(0,0,0,0.2); 
           }
           .social{display:none;}
           .bubble .social  { width:200px; }
           .bubble h1       { font-size:16px;   }
           .bubble time     { display:none; }
           .header h1       { font-size:14px; padding-bottom:10px; margin:0px 0px 20px 0px; }
           .image img       { max-width: 274px; max-height: 320px;margin:0px;padding:6px; }
           .image           { margin:0px; background: transparent;}
           #container.screenshot.landscape .column .tagline,
           #container.screenshot.portrait .column .tagline,
           .tagline         { display: block; letter-spacing:0em;width:280px;padding:10px 20px 20px 20px;margin:0px;}
           .download        { display: none; }
           #container.screenshot.landscape .column .logo,
           .logo            { display: block;width:298px;height:45px;margin:0px 30px 0px 20px;padding:0px;} 
           #container.screenshot.landscape .column .logo,
           .logo            { background:url(../images/logo_60.png)no-repeat;background-size: 70%;}
           .logo:hover      { background:url(../images/logo_60.png)no-repeat 0px -71px;}   
           .appstorebadge   { width:200px;margin:10px 0px 50px 50px;}
       }
       
/*     iPhone LANDSCAPE 
       ----------------------------------------------------------------- */
       @media screen and (max-device-width: 480px) and (orientation:landscape) {
     
            #container.screenshot.portrait .media,
            #container.screenshot.landscape .media{
                background:transparent;
                padding:0px;
                width:480px;
            }
            #container.screenshot .flipContent {margin:0px;width:480px;}
            #container.screenshot.portrait .column {margin-top:0px;margin-left:3px;}
            #container.screenshot.landscape .flipContent { width:480px;}
            #container.screenshot.landscape { width:480px;}
            #container.screenshot.landscape .column {margin:0px;width:685px;display:block;padding:0px 65px;}
            .bubble.noMessage,
            #container.screenshot.landscape .bubble.noMessage{ margin: 0px auto;}
           body         { background:transparent; margin:0px; }
           #container   { width:480px;margin: auto auto 0px;  }
           #container.screenshot.landscape .column,
           #container.screenshot.portrait .column,
           .column,
           .flipContent { width:480px; padding:0px; margin:0px; }
           #container.screenshot.landscape .flipContent .bubble,
           #container.screenshot.portrait .flipContent .bubble,
           .bubble      { width:auto; background:transparent url(../images/background-bubble-tip.png) no-repeat center bottom; padding-bottom:1px; margin:0px;}
           .bubble .inner { 
                background:#E9E9E9;
                margin:0px auto;
                background:-webkit-gradient(linear,left bottom,left top,color-stop(0.0, #E7E7E7),color-stop(1.0, #FFFFFF));
                width:420px;
                font-size:14px;
                padding:10px;
                padding-bottom:10px;
                margin-bottom:13px;
                height:auto;
                -webkit-border-radius: 4px 4px 4px 4px;
                -webkit-box-shadow:0px 0px 8px rgba(0,0,0,0.2); 
           }
           .bubble .social  { width:200px; }
           .bubble h1       { font-size:16px;   }
           .bubble time     { display:none; }
           .header h1       { font-size:14px; padding-bottom:10px; margin:0px 0px 20px 0px; }
           .image img       { max-width: 424px; max-height: 320px;margin:0px;padding:6px; }
           #container.screenshot.landscape .image img, 
           #container.screenshot.portrait .image img { 
            max-width: none;
            max-height:none;
            width:350px;
            height:auto;
            }
           .image           { margin:0px; background: transparent;}
           #container.screenshot.landscape .column, .tagline,
           .tagline         { display: block; letter-spacing:0em;width:420px;padding:10px 20px 20px 20px;margin:0px;}
           .download        { display: none; }
           #container.screenshot.landscape .column .logo,
           .logo            { display: block;width:298px;height:45px;margin:20px 30px 0px 20px;padding:0px;float:left;} 
            #container.screenshot.landscape .column .logo,
           .logo            { background:url(../images/logo_60.png)no-repeat;background-size: 70%;}
           .logo:hover      { background:url(../images/logo_60.png)no-repeat 0px -71px;}   
           .appstorebadge   { width:200px;margin:10px 0px 50px 130px;}
           .footer          { font-size:10px;}
       }
       
/*     IPAD PORTRAIT 
       ----------------------------------------------------------------- */
       @media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {

            #container.screenshot.landscape{
                width:690px;
            }
            #container.screenshot.landscape .bubble {
                margin:0px 40px;
            }
             #container.screenshot.landscape .bubble.noMessage{
                margin:0px auto;
             }
            #container.screenshot.landscape .media {
                -webkit-background-size: 690px auto;
                background-position:0px 0px;
/*                padding:76px 30px 130px 30px;*/
              padding: 76px 68px 130px;
            }
            #container.screenshot.landscape .media img{
                width:554px;
                height:auto;
            }
            #container.screenshot.landscape .flipContent{ width:auto;margin:0px;padding:0px; };
            .flipContent{   margin-top:0px; }  
            .image img{
    
            }     
            .image .social {
                display: block;
                display: none;
                position: inherit;
                width: 400px;
                border-radius: 10px; 
                -moz-border-radius: 10px; 
                -khtml-border-radius: 10px; 
                -webkit-border-radius: 10px;
            }
            .image:hover .social { display: none; }
            .header h1{     margin:0px 0px 20px 0px;}
            
            #container.screenshot.landscape .column,
            .column {
                margin: 0px 0px 40px 20px;
                padding:0px;
                margin-top: 0px;
                width: 668px;
                float: left;
                text-align: center;
                clear: both;
    
            }

          .download         { display: none !important; }
          .appstorebadge    { float:right;width:210px;height:80px;margin:0px 0px 0px 20px;padding:0px;  }
          #container.screenshot.landscape .column .tagline,
          .tagline          { display: block;width:280px;margin:0px;padding:0px;font-size:16px;color:#222; letter-spacing:0em;  }
           .logo            { display: block;width:110px;height:180px;margin:0px 30px 0px 0px;padding:0px;float:left;} 
           .logo            { background:url(../images/logo_square_black.png)no-repeat;}
           .logo:hover      { background:url(../images/logo_square_black.png)no-repeat;} 
          
        }
        

 /*    IPAD LANDSCAPE 
       ------------------------------------------------------- */        
        @media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
          
            .flipContent{   margin-top:0px; }
            .header h1{     margin:0px 20px 20px 20px;}
            #container {    margin: auto auto 0px; width:1024px; }

            
          .column { margin-top: 240px; margin-left: 0px; width: 180px; padding: 0px;width:200px; }
            .tagline        { display: block;width:260px;margin-top:20px;padding-top:0px;font-size:16px;color:#222; letter-spacing:0em;}
            .logo            { display: block;width:300px;height:67px;margin:0px 30px 0px 0px;padding:0px;float:left;} 
            .logo            { background:url(../images/logo_60.png)no-repeat;}
            .logo:hover     { background:url(../images/logo_60.png)no-repeat;} 
            .tagline        { display: block; }
            .download       { display: none; }
            .tagline        { width:290px;}
            .appstorebadge  { }
          
          .image img { max-width: 550px; max-height: 420px;height:100%; }
            .image:hover .social { display: block; }    
            
            #container.screenshot.landscape .bubble {
                margin:0px 40px;
            }
             #container.screenshot.landscape .bubble.noMessage{
                margin:0px auto;
             }
            #container.screenshot.portrait .media .image img{
                height: 670px;
                width:auto;
                max-width: none; 
                max-height: none;
                
            }
            #container.screenshot.landscape .media {
                background-size: 690px auto;
                background-position:0px 0px;
                padding:76px 30px 130px 30px;
            }
            #container.screenshot.landscape .media img{
                width:554px;
                height:auto;
            }
             #container.screenshot.portrait .column .appstorebadge,
             #container.screenshot.landscape .column .appstorebadge{
                margin:0px;
             }
             #container.screenshot.landscape .column .tagline{
                width:100%;
             }
             #container.screenshot.landscape .column{
                padding:0px 0px 0px 20px;
                width:240px;
             }  
             #container.screenshot.landscape .flipContent{  
                width:700px;
                overflow:hidden;
             }
             #container.screenshot.landscape {
                width:1024px;

            }      
        }
 
 
  /*    GENE's MAGIC JS-less IMAGE OVERLAY
       ------------------------------------------------------- */        
 
         #overlay {
            width:0;height:0;
            position: absolute; 
            opacity:0;
            top: 0; 
            left: 0; 
            z-index: 999;
            background: rgba(0,0,0,0.7);
            -webkit-transition: opacity 0.3s linear;
            -moz-transition: opacity 0.3s linear;
            text-align:center;
            filter: alpha(opacity = 0);
        }
        
        #overlay img {
            margin:auto;
            padding:10px;
            margin-top:100px;
            background:white;
            max-height:80%;
            max-width:80%;
            top:100px;
            -webkit-box-shadow: rgba(0, 0, 0, 0.21875) 0px 0px 8px;
            -moz-box-shadow: rgba(0, 0, 0, 0.21875) 0px 0px 8px;
        }
        
        #overlay:target { 
            opacity:1; 
            width: 100%;
            height: 100%;
            filter: alpha(opacity = 100);
        }
