/*
Theme Name: Websites Are Us
Theme URI: http://www.websitesare.us
Author: Websites Are Us
Author URI: http://www.websitesare.us
Version: 1.0
License: GNU General Public License
License URI: license.txt
*/

/* 

To make it easy to update your theme, you should not edit the styles in this file. Instead use 
the custom.css file to add your styles. You can copy a style from this file and paste it in 
custom.css and it will override the style in this file.
*/
@import url('http://fonts.googleapis.com/css?family=Open+Sans:400,800,700');
@import url('http://fonts.googleapis.com/css?family=Merriweather+Sans:400,800,700');

/*==============================*/
/*  GENERAL */
/*==============================*/
html, body {
  height: 100%;
  width:100%;
  margin: 0;
  padding: 0;
}
body {
  background: #fff; /* Old browsers */
  background: -moz-linear-gradient(top, #fff 0%, #eee 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#eee)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #fff 0%,#eee 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #fff 0%,#eee 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #fff 0%,#eee 100%); /* IE10+ */
  background: linear-gradient(top, #fff 0%,#eee 100%); /* W3C */
  background-repeat: no-repeat; /*important so gradient goes all the way down */
  background-attachment: fixed; /*important so gradient goes all the way down */
  background-position: 0px 0px; /*important so gradient goes all the way down */
}

body {
	font-family: 'Open Sans', Arial;
	font-size: 15px;
	line-height: 24px;
	background: #fff; /* Old browsers */
	color: #4a4a4a;
	font-weight: 500;}
	
p {
}

a { color:#047BB7;
	text-decoration:none;
}

a:hover {
	color:#397ce1;
}

h1, h2, h3, h4	{font-family:'Merriweather Sans', Arial, Helvetica, sans-serif;}

h1 {
	font-size: 1.8em;
	line-height: 2.0em;
	font-weight:600;
}

h2 {
	font-size: 1.5em;
	line-height: 1.7em;
	font-weight: 500;
}

h3 {
	font-size: 1.2em;
	line-height: 1.4em;
	font-weight: 500;
	padding-top: 4px;
}

h4, h5, h6 {
	font-size: 1.1em;
	line-height: 1.3em;
	font-weight: 500;
}

pre, code {
	font-family: 'Trebuchet MS', Monaco, Consolas, monospace;
}

hr {
	border: 0 #ccc solid;
	border-top-width: 1px;
	clear: both;
	height: 0;
}

ol {
	list-style: decimal;
}

ul {
	list-style: disc;
	list-style-position:inside;
}

li {
	margin-left: 30px;
	margin-bottom: 15px;
}

p, dl, hr, h1, h2, h3, h4, h5, h6, ol, ul, pre, table {
	margin-bottom: 15px;
}

ol li {
	border-bottom:none !important;
	margin-top:1!important;
	margin-bottom:1!important;
	padding-bottom:0!important;
	padding-top:0!important;
}

.checklist li	{ background:url('images/ico-tick.png') no-repeat 0 4px; list-style:none; margin:0; padding:1px 0 1px 25px;line-height: 24px;}
.addon li { background:url('images/ico-addon.png') no-repeat 0 4px; list-style:none; margin:0; padding:1px 0 1px 25px; line-height:24px;}

tr{
border-bottom: 1px solid #eeeeee;
}

th{
	font-weight:bold;
}

td,th{
	padding:5px;
}

.txt_blue {color:#0474B2;}
.txt_underline {text-decoration:underline;}
.txt_center {display:block;text-align:center;} 
.txt_medium {font-size: 0.8em;}
.txt_small {font-size:0.7em; padding-top: 10px; font-style:italic;}

/*=========================================*/
/*  HEADER */
/*=========================================*/

#header-container {
	width: 100%;
	max-width:980px;
	height:60px;
	margin:0 auto;
}


.header-left {
	position:absolute;
	width:300px;
	height:50px;
	margin-top:5px;
	margin-bottom:0px;
	margin-left: 0px;
	float:left;
}

/*==============================*/
/*  CONTENT */
/*==============================*/

.bg_gradient_grey, .steps {
	background-color: #fbfbfb; /* Old browsers */
  	background: -moz-linear-gradient(top, #fff 0%, #fbfbfb 100%); /* FF3.6+ */
  	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#fbfbfb)); /* Chrome,Safari4+ */
  	background: -webkit-linear-gradient(top, #fff 0%,#fbfbfb 100%); /* Chrome10+,Safari5.1+ */
  	background: -o-linear-gradient(top, #fff 0%,#fbfbfb 100%); /* Opera 11.10+ */
  	background: -ms-linear-gradient(top, #fff 0%,#fbfbfb 100%); /* IE10+ */
  	background: linear-gradient(top, #fff 0%,#fbfbfb 100%); /* W3C */
}

.bg_gradient_blue {
	background-color: #2c6e93;
	width:100%;
	margin-top: 0px;
	background-image: -ms-radial-gradient(center, ellipse farthest-corner, #A0BAC9 0%, #2c6e93 100%); /* IE10 */ 
	background-image: -moz-radial-gradient(center, ellipse farthest-corner, #A0BAC9 0%, #2c6e93 100%); /* Mozilla Firefox */ 
	background-image: -o-radial-gradient(center, ellipse farthest-corner, #A0BAC9 0%, #2c6e93 100%); /* Opera */ 
	background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #A0BAC9), color-stop(1, #2c6e93)); /* Webkit (Safari/Chrome 10) */ 
	background-image: -webkit-radial-gradient(center, ellipse farthest-corner, #A0BAC9 0%, #2c6e93 100%); /* Webkit (Chrome 11+) */ 
	background-image: radial-gradient(ellipse farthest-corner at center, #A0BAC9 0%, #2c6e93 100%); /* W3C Markup, IE10 Release Preview */ 
	/*shadow bottom */
	-moz-box-shadow: 0px 5px 8px #999;
	-webkit-box-shadow: 0px 5px 8px #999;
	box-shadow: 0px 5px 8px #999;
}
	
#content-container {
	z-index: 1;
	position:relative;
	margin:0px auto;
	margin-top: -50px;
	width:100%;
	max-width: 980px;
	height: auto;
	background:#fff;
	border: 1px solid #ddd;
	-webkit-border-radius:  4px 4px 0 0;
	-moz-border-radius: 4px 4px 0 0;
	border-radius: 4px 4px 0 0;
}

#content-container-outer {
	clear:left;
	float:left;
	width:100%;
	min-height: 100%;
	margin-top: 12px;
	margin-bottom: 12px;
	overflow:hidden;
	/*sidebar background full height */
	background-color: #fff; /* Old browsers */
}

#content-container-inner {
	float:left;
	position:relative;
	width: 100%;
	max-width:980px;
	min-height: 100%;
	background-color:#fff;
	right:300px;
	/*sidebar border full height */
	border-right: none;
}

.content-left {
	position:relative;
	left: 300px;
	width: 63%;
	max-width: 620px;
	float:left;
	overflow:hidden;
	padding: 30px 30px;
}

.content-right {
	position:relative;
	left: 295px;
	width: 37%;
	max-width: 290px;
	float:right;
	overflow:hidden;
	min-height: 100%;
	padding: 4px 0px;
}

.content-wrapper {
	padding: 30px;
}

.meta-box {
	width:100%;
	height: 28px;
	font-size: 0.8em;
	color: #fff;
	padding-top: 2px;
	-webkit-border-radius:  4px 4px 0 0;
	-moz-border-radius: 4px 4px 0 0;
	border-radius: 4px 4px 0 0;
	display:inline-block;

}
.meta-box a, .meta-box a:hover {
	color: #93B1C2;
	
}

.page_top {
	width: 100%;
	height: 130px;
}

.page_title{
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	color: #fff;
	padding-top: 8px;
	padding-left: 4px;
}

.page_title h1 {
	font-size: 2.2em;
	font-weight: 800;
}

.content-box {
	margin-top: 20px;
	margin-bottom: 20px;
	display:inline-block;
	border: 1px solid #ddd;
	background-color: #fff;
	background: -moz-linear-gradient(top, #fff 0%, #fcfcfc 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #fff 0%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #fff 0%,#fcfcfc 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #fff 0%,#fcfcfc 100%); /* IE10+ */
	background: linear-gradient(top, #fff 0%,#fcfcfc 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */
	-webkit-border-radius:  6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

.content-box-padd {
	padding-left: 30px;
	padding-right: 30px;
}

.content-box h2 {
	margin-top: 15px;
	margin-bottom: 5px;
}


/*=========================================*/
/*==========Home Page==========*/
/*=========================================*/

/*---------- Home Slider ---------*/

#slider {
	z-index:19;
	width:100%;
	height:351px;
	margin-top: 0px;
	margin-bottom: 20px;
}

.slider_container {
	padding-top: 10px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width:980px;
	z-index: 19;
}

.slider_container_inner {
	display:inline;
	float: left;
	position: relative;
	width: 100%;
	max-width:980px;
	vertical-align:top;
	padding-top:0px;
	z-index:19;
}

.slider_img {
	z-index:19;
	position:absolute;
	width:500px;
	height:350px;
	top:0px;
	left:0px;
}

.slider_btn {
	position:absolute;
	top: 255px;
	left: 530px;
	-moz-box-shadow:inset 0px 1px 0px 0px #fff6af;
	-webkit-box-shadow:inset 0px 1px 0px 0px #fff6af;
	box-shadow:inset 0px 1px 0px 0px #fff6af;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23) );
	background:-moz-linear-gradient( center top, #ffec64 5%, #ffab23 100% );
	background-color:#ffec64;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #ffaa22;
	display:inline-block;
	font-family:Trebuchet MS;
	font-size:23px;
	font-weight:500;
	padding:10px 20px;
	color:#333333;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffee66;
}

.slider_btn:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64) );
	background:-moz-linear-gradient( center top, #ffab23 5%, #ffec64 100% );
	background-color:#ffab23;
	color:#333333;
}

.slider_btn a, .slider_btn:active {
	color:#333333;
}

.cycle_wrap {
	background:none !important;
	position:relative;
}

.cycle_wrap #nav a {
	display:block;
	text-indent:-9999px;
	float:left;
	margin-right:10px;
}

.cycle_wrap #nav a.activeSlide {
	background-position:left top;
	cursor:default;
}

.cycle_wrap #nav {
	position:absolute;
	left:435px;
	top:315px;
	z-index:999;
}

#slideshow {
	position: absolute;
	width:430px !important;
	height:270px !important;
	overflow:hidden !important;
	background:none !important;
	left: 530px;
}

.wrapper {width:100%; overflow:hidden; position:relative;}

#slideshow .wrapper {
	padding-top:75px;
	background:none !important;
}

.slidetext {
	font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
	display:block;
	color:#fff;
	letter-spacing:-1px;
}
	
.s-top {font-size:2.8em; line-height:1.2em;font-weight: normal;}
.s-middle{font-size:3.9em; line-height:1.2em;font-weight: bold;margin-top:-5px;}
.s-bottom {font-size:2.2em; line-height:1.2em;font-weight: normal;}

.slider {
	width:100%;
	height:351px;
	position:relative;
}

/*---------- Home Boxes ---------*/

#home-box-container {
	width: 100%;
	max-width:980px;
	position:relative;
	height:340px;
	overflow:hidden;
	margin: 0 auto;
	margin-top: 50px;
}

.box-one {
    float:left;
    width:317px;
	height: 320px;
    overflow:hidden;
	border: 1px solid #ddd;
	margin-right: 10px;
}

.box-two {
    float:left;
    width:317px;
	height: 320px;
    overflow:hidden;
	border: 1px solid #ddd;
	margin-right: 10px;
}

.box-three {
    float:left;
    width:317px;
	height: 320px;
    overflow:hidden;
	border: 1px solid #ddd;
}

.box-wrapper {
	margin: 0 auto;
	padding: 20px;
}

/*---------- Home Text ---------*/

#content-container-home {
	z-index: 1;
	position:relative;
	margin:10px auto;
	width:100%;
	max-width: 980px;
	height: auto;
	background:#fff;
	border: 1px solid #ddd;
	-webkit-border-radius:  4px 4px 0 0;
	-moz-border-radius: 4px 4px 0 0;
	border-radius: 4px 4px 0 0;
}

.start_btn {
	-moz-box-shadow:inset 0px 1px 0px 0px #fff6af;
	-webkit-box-shadow:inset 0px 1px 0px 0px #fff6af;
	box-shadow:inset 0px 1px 0px 0px #fff6af;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23) );
	background:-moz-linear-gradient( center top, #ffec64 5%, #ffab23 100% );
	background-color:#ffec64;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #ffaa22;
	display:inline-block;
	font-family:Trebuchet MS;
	font-size:23px;
	font-weight:500;
	padding:10px 20px;
	color:#333333;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffee66;
}

.start_btn:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64) );
	background:-moz-linear-gradient( center top, #ffab23 5%, #ffec64 100% );
	background-color:#ffab23;
	color:#333333;
}

.start_btn a, .start_btn:active {
	color:#333333;
}


/*---------- Steps ---------*/

.steps {
		margin-bottom: 10px;
}

.steps h4 {
	font-size: 1.2em;
	margin-top: -10px;
}

.steps img {
	float:left;
	padding-right: 5px;
	padding-bottom: 20px;
}

.steps p {
	clear:both;
}
	
.step_one {
    float:left;
    width:286px;
	height: 250px;
    position:relative;
    overflow:hidden;
	border: 1px solid #ddd;
	margin-right: 15px;
}

.step_two {
    float:left;
    width:286px;
	height: 250px;
    position:relative;
    overflow:hidden;
	border: 1px solid #ddd;
	margin-right: 15px;
}

.step_three {
    float:left;
    width:286px;
	height: 250px;
    position:relative;
    overflow:hidden;
	border: 1px solid #ddd;
}

.colpad {
	padding: 10px;
}

.important {
    width:500px;
	margin: 0 auto;
    position:relative;
    overflow:hidden;
	border: 1px solid #ddd;
	text-align:center;
	margin-bottom: 40px;
}
.important h4 {
	color:#F00;
	
}

.box-one h4.widget-title, .box-two h4.widget-title, .box-three h4.widget-title {
	padding-bottom:10px;
	border-bottom: 1px solid #ccc;
	font-size: 1.2em;
}

/*=========================================*/
/* SIDEBAR WIDGETS */
/*=========================================*/

.sidebar {
	max-width: 100%;
}
	
.sidebar ul {
	list-style-type:none;
}

.sidebar ul li {
	margin-left: 0px;
	padding-left: 20px;
	list-style-type:none;
	font-size: 13px;
	line-height: 23px;
	background: url('images/arrow_sm.png') left top no-repeat;
}


/* Widgets */

.sidebar-widget {
	width: 100%;
	height: auto;
	background: #fff;
	-webkit-box-shadow: 5px 5px 2px #ddd;
	-moz-box-shadow: 5px 5px 2px #ddd;
	box-shadow: 5px 5px 2px #ddd;
}

.sidebar-widget-title {
    margin: 0;
}

.sidebar-widget {
	font-size: 13px;
	line-height: 23px;
}

.sidebar-widget h4 {
	font-size: 1.3em;
	line-height: 2.0em;
	max-width: 90%;
	padding:10px;
	border-bottom: 1px dashed #BFBFBF;
}

.sidebar-widget-content {
	padding: 0px;
}

.after-sidebar-widget {
	margin-bottom:15px;
}

.sidebar-widget-content {
	margin: 0 auto;
	padding: 10px;

}

.textwidget a, a:link, a:active, a:visited; {
	color: #21759B;	
	text-decoration:none;
}

.textwidget a:hover {
	color: #047bb7;
	text-decoration:underline;
}

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

#footer-container {
   width: 100%;
   position: relative;
   margin: 0px auto;
   padding:0;
   background-color: #3f3f3f;
}
	
.footer-bottom	{max-width: 980px; margin: 0px auto; text-align: right;font-size: 0.85em;}
.footer-bottom, .footer-bottom p, .footer-bottom a {color:#fff;}

/*=======================================================*/
/*--------------------WordPress Stuff-----------------*/
/*=======================================================*/

.wp-caption {
	background: #fff;
	border: 1px solid #f0f0f0;
	max-width: 96%; /* Image does not overflow the content area */
	padding: 5px 3px 10px;
	text-align: center;
}
.wp-caption.alignnone {
	margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
	margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
	margin: 5px 0 20px 20px;
}
.wp-caption img {
	border: 0 none;
	height: auto;
	margin:0;
	max-width: 98.5%;
	padding:0;
	width: auto;
}
.wp-caption p.wp-caption-text {
	font-size:0.9em;
	line-height:1.0em;
	margin:0;
	padding:0 4px 5px;
}

blockquote {font-style:italic;
}

/*=======================================================*/
/*--------------------Alignments-----------------*/
/*=======================================================*/

.clear {
	clear:both;
}

.aligncenter {
	display:block;margin: 5px auto 5px auto;
}

.alignright {
	float:right;
	margin: 5px 0 20px 20px;
}

.alignleft {
	float:left;
	margin: 5px 20px 20px 0;
}

img.alignright {
	float:right;
	margin: 5px 0 20px 20px;
}

img.alignleft {
	float:left;
	margin: 5px 20px 20px 0;
}

a img.aligncenter {
	display:block;
	margin-left: auto;
	margin-right: auto
}

/*=======================================================*/
/*--------------------Product Specific Styling-----------------*/
/*=======================================================*/

.btn_product {
	padding-top: 30px;
	padding-bottom: 40px;
	clear:both;
}

.btn_demo:hover {
	opacity:0.7;
}

#webtemplate {
	float:left;
}

#webtemplate:after {
	clear:both;
}

