body {
    margin: 0;
    padding: 0;
    background: #fff;
    font-family: 'Ubuntu', Arial, sans-serif;
    font-size: 100%;
    font-weight: 300;
    color: #A29C90;
}

a, a:visited, a:hover {
    color: #ca821a;
    font-weight: 700;
    text-decoration: none;
}


.page {
}

.page h2 {
    color: #7a553b;
    font-weight: 300;
    font-size: 37.9px;
    letter-spacing: -2px;
    line-height: 37.6px;
    margin: 0 0 10px 0;
}

.page-text {
    color: #9e988f;
    font-size: 15.5px;
    font-weight: 300;
    line-height: 20px;
}

.arrow-link {
    font-size: 16.5px;
    font-weight: 700;
    color: #ca821a;
    text-decoration: none;
    margin: 10px auto 0 auto;
    width: auto;
    padding: 3px 30px 3px 0;
    display: inline-block;
    background: transparent url(../../images/2012/page/link-arrow.png) no-repeat right center;
}

.clipboard-copied {
    background: transparent url(../../images/2012/page/check-mark.png) no-repeat right center;
}

/* Clipboard */

.clipboard-area {
    position: fixed;
    top: 50%;
    margin-top: -100px;
    width: 400px;
    height: 200px;
    left: 50%;
    margin-left: -175px;
    z-index: 1000;
}

.clipboard-area .title {
    position: relative;
    font-weight: 500;
    color: #C9C0B2;
    font-size: 16px;
    float: left;
    width: 100%;
    height: 25px;
    top: 35px;
    padding: 0 11px;
}

.clipboard-area .close {
    width: 20px;
    height: 20px;
    background: #fff;
    float: right;
    cursor: pointer;
    font-size: 18px;
    text-align: center;
    line-height: 18px;
    vertical-align: middle;
}

.clipboard-area textarea {
    width: 100%;
    height: 150px;
    box-shadow: 0 3px 0 0 #E8E8E8 inset;
    border: 1px solid #BEB297;
    border-radius: 3px 3px 3px 3px;
    background: #fff;
    padding: 40px 10px 10px 10px;
    font-family: 'Ubuntu', Arial, sans-serif;
    font-size: 12px;
    color: #333;
}


/* Default Header */

.header {
    width: auto;
    height: 245px;
    background: #cc6600 url(../../images/2012/header-border.gif) repeat-x center bottom;
    overflow: hidden;
    text-align: center;
}

#header-collapsed {
    width: 100%;
    height: 100px;
    background: #cc6600 url(../../images/2012/header-border.gif) repeat-x center bottom;
    overflow: hidden;
    text-align: center;
    position: fixed;
    top: -100px;
    z-index: 1000;
}

#header-collapsed-placeholder {
    width:100%;
    height: 0;
}

.header-wrapper {
    width: 1200px;
    text-align: left;
    margin: 0 auto 0 auto;
}

#header-collapsed .header-wrapper {
    padding: 10px 30px 0 30px;
    color: #643107;
    font-size: 25px;
    letter-spacing: -1px;
}

#header-collapsed .header-wrapper * {
    vertical-align: middle;
}

#header-embed {
    float: left;
    margin: 35px 15px 0 30px;
    border: 1px solid #c27612;
    border-top-color: #804603;
    border-left-color: #a55c03;
    border-radius: 8px;
    height: 176px;
    padding: 1px;
    overflow: hidden;
    /* webkit does not support rounded video */
    -webkit-border-radius: 0;
}

#vidly-logo {
    font-size: 32px;
    color: #fff;
    float: left;
    margin: 70px 15px 0 0;
    width: 260px;
}

#vidly-logo .logo-img {
    display: block;
    float: left;
    text-indent: -1000px;
    width: 258px;
    height: 115px;
    background: transparent url(../../images/2012/vidly-logo.png) no-repeat;
}

#vidly-logo .from-encoding {
    color: #fff;
    letter-spacing: -1px;
    font-size: 24.8px;
    font-weight: 300;
    position: relative;
    left: 9px;
    top: -31px;
}

#header-text {
    margin-top: 24px;
    float: left;
    width: 450px;
}

#tagline {
    font-size: 23px;
    font-weight: 300;
    letter-spacing: -1px;
    color: #7c3303;
    line-height: 120%;
    margin-bottom: 10px;
}

#header-buttons {
    float: right;
    margin-top: 18px;
    clear: right;
}


/* Top Menu */

