@charset "UTF-8";

/** Styles for index.html **/

body {
font-family: arial, helvetica, sans-serif;
background: #f3f3f3 url(../images/site/background.png) repeat-x;
margin: 0px;
padding: 0px;
clear: both;
}


/** Reset Styles **/

html, div, span, object, h1, h2, h3, h4,
h5, h6, p, blockquote, a, em, font, img, strong,
dl, dt, dd, ol, ul, li, fieldset, form {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

a {
text-decoration: none;
color: black;
font-family: trebuchet ms, arial, helvetica, sans-serif;
border: none;
}

a:hover {
text-decoration: underline;
color: black;
}

ol, ul {
list-style: none;
}

.site ul {
list-style: square;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}



* {
margin: 0;
padding: 0;
}

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body, #container {
height: 100%;
}

body > #container {
height: auto;
min-height: 100%;
}

#mainContents {
padding-bottom: 46px;
}
/* must be same height as the footer */

#footer {
position: relative;
margin: -46px auto 0 auto; /* negative value of footer height */
	height: 44px;
clear: both;
}

/* CLEAR FIX*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */



/** Header & Navigation Styles **/

#container {
width: 960px;
margin-left: auto;
margin-right: auto;
clear: both;
}

#header {
height: 82px;
overflow: hidden;
}

#header img {
float: left;
margin-top: 25px;
border: none;
}

#header ul {
float: right;
font-size: 13px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
position: relative;
margin-top: 47px;
}

#header li {
display: inline;
float: left;
color: #626262;
height: 23px;
padding-top: 3px;
padding-left: 25px;
padding-right: 10px;
}

#header li a {
color: #626262;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#header li a.currentPage {
color: #09C;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#header li a:hover {
color: #1e7896;
text-decoration: none;
}


/** Footer Styles **/

#footer {
width: 960px;
border-top: 1px solid #e2e2e2;
font-size: 11px;
line-height: 22px;
}
#footer p, #footer p a {
color: #888;
}
#footer p {
margin: 0;
padding: 4px 0 0 0;
line-height: 1.2em;
}
#footer .fr p {
text-align: right;
}

.fl {
float: left;
}
.fr {
float: right;
}
.clear {
clear: both;
}
img.fl {
margin-top: -2px;
margin-right: 3px;
}


/* Slider */
#sliderMain {
margin: 0px auto;
width: 960px;
position: relative;
}
#slider {
margin: 0px auto;
width: 960px;
height: 300px;
overflow: hidden;
	/* IE6, IE7 Fix */
	position:relative;
}
#slider ul,
#slider ul li {
margin: 0;
padding: 0;
list-style: none;
}
#slider ul li {
margin-top: 35px;
height: 312px;
overflow: hidden;
position: relative;
font-size: 1em;
}
/* Slider controls */
#prev-slide,
#next-slide {
display: block;
width: 25px;
height: 53px;
text-indent: -999em;
position: absolute;
top: 140px;
left: -45px;
}
#next-slide {
left: 980px;
}
#prev-slide a,
#next-slide a {
display: block;
width: 40px;
height: 40px;
}
#prev-slide a {
background: url(../images/site/slider-left.png) no-repeat 0 0;
}
#next-slide a {
background: url(../images/site/slider-right.png) no-repeat 0 0;
}

.container {
margin-top: 0px;
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
cursor: pointer;
}
		
ul.pagination li {
position: absolute;
top: 213px;
left: 645px;
font-size: 13px;
display: none;
}

ul.pagination li.total {
display: block;
left: 652px;
top: 213px;
color: #232323;
font-size: 13px;
}

ul.pagination li.active {
display: block;
}

ul.pagination li a {
color: #232323;
}

#mainContents {
padding-top: 30px;
position: relative;
clear: both;
}

#mainContents.blog {
width: 635px;
float: left;
}

#mainContents p {
font-size: 14px;
}

#mainContents a {
color: #05839a;
font-family: arial, helvetica, sans-serif;
border: 0px;
}

/** Slogan Styles **/

#slogan {
/*margin-bottom:56px;*/
margin-bottom:0;
}

#slogan h3 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 26px;
color: #283338;
margin-top: 40px;
text-align: center;
}

#slogan h3 span {
color: #3384aa;
}

#slogan a img {
border: none;
border-width: 0px;
border-color: #096;
}

