/*
Theme Name: LoonDesign V4
Theme URI: http://kailoon.com
Description: Version 4 for LoonDesign
Version: 2.5
Author: kailoon
Author URI: http://kailoon.com
*/

/*CSS Connect ==================================================*/
@import "style/header.css";
@import "style/main-page-left.css";
@import "style/sidebar.css";
@import "style/upper-footer.css";
@import "style/page.css";
@import "style/portfolio.css";
@import "style/SyntaxHighlighter.css";
@import "style/form.css";
@import "style/widget-panel.css";
@import "style/widget-activity.css";

/* General =====================================================*/
* { margin: 0; padding: 0; }
body { color: #434343; font: 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; background: url(images/bg.gif) repeat-x top left; }
h1, h2, h3, h4, h5, h6 { font-family: Helvetica, Arial, Sans-serif; font-weight: 900; }
a { color: #d82b03; text-decoration: none; outline: none; }
a:hover { color: #d82b03; text-decoration: underline; }
input, select, textarea { border: 1px solid #ccc; font: 400 12px/18px Tahoma, Arial, Helvetica, sans-serif; color: #434343; }
img, a img {  }
p { padding : 0 0 2em; }
#page p a { text-decoration: underline; transition: color .3s linear; -webkit-transition: color .3s linear; }
#page p a:hover { color: #6790ed;}
#page p, #page ul { font: 13px/20px "Varela Round", Helvetica, Arial, sans-serif; color: #686A6C; }
#page strong { color: #222; background-color: #ffffe3; padding: 1px 4px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; }
.inputerror { border: 1px solid #333; }
#submiterror { color: #900; font-weight: 900; border: 1px solid #ccc; background-color: #fff; padding: 2px 4px; }
.clear { clear: both; }
.left, .float { float: left; }
img.float, a img.float { margin: 0 20px 0 0; }
.right { float: right; }
a.wix img { margin-bottom: 10px; border: 0; padding: 0; }
.wrapper { width: 960px; margin: 0 auto; }

/* Formatting ==================================================*/

.post ul { padding: 0 18px 18px 28px; list-style: none; }
.post ol { padding: 0 18px 18px; }
.post ul li { background: url(images/bullet.png) no-repeat top left; padding-left: 20px; margin-bottom: 5px; }
.post ol li { }

h1 { font-size: 30px; }
.post h1 { padding: 10px 0 10px; background: url(images/page2.png) repeat-x scroll left top; border-top: 1px solid #ccc; }
h2 { font-size: 18px; }
 
h2.single3 { font-size: 38px; color: #000; line-height: 40px; letter-spacing: -1px; padding-right: 120px; }
h2.single { font-size: 30px; color: #000; line-height: 30px; margin-bottom: 20px; }
h2.single2 { font-size: 30px; color: #000; line-height: 30px; padding-bottom: 20px; margin-top: 20px; }
h2 a { color: #333; }
h2 a:hover { color: #000; }

h3 { font-size: 18px; }
.post h3 { font: 24px "Varela Round", Helvetica, Arial, sans-serif; color: #494545; font-weight: 400; padding: 30px 0 7px; clear: both; }
h4 { font-size: 12px; font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif; font-weight: 900; }
.post h4 { font-weight: 900; padding: 25px 0 5px; font-size: 14px; color: #000; }
.section-title { font-style: normal; font-size: 14px; font-weight: 900; color: #555; }
.wp-smiley { border: 0; padding: 0; }

/* Frequest Used ================================================*/
.heading { background: url(images/heading-bg.png) repeat-x top left; }
.cap { text-transform: uppercase; }
small { font-size: 9px; color: #8e8e8e; }
.box { border: 1px solid #ccc; background: url(images/postmeta-bg.png) repeat-x top left; }
.title-img { border: 0; padding: 0 8px 0 0; }

/* Tutorial Writing ================================================*/
.tut-img { border: 1px solid #CECFD0; background-color: #f0f0f0; padding: 8px 0; text-align: center; clear: both; margin: 5px 0 10px; }
.tut-img a img, .tut-img img { border: 1px solid #999; background-color: #fff; padding: 0; }
.tut-img a:hover img { border: 1px solid #666; }
.interact { padding: 15px 10px; float: left; margin: 0 0 15px; width: 638px; text-align: center; background-color: #ebebeb; border: 1px solid #ccc; }
.interact a img { border: 0; padding: 0; margin: 0 40px; }

div.web { float: left; width: 660px; margin: 0 0 20px; padding-bottom: 20px; border-bottom: 1px solid #e1e1e1; }
div.web p { margin-left: 180px; padding: 0 0 10px 0; }
h4.web { font-size: 22px; line-height: 18px; font-weight: 400; padding: 0 0 20px; letter-spacing: -1px; }
a.web { float: left; padding: 2px 8px; background: url(images/page.png) repeat-x bottom left; border: 1px solid #ccc; color: #666; }
a.web:hover { color: #000; text-decoration: none; background: url(images/page2.png) repeat-x top left; }
span.web { float: left; width: 100%; margin-bottom: 12px; }
code { font: 11px/14px "Courier New", Courier, monospace; }

blockquote {
	padding: 20px;
	margin: 20px 0;
	cursor: default;
	border-left: 1px solid #ccc;
	background-color: #f7f7f7;
	font: 14px/22px "Courier New", Courier, monospace;
}
.post-ratings-loading { display: none; }
.gallery-thumb { float: left; margin: 0 0 15px 0; width: 660px; border-bottom: 1px solid #ccc; padding: 0 0 15px; }
.gallery-thumb .comment-cloud { float: right; background: url(images/comment-cloud.jpg) no-repeat top left; width: 53px; height: 24px; text-align: center; padding-top: 7px; font: 11px Georgia, "Times New Roman", Times, serif; } 
.gallery-desc { float: left; width: 235px; padding: 0 0 0 15px; }
.gallery-desc h4 a { font: 400 18px Georgia, "Times New Roman", Times, serif; font-style: italic; color: #333; }
.post-ratings { margin-top: 20px; clear: both;}
.post-ratings img, .post-ratings a img { border: 0; padding: 0; margin: 0 2px 0 0; display: inline; }
.post-ratings em { font: 9px Tahoma, Arial, Helvetica, sans-serif; color: #666; }

.exabytes { clear: both; padding: 10px 0; }
.google { clear: both; padding: 0 0 25px 0; }

#tabs { margin-top: 10px; border: 1px solid #ccc; background-color: #fff; }
#tabs ul { list-style: none; }
.ui-tabs-hide { display: none; }
#tabs .sidetab-head { padding: 5px 0; text-align: center; background-color: #E5E5E5; border-bottom: 0; }
#tabs .sidetab-head li { display: inline; font-size: 13px; }
#tabs .sidetab-head li a { padding: 4px 30px; font-weight: 900; color: #666; text-transform: uppercase; }
#tabs .sidetab-head li a:hover { text-decoration: none; }
#tabs .sidetab-head li.ui-state-active a { color: #000; }

#tabs .sidetabdiv { }
#tabs .sidetabdiv li { }
#tabs .sidetabdiv li a { padding: 7px 15px; color: #666; text-decoration: none; display: block; background-color: #f7f7f7; text-transform: lowercase; border-bottom: 1px solid #e7e7e7; }
#tabs .sidetabdiv li a:hover { background-color: #fff; color: #000; }

#tabs2 { margin-top: 10px; }
#tabs2 ul { list-style: none; }

#tabs2 .sidetab-head { padding: 5px 0; text-align: center; }
#tabs2 .sidetab-head li { display: inline; }
#tabs2 .sidetab-head li a { padding: 4px 25px; font-weight: 900; font-size: 13px; color: #666; text-transform: uppercase; }
#tabs2 .sidetab-head li a:hover { text-decoration: none; }
#tabs2 .sidetab-head li.ui-state-active a { color: #000; }

#tabs2 .sidetabdiv { border: 1px solid #ccc; background-color: #fff; margin: 0 10px; }
#tabs2 .sidetabdiv li { }
#tabs2 .sidetabdiv li a { padding: 7px 15px; color: #666; text-decoration: none; display: block; text-transform: lowercase; line-height: 16px; }
#tabs2 .sidetabdiv li a:hover { color: #000; background-color: #f5f5f5; }

#sidebar .bsap { float: left; width: 270px; }
#sidebar .bsap a { float: left; display: inline; display: inline; }
#sidebar .bsap a.even { margin: 5px 0 5px 5px; }
#sidebar .side-section .bsap a img { margin: 0; }

#dribbble { background: url(images/dribbble.png) no-repeat 0 -3px; }
.side-section .dribbble a img { display: block; float: none; margin: 0 auto; padding: 4px; border: 1px solid #f1f1f1; background-color: #fff; }
.side-section .dribbble a:hover img { border: 1px solid #333; }
.dribbbles li { text-align: center; margin: 0 auto 15px; }
.dribbbles { margin-top: 10px; list-style: none; line-height: 14px; }

#googleplus { float: left; }
.tuts { display: block;
margin: 40px auto 60px;
text-align: center; }
.tuts img { box-shadow: 0 1px 1px rgba(0,0,0,0.3); -webkit-transition: all .3s ease-in-out; }
.tuts:hover img { box-shadow: 0 4px 10px rgba(0,0,0,0.2); }

.google_block { }