#top-nav {
    font-family: Ubuntu, Arial, sans-serif;
    border-top: 1px solid #e3e3e3;
    border-bottom: 1px solid #d9d1c5;
    background: #fff;
    width: 100%;
    box-shadow: 0 4px 0px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 1000;
}


#top-nav ul {
    list-style: none;
    list-style-image: none;
    margin: 0 auto 0 auto;
    padding: 0 0 0 30px;
    height: 52px;
    width: 1200px;
}

#top-nav ul li {
    display: block;
    float: left;
    height: 52px;
    padding: 0;
    margin: 0px 23px 0px 23px;
}

#top-nav ul li a {
    color: #c9c0b2;
    font-size: 23.6px;
    font-weight: 500;
    line-height: 52px;
    letter-spacing: -1px;
    height: 52px;
    text-decoration: none;
    background: url(../../images/2012/selected-tick.png) no-repeat center -100px;
}

#top-nav ul li a:focus {
    outline: 0;
}

.ie #top-nav ul li a {
    font-weight: bold;
}

#top-nav ul li.last {
    border: 0;
}

#top-nav ul li.selected a {
    padding-bottom: 25px;
    background-position: center bottom;
    position: relative;
    z-index: 100;
}

#top-nav ul li a:hover, #top-nav ul li.selected a {
    color: #c66400;
}


.stuck {
    position: fixed !important;
    top: 0px;
}

#top-nav-placeholder {
    width: 100%;
    height: 54px;
    display: none;
}

.page-link {
    position: absolute;
    margin-top: -150px;
}

.free-face {
    position: absolute;
    background: url(../../images/2012/page/free-face.png) no-repeat;
    width: 75px;
    height: 44px;
    margin-top: 23px;
    margin-left: 6px;
}

/* =============== Footer ================== */

#footer {
    min-width: 960px;
    width: auto;
    margin-top: 20px;
    padding-top: 10px;
}

#footer-logo {
    text-indent: -1000px;
    width: 114px;
    height: 51px;
    background: url('../../images/logo-footer.png') no-repeat left center;
    overflow: hidden;
    float: left;
}

#footer-nav {
    list-style: none;
    font-size: 14px;
    float: left;
}

#footer-nav li {
    display: inline-block;
    margin: 4px;
}

#footer-nav a {
    color: #ccc;
}

#encoding-logo {
    text-indent: -1000px;
    background: url('../../images/footer/footer-logo.jpg') no-repeat left center;
    width: 215px;
    height: 33px;
    overflow: hidden;
    float: left;
}

#copyrights {
    font-size: 12px;
    color: #b9b9b9;
    background: url('../../images/2012/page/edc-logo.gif') no-repeat right center;
    padding-right: 40px;
    text-align: right;
}

#copyrights span {
    padding-right: 10px;
    padding-bottom: 5px;
    border-right: 1px solid #b9b9b9;
    text-align: right;
    display: inline-block;
}

#filmstrip {
    background: #c66400 url(../../images/2012/page/film.gif) repeat-x left top;
    height: 100px;
}

#filmstrip .ver {
    display: block;
    font-size: 7px;
    padding-left: 5px;
    color: #ccc;
}

/* ============ UI Elements ============== */

/* Button */

.button:focus {
    outline: 0;
}

a.button, input.button {
    background: #c96a0c;
    font-family: Ubuntu, Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #96480b;
    text-decoration: none;
    border: 1px solid #964a01;
    border-radius: 3px;
    height: 44px;
    line-height: 44px;
    text-wrap: none;
    display: inline-block;
    padding: 0 15px 2px 15px;
    box-shadow: inset 0px 1px 0px 0px #eb8c29;
    vertical-align: top;
    letter-spacing: -1px;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}

input.button {
    padding: 0 15px 0 15px;
    height: 45px;
    line-height: 40px;
}

a.button-small {
    padding: 0 10px 2px 10px;
    height: 30px;
    line-height: 30px;
}

input.button-small {
    padding: 0 10px 0 10px;
    height: 32px;
    line-height: 27px;
}

a.button:hover, input.button:hover {
    background-color: #d4740c;
}

.button-bright {
    color: #fff !important;
    background-color: #d97405 !important;
}

a.button-bright:hover, input.button-bright:hover {
    background-color: #e07905 !important;
}

a.button-disabled, input.button-disabled, a.button-disabled:hover, input.button-disabled:hover {
    box-shadow: inset 0px 1px 0px 0px #777 !important;
    background-color: #aaa !important;
    cursor: default !important;
    border-color: #ccc !important;
}

#embed-copy {
    font-weight: 300;
    color: #ffc98a !important;
    margin: 5px 20px 6px 20px;
    width: 220px;
}