ul.webtemplate {
	padding-top: 20px;
	float:left;
}


.webtemplate li {
	margin-bottom: 5px;
	display: block;
	background:url('images/ico-tick.png') no-repeat 0 4px; 
	list-style:none outside; 
	padding:1px 0 1px 25px;
	line-height: 1.0em;
}

.template-item {
	float:left;
	width: 350px;
	height: 400px;
	overflow:hidden;
	padding:50px;
}

.template-item h2 {
	font-size: 1.0em;
	font-weight: bold;
}

.template-wrapper {
	width:420px;
	min-height:200px;
}

.template-thmb {
	width: 336px;
}

.template-item:hover {
	background:url('images/template-item-hover.png') no-repeat;
}

.template-thmb img:hover {
	opacity: 0.6;
}

.template-excerpt {
	clear:both;
	width: 340px;
	font-size: 0.9em;
	line-height: 1.1em;
	text-align:justify;
	margin-top: 20px;
}

.pymt {
	color:#090;
	font-weight:bold;
}

/*=======================================================*/
/*--------------------Plugin Yarrp-----------------*/
/*=======================================================*/
.yarpp-related {
	clear:both;
	padding-top: 40px;
}

/*=======================================================*/
/*--------------RESPONSIVE-----*/
/*=======================================================*/


@media only screen and ( min-width: 768px ) and ( max-width: 979px ) {
/*==========Footer============*/
.footer-bottom	{max-width: 768px;}

}

@media only screen and ( max-width: 767px ) {
/*==========Footer============*/
.footer-bottom	{max-width: 481px; text-align: center;}

}

@media only screen and ( max-width: 480px ) {
/*==========Footer============*/
.footer-bottom	{max-width: 320px;text-align: center;}

}