/* Defaults, resets */

#cnnBannerContainer { 
    background:none !important;
}

.c_share_container {
    width:160px;
    float:right;
    margin-top:0px;
}

.cnnint-sourceline {
    font-size:12px !important;
    color:#666666;
}

.cnnint-container {
    width:970px;
    padding-left:10px;
}

.cnnint-container>h1 {
    margin-left:0px;
}

.cnnint-container>p {
    margin-left:-10px;
}

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

.cnn-btn {
    background-color: rgb(234,234,234);
    border-radius: 3px;
    border: 1px solid rgb(162,162,162);
    border-bottom: 2px solid rgb(162,162,162);
    color: #403a37;
    cursor: pointer;
    display: inline-block;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 100%;
    margin-bottom: 0;
    padding: 6px 10px;
    text-shadow: 1px 1px 1px rgba(255,255,255,1);
    text-align: center;
}
.cnn-btn:hover {
    background-color: rgb(255,255,255);
    color: #ff5a00;
}
.cnn-btn.disabled,
.cnn-btn[disabled],
.cnn-btn.disabled:hover,
.cnn-btn[disabled]:hover {
    background-color: rgb(225,225,225);
    border: 0;
    color: #cacaca;
    cursor: default;
    text-shadow: none;

    background-color: rgb(225,225,225);
    border: 0;
    color: #cacaca;
    cursor: default;
}
.cnn-btn:active,
.cnn-btn.active {
    background-color: rgb(171,171,171);
    border: 1px solid rgb(162,162,162);
    border-top: 2px solid rgb(125,125,125);
    color: #fff;
    text-shadow: 1px 1px 1px rgba(171,171,171,1);
}
.cnn-btn.active:hover {
    background-color: rgb(200,200,200);
    color: #403a37;
    text-shadow: -1px -1px 1px rgba(255,255,255,1);
}

.dark-btn {
    background-color: rgb(84,84,84);
    border-radius: 3px;
    border: 1px solid rgb(162,162,162);
    border-bottom: 2px solid rgb(45,45,45);
    color: #fff;
    text-shadow: 1px 1px 1px rgba(45,45,45,1);
}
.dark-btn:hover {
    background-color: rgb(45,45,45);
}
.dark-btn.disabled,
.dark-btn[disabled],
.dark-btn.disabled:hover,
.dark-btn[disabled]:hover {
    color: #fff;
    background-color: #ddd;
}

.dark-btn:active,
.dark-btn.active {
    background-color: rgb(125,125,125);
    border: 1px solid rgb(162,162,162);
    border-top: 2px solid rgb(45,45,45);
    color: #fff;
    text-shadow: 1px 1px 1px rgba(45,45,45,1);
}
.dark-btn.active:hover {
    background-color: rgb(162,162,162);
    color: rgb(45,45,45);
    text-shadow: -1px -1px 1px rgba(255,255,255,1);
}

.special-btn {
    background-color: #ff5a00;
    border: 1px solid #b32401;
    border-bottom: 2px solid #b32401;
    color: #fff;
    text-shadow: 1px 1px 1px #b32401;
}
.special-btn:hover {
    color: #680d01;
    background-color: #ff8e19;
    text-shadow: none;
}
.special-btn.disabled,
.special-btn[disabled],
.special-btn.disabled:hover,
.special-btn[disabled]:hover {
    color: #fff;
    background-color: rgb(241,200,172);
}

.special-btn:active,
.special-btn.active {
    background-color: #ff5a00;
    border: 1px solid #b32401;
    border-top: 2px solid #b32401;
    color: #fff;
    text-shadow: 1px 1px 1px #e84001;
}
.special-btn.active:hover {
    background-color: #ff8e19;
    color: #b32401;
    text-shadow: -1px -1px 1px rgba(255,255,255,1);
}

.social-btn {
    background-color: #32aac8;
    border: 1px solid #326482;
    border-bottom: 2px solid #326482;
    color: #fff;
    text-shadow: 1px 1px 1px #326482;
}
.social-btn:hover {
    color: #004664;
    background-color: #29d7ed;
    text-shadow: none;
}
.social-btn.disabled,
.social-btn[disabled],
.social-btn.disabled:hover,
.social-btn[disabled]:hover {
    color: #fff;
    background-color: rgb(190,220,222);
}