#embed-copy.button-pressed {
    color: #6f3800 !important;
    background-color: #bc5f00 !important;
    border-color: #c36200 !important;
    box-shadow: inset 0px -1px 0px 0px #c66808 !important;
}

.button-pressed:hover {
    background-color: #bc5f00 !important;
}

.button-start {
    box-shadow: inset 0px 1px 0px 0px #feb527 !important;
    color: #fff !important;
    background-color: #f69e0f !important;
    border-color: #dd9320 !important;
    font-size: 21px !important;
}

.button-light {
    box-shadow: inset 0px 1px 0px 0px #fedd80 !important;
    color: #fff !important;
    background-color: #efc76a !important;
    border-color: #d2a848 !important;
    font-size: 21px !important;
}

.icon-start,
.icon-phone,
.icon-free,
.icon-chat {
    background-position: 7px center !important;
    padding-left: 50px !important;
    background-repeat: no-repeat !important;
}

.icon-start {
    background-image: url(../../images/2012/page/icon-time.png) !important;
}

.icon-phone {
    background-image: url(../../images/2012/page/icon-phone.png) !important;
    cursor: default !important;
}

.icon-chat {
    background-image: url(../../images/2012/page/icon-chat.png) !important;
}

.icon-free {
    background-image: url(../../images/2012/page/icon-free.png) !important;
}

/* Text Input */

.text-input-big {
    font-family: Ubuntu, Arial, sans-serif;
    font-weight: 300;
    border: 1px solid #7d4004;
    border-radius: 3px;
    font-size: 23px;
    background: #fff;
    letter-spacing: -1px;
    color: #aaa094;
    height: 43px;
    line-height: 43px;
    padding: 0 15px;
    box-shadow: inset 0px 3px 0px 0px #e8e8e8;
    vertical-align: top;

}

/* Price text field */
.text-input {
    font-family: Ubuntu, Arial, sans-serif;
    border: 1px solid #beb297;
    border-radius: 3px;
    font-size: 20px;
    background: #fff;
    letter-spacing: -1px;
    color: #C3B9AB;
    height: 38px;
    padding: 0 15px;
    box-shadow: inset 0px 3px 0px 0px #e8e8e8;
    vertical-align: top;
}

.lt-ie9 .text-input {
    line-height: 38px;
}


/* ============ Quick Try ============ */

body.masked {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#quick-try-mask {
    position: absolute;
    width: 100%;
    height: 2000px;
    z-index: 4000;
    background: #000;
    opacity: 0.6;
    top: 243px;
    display: none;
}

#vidly-quick-try-logo {
    float: left;
    margin-top: 55px;
    width: 262px;
    height: 146px;
    display: block;
    text-indent: -1000px;
    overflow: hidden;
    background: transparent url(../../images/2012/quick-try.png) no-repeat;
    position: relative;
}

#close-quick-try {
    position: absolute;
    right: 10px;
    top: 10px;
}

#steps {
    float: left;
    height: 170px;
    /*width: 60%;*/
    margin-left: 30px;
    color: #fff;
}


#steps-counter {
    float: left;
    color: #eca151;
    font-size: 20px;
    letter-spacing: -1px;
    padding: 0;
    margin: 0 0 10px 0;
    height: 60px;
    font-weight: 300;
    width: 600px;
}

#steps-counter div {
    float: left;
    padding: 15px 20px;
    height: 30px;
    border-left: 1px solid #ab5600;
    text-align: center;
    color: #eca151;
}

#steps-counter .selected {
    color: #fff;
}

#steps-counter .selected span {
    display: block;
    height: 25px;
    background: url(../../images/2012/arrow-down.png) no-repeat center center;
    margin-top: 5px;
}


.step {
    margin-left: 20px;
    margin-top: 10px;
    width: 800px;
}

#step0 {
    margin-top: 10px;
}

#step4 {
    margin-top: 30px;
}


.vline {
    width: 1px;
    float: left;
    height: 65px;
    background: #9a4e00;
    margin-top: 13px;
}

.step .step-title {
    font-size: 27.6px;
    font-weight: 500;
    display: block;
    color: #fff;
    margin: 5px 0;
    letter-spacing: -1px;
}

#step0 .step-title,
#step4 .step-title {
    font-size: 20px;
}

#step1 .text-input {
    width: 300px;
}

#step2 .text-input {
    width: 400px;
}

#step4 {
    position: relative;
}

#error-message {
    position: relative;
    margin: 10px 0 0 20px;
    font-size: 14px;
}

#fileupload-input {
    position: absolute;
    display: none;
    overflow: hidden;
}


