/* -------------------------------------------------------------------------------
	Theme Name: Grafisia
	Theme URI: http://grafisia.com/
	Description: Custom Wordpress theme for <a href="http://grafisia.com">Grafisia</a>.
	Version: 1.1
	Author: Habieb
	Author URI: http://grafisia.com/
   ------------------------------------------------------------------------------- */

/* 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, b, u, i, center, 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; vertical-align:baseline; }

body { line-height:1; }

ol, ul { list-style:none; }

blockquote, q { quotes:none; }

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

:focus { outline:0; }

ins { text-decoration:none; }

del { text-decoration:line-through; }

table { border-collapse:collapse; border-spacing:0; }

/* General
------------------------------------ */

@font-face { font-family: 'ColaborateLightRegular'; src: url('fonts/ColabLig-webfont.eot'); src: local('?'), url('fonts/ColabLig-webfont.woff') format('woff'), url('fonts/ColabLig-webfont.ttf') format('truetype'), url('fonts/ColabLig-webfont.svg#webfont3FAZKDdg') format('svg'); }

body { margin:0px auto; padding:0px; background:#7cb9e0; font:14px Arial, Helvetica, Sans-Serif; line-height:21px; color:#444; font-style:normal; }

img { border:0px; max-width:100%; height:auto; }

.clear { clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0 }

small { color:#595856; font-weight:bold; font-size:0.8em; margin-bottom:15px; }

a { color:#0f72c3; text-decoration:none; }

small a { color:#0F72C3; }

a:hover { text-decoration:none; color:#000; border-bottom:1px solid #0f72c3; }

a:active { position: relative; top: 1px; }

cite { color:#595856; font-weight:bold; font-size:12px; font-style:normal; margin-bottom:15px; }

cite a { color:#26689F; }

blockquote { padding:0 0 0 30px; background:url("images/blockquote.png") left top no-repeat; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; display:block; line-height:24px; color:#004586; margin:20px 20px 20px 40px; }

::selection { background:#d5e8fe; color:#000; }

::-moz-selection { background:#d5e8fe; color:#000; }

h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a { font-family:ColaborateLightRegular, arial, helvetica; color:#000; font-weight:normal; font-style:normal; font-variant:normal; }

h1, h1 a, h2, h2 a{ margin:0px; line-height:39px; letter-spacing:-1px; font-size:31px; }

h1 a:hover, h2 a:hover { color:#000; border-bottom:1px solid #000; }

h3, h3 a { font-size: 21px; padding-bottom:0.7em; }

h4, h4 a { font-size: 19px; padding-bottom:0.7em; }

h5, h5 a { font-size: 15px; }

h6, h6 a { font-size: 12px; }

p { padding-bottom:15px; }

pre, code { font-family:"Courier New",Courier,monospace; color:#000; }

code { background-color:#edf3f9; }

pre { background:url(images/code-bg.png) repeat scroll left top #fff; border:1px solid #cde3ee; display:block; line-height:21px; margin:10px 0 20px; overflow-x:scroll; overflow-y:auto; padding:1px 13px 0px; position:relative; }

abbr, acronym { border-bottom:1px dotted #444; }

/* Notification */

.info { margin:15px 0; color:#2850c1; padding:15px 10px 15px 55px; background:#dbecff url(images/info.png) 12px 9px no-repeat; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; border:1px solid #9fc7f5; }

.success { margin:15px 0; color:#258815; padding:15px 10px 15px 55px; background:#d4ffcd url(images/success.png) 12px 9px no-repeat; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; border:1px solid #9adf8f; }

.error { margin:15px 0; color:#871414; padding:15px 10px 15px 55px; background:#ffd2d3 url(images/error.png) 12px 9px no-repeat; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; border:1px solid #df8f90; }
 
.warning { margin:15px 0; color:#878314; padding:15px 10px 15px 55px; background:#fefccb url(images/warning.png) 12px 9px no-repeat; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; border:1px solid #e5db55; }

/* Button */

a.button, input.button { background:#62a9e3; background:linear-gradient(-90deg, #62a9e3, #5492c4); background:-moz-linear-gradient(center top , #62a9e3 0%, #5492c4 100%); background:-webkit-gradient(linear, center top, center bottom, from(#62a9e3), to(#5492c4)); border-radius:4px 4px 4px 4px; box-shadow:0 2px rgba(0, 0, 0, 0.1), 0 -2px rgba(0, 0, 0, 0.2) inset; color:#fff; display:inline-block; font-size:15px; text-shadow:0 -1px 1px rgba(0,0,0,0.25); margin:0 10px 8px 0; padding:8px 25px 10px; text-decoration:none; }

a.button:hover, input.button:hover { background:linear-gradient(-90deg, #5b9bd0, #4b82af); background:-moz-linear-gradient(center top , #5b9bd0 0%, #4b82af 100%); background:-webkit-gradient(linear, center top, center bottom, from(#5b9bd0), to(#4b82af)); border-bottom:none; }

input.button { border:none; cursor:pointer; }

/* Background
------------------------------------ */

#body-top { background:url(images/repeat-top.jpg) repeat-x top center; margin:0; padding:0; }

#body-btm { background:url(images/repeat-btm.jpg) repeat-x bottom center; margin:0; padding:0; }

#base { position:relative; background:url(images/slice.jpg) repeat-y top center; margin:0px auto; padding:0; }

#base-top { position:relative; background:url(images/top.jpg) no-repeat top center; }

#base-btm { position:relative; background:url(images/bottom.jpg) no-repeat bottom center; }

#wrapper { width:1000px; margin:auto; padding:0; min-height:1800px; }

/* Header
------------------------------------ */

#header{ position:relative; width:100%; height: 157px; }

#top-nav{ width:100%; height:34px; }

#top-menu { float:right; position:absolute; top:6px; right:235px; }

#top-menu li { list-style:none; margin-left:10px; display:inline; }

#top-menu li a { color:#ccc; font-size:12px; }

#top-menu li a:hover, #top-menu li a.active { color:#fff; border-bottom: none; }

/* search form */

#top-search { float:right; margin:0px; padding:0px; position:absolute; top: 5px; right:0px; }

.search-fieldset{ border:none; }

#search { margin:0; }

#s { background: rgba(0, 0, 40, 0.2); color:#999; padding: 3px 28px 3px 8px; border: 1px solid #999; width: 180px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; font-size:12px; }

#s:focus { background: rgba(0, 0, 40, 0.1); color:#000; }

#search .go {  position:absolute; right: 5px; top: 2px; background: url(images/search.png); height: 20px; width: 20px; cursor:pointer; border: none; }

/* logo */

#logo { height:123px; margin:0; }

#logo a:hover { border-bottom: none }

/* Menu
------------------------------------ */

#nav, #nav ul { margin:0; padding:0; list-style-type:none; list-style-position:outside; position:relative; line-height:1.5em; font-size:1.0em; text-transform:uppercase; }

ul#nav { padding-left:13px; }

#nav a { display:block; color:#ccc; text-decoration:none; padding:13px 12px; }

#nav a:hover{ color:#fff; border-bottom:none; }

#nav li{ float:left; position:relative; }

#nav ul { position:absolute; display:none; top:35px; background:rgb(255, 255, 255); background:rgba(255, 255, 255, 0.9); float:left; width:150px; border:1px solid #cde3ee; -moz-border-radius:0 10px 10px 10px; -webkit-border-radius:0 10px 10px 10px; border-radius:0 10px 10px 10px; box-shadow: 0 2px 0 rgba(152, 178, 201, 0.2), 0 -2px 0 rgba(152, 178, 201, 0.3) inset; }

#nav li ul li a { width:126px; height:auto; float:left; padding:7px 12px; font-size:0.9em; color:#444; text-shadow:1px 1px 0 #fff, 0 0 5px #fff; }

#nav li ul li a:hover { color:#444; background: none repeat scroll 0 0 rgba(152, 178, 201, 0.2); box-shadow: 0 2px 0 rgba(152, 178, 201, 0.3) inset, 0 0 3px 2px rgba(152, 178, 201, 0.2) inset; }

#nav li ul li:first-child a:hover { -moz-border-radius:0 10px 0 0; -webkit-border-radius:0 10px 0 0; border-radius:0 10px 0 0; }

#nav li ul li:last-child a:hover { -moz-border-radius:0 0 10px 10px; -webkit-border-radius:0 0 10px 10px; border-radius:0 0 10px 10px; }

#nav ul ul { top:auto; }	

/*#nav li ul ul { left:170px; margin:0px 0 0 10px; }*/

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul { display:none; }

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul { display:block; }

/* Content
------------------------------------ */

#content { padding:0; float:left; width:670px; overflow:hidden; margin:0; }

.post { padding:15px; clear:both; min-height:280px; margin:0 0 0 10px; }

.post-title { float:left; margin-bottom:10px; width:100%; }

.post-title h1, .post-title h2 { margin-bottom:10px; }

.post-cat { font-size:95%; float:left; }

.post-comments { font-size:95%; float: right; }

.breadcrumb { margin:0 15px 0 25px; padding:12px 0 8px 0; border-bottom:1px solid #dfddd5; font:italic 0.85em Georgia, "Times New Roman", Times, serif; }

.breadcrumb a { font:italic 1.0em Georgia, "Times New Roman", Times, serif; }

.social-media { float: left; width: 100%; margin-top: 0px; margin-bottom: 10px; }

.social-media .twitter-btn, .social-media .facebook-btn, .social-media .addtoany, .social-media .plusone-btn { float: left; }

.social-media .addtoany { margin-right: 15px; margin-left: -8px; }

.social-media .twitter-btn, .social-media .plusone-btn { margin-top: 2px; }

.social-media .facebook-btn { width: 75px; margin-top: 2px; }

.preview { margin:10px 0; }

.preview img { width:100%; }

.preview a:hover { border-bottom: none; }

.entry { clear:both; width:auto; }

.entry p { line-height:23px; }

.entry ul, .entry ol   { margin-left:25px; line-height: 22px; margin-bottom:15px; }

.entry ul li { list-style-type: disc; }

.entry ol li { list-style-type:decimal; }

.entry ul ul, .entry ol ol  { margin-bottom:0; }

.post-image, .tutorial_image { text-align:center; padding:10px 0px; margin:10px 0; }

.post-image img, .tutorial_image img { margin: auto; }

.post-image a:hover, .tutorial_image a:hover { border-bottom: none }

.post-image small, .tutorial_image small { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; display:block; font-size:13px; line-height:24px; color:#004586; margin: auto; font-weight: normal; }

.read-more { margin:0 5px 0 5px; float: left; font-size: 95%; margin-bottom:10px; }

.divider { border-bottom:1px solid #dfddd5; width:630px; margin-left:25px; }

.attachment-button, .attachment-image { margin:20px auto; text-align:center; }

.attachment-button a:hover { border-bottom:none; }

.attachment-image img { display: block; margin: 0 auto; }

.prev-next-entries { clear:both; font:italic 1.1em Georgia, "Times New Roman", Times, serif; line-height:21px; overflow:hidden; margin-top:15px; }

.prev-entries { float:left; padding-bottom:20px; width:45%; }

.next-entries { float:right; width:45%; text-align:right; padding-bottom:20px; }

/* Web Roundup */

#content .webroundup { padding: 0px; margin: 0px; }

#content .webroundup li { padding: 0px; margin: 0px; list-style: none; margin-bottom: 20px; overflow: hidden; margin-left: 0px; padding-left: 0px; background: none; }

#content .webroundup div { padding: 10px; background-color: #eff5f3; border: 1px solid #cde3ee; float: left; margin-right: 15px; margin-bottom: 10px; }

#content .webroundup img { float: left; }

#content .webroundup h4 { display: block; padding-bottom: 0px; margin-bottom: 5px; }

#content .webroundup h4 a:hover { border-bottom:none; }

/* Pagination */

.pagination { width:635px; padding:0 10px 0 25px; color:#888; margin:20px 0 30px 0; }

.wp-pagenavi { margin:0; text-align:right; font-size:13px; }

.wp-pagenavi .pages { float:left; }

.wp-pagenavi a { padding:3px 7px; text-decoration:none; color:#222; margin-right:3px; }

.wp-pagenavi a:hover, .wp-pagenavi span.current { padding:5px 7px; background:#0d9bfe; color:#f9f9f9; margin-right:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; border-bottom:none; }

/* Related Posts
------------------------------------ */

.related-posts { float:left; width:100%; background-color:#eff5f3; border-top:1px solid #cde3ee; border-bottom:1px solid #cde3ee; padding-top:15px; padding-bottom:10px; margin-top:10px; margin-bottom:20px; text-align:center; }

.related-posts ul { margin:auto; padding:0px; display:inline; }

.related-posts ul li { list-style:none; position:relative; display:inline; margin:0 5px;}

.related-posts ul li a img { border: none; width:140px; }

.related-posts ul li a:hover { border-bottom: none; }

.related-posts h3 { margin-top: 10px; }

/* Sidebar
------------------------------------ */

#sidebar { float:right; font-size:13px; padding:0 15px; width:300px; line-height:20px; }

#sidebar ul { list-style: none; margin:0; padding:0; margin-bottom:20px; }

#sidebar ul li { list-style:none; }

#sidebar .widget { float:left; margin:0 0 25px 0; width:300px; }

#sidebar .widget .details{ float:left; width:70px; }

/* Twitter & RSS */

.rss_link, .twitter_link{ float:left; }

.rss_link a, .twitter_link a { color:#000; font-weight:bold; }

.rss_link{ width:50%; }

.twitter_link{ width:50%; }

.rss_widget, .twitter_widget{ float:left; }

.rss_widget{ width:50%; }

.twitter_widget{ width:50%; }

span.icon{ float:left; margin:5px 10px 0 0; }

span.icon a:hover { border-bottom: none; }

span.count{ float:left; font-size:20px; font-family:Georgia, "Times New Roman", Times, serif; }

a span.count{ color:#000; float:left; }

span.desc{ float:left; font-size: 11px; }

a span.desc{ color:#000; float:left; }

a:hover span.desc{ color:#000; }

/* Google plusone */

.gplusone { color:#000; line-height:1px; padding:0; margin-top:10px; }

.gplusone span { display:inline-block; vertical-align:text-top; }

/* Ads Widget */

#sidebar .widget .ads .wpnuke-banner a img { margin-bottom:5px; }

#sidebar .widget .ads .wpnuke-banner a:hover { border-bottom:none; }

/* Tab Widget */

#sidebar .tab-widget{ float:left; margin:0 0 25px 0; width:300px; background: #fff; -moz-box-shadow:0 0 5px #444; -webkit-box-shadow:0 0 5px #444; box-shadow:0 0 5px #444; }

#sidebar ul.tabs { border-bottom:1px solid #eee; height:30px; margin:0px; padding:10px 0 0 0; }

ul.tabs li { list-style:none; display:inline; }

ul.tabs li a { color:#27221F; padding:13px 14px; text-decoration:none; font-size:10px; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; }

ul.tabs li a:hover { border-bottom:none; color:#0f72c3; }

html ul.tabs li.active a  { background:url(images/tab-active.png) no-repeat bottom center; padding-bottom:21px; color:#0f72c3; }

#sidebar .tab-container { clear:both; padding:10px 15px 1px 15px; }

#sidebar .tab-content li { list-style:none; }

#sidebar .tab-content ul li { list-style:none; padding:10px 0; border-bottom: 1px solid #dfddd5; }

#sidebar .tab-content ul li a { color:#27221F; font-size:14px; }

#sidebar .tab-content ul li a:hover { color:#0f72c3; border-bottom:none; }

#sidebar .tab-content .tag-box { margin:15px 0; text-align:center; }

#sidebar .tab-content .stt-box { margin:15px 0; }

.stt2 { margin-bottom:25px; }

/* Facebook Like Box */

.fb-box { background:#fff; -moz-box-shadow:0 0 5px #444; -webkit-box-shadow:0 0 5px #444; box-shadow:0 0 5px #444; padding:4px 0 0 4px; }

/* Google plus badge */

.gplus-badge { line-height:0; -moz-box-shadow:0 0 5px #444; -webkit-box-shadow:0 0 5px #444; box-shadow:0 0 5px #444; }

/* Comments
------------------------------------ */

#comments h3,#respond h3 { display:block; width:100%; padding:20px 0; margin:0; }

#comments .commentlist { margin:0; padding:0; }

#comments ol.commentlist li { list-style:none; margin-top:10px; padding:0; }

#comments ol.commentlist .comment-body { padding:15px; border:1px solid #cde3ee; background:#fff; }

#comments ol.commentlist .even .comment-body { background:#eff5f3; }

#comments .commentlist ul li.odd .comment-body, #comments .commentlist ul ul li.odd .comment-body, #comments .commentlist ul ul ul li.odd .comment-body, #comments .commentlist ul ul ul ul li.odd .comment-body, #comments .commentlist ul ul ul ul ul li.odd .comment-body { background:#fff; }

#comments .commentlist ul li.even .comment-body, #comments .commentlist ul ul li.even .comment-body, #comments .commentlist ul ul ul li.even .comment-body, #comments .commentlist ul ul ul ul li.even .comment-body, #comments .commentlist ul ul ul ul ul li.even .comment-body { background:#eff5f3; }

#comments ol.commentlist .comment-body p { margin:0 0 0 79px; }

#comments .commentlist ul.children { border-left:1px solid #cde3ee; padding-left:35px; background:transparent url(images/commentlist.gif) repeat-x scroll 0 35px; }

#comments .comment-author, #comments .comment-awaiting-moderation { margin:0 0 5px 79px; }

#comments .comment-author .fn { font-size:1.2em; font-weight:normal; }

#comments .comment-author .fn a { text-decoration:none; }

#comments .comment-author .says { display:none; }

#comments .comment-meta { margin:0 0 10px 79px; border-bottom:1px solid #cde3ee; padding-bottom:7px; }

#comments .comment-meta a { color:#979797; text-decoration:none; font: normal 0.8em/1em Arial, Helvetica, sans-serif; }

#comments .comment-author .fn a:hover, #comments .comment-meta a:hover { border-bottom:none; }

#comments .avatar { position: absolute; margin: 0 0 0 -79px; height:64px; width:64px; }

#comments .reply { padding:0; margin-top:20px; }

#comments .comment-reply-link { text-transform: uppercase; font: bold .8em/1em Arial, Helvetica, sans-serif; color: #979797; text-decoration: none; }

#comments a.comment-reply-link:hover { color:#333; text-decoration:none; border-bottom:none; }

#comments .commententry { clear:both; margin-left:63px; }

#comments .commentlist ul, #comments .commentlist ul ul { margin:0; padding: 0; }

#comments .pingback .comment-author { margin: 0 0 10px 0; }

#comments .pingback .comment-meta { margin: 0 0 10px 0; }

#comments .pingback .avatar { display:none; }

#comments ol.commentlist .pingback .comment-body p { margin:0 0 0 0; }

#comments .pingback .reply { display:none; }

#respond .cancel-comment-reply { margin:0; float:right; }

#respond #cancel-comment-reply-link { font: bold .8em/1em Arial, Helvetica, sans-serif; text-transform: uppercase; text-decoration: none; color: #979797; font-weight: bold; }

#respond #cancel-comment-reply-link:hover { color:#333; border-bottom:none; }

/* commentform */

#commentform input[type=text] { padding: 8px; width: 250px; border:1px solid #cde3ee; }

#commentform textarea { width:97%; height:200px; border:1px solid #cde3ee; padding:8px; }

#commentform label { font-weight: bold; padding-left:7px; }

#commentform label small { font-weight: normal; }

/* Footer
------------------------------------ */

#footer { height:130px; width:1000px; position:relative; display:block; margin:auto; }

#footer p { padding-top:30px; font-size:0.9em; }