@charset "UTF-8";

/*

Theme Skin:
Description:
Concept: 
Slicer: 
Designer: 
Coder: 

Note:

*/ 


/*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%!important; height: 100%!important; background-color: #FFF!important; }
body { width: 100%!important; height: 100%!important; font-family: Helvetica, Arial, sans-serif!important; background-color: #FFF!important; }


/*Headlines*/
h1 {font-family: Helvetica, Arial, sans-serif; font-size: 24px; color: #272727; font-size: 30px; font-weight: bold; padding-bottom: 10px;}
h1 span { color: #bdc1cf; }
h2 {font-family: Helvetica, Arial, sans-serif; font-size: 24px; font-weight: bold; }
h3 {font-family: Helvetica, Arial, sans-serif; font-size: 18px; font-weight: bold; }
h4 {font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: bold; }
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; }

/*Main*/
#nav { width: 100%; height: 52px; background-image: url(../img/nav_bg.png); background-repeat: repeat-x; border-bottom: 1px solid #e8e8e8; }
#nav_wrapper { width: 1000px; margin: auto; position: relative;}
#logo { width: 650px; height: 52px;; float: left; }
#logo img { padding-top: 17px; }
#device_panel { width: 250px; float: left; height: 52px;}
#device_panel ul { list-style-type: none; }
#device_panel li { float: left; background-image: url(../img/button_bg.png); border: 1px solid #cbcbcc; height: 26px; border-radius: 3px; width: 40px; margin: 5px; margin-top: 11px;}
#device_panel input { border: 0px; background-color: transparent; background-repeat: no-repeat; background-position: center center; width: 100%; height: 100%;}

#template_panel { margin-top: 11px; position: absolute; right: 3px;}

.mac_device { background-image: url(../img/mac_btn.png);}
.ipad_portrait_device { background-image: url(../img/ipad_portrait_btn.png);}
.ipad_landscape_device { background-image: url(../img/ipad_landscape_btn.png);}
.iphone_portrait_device { background-image: url(../img/iphone_portrait_btn.png);}
.iphone_landscape_device { background-image: url(../img/iphone_landscape_btn.png);}

#device_panel li:active { box-shadow: inset 0px 0px 5px rgba(0,0,0,0.2); }

#device_panel li.active { box-shadow: inset 0px 0px 5px rgba(0,0,0,0.2);}

#template_editor { width: 100%; clear: both;}
#template_editor_wrapper { width: 1000px; margin: auto; padding-top: 50px;}
#template_info { width: 230px; float: left; min-height: 200px; padding-right: 60px;}
#template_preview { width: 700px; float: left; min-height: 200px; border: 1px solid #d9d9d9; border-radius: 4px!important; height: 442px; overflow-y: auto;
}
#template_preview_wrapper { float: left; }
#loadTemplate { overflow-y: scroll; }
#template_preview table { margin: auto; }
#template_preview_tools ul { list-style-type: none; ;}
#template_preview_tools li { float: left; background-image: url(../img/button_bg.png); border: 1px solid #cbcbcc; height: 26px; border-radius: 3px; width: 40px; margin: 5px; margin-top: 11px; }
#template_preview_tools input { border: 0px; background-color: transparent; background-repeat: no-repeat; background-position: center center; width: 100%; height: 100%; }

#arrow { width: 154px; height: 24px; background-image: url(../img/arrow.png); position: absolute; margin-top: 60px; margin-left: 80px; display: none; }