#file {
    font-size: 150px;
    filter: progid:DXImageTransform.Microsoft.Alpha (opacity=0);
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    cursor: hand;
    cursor: pointer;
    z-index: 100;
}

#percent-view {
    display: block;
    font-size: 30px;
    position: absolute;
    top: -45px;
    left: -300px;
    color: #934C07;
    font-weight: bold;
    filter: progid:DXImageTransform.Microsoft.Alpha (opacity=0.6);
    filter: alpha(opacity=0.6);
    -moz-opacity: 0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6;
}

#progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 245px;
    background: #E58B00;
}

/* Custom select box */

#radiobuttons {
    height: 43px;
    border: 1px solid #924f07;
    width: 170px;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px 0px #eb8c29;
    cursor: pointer;
    display: inline-block;
    float: left;
    background: #c96a0c url(../../images/2012/dropdown-arrow.png) no-repeat right center;
    letter-spacing: -1px;
    margin-right: 5px;
}

#radiobuttons .selected {
    font-size: 21.2px;
    color: #fff;
    font-weight: 700;
    height: 43px;
    line-height: 43px;
    text-align: right;
    padding-right: 47px;
}

#radiobuttons .options {
    display: none;
    position: absolute;
    width: 170px;
    background: #fff;
    border: 1px solid #924f07;
    border-radius: 3px;
    margin-top: -3px;
    margin-left: -1px;
    padding: 4px 0 4px 0;
    z-index: 5000;
}

#radiobuttons .options input {
    display: none;
}

#radiobuttons .options label {
    font-size: 21.2px;
    font-weight: 700;
    color: #a69985;
    display: block;
    text-align: right;
    padding: 1px 10px;
}

#radiobuttons .options label:hover {
    color: #c66400;
    background: #fff0e3;
}

/*
.radio {
    width: 19px;
    height: 23px;
    padding: 0;
    margin: 0;
    background: url(../../images/2012/custom-radio.png) no-repeat;
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
}
*/

/* ====================== Codes Page ==================== */

.content-wrapper {
    width: 1000px;
}

#code-contents h2 {
    color: #BF781C !important;
    font-size: 50px;
    letter-spacing: -1px;
    margin: 0;
    padding: 0 0 0 100px;
    font-family: 'Ubuntu Condensed', 'Arial Narrow', sans-serif !important;
}

#code-contents h2.mobile {
    background: transparent url(../../images/phone.png) no-repeat left center;
}

#code-contents h2.embed {
    background: transparent url(../../images/code.png) no-repeat left center;
}

#code-contents h2.fla {
    background: transparent url(../../images/f.png) no-repeat left center;
}

#code-contents textarea {
    width: 100%;
}

.text-input-grey {
    color: #000;
    background: #F0EFEE;
    border: 4px solid #f5f5f5 !important;
    border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px;
    padding: 10px !important;
    box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
}

.hr-shadowy {
    width: 100%;
    height: 30px;
    border: 0;
    background: transparent url(../../images/line.jpg) no-repeat center center;
}


/* Homepage */

/* HTML5 table */

#html5-logo {
    margin-top: 40px;
    margin-bottom: -120px;
    position: relative;
    z-index: 100;
}

.html5-table {
    border: 0;
    border-collapse: collapse;
    width: 830px;
}

.html5-table caption {
    color: #d08400;
    font-size: 22px;
    font-weight: 700;
    text-align: left;
    padding-left: 120px;
}

.html5-table thead {
    background: #e2d2ac;
    font-size: 18px;
    font-weight: 700;
    color: #a1916d;
}

.html5-table th {
    color: #a1916d;
    font-weight: 700;
    font-size: 18px;
    padding: 35px;
    letter-spacing: -1px;
}

.html5-table td {
    color: #c1b197;
    background: #efeadf;
    border: 3px solid #fbf7ef;
    padding: 27px;
    vertical-align: middle;
    font-weight: 400;
}

.html5-table td.col-share, .html5-table td.col-format {
    font-size: 16px;
    text-align: center;
}

.html5-table td.col-support {
    font-size: 14px;
    text-align: left;
}

.html5-table td.col-browser {
    font-size: 22.8px;
    text-align: left;
    font-weight: 500;
}

.html5-table th.col-browser {
    padding-left: 120px;
    text-align: left;
}

.html5-table .legend {
    text-align: right;
    color: #d7ab6c;
    font-size: 12px;
    border: 0;
    padding: 10px 0;
    background: transparent;
}


.browser-icon {
    background: url(../../images/2012/page/browsers.jpg) no-repeat;
    padding: 13px 0 13px 75px;

}