.social-btn:active,
.social-btn.active {
    background-color: #3296b4;
    border: 1px solid #326482;
    border-top: 2px solid #326482;
    color: #fff;
    text-shadow: 1px 1px 1px #326482;
}
.social-btn.active:hover {
    color: #004664;
    background-color: #32aac8;
    text-shadow: -1px -1px 1px rgba(255,255,255,1);
}

.cnn-btn-link {
    padding: 4px 8px;
    color: #fff;
    background-color: #bfb4ae;
    font-size: 14px;
    display: inline-block;
    cursor: pointer;
}
.cnn-btn-link:hover {
    background-color: #ff5a00;
}

.btn-link-social {
    background-color: #32aac8;
}
.btn-link-social:hover {
    background-color: #326482;
}

.cnn-btn.lg-btn {
    font-size: 16px;
}

.cnn-btn.xl-btn {
    font-size: 20px;
}


/********************************
 * STORY SPECIFIC OPTIONS 
 ********************************/

/* BASE */
body { }

.illo-credit {
    text-align: right;
    font-size: 11px;
    color: #8C8B8A;
}

.tech-list-wrapper {
    padding: 0;
    margin: 0 auto;
}

.tech-list-wrapper * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

.tech-list-wrapper img {
    max-width: 100%;
}

.tech-list-ad {
    margin: 15px auto;
    width: 100%;
}

h1 {
    font-family: Georgia, serif;
    font-weight: bold;
    font-style: italic;
    line-height: 110%;
}

.tl-page-counter {
    text-align: center;
    margin-bottom: 20px;
    clear: both;
}
.next-button { 
    width: 6em;
    float: right;
}
.prev-button {
    float: left;
    width: 6em;
}

.cnnten-frame { display: none; }

span.page-number {
    font-family: Georgia, serif;
    font-weight: bold;
    font-style: italic;
}
.tl-story-body {
    margin-bottom: 20px;
}

.tl-story-container {
    margin-bottom:20px;
}
.tech-list-desktop-nav-list,
.tech-list-footer-nav-list,
.tech-list-nav-list {
    list-style-type: none;
}

.tl-story-body p {
    font-family: Georgia, serif;
    font-size: 14px;
    line-height: 23px;
}

p.tl-byline {
    font-size: 12px;
    font-family: Arial, sans-serif;
}

p.tl-byline>span {
    font-weight: bold;
}

.ui-loader { display: none; }
.c_share_container { 
    position: relative;
    top: -8px;
}
a.startup_link { font-weight: bold; }


/* MOBILE */
@media screen and (max-width: 759px) {
    body {
        background-color: #fcfbf2;
    }

    .tech-list-main {
        margin: 0 auto;
        width: 320px;
        padding: 0 10px;
    }

    .tech-list-desktop-nav-wrapper { display: none; }

    .tech-list-header {
        margin-bottom: 20px;
    }
 
    h1 {
        font-size: 30px;
        color: #403037;
    }

    .c_share_container {
        display: none;
    }

    .page-number {
        color: #403037;
        font-size: 16px;
    }
    .tl-story-media {
        margin-bottom: 15px;
    }
    h2.tl-story-headline {
        font-family: Georgia, serif;
        color: #403037;
        font-weight: bold;
        font-style: italic;
        font-size: 18px;
        margin-bottom: 10px;
    }
    .tl-story-header > .tl-story-header-gradient,
    .tl-story-header .page-number {
        display: none;
    } 

    .tl-story-sidebar, .left-bumper-nav, .right-bumper-nav {
        display: none;
    }

    .tech-list-nav-header {
        margin-bottom: 10px;
        width: 100%;
        font-family: Arial, sans-serif;
        font-size: 16px;
        font-weight: bold;
        color: #535555;
        background-color: #bfb4ae;
    }

    .tech-list-nav-header-box {
        display: inline-block;
        border-right: 10px solid #fcfbf2;
    }
    .tech-list-nav-header-box>p {
        background-color: #fcfbf2;
        border: 2px solid #bfb4ae;
        padding: 0px 5px;
    }    

    .tech-list-comments {
        display: none;
    }
    .tl-story-body p {
        color: #403037;
        margin-bottom: 1em;
    }
    
    .tech-list-footer-nav-item {
        height: 81px;
        border-bottom: 2px solid #d9dccc;
        background-color: #fff;
        width: 100%;
        margin-bottom: 10px;
        font-family: Georgia, serif;
        font-weight: bold;
        color: #403037;
        font-style: italic;
        font-size: 18px;
    }
    
    .tech-list-footer-nav-item:hover {
        cursor: pointer;
        color: #ff5a00;
    }

    .tech-list-footer-nav-item>p{
        display: inline-block;
        width: 145px;
        vertical-align: middle;
        position: relative;
        top: -5px;
        line-height: 110%;
    }

    .tech-list-nav-img {
        display: inline-block;
        margin-right: 10px;
        vertical-align: middle;
    }
    
    .cnnten-recirc {
    	width:100%;
    	margin-bottom:20px;
        position: static !important;
    	padding-bottom:20px;
    	clear:both;
    }
    .cnnten-recirc img {
    	width:140px;
    	height:auto;
    	float:left;
    	margin-right:10px;
    }
    .cnnten-recirc h2 {
    	font-size:16px;
    	font-weight:bold;
    	font-family:Georgia,Times,serif;
    }
    .cnnten-recirc p {
    	font-size:12px;
    	font-family:Georgia,Times,serif;
    }
    
    
}