#slogan a:visited {
border: none;
border-width: 0px;
border-color: #096;
}

#slogan #sloganButtons {
float: left;
width: 400px;
top: -40px;
left: 550px;
position: relative;
}

#mainContents #slogan #sloganButtons #button-left {
position: absolute;
width: 197px;
top: 4px;
}

#mainContents #slogan #sloganButtons #button-right {
position: absolute;
width: 199px;
left: 212px;
top: 3px;
}

#slogan span {
color: #3384aa;
}

/** Main Contents Columns Styles **/

.columns {
width: 960px;
background-image: url(../images/site/columns-bg.png);
color: #777;
font-size: 13px;
background-repeat: no-repeat;
height: 176px;
margin-top: 50px;
margin-bottom: 20px;
}

.columns.sub {
margin-top: 0px;
}

.columns h3 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 26px;
color: #555;
margin-bottom: 15px;
}

.columns p {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
padding-bottom: 40px;
line-height: 20px;
}

.columns a {
color: #05839a;
}

.columns a:visited {
color: #05839a;
}

.columns ul {
padding: 0px;
list-style-position: inside; /* This could be that "hidden margin/padding" Make this "inside" so it can align with your "My Services" heading, or just remove this part completely. */
margin-left: 2px;
padding-bottom: 8px;
}

.columns ul li {
margin-bottom: 8px;
padding-left: 15px;
background: url("../images/site/homepage-li-bullet.png")  left no-repeat;
}

.columns .col1 {
width: 270px;
margin-bottom: 30px;
margin-right: 0px;
float: left;
padding-left: 2px;
padding-right: 30px;
}

.columns .col2 {
float: left;
width: 255px;
padding: 0 30px;
}

.columns .col3 {
width: 310px;
margin-bottom: 30px;
float: left;
padding-left: 30px;
}



/** Subpage Styles With ID of #left (Does not style sidebar / right column **/

body.subpage {
background: url(../images/site/background-subpage.png) repeat-x;
}

/** This style is used to define the heading text in each page (e.g. About Me, Services, Portfolio, etc) **/ 
h1#pageTitle {
font-family: trebuchet ms, Arial, Helvetica, sans-serif;
font-size: 36px;
color: #232323;
font-weight: normal;
margin-top: 25px;
margin-bottom: 30px;
}

/** Use this style if you choose to replace the heading text with an image instead of text. Unless deleted, the other style must be removed via a comment such as this one to avoid duplicated titles. **/
#pageTitle.image {
padding-top: 50px;
padding-bottom: 20px;
}

.subpage h2 {
text-align: center;
}

#mainContents p a {
color: #668899;
text-decoration: none;
}

.subpage #container #mainContents #left .services-heading {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
color: #242424;
margin-bottom: 26px;
}

.subpage #container #mainContents #right #about {
margin-left: 37px;
}

/** Blog Page Styles **/
.blogPost {
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: solid 2px #cbcbcb;
}
#lastPost {
margin: 0px;
padding-bottom: 30px;
}
.subpage #container #mainContents #left .blogPost .commentCounter {
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: bold;
color: #000000;
height: 44px;
width: 48px;
float: right;
background-image: url(../images/commentCounter.png);
text-align: center;
padding-top: 7px;
}

#mainContents #left .blogPost p.postTitle {
margin: 0px;
font-size: 20px;
font-weight: bold;
color: #232323;
}

.blogPost p, .site p, .site li {
font-size: 14px;
line-height: 16px;
color: #4a4a4a;
line-height: 20px;
}

.site h2 {
margin-top: 20px;
}

.subpage #container #mainContents #left .blogPost .details a {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
text-transform: uppercase;
color: #478fa7;
}
.subpage #container #mainContents #left .blogPost .details {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-transform: uppercase;
color: #4a4a4a;
}

