* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

    html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
    html, body, div, h1, h2, h3 { margin: 0; padding: 0; }
    html,body { background: white; }
    body, table p, table li {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px;
      line-height: 18px; color: #333;
    }
    table { font: inherit }
    section { display: block; margin: 0; padding: 0 }

    h1,h2,h3,dt,.main-link { font-family: acme, tahoma, arial; }
    h1 { font-size: 48px; padding: 5px; }
    h2 { font-size: 36px; margin: 40px 0 15px 0; color: #2B4791; text-shadow: 2px 2px 2px #eee; line-height: 30px }
    h3, dt, .main-link { font-size: 24px; margin: 15px 0; line-height: 28px; }
    .main-link { display: inline-block; margin: 10px; margin-bottom: 0 }

    p { margin-top: 10px; margin-bottom: 10px; }
    p, li, dd { font-size: 16px; line-height: 22px; font-family: 'lucida grande', tahoma, arial;}

    dt { margin-bottom: 5px; }
    dd { margin: 0 0 50px 20px; }
    hr { margin-bottom: 40px; height: 1px; background: transparent; border: none; clear: both }

    a { color: #08C; text-decoration: none; }
    a:hover { color: #146892; text-decoration: none; }
    a img { border: none }

/*    //#main { margin: 30px; }*/

    .page-header, a.button {
       border: solid #849cbd; border-width: 5px 0; margin: 0; padding: 15px;
       background-color: #2B4791; 
       background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2B4791), to(#142248));
       background-image: -webkit-linear-gradient(top, #2B4791, #142248); 
       background-image: -moz-linear-gradient(top, #2B4791, #142248);
       background-image: -ms-linear-gradient(top, #2B4791, #142248);
       background-image: -o-linear-gradient(top, #2B4791, #142248);
    }
    .page-header a, .page-header h1 { line-height: 1; color: white; text-decoration: none; }
    .page-header a { margin-right: 10px; float: left }

    div.section { width: 50%; float: left; padding: 10px 25px; }
    div.section.clear { clear: left }

    .unit { white-space: nowrap }
    .left { float: left; }
    .right { float: right; }
    .center { text-align: center; }
    .corner { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
    .info { padding: 5px 2px; color: #9B4D39; background: #FCE9E3; border: solid 1px #FBE1D5; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px }
    .softer { font-weight: normal }
    div.info { margin: 10px 0 }
    .info p { margin: 5px }
    .well { border: 1px solid #ddd; background: #efe; padding: 10px; }
    .warn { background: red; color: white }

    .badge { 
        color: #CC3D48; font-weight: bold; display: inline-block; line-height: 18px; font-weight: normal;
        font-size: 50px; width: 16px; height: 16px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    a.button, button.primary { 
        padding: 15px; border: 1px solid #B3D3E4; display: inline-block;
        background-color: #E6E6E6; 
        background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#E6E6E6));
        background-image: -webkit-linear-gradient(top, #ffffff, #E6E6E6); 
        background-image: -moz-linear-gradient(top, #ffffff, #E6E6E6);
        background-image: -ms-linear-gradient(top, #ffffff, #E6E6E6);
        background-image: -o-linear-gradient(top, #ffffff, #E6E6E6);
        -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
    } 
    a.button:hover, button.primary:hover { background: #ddd; border-color: #aaa }
    button.primary { font-size: 24px; font-family: acme, tahoma, arial; border-color: #ccc; cursor: pointer }

    /* tables */
    /* table { background: #eee; border-spacing: 1px; border-collapse: separate; margin-bottom: 10px; border-bottom: 4px solid #dAE6F5; }
    th { background: #DAE6F5; padding: 8px 10px; white-space: nowrap; }
    td { padding: 5px 7px; background: white; vertical-align: top }
    tr > td:first-child { border-left: 4px solid #DAE6F5 }
    tr > td:last-child { border-right: 4px solid #DAE6F5 }
    tbody tr th { text-align: left; vertical-align: top; font-weight: normal }
    th[colspan] { text-align: left; }*/

    /* code snippets */
    pre, code {
      color: #032A49; padding: 0 3px 2px;
      font-size: 12px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
      -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; 
    }
    code { padding: 2px 4px; background-color: #f7f7f9; xxcolor: #d14; border: 1px solid #e1e1e8; }
    pre {
      background-color: #f5f5f5; display: block; padding: 8.5px; margin: 5px 0;
      font-size: 12.025px; line-height: 18px;
      overflow: auto; white-space: pre; border: 1px solid #ccc;
    }
    pre code { padding: 0; color: inherit; background-color: transparent; border: 0; }
    pre .special { color: #0367FD; background: #FFFF8C; display: inline-block; padding: 1px;}

    .google-ad { clear:both; margin:0 auto 20px auto; width:728px; }
    .footer-ad { padding-top: 20px; }
    .header-ad { margin: 20px auto 0 auto }

    .fem {
        font-size: 16px;
        color: #333;
        background: #D7E6F4;
        padding: 20px;
        line-height: 22px;
        margin: 5px 30px 30px 30px;
        border: 1px solid #CAD4E5;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }


    /* media queries */
    @media only screen and (max-width: 700px) {
        #main { margin: 10px; margin-bottom: 30px; }
        #logo { width: 28px; height: 28px }
        h1, h2 { font-size: 28px; }
        .page-header { padding: 5px }
        div.section { width: 100%; float: none; padding: 10px }
    }

    @media only screen and (max-width: 500px) {
        pre { word-break: break-all;  word-wrap: break-word;  white-space: pre;  white-space: pre-wrap; }

        .google-ad { clear:both; margin:10px 0; width:320px; }

        div.section { width: 100%; float: none; padding: 0 }
    }

    /*
        these are just the default styles used in the Cycle2 demo pages.  
        you can use these styles or any others that you wish.
    */


    /* set border-box so that percents can be used for width, padding, etc (personal preference) */
    .cycle-slideshow, .cycle-slideshow * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }


    .cycle-slideshow { width: 45%; min-width: 200px; max-width: 500px; margin: 10px auto; padding: 0; position: relative;
        background: url(http://malsup.github.com/images/spinner.gif) 50% 50% no-repeat;

     }

    /* slideshow images (for most of the demos, these are the actual "slides") */
    .cycle-slideshow img { 
        /* 
        some of these styles will be set by the plugin (by default) but setting them here
        helps avoid flash-of-unstyled-content
        */
        position: absolute; top: 0; left: 0;
        width: 100%; padding: 0; display: block;
    }

    /* in case script does not load */
    .cycle-slideshow img:first-child {
        position: static; z-index: 100;
    }



    /* caption */
    .cycle-caption { position: absolute; color: white; bottom: 15px; right: 15px; z-index: 700; }


    /* overlay */
    .cycle-overlay { 
        font-family: tahoma, arial;
        position: absolute; bottom: 0; width: 100%; z-index: 600;
        background: black; color: white; padding: 15px; opacity: .5;
    }


    /* prev / next links */
    .cycle-prev, .cycle-next { position: absolute; top: 0; width: 30%; opacity: 0; filter: alpha(opacity=0); z-index: 800; height: 100%; cursor: pointer; }
    .cycle-prev { left: 0;  background: url(http://malsup.github.com/images/left.png) 50% 50% no-repeat;}
    .cycle-next { right: 0; background: url(http://malsup.github.com/images/right.png) 50% 50% no-repeat;}
    .cycle-prev:hover, .cycle-next:hover { opacity: .7; filter: alpha(opacity=70) }

    .disabled { opacity: .5; filter:alpha(opacity=50); }


    /* display paused text on top of paused slideshow */
    .cycle-paused:after {
        content: 'Paused'; color: white; background: black; padding: 10px;
        z-index: 500; position: absolute; top: 10px; right: 10px;
        border-radius: 10px;
        opacity: .5; filter: alpha(opacity=50);
    }

    /* 
        media queries 
        some style overrides to make things more pleasant on mobile devices
    */

    @media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
        .cycle-slideshow { width: 200px;}
        .cycle-overlay { padding: 4px }
        .cycle-caption { bottom: 4px; right: 4px }
    }