/* TABLET + DESKTOP */
@media screen and (min-width: 760px) {
    body {
        background-color: #000;
        background-image: url('http://i.cdn.turner.com/cnn/interactive/2013/11/tech/cnn10-inventions/media/tech-list-bg-image.jpg');
        background-position: top middle;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: 100% auto;
    }
    .tl-mobile-only {
        display: none;
    }

    .tech-list-main {
        background: #fff;
        margin-bottom: 20px;
        padding: 30px;
    }

    .tech-list-header {
        margin-bottom: 30px;
    }

    h1 {
        font-size: 33px;
        color: #000;
    }
    .tech-list-story-container {
        width: 640px;
        margin: 0 auto;
        position: relative;
    }

    .tl-page-counter {
        font-size: 18px;
        color: #b1b1b1;
    }

    .tl-story-header {
        position: relative;
        width: 100%;
    }
    
    .tl-story-media {
        position: static;
        margin-bottom: 20px;
        line-height: 100%;

    }

    .tl-story-header-gradient {
        width: 100%;
        height: 60px;
        position: absolute;

        top: 0;
        left: 0;
        background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
        background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
    }
    .tl-story-headline {

        position: absolute;
        top: 5px;
        left: 10px;
        color: #f7f5f2;
        font-family: Georgia, serif;
        font-weight: bold;
        font-style: italic;
        font-size: 27px;
    }

    .tl-story-header span.page-number {
        color: #ffffff;
        font-size: 17px;
        position: absolute;
        top: 10px;
        right: 10px;

        padding: 0 5px;
    }

    .tl-story-header span.page-number:before {
        content: "";
        display: inline-block;
        border-top: solid 1px #ffffff;
        margin-right: 5px;
        width: 25px;
        height: 3px;

    }

    .tl-story-header span.page-number:after {
        content: "";
        display: inline-block;
        border-top: solid 1px #ffffff;
        margin-left: 5px;
        width: 25px;
        height: 3px;

    }

    .tl-story-body.narrow {
        width: 500px;
    }

    .tl-story-body p {
        text-indent: 2em;
        color: #000;
    }

    p.tl-byline {
        text-indent: 0;
    }

    .tl-story-sidebar {
        width: 115px;
        float: right;
        margin-left: 25px;
        margin-bottom: 25px;
    }

    .tech-list-comments {
        width: 640px;
        clear: both;
        margin: 0 auto 20px auto;
        
    }

    .tech-list-footer-nav { display: none; }

    .left-bumper-nav, .right-bumper-nav {
        position: absolute;
        top: 400px;
        width: 34px;
        height: 150px;
        background-image: url('http://i.cdn.turner.com/cnn/interactive/2013/06/tech/tech-list-startups/media/nav-sprite.gif');
    }

    .left-bumper-nav {
        background-position: left top;
    }
    .right-bumper-nav {
        background-position: right top;
    }
    .left-bumper-nav:hover {
        cursor: pointer;
        background-position: left -150px;
    }
    .right-bumper-nav:hover {
        cursor: pointer;
        background-position: right -150px;
    }
    .tl-inline-image {
        float: left;
        margin: 1em;
    }


    .tl-page-counter span.page-number:before {
        content: "";
        display: inline-block;
        border-top: solid 1px #b1b1b1;
        margin-right: 15px;
        width: 88px;
        height: 3px;

    }

    .tl-page-counter span.page-number:after {
        content: "";
        display: inline-block;
        border-top: solid 1px #b1b1b1;
        margin-left: 15px;
        width: 88px;
        height: 3px;

    }
    .tl-story-sidebar dl {
        font-family: Georgia, serif;
        font-size: 14px;
        line-height: 18px;
        color: #000000;
    }

    .tl-story-sidebar dt {
        font-weight: bold;
        text-transform: uppercase;
    }
    
    .tl-story-sidebar dd {
        margin-bottom: 25px;
    }
    .cnn-footer a {
        color: #6ab9d3;
    }
    
    
    .tech-list-related {
        width: 640px;
        margin: 0 auto;
    }
    
    
    
}