#left .blogPost p a {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 20px;
color: #478fa7;
}
.subpage #container #mainContents #right #blogSearch {
background-color: #ebebeb;
border: 1px solid #b3b3b3;
padding-left: 18px;
margin-left: 30px;
padding-top: 31px;
padding-bottom: 31px;
width: 279px;
margin-top: 109px;
background-image: url(../images/blog-contact-sidebarBG.jpg);
}
.subpage #container #mainContents #right #blogSearch .title {
font-family: Arial, Helvetica, sans-serif;
font-size: 19px;
font-weight: bold;
color: #3e3e3e;
margin-bottom: 17px;
}
.subpage #container #mainContents #right #blogSearch form input {
border: 1px solid #838383;
background-color: #d6d6d6;
font-size: 13px;
color: #5c5c5c;
width: 175px;
margin-right: 5px;
}
.subpage #container #mainContents #right #blogSearch form #button {
font-family: Arial, Helvetica, sans-serif;
color: #ffffff;
border: 1px solid #595959;
background-image: url(../images/blog-search-button.jpg);
background-repeat: repeat-x;
font-size: 13px;
width: 30px;
}
.subpage #container #mainContents #right #blogCategories {
margin-top: 10px;
background-color: #ebebeb;
border: 1px solid #b3b3b3;
padding-left: 18px;
padding-top: 21px;
margin-left: 30px;
width: 279px;
background-image: url(../images/blog-contact-sidebarBG.jpg);
}
.subpage #container #mainContents #right #blogCategories .title {
font-family: Arial, Helvetica, sans-serif;
font-size: 19px;
font-weight: bold;
color: #3e3e3e;
margin-bottom: 28px;
}
.subpage #container #mainContents #right #blogCategories .category {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #585858;
margin-bottom: 23px;
}
.subpage #container #mainContents #headText-contact p {
color: #403f3f;
}
.subpage #container #mainContents #headText-contact {
height: 45px;
margin-top: -29px;
}



/** NEW CONTACT STYLES **/

#formContainer {
width: 560px;
height: 305px;
color: #8a8888;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
margin-top: 25px;
}
#formContainer .large {
font-size: 16px;
margin-top: 0px;
}
#formContainer .contentRow {
height: 21px;
clear: both;
padding-bottom: 8px;
}
.subpage #container #mainContents #left #formContainer .directMessage {
font-size: 16px;
color: #8a8888;
margin-bottom: 15px;
}
.subpage #container #mainContents #left #formContainer .required-small {
font-size: 13px;
color: #8a8888;
margin-bottom: 14px;
}
#formContainer .contentRow .left {
float: left;
width: 108px;
clear: both;
}
#formContainer form .contentRow .left #name {
padding-top: 10px;
}
#formContainer form .contentRow .left #email {
padding-top: 6px;
}
#formContainer form .contentRow .left #message {
padding-top: 6px;
}
#formContainer .contentRow .right {
float: right;
height: 23px;
width: 452px;
}
#formContainer form .contentRow .right #name {
border: 1px solid #b3b3b3;
background-color: #E6E6E6;
width: 228px;
height: 18px;
margin-bottom: 3px;
}
#formContainer form .contentRow .right #customer_mail {
border: 1px solid #b3b3b3;
background-color: #e6e6e6;
width: 228px;
height: 18px;
margin-bottom: 2px;
margin-top: -1px;
}
#formContainer form .contentRow .right textarea {
border: 1px solid #b3b3b3;
background-color: #E6E6E6;
width: 451px;
height: 151px;
}
#formContainer form .contentRow .right .button {
color: #fff;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
clear: both;
margin-top: 133px;
border: none;
width: 101px;
height: 23px;
margin-left: 352px;
background-image: url(../images/contact-sendButton.png);
font-size: 13px;
}

.subpage #container #mainContents #right #contactOptions {
background-color: #ebebeb;
border: 1px solid #b3b3b3;
padding-left: 29px;
padding-top: 27px;
width: 248px;
background-image: url(../images/blog-contact-sidebarBG.jpg);
margin-left: 13px;
margin-top: 42px;
}
.subpage #container #mainContents #right #contactOptions .title {
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
font-weight: normal;
color: #393434;
margin-bottom: -2px;
}
.subpage #container #mainContents #right #contactOptions .title-small-dark {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #393434;
}
.subpage #container #mainContents #right #contactOptions p {
font-size: 13px;
color: #666666;
}

.tos p {
padding: 5px 0;
}

#mainContents .tos li {
font-size: 14px;
color: #4a4a4a;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
margin-left: 25px;
padding: 2px 0;
}

.tos h3 {
padding: 10px 0;
}

.tos ol {
list-style-type: decimal;
}

.tos ul {
list-style-type: square;
}