.browser-ie9 { }
.browser-ie8 { background-position: 0px -98px; }
.browser-chrome { background-position: 0px -187px; }
.browser-ff { background-position: 0px -288px; }
.browser-safari { background-position: 0px -382px; }


/* Price table */

#price {
    border-collapse: collapse;
}

#price td {
    font-weight: 400;
}

#price .empty-row {
    height: 25px;
}

#price td, #price th {
    padding: 12px;
}

#price tbody .col-price {
    border-left: 1px solid #f5efe9;
}

#price th {
    color: #e48800;
    font-size: 23px;
    font-weight: 700;
    border-bottom: 1px solid #f5efe9;
    padding-top: 70px;
    letter-spacing: -1px;
}

#price .col-item {
    text-align: right;
    padding-right: 100px;
}

#price tbody .col-item {
    color: #aa8954;
    font-size: 15px;
}

#price tbody .col-price {
    color: #cd8c35;
    font-size: 15px;
}

#price .col-price {
    text-align: left;
}

/* calc */

#calculator label {
    color: #aa8954;
    font-size: 18px;
    display: block;
    margin-bottom: 10px;
    line-height: 19.8px;
    letter-spacing: -1px;
}

#calculator caption {
    color: #d08400;
    font-size: 25.3px;
    font-weight: 700;
    border-bottom: 4px solid #e2d2ac;
    padding: 0 0 5px 130px;
    text-align: left;
    letter-spacing: -1px;
}

#calculator {
    background: #fbf7ef;
}

#calculator td {
    font-size: 18px;
    font-weight: 500;
    color: #aa8954;
}

#calculator .quote {
    color: #cd8c35;
    font-size: 21.1px;
    font-weight: 300;
    letter-spacing: -1px;
    line-height: 26.6px;
}

#calculator tfoot td {
    font-size: 12px;
    color: #b0a897;
}

#price-result {
    width: 200px;
    height: 45px;
    border: 1px solid #dcbb87;
    padding: 0 10px;
    font-size: 35px;
    line-height: 44px;
    font-weight: 500;
    color: #aa8954;
    border-radius: 3px;
    float: left;
    background: #fff;
}

.progress-mask {
    background-image: url(../../images/2012/page/progress-bar.png) !important;
    background-repeat: repeat-x !important;
    background-position: 0px -50px;
}

#price-result sup {
    font-size: 20px;
}


.page-wrapper {
    width: 850px;
    margin-left: auto;
    margin-right: auto;
    padding-right: 300px;
}

.feature-block {
    width: 235px;
    float: left;
    font-size: 15px;
    color: #9e988f;
    margin: 40px 0 40px 55px;
}

.feature-block-first {
    margin-left: 30px;
}

.feature-img {
    width: 100%;
    height: 165px;
    text-align: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #e8e7e4;
}

/* Floating box */

#floating-box {
    width: 250px;
    background: #fff;
    border: 1px solid #d9cec1;
    border-radius: 3px;
    padding: 5px;
    position: fixed;
    margin: 25px 0 0 900px;
    z-index: 3000;
}

#floating-box .button {
    width: 177px;
    margin: 3px;
}


/* Mozilla */

.quote {
    line-height: 110%;
    font-size: 21px;
    font-weight: 300;
}

.quote .auth {
    line-height: 100%;
    margin-top: 10px;
    background: url(../../images/2012/page/mozilla.gif) no-repeat left center;
    padding-left: 60px;
    margin-left: 45px;
    height: 50px;
}

/* Recaptcha style */

#recaptcha #recaptcha_response_field {
    display: none;
}

#recaptcha {
    width: 320px;
    height: 47px;
    overflow: hidden;
    position: relative;
    border: 1px solid #840D08;
    border-radius: 3px;
    margin-bottom: 10px;
}

#recaptcha #recaptcha_image {
    position: relative;
    left: -9px;
    top: -9px;
    background: #fff;
}

#recaptcha #recaptcha_image img {
    height: 48px;
}

#recaptcha #recaptcha_reload_btn,
#recaptcha #recaptcha_switch_img_btn,
#recaptcha #recaptcha_switch_audio_btn,
#recaptcha #recaptcha_whatsthis_btn {
    position: relative;
    left: 110px;
    top: -73px;
}

body>iframe {
    display: none;
}

/* Mobile tweaks */

@media handheld, screen and (max-device-width: 1000px) {

    /* hide sticky header */

    #header-collapsed {
        display: none !important;
    }

    .stuck {
        display: none !important;
    }
}