/* TABLET ONLY */
@media screen and (min-width: 760px) and (max-width: 979px) {
    .tech-list-wrapper {
        width: 760px;
    }
    .tech-list-main {
        width: 760px;
        float: none;
    }

    .tech-list-desktop-nav-wrapper { display: none; }
    .left-bumper-nav {
        left: -60px;
    } 
    
    .right-bumper-nav {
        right: -60px;
    }
    
    .cnnten-recirc {
    	width:30%;
    	float:left;
    	margin-right:20px;
    	padding-bottom:20px;
    }
    .cnnten-recirc img {
    	width:100%;
    	height:auto;
    }
    .cnnten-recirc h2 {
    	font-size:16px;
    	font-weight:bold;
    	font-family:Georgia,Times,serif;
    }
    .cnnten-recirc p {
    	font-size:12px;
    	font-family:Georgia,Times,serif;
    }
    

}

/* DESKTOP ONLY */
@media screen and (min-width: 980px) {
    .tech-list-wrapper {
        width: 980px;
    }

    .tech-list-main {
        width: 829px;
        float: left;

    }
    
    .tech-list-desktop-nav-wrapper {
        width:150px;
        float: left;
        min-height: 40px;
        position: relative;
        z-index:50;
    }
    
    .tech-list-desktop-nav {
        width: 150px;
        background-color: #000;
        padding-top: 0;
        font-weight: bold;
        color: #fff;
        font-family: Arial, sans-serif;
        font-size: 13px;
        line-height: 110%;
        text-transform: uppercase;

        overflow-x: visible;
    }

    .tech-list-desktop-nav li {
        margin: 1px 0;
        padding: 5px 5px 5px 5px;
        background-image: url('http://i.cdn.turner.com/cnn/interactive/2013/06/tech/tech-list-startups/media/nav-bg.jpg');
    }
    .tech-list-desktop-nav li:hover {
        color: #ff5a00;
        cursor: pointer;
    }
    
    .tech-list-desktop-nav-item.selected:hover {
        color:#fff;
    }
    
    .tech-list-desktop-nav-item.selected>p {
        background-image: url('http://i.cdn.turner.com/cnn/interactive/2013/06/tech/tech-list-startups/media/nav-active.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-left: -5px;
        margin-top: -5px;
        margin-bottom: -5px;
        padding-left: 5px;
        padding-top: 5px;
        padding-bottom: 5px;
        width: 160px;
        overflow-x: visible;
    }
    
    .tech-list-desktop-nav-fixed {
        position: fixed;
        top: 25px;
    }

    .left-bumper-nav {
        left: -95px;
    } 
    
    .right-bumper-nav {
        right: -95px;
    }
    
    
    
    .cnnten-recirc {
    	width:30%;
    	float:left;
    	margin-right:20px;
    	padding-bottom:20px;
    }
    .cnnten-recirc img {
    	width:100%;
    	height:auto;
    }
    .cnnten-recirc h2 {
    	font-size:16px;
    	font-weight:bold;
    	font-family:Georgia,Times,serif;
    }
    .cnnten-recirc p {
    	font-size:12px;
    	font-family:Georgia,Times,serif;
    }
    
}