/* 
Theme Name: Sketchy
Theme URI: http://emeraldinteraction.com
Description: An original theme by Grace Maloney for <a href="http://emeraldinteraction.com">Emerald Interaction</a>
Version: 1
Author: Grace Maloney
*/

* {margin:0; padding:0;}

body {font-size:62.5%; font:normal 12px verdana, arial, sans-serif; color:#0a2957; background:#fff;}

/* COLORS 
Dark Blue #062047
Yello Green 7D9F0E
Med Green 359F0E
Green 0E9F30
Purple Pink 9F0E7D
Reddish 9F0E35
Brick 9F300E
Dark Gold 9F780E
*/

/* TEXT */
@font-face {
 font-family: blackjack;
 src: url("fonts/black_jack.eot") /* EOT file for IE */
}
@font-face {
 font-family: blackjack;
 src: url("fonts/black_jack.ttf") /* TTF file for CSS3 browsers */
}
@font-face {
 font-family: neoretro;
 src: url("fonts/neoretro.eot") /* EOT file for IE */
}
@font-face {
 font-family: neoretro;
 src: url("fonts/neoretro.ttf") /* TTF file for CSS3 browsers */
}

h1 {font-size:28px;}
h1 {font-size:24px;}
h2 {font-size:22px;}
h3 {font-size:16px;}
h4 {font-size:15px;}
h5 {font-size:12px; font-weight:normal;}
p {line-height:1.5em; margin:0.8em 0;}

a {color:#7D9F0E; font-weight:bold; text-decoration:none;}
a:hover {border-bottom:1px dotted #062047; color:#9F0E35;}
a img, a.none:hover {border:none;}

img {border:none;}

/* CLASSES */
.marginauto {width:980px; margin:0 auto;}
.width300 {width:300px;}
.floatl {float:left;}
.floatr {float:right;}
.top10m {margin-top:10px;}
.top40p {padding-top:40px;}
.top20p {padding-top:20px;}
.top10p {padding-top:10px;}
.left50m {margin-left:50px;}
.left100m {margin-left:100px;}
.clear {clear:both;}
.pad20 {padding:20px;}
.right {text-align:right;}
.left {text-align:left;}
.center {text-align:center;}
.hide {display:none;}
.width220 {width:220px;}
.pad10 {padding:10px;}
img.bg {background:url(img/img-bg2.png) no-repeat; padding:2px 10px 5px; border:none;}
img.bg:hover {background:url(img/img-bg.png) no-repeat;}
.upper {text-transform:uppercase;}

/* HEADER */
#header {margin:0 auto; width:980px; padding:15px 0 0 0;}
body.about #header {background:url(img/web-designer-top.jpg) no-repeat top left;}

#globalnav a.rollover {display:block; width:192px; height:95px; background:url(img/emerald-interaction-web-design-3.png) no-repeat 0 0; margin:5px 0 0; float:right;}
#globalnav a.rollover:hover {background-position:0 -95px; text-decoration:none; border:none;}
#globalnav a.rollover span {display:none;}

#globalnav ul {list-style:none; text-align:right; margin-right:192px; padding-top:18px;}
#globalnav li {display:inline; text-transform:uppercase;}
#globalnav li a {color:#092247; font-size:12px; text-decoration:none; padding:5px 10px;}
#globalnav li.lang a {padding:20px 5px; font-size:12px; color:#7D9F0E;}
#globalnav li a:hover {border-bottom:none;}
#globalnav li.active a {color:#9F0E35; border-top:2px solid #9f0e35;} 
#globalnav li:hover a {color:#9F0E35;}
#globalnav li.block h1 {font:22px blackjack, verdana, sans-serif; color:#999; padding-top:10px; margin-right:38px; text-transform:lowercase;}

/* MAIN COLUMN */

#wrapper {margin:0 auto 0; width:980px;}
#colwrapper {width:100%; float:left;}
#col1 {margin:50px 0 0 392px; width:580px;}
#blog1, #contact {margin-right:260px;}
#intro h2, #about h2 {font:32px neoretro, verdana, sans-serif; color:#666; margin:0 0 20px 60px; text-align:right;}
#intro p {background:url(img/arrow-3.jpg) no-repeat; width:200px; padding:10px 0 10px 120px; margin-left:100px; font-weight:bold;}

#about p {margin-left:40px; text-align:justify;}
#about p.bold {font-weight:bold;}

#gayle, #joan, #pim {text-align:right; margin-bottom:30px; padding:0;}
p.visit a {text-transform:uppercase; background:#ddd; padding:4px; font-weight:bold;}
p.visit a:hover {background:#ccc;}

/* BLOG PAGE */
.post {padding:20px 0; clear:both; border-bottom:2px dotted #ddd;}
.post h2.title {font:28px neoretro, verdana, sans-serif; color:#666; float:right; width:384px; margin-bottom:10px;}
.post h2.title a {font-weight:normal;}
.post h2.title a:hover {border:none;}
.post p.title {float:right; width:384px; font:18px blackjack, verdana, sans-serif; color:#999; margin:0 0 0.2em 0; padding:0;}
.post .entry p, .post p.category {margin:10px 0 0 338px; text-align:justify; width:384px;}
.post .entry p.first {font-weight:bold;}
.post p.category {clear:both; font:16px blackjack, verdana, sans-serif; color:#999;}
.post p.category a {font:bold 12px verdana, sans-serif;}
img.postimg {border:5px solid #ddd; float:left;}

div.alignleft {border-bottom:2px dotted #ddd;}
div.alignleft h2.title {float:left; text-align:right;}
div.alignleft p.title {float:left; text-align:right;}
div.alignleft .entry p, div.alignleft p.category, p.alignleft {margin:10px 338px 0 0;}
div.alignleft img.postimg {float:right; text-align:right;}

/* BLANK PAGE */

#about div.post {border:none; margin-top:-20px;}
#about div.post h2.title {float:none; text-align:right; width:520px;}
#about div.post .entry h2 {margin:-15px 0 20px; padding:0; text-align:right;}
#about div.post .entry h2 span {font-size:80px; color:#9F0E35;}
#about div.post .entry p {margin:10px 0 0 60px; text-align:justify; width:520px;}
#about div.post ul {list-style:none; margin:10px 0 0 80px;}
#about div.post ul li {background:url(img/dot.jpg) no-repeat left 3px; padding:0 0 7px 25px; font-weight:bold;}

/* SINGLE PAGE */

div.single {margin-top:20px; clear:both;}
div.single img.postimg {float:left; margin:0 20px 20px 0;}
.single h1.title {font:32px neoretro, verdana, sans-serif; color:#9F0E35; margin-bottom:0.5em; width:620px; border-bottom:1px dotted #ccc; padding-bottom:8px;}
.single .entry p {text-align:justify;}
.single p.first {font-weight:bold;}
.single p.title {font:18px blackjack, verdana, sans-serif; color:#999; margin:0.5em 0 0.2em;}
.single p.category {font:16px blackjack, verdana, sans-serif; color:#999;}
.single p.category a {font:bold 12px verdana, sans-serif;}
p.navigation {clear:both;}
.single ol {margin:0.8em 0 0.8em 20px;}
.single ol li {margin:0.5em 0; line-height:1.3em;}


div.single h2 {font:44px blackjack, verdana, sans-serif; color:#666;}
div.single.center {width:520px; margin-left:100px;}
div.single.center ul {list-style:none; width:4em; margin-left:192px;}
div.single.center ul li, div.single ul.whoops li {background:url(img/search-arrow.jpg) no-repeat; padding:2px 5px 5px 30px; margin-left:20px;}
span.comment-box a {margin:0 5px; background:url(img/comment-box.jpg) no-repeat 0 5px; padding:10px 17px 20px; font:bold 16px verdana, sans-serif; color:#9F0E35; text-align:center;}
span.comment-box a:hover {border:none; color:#7D9F0E;}

.search-excerpt {background:#ddd; font-weight:normal;}
.search-terms {color:#666;}
div.single h4 {margin-bottom:10px;}
div.single ul.whoops li {list-style:none; margin-bottom:10px;}
ul#social {list-style:none;}
ul#social li {display:inline; padding:0 5px;}

/* SIDEBARS */

#feature {float:left; width:392px; margin-left:-980px; background:#fff;}
#feature div.floatl {margin:10px 20px 10px 0;}
#feature div.floatl img, #col1 img {border:5px solid #ddd;}
#feature div.floatl img:hover, #col1 img:hover {border:5px solid #999;}
#feature div.floatl a:hover {border:none;}
#feature ul {width:192px; list-style:none;}
#feature li {padding:5px; border-bottom:1px dotted #ddd;}
#feature li a {color:#092247; font-weight:normal;}
#feature li.active a {color:#9F0E35;}
#feature li.active a:hover {border:none;}
#feature img.borderimg {border:5px solid #ddd;}
#feature a.none img.borderimg:hover {border:5px solid #999;}
#feature a.none:hover {border:none;}
#feature h3 {padding-top:20px; font:28px blackjack, verdana, sans-serif;}
#feature h3 a:hover, #sider h3 a:hover {border:none;}
#feature h3, #feature p {width:370px;}
#feature ul.social, #sider ul.social {list-style:none; margin:10px 0;}
#feature ul.social li, #sider ul.social li {display:inline; padding:5px; border:none;}
#feature ul.social li a:hover, #sider ul.social li a:hover {border:none;}
#feature p {margin-left:20px;}
#feature p.up {background:url(img/arrow-up.jpg) no-repeat 12em 0; padding:10px 0 30px 20px; margin:0;}

#feature h5 span {font:18px blackjack, verdana, sans-serif; color:#666; margin:0; padding:0;}

#sider {float:left; width:270px; margin:30px 0 0 -270px; text-align:right;}
#sider h3 {font:28px neoretro, verdana, sans-serif; margin-top:30px; color:#9f0e35;}
#sider p span {font:16px blackjack, verdana, sans-serif; color:#999;}

#blogbar {float:left; width:245px; margin:50px 0 0 -245px; text-align:right;}
#blogbar h3, #singlebar h3 {font:28px blackjack, verdana, sans-serif; margin-top:20px;}
#blogbar ul {list-style:none;}
#blogbar ul.social li {display:inline;}
#blogbar ul.social li a:hover {border:none;}

/* SEARCHFORM */
#search {position:relative; width:245px; background:url(img/search-box-3.jpg) no-repeat top right; margin:0 0 30px 0;}
#search input#searchbox {width:135px; height:35px; border:none; background:transparent; padding:4px 45px 0 0; color:#062047; font:bold 12px verdana, arial, sans-serif;}
#search input#searchsubmit {position:absolute; width:20px; height:20px; right:16px; top:6px; text-indent:-2000em; overflow:hidden; cursor:pointer; border:none; background:transparent url(img/search-arrow.png) right top no-repeat; padding-left:10px;}
#search input#searchsubmit:hover {background-position:right -20px;}

/* MAIN */

#main {padding-bottom:40px; background:url(img/flowers.jpg) no-repeat 40px 1.4em; position:fixed; bottom:0; text-align:right;}
#main h5 {margin:-10px 740px 20px 90px; font:18px blackjack, verdana, sans-serif; color:#666;}
#main h5 a {padding-bottom:0;}
#main a.rollover {display:block; width:658px; height:326px; background:url(img/emerald-interaction-web-design3.png) no-repeat 0 0; margin-left:322px;}
#main a.rollover:hover {background-position:0 -327px; text-decoration:none; border:none;}
#main a.rollover span {display: none;}

/* FOOTER */

#footer {width:980px; background:#fff url(img/website-design-bottom.jpg) no-repeat right bottom; color:#092247; padding:0; min-height:105px; padding-top:20px;}
#footer h5 {font:18px blackjack, verdana, sans-serif; color:#999; margin-bottom:0.5em; line-height:130%; padding-top:30px;}
#footer p {padding-bottom:20px; margin:0;}

/* CONTACT FORM */

#contact {min-height:520px; background:url(img/contact-emerald.jpg) no-repeat top center; padding-top:25px; margin-top:20px;}
#contact p {margin:0 500px 125px 50px;}
#contactform {width:360px; margin-left:250px;}
#contactform fieldset, #contactform input, #contactform textarea {border:none; background:transparent;}
#contactform p {margin:0 0 5px; width:400px;}
#contactform p.text {margin-top:20px;}
#contactform label {text-align:right; width:60px; float:left; font-weight:bold;}
#contactform input {border-bottom:1px solid #092247; margin-left:10px; width:250px; color:#092247; font:normal 12px verdana, sans-serif; padding-bottom:2px;}
#contactform input#form_submit {border:1px solid #092247; width:50px; margin:5px 0 0 270px; color:#092247; font-weight:bold; background:#eee; cursor:pointer;}
#contactform input#form_submit:hover {background:#7D9F0E;}
#contactform textarea {border:1px solid #092247; margin-left:10px; width:250px; color:#092247; font:normal 12px verdana, sans-serif; padding:2px;}
#response {background:#9f3; border:1px solid #092047; padding:3px;}

/* COMMENTFORM */
#comments, #respond {margin:30px 0;}
#comments {font:32px neoretro, verdana, sans-serif; background:url(img/comment-box.jpg) no-repeat 8em 10px; padding:10px;}
#respond h3 {font:28px neoretro, verdana, sans-serif;}
.commentlist {list-style:none; width:720px; margin-bottom:2em; clear:both;}
.commentlist li.comment {border:1px solid #ccc; padding:20px;}
.commentlist li div.vcard {font:normal 24px blackjack, verdana, sans-serif;}
.commentlist li div.vcard cite.fn {font-style:normal;}
.commentlist li div.vcard img.avatar {border:5px solid #ddd; float:left; margin:0 20px 20px 0;}
.commentlist li div.comment-meta {font-size:11px; font-weight:bold; margin:0 0 0.5em;}
.commentlist li div.comment-meta a {font:bold 10px verdana, sans-serif; color:#7590a4;}
.commentlist li div.comment-meta a:hover, .commentlist li div.comment-meta a:active, .commentlist li div.comment-meta a:focus {color:#999;}
.commentlist li p {font:normal 12px verdana, sans-serif; color:#666; margin:0 0 0.5em 94px; }
.commentlist li ul {font-size:11px; list-style:square; margin:0 0 1em 2em; }
.commentlist li div.reply {font-size:11px;}
.commentlist li div.reply a {font-weight:bold;}
.commentlist li ul.children {list-style:none; margin:1em 0 0; text-indent:0; }
.commentlist li.even {background:#f6f6f6;}
.commentlist li.odd {background:#f9f9f9;}
.commentlist li.pingback {padding:1em;}
span.says {display:none;}

#respond small {font:18px blackjack, verdana, sans-serif; color:#666; padding-left:5px;}

#commentform label {font:bold 14px verdana, sans-serif;}
#author, #email, #url, textarea#comment {font:normal 12px verdana, serif; border:1px solid #999; width:280px; color:#092047; padding:3px;}
textarea#comment {width:384px; background:#eee;}
#postcomment, #submit {font:bold 12px verdana, sans-serif; background:#7d9f0e; color:#fff; padding:3px; border:1px solid #092047;}
#postcomment:hover, #postcomment:active, #postcomment:focus, #submit:hover, #submit:active, #submit:focus {background:#9F0E35; cursor:pointer;}


/* SLIDER */

#slider {position:relative; margin-top:40px; width:980px; height:530px;}
.scroll {height:530px; width:980px; overflow:auto; overflow-x:hidden; position:relative; clear:left;}

.scrollContainer div.panel {height:530px; width:980px;}

div.portfolio {width:100%; float:left;}
div.imgcol {margin-left:440px;}
div.imgcol img {border:5px solid #ddd; float:right; width:520px; margin-left:400px;}
div.imgcol h2 {font:40px neoretro, verdana, sans-serif; color:#fff; position:absolute; top:290px; right:5px; width:520px; text-align:right; z-index:20; background:transparent url(img/black-trans50.png) repeat;}
div.pbar {float:left; width:384px; margin:300px 0 0 -980px; padding-top:1.5em; padding-left:10px;}
div.pbar h3 {font:28px blackjack, verdana, sans-serif;}
div.pbar h2 {font:32px neoretro, verdana, sans-serif; color:#000; margin-bottom:5px;}
div.pbar p {margin:0 0 1em 0;}
div.pbar p.whoops {background:url(img/search-arrow-up.jpg) no-repeat; padding:5px 0 10px 25px;}

ul.navigation {list-style:none; width:384px; position:absolute; top:-20px; z-index:1001; background:#fff;}

ul.navigation li {display:inline; float:left; padding:0 18px 18px 0;}
ul.navigation li img {border:5px solid #ddd;}
ul.navigation li img:hover {border:5px solid #999;}
ul.navigation li a:hover {border:none;}
ul.navigation li.first {}
ul.navigation a:focus {outline: none;}
ul.navigation li.last {padding-bottom:5px; margin-bottom:10px; display:block; float:none;}
ul.navigation li h3 a {font:32px blackjack, verdana, sans-serif;}
ul.navigation a.selected img {border:5px solid #9F0E35;}
ul.navigation li h3 a.selected {color:#9f0e35;}
ul.navigation li h3 span {font:18px blackjack, verdana, sans-serif; color:#666;}

.scrollButtons {display:none;}

/* SLIDESHOW */

#slideshow {position:relative; height:480px;}
#slideshow IMG {position:absolute; top:0; right:0; z-index:8;}
#slideshow IMG.active {z-index:10; opacity:1.0;}
#slideshow IMG.last-active {z-index:9;}

@media print {
#header, #blogbar, #feature, #footer p {display:none;}
#col1 {margin:50px 200px 0; width:580px;}
#blog1, #contact {margin:0 200px;}
#footer h5 {text-align:center;}

#contact {min-height:520px; background:#fff; padding-top:25px; margin-top:20px;}
#contact p {margin:20px 0 20px 100px; font:24px blackjack, verdana, sans-serif;}
#contactform {width:360px; margin-left:0;}
#contactform fieldset, #contactform input, #contactform textarea {border:none; background:transparent;}
#contactform p {margin:0 0 5px; width:400px;}
#contactform p.text {margin-top:20px;}
#contactform label {text-align:right; width:60px; float:left; font:16px blackjack, verdana, sans-serif;}
#contactform input {border:1px solid #999;}
#contactform textarea {border:1px solid #999;}
#contactform input#form_submit {border:1px solid #999; width:50px; font-weight:bold; background:#fff;}

}