.structures { color: #b9bdcc; font-size: 12px; font-weight: bold; text-shadow: 0px 1px 0px #FFF; padding-top: 6px; height: 19px!important; padding-left: 10px; width: auto!important; padding-right: 10px; }
.structures a { cursor: pointer; }
.send_test_mail { color: #b9bdcc; font-size: 12px; font-weight: bold; text-shadow: 0px 1px 0px #FFF; padding-top: 7px; height: 19px!important; padding-left: 10px; width: auto!important; padding-right: 10px; font-family: helvetica, arial, sans-serif; width: 150px; background-image: url(../img/send_test_mail_bg.png); background-position: 100px 5px!important; padding-right: 33px; }

.structure_active { border: 2px solid rgba(0,0,0,0.2)!important; }

.colors { color: #b9bdcc; font-size: 12px; font-weight: bold; text-shadow: 0px 1px 0px #FFF; padding-top: 6px; padding-bottom: 1px; height: 19px!important; padding-left: 10px; width: auto!important; padding-right: 10px; }
.colors a { cursor: pointer; }
.color_red { background-color: #ff5049!important; border: 1px solid rgba(0,0,0,0.4)!important; box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,0.3); }
.color_blue { background-color: #64a8e8!important; border: 1px solid rgba(0,0,0,0.4)!important; box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,0.3); }
.color_gray { background-color: #c0c0c0!important; border: 1px solid rgba(0,0,0,0.4)!important; box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,0.3); }
.color_green { background-color: #82bb70!important; border: 1px solid rgba(0,0,0,0.4)!important; box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,0.3); }
.color_orange { background-color: #ff6500!important; border: 1px solid rgba(0,0,0,0.4)!important; box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,0.3); }
.color_black { background-color: #333333!important; border: 1px solid rgba(0,0,0,0.4)!important; box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,0.3); }

.full_screen { color: #b9bdcc; font-size: 12px; font-weight: bold; text-shadow: 0px 1px 0px #FFF; padding-top: 6px; height: 19px!important; padding-left: 10px; width: auto!important; padding-right: 10px; font-family: helvetica, arial, sans-serif; width: 150px; background-image: url(../img/fullscreen_bg.png); background-position: 110px 5px!important; padding-right: 36px; padding-bottom: 17px;}
input { cursor: pointer; }
input:active { opacity: 0.8; }

#template_preview.iphone_portrait { width: 320px;}

.active_color { border: 2px solid rgba(0,0,0,0.4)!important; }

#dimnish { width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); position: fixed; top: 0px; z-index: 999; display: none; }
#template_preview_tools a { background-color: #FFF; padding: 1px; font-size: 11px; padding-top: 2px; padding-left: 6px; padding-right: 6px; color: #b9bdcc; text-decoration: none; border: 1px solid #d2d3d8; line-height: 0px; border-radius: 3px;}

#template_preview iframe { width: 100%; height: 100%; }

p { color: #c4c4c4; font-size: 14px; line-height: 24px;}

#litmus_bar { width: 100%; height: 111px; background-image: url(../img/litmus_bar_bg.png); background-repeat: repeat-x; border-bottom: 1px solid #e8e8e8; border-top: 1px solid #ebebeb; clear: both; margin-top: 60px;}
#litmus_bar_wrapper { width: 1000px; margin: auto; position: relative; }
#litmus_ad { width: 275px;background-image: url(../img/litmus_logo.png); background-repeat: no-repeat; background-position: 55px center; height: 111px; float: left;}
.litmus_bubble { position: absolute; left: 0px; top: -60px; opacity: 0; cursor: help;}

.clear { clear: both; }

#footer_wrapper { width: 100%;  background-image: url(../img/litmus_bar_bg.png); background-position: center bottom; background-repeat: repeat-x; border-bottom: 1px solid #e8e8e8; border-top: 1px solid #ebebeb; clear: both; margin-top: 60px;}

#screen_wrapper { width: 100%; height: auto; background-color: rgba(255,255,255,0.9); position: absolute; z-index: 99999999; display: none; }
#screen { width: 1000px; height: 94%; margin: auto; padding-top: 2%; text-align: center; }
#screen img { box-shadow: 0px 0px 2px rgba(0,0,0,1); border: 1px solid #FFF; position: relative; max-width: 800px; } 

#dock { width: 100%; height: 87px; background-image: url(../img/dock_bg.png); border-radius: 4px; border: 1px solid #d2d3d8; box-shadow: 0px 4px 0px #dadde7; border-bottom: 0px; margin-top: -60px; position: relative;}
.dock_shadow { position: absolute; right: 0px; height: 92px; width: 702px; background-image: url(../img/shadow.png); }

#features { width: 100%; margin: auto; }
#features_wrapper { width: 1000px; margin: auto; height: 500px;}

#features_wrapper ul { list-style-type: none; margin-top: 40px; }
#features_wrapper li { float: left; padding-right: 80px;}
#features_wrapper h3 { padding-bottom: 15px; }
#features_wrapper p { padding-top: 20px; width: 275px; padding-bottom: 20px;}
#features_wrapper input { border: 0px; background-color: transparent; width: auto; background-image: url(../img/column_btn.png); border: 1px solid #cbcbcc; border-radius: 3px; color: #b9bdcc; text-shadow: 0px 1px 0px #FFF; font-weight: bold; font-family: Helvetica, Arial, sans-serif; padding-bottom: 5px; padding: 9px; box-shadow: inset 0px -1px 0px #FFF; font-size: 12px; padding-left: 14px; padding-right: 14px; cursor: pointer;}
#features_wrapper input:active { opacity: 0.6; cursor: -webkit-grabbing}

#footer { width: 1000px; margin: auto; padding-bottom: 50px;}
#footer img { padding-bottom: 10px; }
#footer ul { list-style-type: none; margin-top: 40px; }
#footer li { float: left; padding-right: 80px; text-align: center;}
#footer p { padding-top: 20px; width: 275px; padding-bottom: 20px; }
#footer input { border: 0px; background-color: transparent; width: auto; background-image: url(../img/column_btn.png); border: 1px solid #cbcbcc; border-radius: 3px; color: #b9bdcc; text-shadow: 0px 1px 0px #FFF; font-weight: bold; font-family: Helvetica, Arial, sans-serif; padding-bottom: 5px; padding: 9px; box-shadow: inset 0px -1px 0px #FFF; font-size: 12px; padding-left: 14px; padding-right: 14px; cursor: pointer;}
#footer input:active { opacity: 0.6; cursor: -webkit-grabbing; }

#footer_sub { width: 100%; background-color: #fdfdfd; height: 100px; }
#footer_sub_wrapper { width: 1000px; height: 100%; margin: auto; position: relative;}

#footer_sub_wrapper li a { color: #878787; text-decoration: none;}

#footer_sub_wrapper li { float: left; list-style-type: none; padding-right: 50px; font-size: 12px; color: #a7a7a7; padding-top: 40px; }
#footer_sub_wrapper li img { vertical-align: middle; padding-right: 5px;}
#socialMedia { position: absolute; top: 40px; right: 0px; }

.last { padding-right: 0px!important; }

.buy_now:active { opacity: 0.7; }

#template_preview.active { z-index: 999999; position: relative; }

.clear { clear: both; }

.close { position: fixed; right: 10px; top: 10px; cursor: pointer; z-index: 999999;}
/* label */


/* The CSS */
select {
    padding:6px;
    padding-left: 10px;
    padding-top: 7px;
    color: #b9bdcc;
    margin: 0;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    background-image: url(../img/button_bg.png);
    border: 1px solid #cbcbcb;
    outline:none;
    text-shadow: 0px 1px 0px #FFF;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
}

/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    select {padding-right:18px}
}

label {position:relative;}

/*color picker*/
/**
 * Farbtastic Color Picker 1.2
 * © 2008 Steven Wittens
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
 */
.farbtastic {
  position: relative;
}
.farbtastic * {
  position: absolute;
  cursor: crosshair;
}
.farbtastic, .farbtastic .wheel {
  width: 195px;
  height: 195px;
}
.farbtastic .color, .farbtastic .overlay {
  top: 47px;
  left: 47px;
  width: 101px;
  height: 101px;
}
.farbtastic .wheel {
  background: url(../img/wheel.png) no-repeat;
  width: 195px;
  height: 195px;
}
.farbtastic .overlay {
  background: url(../img/mask.png) no-repeat;
}
.farbtastic .marker {
  width: 17px;
  height: 17px;
  margin: -8px 0 0 -8px;
  overflow: hidden; 
  background: url(../img/marker.png) no-repeat;
}

/* Carousel */
.list_carousel {
				float: left;
				width: 725px;
				margin-top: 4px;
				font-size: 11px;
				z-index: 100;
				position: relative;
			}
			#browser_shots a { text-decoration: none; color: #b9bdcc; text-shadow: 0px 1px 0px #FFF; }
			.list_carousel ul {
				margin: 0;
				padding: 0;
				list-style: none;
				display: block;
			}
			.list_carousel img { padding-bottom: 5px; }
			
			.list_carousel li {
				padding: 15px;
				color: #b9bdcc;
				font-weight: bold;
				text-shadow: 0px 1px 0px #FFF;
				height: 75px;
				float: left;
				text-align: center;
			}
			.list_carousel.responsive {
				width: auto;
				margin-left: 0;
			}
			.clearfix {
				float: none;
				clear: both;
			}
			.prev {
				float: left;
				margin-left: 10px;
			}
			.next {
				float: right;
				margin-right: 10px;
			}
			.pager {
				float: left;
				width: 300px;
				text-align: center;
			}
			.pager a {
				margin: 0 5px;
				text-decoration: none;
			}
			.pager a.selected {
				text-decoration: underline;
			}
			.timer {
				background-color: #999;
				height: 6px;
				width: 0px;
			}