.tos blockquote {
font-size: 14px;
color: #4a4a4a;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
margin-left: 25px;
}



/* Tables Styling */
table span {
padding: 0 10px 0 0;
font-weight: bold;
}
td {
padding: 17px 7px;
border-bottom: 1px solid #e2e2e2;
font-size: 1.3em;
text-align: center;
}
td.infin {
padding: 10px 7px;
font-size: 1.7em;
}
td a.promo-link {
font-size: .9em;
}
tr.table-header {
background: url(../images/site/upper-shade.gif) repeat-x;
}
tr.table-header h4 {
padding: 15px 0;
}
th {
padding: 0px 10px;
border-bottom: 1px solid #e2e2e2;
font-weight: bold;
}
th h4 {
font-size: 18px;
}


table.pricing {
width: 630px;
border: 1px solid #bbb;
background: #fff;
font-size: 12px;
margin: 20px auto;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
th.desc {
}
th.plan {
width: 125px;
}

.a-right {
text-align: right;
font-size: 15px;
}

.box {
background: url(../images/box-bgr.gif) #ffffff repeat-x top;
clear: both;
margin: 0 0 20px;
padding: 19px;
border: 1px solid #bbb;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

.box.free {
  width: 610px;
  margin: 0 auto 20px auto;
  padding: 10px 10px 15px 10px;
  font-size: 10px;
}

.box.free h2 {
  font-size: 14px;
}

.box a {
color: #699d23;
}
.box h2 {
border-bottom: 1px solid #e2e2e2;
text-align: left;
padding-bottom: 3px;
margin-bottom: 3px;
}
.box h3 {
color: #555555;
font-size: 18px;
font-weight: normal;
margin: 0 0 5px;
padding-bottom: 3px;
}
.box h3 a {
color: #555555;
}
.box h4 {
margin-top: 10px;
}
.box li {
margin: 2px 0px 2px 25px;
}
.part {
height: 75px;
clear: none;
padding: 10px;
font-size: 12px;
margin: 0;
}
.pricing-columns .col1, .pricing-columns .col2, .pricing-columns .col3 {
float: left;
width: 310px;
margin: 0;
}
.pricing-columns .col2 {
margin: 0 15px;
}
.heart {
float: left;
background: #fff;
padding-right: 10px;
padding-top: 0px;
}
.signup_link {
float: right;
padding-left: 10px;
padding-top: 15px;
padding-right: 10px;
font-size: 14px;
}
.exp {
width: 530px;
}
.space {
height: 50px;
}

.wrap {
clear: both;
font-size: 10px;
height: 18px;
position: relative;
}

.wrap h3 {
font-size: 18px;
}

.wrap ul {
bottom: 0;
right: 5px;
position: absolute;
float: right;
}
.wrap ul li {
display: inline;
padding-left: 15px;
}

.comments {
font-size: 10px;
margin-top: 20px;
}

.blogpost {
margin: 10px 0;
}

.blogpost p {
margin: 10px 0;
}

#sidebar {
float: left;
width: 300px;
padding-left: 25px;
margin-top: 50px;
}

#sidebar p {
line-height: 20px;
}

.rss {
padding-bottom: 20px;
text-align: center;
}

#sidebar .box {
font-size: 13px;
padding: 10px;
}


.details a {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
text-transform: uppercase;
color: #478fa7;
}
.details {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-transform: uppercase;
color: #4a4a4a;
margin: 20px 0;
}
.details ul li {
display: inline;
padding-right: 15px;
}

/* System messages */
div.warning, div.info, div.error, div.success {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 11px 15px 8px;
margin: 10px 0 30px 0;
color: #1d1d1d;
font-weight: bold;
text-align: left;
}
	.warning a, .info a, .error a, .success a {
color: #000;
text-decoration: underline;
}
	.warning {
background: #f4ef9a;
border: 1px solid #dcd783;
}
	.info {
background: #b5d1ff;
border: 1px solid #a4c1ee;
}
	.error {
background: #ffb5b5;
border: 1px solid #e09799;
}
	.success {
background: #bcffb5;
border: 1px solid #a3e59b;
}

.invitation {
background: #bcffb5;
border: 1px solid #a3e59b;
text-align: center;
margin: 20px 0;
}
#watcher {
margin-top: 20px;
}

strong {
font-weight: bold;
}