/* SITE CSS (C) GHOSAP.COM * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,d el, 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;font-size: 100%;vertical-align: baseline;background: transparent;}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;} /* CSS * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ body { margin:0px; padding:0px; font-size:62.5%; font-family:sans-serif; line-height:1.2em; text-align:center; } body{ background:#262B24; color:#B2B7A3; color:#DDDDDD; } /* COMMON ELEMENTS * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ h2{ padding-left:8px; font-size:1.6em; line-height: 1.8em; } h2 span{ padding:0px 5px; } a img{ border:none; } ul{ padding-left:30px; list-style-type:disc; } ul, ol, dl, li, dt, dd {margin-top:0.5em;margin-bottom:0.5em; } li {margin-top:1em;margin-bottom:1em; } p { margin:0px; line-height:1.5em; margin:0.5em 0em 0.5em 0em;} sub{ font-size:0.8em; } a:link, a:visited{ color:#637A9F; color:#848E9D; color:#A5ADB9; color:#8E9CAF; text-decoration: none; } a:hover{ color:#DFB7A7; text-decoration:underline; text-decoration: none; } a:active, a.active{ color:#DFB7A7; } .al-right { text-align:right; } /* CSS * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ #site-container { width:980px; margin:0px auto; /* margin:50px auto 0px auto; overflow:hidden; border-top:1px #2D302A solid;*/ } /* CSS * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ #site-top { clear:both; height:30px;/* margin-top:-50px;*/ width:980px; background: url('../images/site-top-w-sh.gif') bottom center no-repeat; overflow:hidden; } #site-top form { margin:20px auto; } /* CSS * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ #site-head { clear:both; position:relative; height:110px; } #site-head .main-navigation { font-family: 'Trebuchet MS', sans-serif; letter-spacing:2px; padding:0px; list-style-type:none; position:absolute; right:22px; top:30px; text-transform: uppercase; color:#9CB8A1; font-size:12px; } #site-head .main-navigation li { float:left; margin:0px 0px 0px 4px; } #site-head .main-navigation li.first { margin:0px; background:none; } #site-head .main-navigation a { display:block; margin:0px 0px 0px 6px; padding:8px 18px 8px 19px; } #site-head .main-navigation a:link, #site-head .main-navigation a:visited { color:#ADB79E; } #site-head .main-navigation a:hover, #site-head .main-navigation .active a { text-decoration: none; background:#1D1F1A; } #site-head .main-navigation a:active { color:#ADB79E; } /* #site-head .main-navigation li a span { display:none; padding:0px; } #site-head .main-navigation li a span em { display:block; font-size:0.8em; color:blue; padding:23px 5px 10px 5px; margin:0px; } #site-head .main-navigation li a:hover span { position:absolute; display:block; margin:-57px 0px 0px -19px; } #site-head .main-navigation li.active a span { position:absolute; display:block; margin:8px 0px 0px -19px; } #xsite-head .main-navigation li a span { background:url('../tooltip-1.gif') 20px 0px no-repeat; } #site-head .main-navigation li a span em { background:url('../tooltip-1.gif') -251px 0px no-repeat; } */ /* CSS * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ #site-body { padding:20px 0px 0px 0px; overflow:hidden; text-align:left; } #site-body blockquote{ clear:both; margin:0px; padding-bottom:17px; font-size:1.8em; line-height:2.2em; font-family: Georgia, serif; text-align:justify; color:#A2AF99; color:#DDD; } #site-body blockquote .hello{ font-size:2em; float:left; padding:0px 4px 0px 0px; color:#AAA; } #site-body blockquote h1{ font-size:2em; float:left; padding:0px 12px 0px 0px; color:#AAA; font-weight:normal; } #site-body blockquote strong, #site-body blockquote em { color:#D0A696; font-size:1.2em; font-weight:normal; font-style:normal; padding:0px 1px; } #site-body blockquote .small { font-size:0.8em; color:#B2B7A3; color:#B7B7B7; } #site-body .blockquote-wrap blockquote { border-bottom:1px #1E1F1A solid; } #site-body .blockquote-wrap { border-bottom:1px #31362F solid; margin:0px 40px 20px 40px; } #site-body .blockquote-wrap.nb { border:none; margin:0px 40px 0px 40px; } #site-body .blockquote-wrap.nb blockquote { border:none; } .body-content { float:right; text-align:justify; margin:0px 0px 30px 35px; } .body-content h3 { color:#676D63; font-size:1.2em; font-weight:normal; font-family: Georgia, serif; margin:0.5em 0em; font-style:italic; } .body-content .head { color:#676D63; font-size:1.2em; font-weight:normal; font-family: Georgia, serif; margin:0.5em 0em; font-style:italic; } .body-content .head strong { font-size:1.2em; font-weight:normal; } .body-content .articles { width:598px; list-style-type:none; padding:0px; margin: 0px 45px 0px 0px; text-align:justify; font-size:1.2em; border-top:1px #1E1F1A solid; border-bottom:1px #31362F solid; } .body-content .articles li { margin:0px; border-top:1px #31362F solid; border-bottom:1px #1E1F1A solid; padding: 10px 0px; } .body-content .articles li h2 { float:left; margin:0px 20px 0px 0px; font-size:2em; padding:0px; color:#CCCCCC; font-weight:normal; font-family: Georgia, serif; line-height:1.6em; } .body-content .articles li h2 a { color:#CCCCCC; } .body-content .articles li h2 a:hover{ color:#DFB7A7; } .body-content .articles .back { float:right; padding:0px; color:#676D63; font-size:1em; font-weight:normal; font-family: Georgia, serif; margin:0.5em 0em; margin-top:-1em; font-style:italic; } .body-content .articles .back:hover { color:#DFB7A7; } .body-content .articles .date { float:right; padding:0px; color:#676D63; font-size:1em; font-weight:normal; font-family: Georgia, serif; margin:0.5em 0em; font-style:italic; } .body-content .articles .foot { display:block; padding:0px 0px 0px 10px; color:#676D63; font-size:1em; font-weight:normal; font-family: Georgia, serif; margin:0.5em 0em; font-style:italic; } .body-content .articles.no-top, .body-content .articles .no-top { border-top:none; } .body-content .articles.no-bottom { border-bottom:none; } .body-content .articles.no-top .first { border-top:none; } .body-content .articles { border-bottom:none; } .body-content .articles .last { border-bottom:none; } .body-content .articles .more { border-bottom:none; text-align:right; padding:8px 10px 0px 10px; } .body-content .articles.contact h2 { float:none; } .body-content .detail { width:598px; padding:0px; margin: 0px 45px 0px 0px; text-align:justify; font-size:1.2em; overflow:hidden; zoom:1; } .body-content .fullwidth { width:900px; } .body-content .articles.home { width:708px; /*width:748px; padding-left:142px;*/ } .body-content .about { text-align:justify; width:820px; margin-right:65px; /*font-size:1.4em;*/ } .body-content .about img { float:left; margin:8px 15px 8px 0px; padding:2px; border:1px #1E1F1A solid; } .body-content .about h2 { font-weight:normal; font-family: Georgia, serif; line-height:1.6em; margin-top:1em; } .body-content .error { text-align:justify; width:850px; margin-right:65px; } .body-content .error img { float:left; margin:8px 15px 8px 0px; padding:2px; border:1px #1E1F1A solid; } .body-content .error h2 { font-weight:normal; font-family: Georgia, serif; line-height:1.6em; margin-top:1em; } /*.body-content.portfolio { margin:0px 45px 20px 0px; } ul.portfolio { width:895px; list-style-type:none; padding:0px; margin:0px; text-align:justify; font-size:1.4em; border-bottom:1px #1E1F1A solid; } ul.portfolio li { margin:0px ; text-align:justify; border-top:1px #31362F solid; border-bottom:1px #1E1F1A solid; padding: 25px 45px; overflow:hidden; zoom:1; } ul.portfolio li.first { border-top:none; padding-top:10px; } ul.portfolio li.last { border-bottom:none; } ul.portfolio li a.thumb { float:left; margin: 4px 12px 8px 0px; display:block; padding:6px; background:#1D1F1A; } ul.portfolio li a.thumb span { margin:8px 0px 2px 0px; display:block; } ul.portfolio li h2 { padding:0px; color:#CCCCCC; font-weight:normal; font-family: Georgia, serif; line-height:1.2em;margin-bottom:10px; } ul.portfolio li h2 a { color:#CCCCCC; } ul.portfolio li h2 a:hover{ color:#DFB7A7; } .portfolio .pagination { font-size:1.2em; } .portfolio ul.pagination { border-top:1px #31362F solid; padding:10px 0px 10px 45px; } ul.portfolio { border-bottom:1px #1E1F1A solid; }*/ .body-content.portfolio { margin:0px 45px 20px 45px; } ul.portfolio { width:895px; list-style-type:none; padding:0px; margin:0px; text-align:justify; font-size:1.2em; border-bottom:1px #1E1F1A solid; } ul.portfolio li { margin:0px; border-top:1px #31362F solid; border-bottom:1px #1E1F1A solid; padding: 25px 25px 35px 25px; overflow:hidden; } ul.portfolio li.first { border-top:none; padding-top:10px; } ul.portfolio li.last { border-bottom:none; } ul.portfolio li img { margin:0px; padding:0px; } ul.portfolio li h2 { padding:0px; color:#CCCCCC; font-weight:normal; font-family: Georgia, serif; font-size:2em; line-height:1.2em;margin-bottom:10px; } ul.portfolio li h2 a { color:#CCCCCC; } ul.portfolio li h2 a span{ font-size:0.6em; font-weight:normal; color:#637A9F; } /*ul.portfolio li h2 a:hover, */ul.portfolio li h2 a:hover span, /*ul.portfolio li.hover h2 a, */ul.portfolio li.hover h2 a span{ color:#DFB7A7; } ul.portfolio li .caption{ background:#1D1F1A; padding:0px; border:10px #1D1F1A solid; overflow:hidden; position:relative; z-index:999999; } ul.portfolio li .caption p{ z-index:9999999; margin:0px; padding:0px; border:10px #1D1F1A solid; width:805px; background:#1D1F1A; position:absolute; bottom:0px; filter:alpha(opacity=90); -moz-opacity:0.9; -khtml-opacity: 0.9; opacity: 0.9; } ul.portfolio li .caption a img{ filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; z-index:999; } ul.portfolio.nojs li .caption a:hover img{ filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1; opacity: 1; } .portfolio .pagination { font-size:1.2em; } .portfolio ul.pagination { border-top:1px #31362F solid; padding:10px 0px 10px 45px; } ul.portfolio { border-bottom:1px #1E1F1A solid; } ul.portfolio li.hover .caption { background:#1D1F1A; padding:0px; border:10px #1D1F1A solid; } ul.portfolio li.hover a, ul.portfolio li.hover a span { } p.section { margin:1em 0em 1em 0em; } /* contact form */ .body-content.contact { width:895px; padding:0px; margin: 15px 45px 10px 0px; font-size:1.4em; } .body-content .contact-form { display:block; position:relative; } .body-content .contact-form h2 { padding:0px; color:#CCCCCC; font-weight:normal; font-family: Georgia, serif; font-size:2em; line-height:1.2em;margin-bottom:10px; } .body-content .contact-form ul { background:url('../images/contact-mail.gif') 35px 0px no-repeat; padding:0px 20px 0px 200px; list-style-type:none; margin:0px 0px 10px 0px; overflow:hidden; zoom:1; } .body-content .contact-form label { display:block; margin:0.5em 0em 0.8em 0em; } .body-content .contact-form input, .body-content .contact-form textarea, .body-content .contact-form button { font-family:sans-serif; padding: 0.3em; font-size:1em; color:#CCCCCC; background:#262B24; border:1px #31362F solid; width:267px; } .body-content .contact-form button { width:147px; margin:25px 0px 15px 0px; } .body-content .contact-form li { width: 280px; padding:0px; margin:0px 0px 10px 0px; } .body-content .contact-form li.last { margin-bottom:0px; } .body-content .contact-form li.textarea { float:right; width: 347px; margin: 0px 0px 0px 0px; } .body-content .contact-form li.textarea textarea { width:337px; height:74px; margin-bottom:0px; overflow:auto; } .body-content .contact-form li.submit { width:auto; text-align:right; margin:0px; } .body-content .contact-form li.error input, .body-content .contact-form li.error textarea{ border:1px #AA0000 solid; } .body-content .contact-form li.error label{ color:#CC0000; } .body-content .contact-form input.focus, .body-content .contact-form textarea.focus, .body-content .contact-form button.focus { background:#1D1F1A; } .body-content .contact-form .honeypot { text-indent:-999999em; float:left; margin-top:2em; width:490px; text-align:left; margin-left:-190px; } .body-content .contact-form .honeypot label { display:inline; margin-right:0.5em; } .body-content .contact-form .honeypot input { display:inline; } .body-content .contact-form p.success{ color:#00AA00; text-align:center; font-size:1.6em; font-family: Georgia, serif; margin:0px; padding-bottom:35px; } .body-content .contact-form p.error{ color:#AA0000; text-align:center; font-size:1.6em; font-family: Georgia, serif; margin:0px; padding-bottom:35px; } /* SIDEBAR */ .body-sidebar { font-size:1.2em; float:left; width:257px; margin:0px 0px 0px 45px; display: inline; } .body-sidebar .articles { list-style-type:none; padding:0px; margin: 0px 0px 0px 0px; text-align:justify; border-top:1px #31362F solid; border-bottom:1px #1E1F1A solid; } .body-sidebar .articles.no-top { border-top:none; } .body-sidebar .articles.no-top .first { border-top:none; } .body-sidebar .articles.no-bottom { border-bottom:none; } .body-sidebar .articles.no-bottom .last { border-bottom:none; } .body-sidebar .articles li { margin:0px; border-top:1px #31362F solid; border-bottom:1px #1E1F1A solid; padding: 10px 0px; } .body-sidebar .articles li li { margin:0px; border:none; padding: 0px; } .body-sidebar .articles li h2 { color:#CCCCCC; font-weight:normal; font-family: Georgia, serif; line-height:1em; } .body-sidebar .articles { border-bottom:none; } .body-sidebar .articles .last { border-bottom:none; } .body-sidebar .articles li h3 { font-size:1.4em; line-height: 1.6em; color:#CCCCCC; font-weight:normal; font-family: Georgia, serif; font-style:italic; } .body-sidebar .about-me { overflow:hidden; } .body-sidebar .about-me img{ float:left; margin:0.2em 0.8em 0em 0em; } .body-sidebar .quick-contact { } .body-sidebar .quick-contact ul { list-style-type:none; margin:0px 0px 10px 0px; padding:0px; text-align:center; } .body-sidebar .quick-contact ul li { margin-top:1em; } .body-sidebar .quick-contact label { display:none; } .body-sidebar .quick-contact input, .body-sidebar .quick-contact textarea, .body-sidebar .quick-contact button { font-family:sans-serif; padding: 0.3em; font-size:1em; color:#CCCCCC; background:#262B24; border:1px #31362F solid; width:237px; } .body-sidebar .quick-contact button { width:147px; } .body-sidebar.home{ width:145px; margin-top:14px; } .body-sidebar h3 { color:#CCCCCC; font-weight:normal; font-family: Georgia, serif; font-style:normal; font-size:1.6em; line-height:1.8em; } /* .body-sidebar.home .quick-contact input { width:147px; } .body-sidebar.home .quick-contact textarea { width:147px; height:147px; } .body-sidebar.home .quick-contact button { width:117px; } .body-sidebar .articles li h3, .body-sidebar li h3, .body-sidebar h3 { color:#CCCCCC; font-weight:normal; font-family: Georgia, serif; font-style:normal; font-size:1.6em; line-height:1.4em; } */ .body-additional { clear:both; width:890px; margin: 0px 45px 0px 45px; padding:0px; font-size:1.2em; } .body-additional .three-box-faux { overflow:hidden; padding:0px 0px 0px 0xp; margin:0px; } .body-additional .three-box-faux dt { display:none; } .body-additional .three-box-faux h3 { color:#CCCCCC; font-weight:normal; font-family: Georgia, serif; font-style:normal; font-size:1.6em; line-height:1.8em; } .body-additional .three-box-faux .box-left { float:left; padding:0px; margin:0px 45px 45px 0px; width:267px; } .body-additional .three-box-faux .box-left.last { margin:0px; width:266px; } .body-additional .three-box-faux.first { padding-top:0px; } .body-additional .three-box-faux.first .box-left { margin-bottom:0px; } .body-additional.section .three-box-faux dt { display:block; font-weight:bold; font-size:1.2em; line-height: 1.6em; color:#CCCCCC; font-family: Georgia, serif; font-style:italic; } .body-additional.section .three-box-faux { border-top:1px #31362F solid; border-bottom:1px #1E1F1A solid; padding-top:20px; } .body-additional.section .three-box-faux.first { } .body-additional.section .three-box-faux.last { border-bottom:none; } .body-additional.section { border-top:1px #1E1F1A solid; } .body-additional .two-box-faux { overflow:hidden; padding:0px; margin:0px; } .body-additional .two-box-faux dt { display:none; } .body-additional .two-box-faux .box-left { float:left; padding:0px; margin:0px 46px 45px 0px; width:422px; background:blue; } .body-additional .two-box-faux .box-left.last { margin:0px; } /* #tools-of-trade { border-top:1px #1E1F1A solid; clear:both; margin-bottom:30px; overflow:hidden; zoom:1; } #tools-of-trade h2 { padding: 15px 0px 10px 0px; border-top:1px #31362F solid; font-size:1.4em; line-height: 1.6em; color:#CCCCCC; font-weight:normal; font-family: Georgia, serif; font-style:italic; } #tools-of-trade ul { padding:0px; margin:0px; list-style-type:none; } #tools-of-trade li { float:left; padding:0px; margin:10px 8px 10px 13px;} #tools-of-trade li img { border:none; } #tools-of-trade li a { display:block; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } #tools-of-trade li a:hover { filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1; opacity: 1; } */ /* #tools-of-trade li a span { display:none; } #tools-of-trade li a { background: url('../tools-of-trade-off.gif') top left no-repeat; } #tools-of-trade li a:hover { background: url('../tools-of-trade-on.gif') top left no-repeat; } #tools-of-trade li.jquery a { width:105px; height:27px; background-position:0px 0px; } #tools-of-trade li.php a { width:78px; height:40px; background-position:-100px 0px; } #tools-of-trade li.apache a { width:100px; height:50px; background-position:-200px 0px; } #tools-of-trade li.mysql a { width:95px; height:50px; background-position:-300px 0px; } #tools-of-trade li.firefox a { width:60px; height:90px; background-position:-400px 0px; } #tools-of-trade li.ubuntu a { width:100px; height:45px; background-position:-500px 0px; } #tools-of-trade li.googlemaps a { width:95px; height:35px; background-position:-600px 0px; } #tools-of-trade li.npp a { width:98px; height:40px; background-position:-700px 0px; } */ /* CSS * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ #site-head .logo { font-weight:bold; position:absolute; left:45px; top:15px; font-size:3em; line-height:1.4em; font-family: Georgia, serif; color:#E2E3E2; letter-spacing:0.4em; } #site-head .logo a { color:#E2E3E2; } #site-head .logo em { padding-right:0.4em; display:block; font-size:0.5em; line-height:1.2em; font-weight:normal; font-style:normal; font-family:sans-serif; color:#7E908C; letter-spacing:3px; } #site-head { border-bottom:1px #1E1F1A solid; } #site-body { border-top:1px #31362F solid; } #site-body { border-bottom:1px #1E1F1A solid; background: url('../images/site-bottom-sh.gif') bottom center no-repeat; } /*#site-head { xbackground: url('../site-bottom-sh.gif') bottom center no-repeat; }*/ #site-foot { border-top:1px #31362F solid; } /* FOOT * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ #site-foot { clear:both; padding:20px 45px 20px 45px; margin: 0px 0px 15px 0px; color:#474E46; color:#AAA; font-weight:bold; overflow:hidden } #site-foot .left { float:left; margin:0px; padding:0px; } #site-foot .right { float:right; margin:0px; padding:0px; } /* SOCIAL LINKS * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ #site-foot { position:relative; text-align: right; } /* .social-links{ overflow:hidden; zoom:1; } #site-foot .social-links{ list-style-type:none; position:absolute; width:500px; top:0px; left:15px; } .social-links a span{ display:none; } .social-links a{ float:left; width:32px; margin:0px 17px 0px 0px; height:32px; display:block; background: url('../images/social-icons-2.gif') top left no-repeat; } .social-links a.row-last{ margin-right:0px; } .social-links a.linkedin { background-position: -350px 0px; } .social-links a.linkedin:hover { background-position: -350px -50px; } .social-links a.facebook { background-position: -150px 0px; } .social-links a.facebook:hover { background-position: -150px -50px; } .social-links a.rss { background-position: -200px 0px; } .social-links a.rss:hover { background-position: -200px -50px; } .social-links a.google { background-position: -250px 0px; } .social-links a.google:hover { background-position: -250px -50px; } .social-links a.email { background-position: -100px 0px; } .social-links a.email:hover { background-position: -100px -50px; } .social-links a.deviantart { background-position: -0px 0px; } .social-links a.deviantart:hover { background-position: -0px -50px; } */ /* TAG CLOUD * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ ul.tag-cloud { padding:0px; border:none; margin:0px; overflow:hidden; zoom:1; list-style-type:none; } ul.tag-cloud li { padding:0px; border:none; margin:0px; float:left; } ul.tag-cloud li a { display:block; padding:3px; } /* PAGINATION * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ ul.pagination { padding-left:0px; padding-right:0px; margin:0px; overflow:hidden; zoom:1; list-style-type:none; } #site-body ul.pagination li { padding:0px; border:none; margin:0px 0px 0px 4px; float:left; width:auto; } ul.pagination li a, ul.pagination li span { display:block; padding:6px 6px; } ul.pagination li span { color:#666; } ul.pagination li a:hover, ul.pagination li.active a { background:#1D1F1A;} /* FOOT * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ /* FOOT * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */