@charset "UTF-8";

/* Great! You're intersted in code. So do we. We keep creating and pushing new software. It took us a while to create a system like this. You could learn from it, but stealing is extremely forbidden and it's actually a crime, not to mention you risk being banned from the Envato Marketplaces.

Thanks so much

~ Kevin Groenendaal */

/*Reset*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; }

html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; font-family: 'proxima_nova_rgregular', Helvetica, Arial, sans-serif; }
body ::selection {
	background: rgba(246,88,87,0.7); /* Safari */
	color: #FFF;
	}
	
#select_list::-webkit-scrollbar {
    width: 1px;
    height: 6px;
}
 
#select_list::-webkit-scrollbar-track {
	width: 1px;
}
 
#select_list::-webkit-scrollbar-thumb {
	width: 1px;
    background-color: rgba(0,0,0,0.2)
}

#select_list::-webkit-scrollbar-corner {
    background-color: #28292b;
}

table[name] { cursor: ns-resize; }
table[name]:active { -webkit-transform: scale(1.02); -moz-transform: scale(1.02); opacity: 0.7 }
.minimize { -webkit-transform: scale(0.8); table-layout: fixed; } 

/*Headlines*/
h1 {font-family: Helvetica, Arial, sans-serif; font-size: 30px; color: #FFF; font-weight: bold; }
h2 {font-family: 'proxima_novalight', Helvetica, Arial, sans-serif; font-size: 30px; color: #878787; font-weight: 100; }
h3 {font-family: 'proxima_novasemibold', Helvetica, Arial, sans-serif; font-size: 24px; color: #343434; padding-bottom: 10px;}
h4 {font-family: 'proxima_novasemibold', Helvetica, Arial, sans-serif; font-size: 18px; color: #272727; }
h5 {font-family: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold; }
h6 {font-family: Helvetica, Arial, sans-serif; font-size: 10px; font-weight: bold; }

#nav { width: 960px; margin: auto; padding-top: 25px; padding-bottom: 25px; position: relative;}
#logo { width: 197px; height: 21px; background-image: url(../img/logo.png); }

#select_box { background-image: linear-gradient(bottom, rgb(206,61,61) 0%, rgb(238,94,94) 100%);
background-image: -o-linear-gradient(bottom, rgb(206,61,61) 0%, rgb(238,94,94) 100%);
background-image: -moz-linear-gradient(bottom, rgb(206,61,61) 0%, rgb(238,94,94) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(206,61,61) 0%, rgb(238,94,94) 100%);
background-image: -ms-linear-gradient(bottom, rgb(206,61,61) 0%, rgb(238,94,94) 100%);

background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, rgb(206,61,61)),
	color-stop(1, rgb(238,94,94))
); color: #FFF; font-size: 12px; padding: 2px 10px 2px 10px; border-radius: 30px; border: 1px solid #bf4650; box-shadow: inset 0px 1px 0px rgba(255,255,255,0.18), inset 0px 0px 0px 1px rgba(255,255,255,0.12); position: absolute; right: 0px; top: 30px; cursor: pointer; font-family: 'proxima_nova_rgregular', Helvetica, Arial, sans-serif; }

#select_list { width: 115px; height: 285px; position: absolute; right: 0px; top: 50px; list-style-type: none; display: none; overflow-y: scroll;) }
#select_list li { border-radius: 100%; width: 80px; height: 80px; margin: auto; margin-top: 20px; position: relative; cursor: pointer;}
.toolTip { position: absolute; left: 210px; top: 33px; width: 590px; height: 300px; box-shadow: 0px 0px 0px 1px rgba(255,255,255,1), 0px 0px 0px 2px rgba(0,0,0,0.2); z-index: 7; display: none; border-radius: 3px;}
#select_list span { display: none; }
.btn { background-image: linear-gradient(bottom, rgb(206,61,61) 0%, rgb(238,94,94) 100%);
background-image: -o-linear-gradient(bottom, rgb(206,61,61) 0%, rgb(238,94,94) 100%);
background-image: -moz-linear-gradient(bottom, rgb(206,61,61) 0%, rgb(238,94,94) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(206,61,61) 0%, rgb(238,94,94) 100%);
background-image: -ms-linear-gradient(bottom, rgb(206,61,61) 0%, rgb(238,94,94) 100%);

background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, rgb(206,61,61)),
	color-stop(1, rgb(238,94,94))
); color: #F1F1F1; font-size: 16px; padding: 7px 30px 7px 30px; border-radius: 60px; border: 1px solid #bf4650; box-shadow: inset 0px 1px 0px rgba(255,255,255,0.18), inset 0px 0px 0px 1px rgba(255,255,255,0.12); cursor: pointer; font-family: 'proxima_novasemibold', Helvetica, Arial, sans-serif;}

.buyTemplate { background-image: linear-gradient(bottom, rgb(209,209,209) 0%, rgb(237,237,237) 100%);
background-image: -o-linear-gradient(bottom, rgb(209,209,209) 0%, rgb(237,237,237) 100%);
background-image: -moz-linear-gradient(bottom, rgb(209,209,209) 0%, rgb(237,237,237) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(209,209,209) 0%, rgb(237,237,237) 100%);
background-image: -ms-linear-gradient(bottom, rgb(209,209,209) 0%, rgb(237,237,237) 100%);

background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, rgb(209,209,209)),
	color-stop(1, rgb(237,237,237))
); color: #606060; font-size: 16px; padding: 7px 30px 7px 30px; border-radius: 60px; border: 1px solid #b8b8b8; box-shadow: inset 0px 1px 0px rgba(255,255,255,0.18), inset 0px 0px 0px 1px rgba(255,255,255,0.12); cursor: pointer; font-family: 'proxima_novasemibold', Helvetica, Arial, sans-serif;}

#header { width: 960px; margin: auto; text-align: center; }
#header h2 { padding-top: 40px; padding-bottom: 40px; width: 700px; margin: auto; }
#header span { font-family: 'proxima_nova_rgbold' Helvetica, Arial, sans-serif; color: #343434; }

#intro { height: 230px; overflow: hidden; }
#more { display: none; }
#moreBtn { background-image: linear-gradient(bottom, rgb(128,179,117) 0%, rgb(155,210,145) 100%);
background-image: -o-linear-gradient(bottom, rgb(128,179,117) 0%, rgb(155,210,145) 100%);
background-image: -moz-linear-gradient(bottom, rgb(128,179,117) 0%, rgb(155,210,145) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(128,179,117) 0%, rgb(155,210,145) 100%);
background-image: -ms-linear-gradient(bottom, rgb(128,179,117) 0%, rgb(155,210,145) 100%);

background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, rgb(128,179,117)),
	color-stop(1, rgb(155,210,145))
); color: #FFF; font-size: 16px; padding: 5px 20px 5px 20px; border-radius: 60px; border: 1px solid #6c9b62; box-shadow: inset 0px 1px 0px rgba(255,255,255,0.18), inset 0px 0px 0px 1px rgba(255,255,255,0.12); cursor: pointer; font-family: 'proxima_novasemibold', Helvetica, Arial, sans-serif;}
.tempCol { width: 280px; float: left; padding-top: 40px; padding-right: 40px; text-align: center; min-height: 190px;}
.tempCol:last-child { background-image: url(../img/arrow.jpg); background-repeat: no-repeat; background-position: right bottom;  }
.tempCol p { color: #8d8d8d; font-size: 14px; padding-top: 10px; line-height: 22px;}
.tempCol a { text-decoration: none; font-family: 'proxima_novasemibold', Helvetica, Arial, sans-serif; color: #ed5d5e;}

#window { width: 902px; height: 410px; margin: auto; position: relative; background-image: url(../img/ajax-loader.gif), url(../img/browser.png);
background-position: center center, center center;
background-repeat: no-repeat; clear: both;
}

.rgb { position: relative; }

#templateOverlay { width: 804px; height: 212px; top: 48px; left: 49px;position: absolute; z-index: 1000; display: none; background-color: rgba(0,0,0,0.9); color: #FFF; padding-top: 150px; font-size: 22px; cursor: pointer;}
#templateOverlay img { padding-bottom: 10px; }

#exportTempCode { position: absolute; right: -100px; top: 8px; z-index: 10; }

#editor { width: 100%; height: 100%;background-color: rgba(255,255,255,0.9); position: absolute; top: 0px; left: 0px; z-index: 1; display: none;}

#sortable { width: 590px; margin: auto; }

#NSTemplate { width: 804px; height: 361px; min-height: 361px; top: 49px; left: 49px;position: absolute; display: none; z-index: 2; overflow-y: scroll; border-radius: 3px; box-shadow: 0px 3px 0px rgba(0,0,0,0);}
#colorPicker { position: absolute; right: -80px;  top: -253px; display: none; z-index: 8; text-align: left; width: 200px;}
#colorPicker p { font-size: 12px; font-family: 'proxima_nova_rgbold', Helvetica, Arial, sans-serif; color: #7f7f7f; text-transform: uppercase; padding-top: 20px; line-height: 20px;}
#colorPicker span { color: #ee5e5f; }
#NSTemplate table { margin: auto; position: relative; max-width: 804px;}
#generatedCode { background-image: url(../img/arrow.png); height: 32px; width: 17px; background-repeat: no-repeat; background-position: left top; line-height: 32px; padding-left: 25px; font-size: 14px; margin-top: 30px; letter-spacing: 2px; opacity: 0; margin-left: -20px; font-family: 'proxima_novasemibold', Helvetica, Arial, sans-serif;}
#generatedCode span { color: #848484; }

.options { display: none; position: absolute; z-index: 30; }

.hider { background-color: #656565; position: absolute; left: 20px; top: 10px; padding: 10px; padding-top: 5px; padding-bottom: 5px; color: #FFF; border-radius: 3px; font-size: 12px;  cursor: pointer; font-family: 'proxima_novasemibold', Helvetica, Arial, sans-serif; }

.duplicate { background-color: #656565; position: absolute; left: 20px; top: 40px; padding: 10px; padding-top: 5px; padding-bottom: 5px; color: #FFF; border-radius: 3px; font-size: 12px; cursor: pointer; font-family: 'proxima_novasemibold', Helvetica, Arial, sans-serif;  }

.divider { background-image: url(../img/divider.png); background-position: center center; height: 1px; background-repeat: no-repeat; position: relative; margin-bottom: 80px;}

#detectResponsive { position: absolute; top: -100px; }

#result { display: none; }
#tip { display: none; }

.col { width: 960px; margin: auto; padding-bottom: 40px; min-height: 40px; position: relative;}
.col_text { color: #717171; width: 500px; line-height: 26px; float: left; padding-top: 60px; font-size: 18px; font-family: 'proxima_novalight', Helvetica, Arial, sans-serif; text-align: left!important;}
.col_image { width: 460px; float: left; }
.responsiveBg { background-image: url(../img/col_responsive.png); height: 220px; background-repeat: no-repeat; background-position: 50px top; box-shadow: inset 0px -10px 10px rgba(255,255,255,1); opacity: 0;}
.compatibleBg { background-image: url(../img/col_compatible.jpg); height: 220px; background-repeat: no-repeat; background-position: 50px center; box-shadow: inset 0px -10px 10px rgba(255,255,255,1); opacity: 0;}
.litmusBg { background-image: url(../img/col_litmus.jpg); height: 220px; min-height: 300px; background-repeat: no-repeat; background-position: 80px center; box-shadow: inset 0px -10px 10px rgba(255,255,255,1); opacity: 0;}

#awards { width: 960px; margin: auto; padding-top: 70px; position: relative; min-height: 340px;}
#awards h2 { text-align: center; color: #343434; font-family: 'proxima_novasemibold', Helvetica, Arial, sans-serif; font-size: 28px; line-height: 0px; padding: 17px;}
#awards span { font-family: 'proxima_nova_rgbold', Helvetica, Arial, sans-serif; color: #77a86f; }
#awards p { color: #878787; width: 600px; text-align: center; margin: auto; padding-top: 10px; line-height: 25px; font-size: 18px; font-family: 'proxima_novalight', Helvetica, Arial, sans-serif;}

.divider_footer { height: 1px; background-image: url(../img/divider_footer.png); width: 700px; margin: auto; }

.laurel_1 { position: absolute; left: 0px; top: 54px; background-image: url(../img/laurel_1.png); width: 102px; height: 114px; opacity: 0.6;} 
.laurel_2 { position: absolute; right: 0px; top: 54px; background-image: url(../img/laurel_2.png); width: 134px; height: 114px; opacity: 0.6;} 
.laurel_3 { position: absolute; right: 110px; top: 205px; background-image: url(../img/laurel_3.png); width: 169px; height: 114px; opacity: 0.6;} 
.laurel_4 { position: absolute; left: 110px; top: 205px; background-image: url(../img/laurel_4.png); width: 188px; height: 117px; opacity: 0.6;} 
.laurel_1:hover { opacity: 1; }
.laurel_2:hover { opacity: 1; }
.laurel_3:hover { opacity: 1; }
.laurel_4:hover { opacity: 1; }

#footer { text-align: center; padding-top: 35px; padding-bottom: 35px; font-size: 12px; color: #a9a9a9; }
#footer img { vertical-align: middle; margin-top: -3px; padding-left: 3px; padding-right: 3px;}
#footer span { padding-left: 10px; }
#footer img:hover { opacity: 0.8; }

#activateCode { padding-left: 15px; padding-right: 10px; min-height: 35px; border: 0px; border-radius: 60px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; background-color: #F1F1F1; margin: 0px; font-family: 'proxima_nova_rgregular', Helvetica, Arial, sans-serif; font-size: 16px; color: #6c6c6c; width: 210px; }
#activateCode:focus { outline: none; }
#activate { background-image: linear-gradient(bottom, rgb(206,61,61) 0%, rgb(238,94,94) 100%);
background-image: -o-linear-gradient(bottom, rgb(206,61,61) 0%, rgb(238,94,94) 100%);
background-image: -moz-linear-gradient(bottom, rgb(206,61,61) 0%, rgb(238,94,94) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(206,61,61) 0%, rgb(238,94,94) 100%);
background-image: -ms-linear-gradient(bottom, rgb(206,61,61) 0%, rgb(238,94,94) 100%);

background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, rgb(206,61,61)),
	color-stop(1, rgb(238,94,94))
); color: #F1F1F1; font-size: 16px; padding: 7px 30px 7px 30px; border-radius: 60px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; border: 1px solid #bf4650; box-shadow: inset 0px 1px 0px rgba(255,255,255,0.18), inset 0px 0px 0px 1px rgba(255,255,255,0.12); cursor: pointer; font-family: 'proxima_novasemibold', Helvetica, Arial, sans-serif; margin: 0px;}
#full { width: 26px; height: 26px; background-image: url(../img/full.png); background-color: transparent; border: 0px; margin-left: 10px; cursor: pointer; background-repeat: no-repeat; background-position: center top; }
#chars { display: none; }
#c { display: none; }
.close { width: 24px; height: 24px; background-image: url(../img/close.png); position: absolute; right: -30px; top: 10px; z-index: 10; cursor: pointer;}
.close_2 { width: 24px; height: 24px; background-image: url(../img/close.png); position: absolute; right: -40px; top: 2px; z-index: 10; cursor: pointer;}

#compatible { background-color: rgba(255,255,255,0.95); width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; z-index: 19; display: none; }
#compatibleWrapper { width: 410px; padding: 30px; background-color: #FFF; margin: auto; position: absolute; left: 50%; top: 10%; margin-left: -235px; z-index: 20; border: 1px solid rgba(0,0,0,0.1);  border-radius: 3px;}
#compatible ul { list-style-type: none; padding-top: 30px; }
#compatible img { padding-bottom: 8px; }
#compatible li { float: left; padding-right: 50px; text-align: center; cursor: pointer;}
#compatible li:last-child { padding-right: 0px; }
.hidden { display: none; }
.clear { clear: both; }
.backBtn{background-image:linear-gradient(bottom, rgb(206,61,61) 0%, rgb(238,94,94) 100%);background-image:-o-linear-gradient(bottom, rgb(206,61,61) 0%, rgb(238,94,94) 100%);background-image:-moz-linear-gradient(bottom, rgb(206,61,61) 0%, rgb(238,94,94) 100%);background-image:-webkit-linear-gradient(bottom, rgb(206,61,61) 0%, rgb(238,94,94) 100%);background-image:-ms-linear-gradient(bottom, rgb(206,61,61) 0%, rgb(238,94,94) 100%);background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(206,61,61)), color-stop(1, rgb(238,94,94)));color:#FFF!important;font-size:14px;padding:5px 20px;border-radius:60px;border:1px solid #bf4650;box-shadow:inset 0px 1px 0px rgba(255,255,255,0.18), inset 0px 0px 0px 1px rgba(255,255,255,0.12);cursor:pointer;font-family:'proxima_novasemibold', Helvetica, Arial, sans-serif;}

@font-face {
    font-family: 'proxima_nova_rgbold';
    src: url('font/proximanova-bold-webfont.eot');
    src: url('font/proximanova-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/proximanova-bold-webfont.woff') format('woff'),
         url('font/proximanova-bold-webfont.ttf') format('truetype'),
         url('font/proximanova-bold-webfont.svg#proxima_nova_rgbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'proxima_novalight';
    src: url('font/proximanova-light-webfont.eot');
    src: url('font/proximanova-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/proximanova-light-webfont.woff') format('woff'),
         url('font/proximanova-light-webfont.ttf') format('truetype'),
         url('font/proximanova-light-webfont.svg#proxima_novalight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'proxima_nova_rgregular';
    src: url('font/proximanova-regular-webfont.eot');
    src: url('font/proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/proximanova-regular-webfont.woff') format('woff'),
         url('font/proximanova-regular-webfont.ttf') format('truetype'),
         url('font/proximanova-regular-webfont.svg#proxima_nova_rgregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'proxima_novasemibold';
    src: url('font/proximanova-semibold-webfont.eot');
    src: url('font/proximanova-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/proximanova-semibold-webfont.woff') format('woff'),
         url('font/proximanova-semibold-webfont.ttf') format('truetype'),
         url('font/proximanova-semibold-webfont.svg#proxima_novasemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}