/*---------------*/
/* Reset Default */
body {margin:0; padding:0; font:12px Arial, Helvetica, sans-serif; color:#444444;}
h1,h2,h3,h4,p,ul{margin:0; padding:0;}
a:link, a:visited {color:#444444; position:relative;}
a:hover {color:#8d8d8d;}
a img {border:none;}
abbr, acronym {cursor:help;}
/*---------------*/

body {min-width:320px; font-size:12px;}

.mobileOnly {display:none;}
.mobileWideOnly {display:none;}

#wrapper {margin:0 auto 30px; background-color:#ffffff;}

#header {width:100%; height:134px; padding-bottom:5px; background:#B8CE13 url('../images/Header.png') center center no-repeat; border-bottom:10px solid #A6C100;}
#header .content {width:980px; margin:0 auto; position:relative;}
#header .home {display:block; width:55px; height:40px; position:absolute; top:55px; left:50px;}
#header .home a {display:block; width:100%; height:100%;}
#header .link {position:absolute; top:115px; left:10px; text-decoration: none; font-size:11px; letter-spacing:1px;}
#header .login {position:absolute; top:115px; right:25px; width:195px; text-align:center;}

#main {width:980px; margin:10px auto 0; position:relative; overflow:hidden;}

#main .navToggle {display:none; width:30px; height:30px; position:absolute; top:5px; right:20px; background:url('/siteimages/new/navToggle.png') top left no-repeat; cursor:pointer;}

#main .colLeft {width:152px; padding:5px 7px; float:left;}
#main .colCenter {width:500px; padding:15px; margin:0 30px; float:left;}
#main .colRight {width:200px; padding:20px 5px; float:left;}

#main .breadcrumbs {display:block; margin-left:7px; padding:10px 0; font-size:11px;}
#main .breadcrumbs a {font-size:11px;}
#main .breadcrumbs .divider {padding:0 5px;}

#main .post {margin-bottom:50px;}
#main .post h2 {font-size:18px; color:#444444; letter-spacing:1px;}
#main .post h2 a {text-decoration:none;}
#main .post span.date {display:block; margin-top:2px; font-size:9px; letter-spacing:1px;}
#main .post .post_content {margin-top:15px; line-height:19px;}
#main .post .post_content a.readmore {display:block; margin-top:15px; margin-bottom:10px; float:right;}
#main .post .post_content p {margin-bottom:10px;}

#main .post .post_info {padding:5px; background-color:#EFEFEF; color:#8D8D8D; font-size:10px; line-height:12px; clear:both;}
#main .post .post_info a {color:#8D8D8D; text-decoration:none;}
#main .post .post_info a:hover {color:#444444;}

#main .social {margin-bottom:25px;}
#main .social span {display:block; margin-bottom:2px; font-weight:bold;}
#main .social a img:hover {opacity:0.8;}
#main #postsNav {overflow:hidden;}
#main .alignleft {width:200px; min-height:15px; padding-left:25px; background:url(../images/arrow-left.png) left 2px no-repeat; float:left;}
#main .alignright {width:200px; min-height:15px; padding-right:25px; text-align:right; background:url(../images/arrow-right.png) right 2px no-repeat; float:right;}
#main .aligncenter {display:block; margin:0 auto;}

#main .colRight .social {text-align:center;}
#main .colRight .social span {display:block; margin-bottom:10px; font-size:15px;}
#main .colRight .social a {margin:0 5px;}
#main .colRight .social img {width:34px;}

#main .colLeft span.header {display:block; height:30px; line-height:30px; font-size:15px; color:#4E5D6A; font-weight:bold;}
#main .colLeft .categories ul {padding-bottom:8px; list-style-type:none;}
#main .colLeft .categories ul li {margin-top:8px;}
#main .colLeft .categories ul li a {font-size:11px; text-decoration:underline;}
#main .colLeft .categories ul li ul li {margin-left:10px;}

/*#main .colRight .logobee_services img {margin-bottom:12px;}
#main .colRight .logobee_services img.last {margin-bottom:0;}*/
.salesbox {height:240px; text-align:center; position:relative; overflow:hidden;}
.salesbox a {display:block; height:100%;}
.salesbox h2 {font-size:28px;}
.salesbox span {display:block; font-size:14px;}
.salesbox span.price {font-size:28px; font-weight:bold;}

.salesbox.short {height:205px; overflow:hidden;}
.salesbox.short img {margin-top:-15px; margin-bottom:-10px;}

.salesbox.logodesign {color:#454545; background-color:#fbc440;}
.salesbox.logodesign a {height:100%; color:#454545;}
.salesbox.webdesign {color:#454545; background-color:#ffffff;}
.salesbox.webdesign a {color:#454545;}
.salesbox.bundlebee {color:#ffffff; background-color:#767676;}
.salesbox.bundlebee a {color:#ffffff;}
.salesbox.blog {color:#ffffff; background-color:#92bc0b;}
.salesbox.blog a {color:#ffffff;}
.salesbox.templates {color:#ffffff; background-color:#54AEB4;}
.salesbox.templates a {color:#ffffff;}
.salesbox.affiliate {color:#ffffff; background-color:#92bc0b;}
.salesbox.affiliate a {color:#ffffff;}

#graphics {overflow:hidden;}
#graphics {margin-top:40px; position:relative; text-align:center; z-index:1;}
#graphics .salesbox {height:200px; padding-top:20px;}

#graphics.graphicsSmall .salesbox {height:auto;}
#graphics.graphicsSmall .salesbox {padding-top:10px; padding-bottom:10px;}
#graphics.graphicsSmall .salesInfo span {font-size:13px;}

#footer {width:980px; margin:0 auto; padding-bottom:15px;}
#footer .logobee {color:#3C3C3C; text-align:center;}

@media only screen and (max-width : 768px) {
	.mobileHide {display:none;}
	.mobileWideOnly {display:block;}
	
	#header {background-position:center -8px;}
	#header .content {width:auto;}
	#header .home {display:none;}
	#header .link {width:50%;}
	
	#main {width:auto;}
	
	#main .navToggle {display:block; color:#454545; float:right;}
	#main .navToggle.selected {background:url('/siteimages/new/navToggle.png') bottom left no-repeat;}
	
	#main .breadcrumbs {width:80%; margin-bottom:15px; float:left;}
	
	#main .colLeft {width:auto; padding:0; background-color:#BABABA; float:none; clear:both;}
	#main .colLeft span.header {padding:10px 20px 0;}
	#main .colLeft .categories {padding-bottom:18px; border-bottom:2px solid #454545;}
	#main .colLeft .categories ul {padding:0;}
	#main .colLeft .categories ul li {margin:0;}	
	#main .colLeft .categories ul li a {display:block; padding:8px 40px; color:#454545;}
	#main .colLeft .categories ul li a:hover {color:#BABABA; background-color:#454545;}
	#main .colLeft .categories ul li ul li {margin:0;}
	#main .colLeft .categories ul li ul li a {padding-left:80px;}
	
	#main .colCenter {width:auto; margin:0; padding:15px 20px; float:none; clear:both;}
	
	#main .colRight {width:auto; text-align:center; float:none;}
	
	#main .post .post_content img {max-width:100%; height:auto !important;}
	
	.comments fieldset label {display:block !important; float:none !important;}
	.comments fieldset textarea {width:95% !important;}
	.comments fieldset input.submit {float:right !important;}

	.salesbox .salesInfo {
		display:none;
	}
	
	#footer {width:auto;}
}

@media only screen and (max-width : 480px) {
	.mobileWideOnly {display:none;}
	.mobileOnly {display:block;}
	
	#main .breadcrumbs {width:70%;}
	
	#main #postsNav .alignleft {width:100% !important; margin-bottom:15px;}
	#main #postsNav .alignright {width:100% !important;}
}

/* STYLE FOR ANIMATED SALESBOXES DESKTOP ONY */
@media screen and (min-width : 768px) {
	.salesbox .salesTitle {
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		-o-transition: all 0.5s;
		transition: all 0.5s;
		-webkit-transition-delay: 0.1s;
		-moz-transition-delay: 0.1s;
		-o-transition-delay: 0.1s;
		transition-delay: 0.1s;
	}

	.salesbox .salesInfo {
		width: 100%;
		position: absolute;
		bottom: 10px;
		left: 100%;
		padding: 0 10px;
		box-sizing: border-box;
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		-o-transition: all 0.5s;
		transition: all 0.5s;
	}

	.salesbox:hover .salesTitle {
		-ms-transform: translate(0, -58%);
		-webkit-transform: translate(0, -58%);
		-o-transform: translate(0, -58%);
		transform: translate(0, -58%);
		-webkit-transition-delay: 0s;
		-moz-transition-delay: 0s;
		-o-transition-delay: 0s;
		transition-delay: 0s;
	}
	#graphics .salesbox:hover .salesTitle {
		-ms-transform: translate(0, -55%);
		-webkit-transform: translate(0, -55%);
		-o-transform: translate(0, -55%);
		transform: translate(0, -55%);
	}
	#graphics.graphicsSmall .salesbox:hover .salesTitle {
		-ms-transform: translate(0, -100%);
		-webkit-transform: translate(0, -100%);
		-o-transform: translate(0, -100%);
		transform: translate(0, -100%);
	}

	.salesbox:hover .salesInfo {
		-ms-transform: translate(-100%, 0);
		-webkit-transform: translate(-100%, 0);
		-o-transform: translate(-100%, 0);
		transform: translate(-100%, 0);
		-webkit-transition-delay: 0.1s;
		-moz-transition-delay: 0.1s;
		-o-transition-delay: 0.1s;
		transition-delay: 0.1s;
	}
}