/*
Theme Name: Twokats
Theme URI: http://twokats.com/
Description: Custom Wordpress Theme - <a href="http://www.goldee.co.za">Goldee</a>
Version: 1.0
Author: <a href="http://www.goldee.co.za/">Goldee</a>
Tags: twokats, goldee
*/

@import url("css/reset.css");
@import url("css/base.css");

body { background: #ffffff url("images/bg.png"); background-repeat: no-repeat; background-position: top center; text-align: center; color: #333333; text-align: center; font-family: Arial, Verdana,Helvetica,sans-serif }
html > body { font-size: 11px; line-height: 1.8em; }

a { cursor: pointer; }
a:link { text-decoration: underline; color: #993399 }
a:visited { text-decoration: underline; color: #993399 }
a:hover { color: #ff9933 }

h1 { font-size: 1.8em; font-family: "Arial Narrow",Arial,sans-serif; font-weight: normal; color: #993999; margin-bottom: 0.8em; text-transform: lowercase }
#ui-sidebar h1 { font-size: 1.3em; color: #ff9933; font-family: "Arial Narrow",Arial,sans-serif; }
h2 { font-size: 1.1em; color: #cccccc; font-family: "Arial",sans-serif; font-weight: bold; margin-bottom: 0.8em; height: 1.6em }

h3#comments, form#comment fieldset legend { color: #ff9933; font-weight: bold; padding-bottom: 5px; margin-bottom: 1em }
h3#comments a[href="#comment"] { float: right; font-size: 0.8em; font-weight: normal; text-transform: none; text-decoration: none; }
* html h3#comments a { float: right; font-size: 0.8em; font-weight: normal; text-transform: none; text-decoration: none; }

form#comment fieldset ol li label span { color: #999999 }

blockquote { background-color: #f6f6f6; font-style: italic; color: #333333; margin-bottom: 2em; padding: 20px 15px 25px 5px }
blockquote .text { display: block; margin-left: 50px; margin-right: 30px }
blockquote .open { float: left; height: 45px; margin-right: 10px; margin-top: -30px; padding-top: 45px; margin-bottom: -50px; font-size: 700%; color: #cccccc; }
blockquote .close { float: right; height: 25px; margin-top: -30px; padding-top: 45px; font-size: 700%; color: #cccccc; }
* html blockquote { padding: 10px 0 10px 0 }
* html blockquote .text { margin: 10px }
* html blockquote .open { display: none }
* html blockquote .close { display: none }

pre { color: #666666; margin-bottom: 1em; overflow: auto; /*white-space: pre-wrap;*/ padding: 0.6em 1em 0.6em 1em; background-color: #f6f6f6; font-family: monospace }
* html pre { width: 590px }

div.page { margin-bottom: 2em }
div.post { margin-bottom: 2em; padding-bottom: 1em; background-image: url("images/contentSpacer.png"); background-repeat: no-repeat; background-position: bottom center }
div.post h2 a { /* color: #666666 */ }
div.post .meta { font-style: italic }
div.page div { font-size: inherit }

fieldset { width: 620px }
fieldset li span.req { color: red; margin-left: 0.3em; vertical-align: top }
fieldset legend { text-align: left; padding: 0.3em 0 0.3em 0 }

fieldset.horizontal { margin-top: 1em; float: none; border-style: none; text-align: right }
fieldset.horizontal ol { padding: 1em 0 0 0; list-style: none; }
fieldset.horizontal li { padding-bottom: 1em; padding-top: .5em; list-style: none; text-align: left }
fieldset.horizontal label { position: relative; float: left; width: 8em; margin-right: 0.7em; display: block; text-align: right; cursor: pointer }
fieldset.horizontal li.checkbox { padding: 0.1em 0 0.1em 0; text-align: center }
fieldset.horizontal li.checkbox input { margin-left: 11em; position: relative; float: left; margin-right: 0.7em; display: block; text-align: right; font-size: 0.8em }
fieldset.horizontal li.checkbox label { float: left; display: inline; width: 27em; text-align: left }


fieldset.vertical { margin-top: 1em; margin-bottom: 1em; width: 460px }
fieldset.vertical p { margin: 0 }
fieldset.vertical label { display: block; font-size: 0.9em; cursor: pointer }
fieldset.vertical ol { padding: 0; list-style: none; }
fieldset.vertical li { padding-bottom: 0.3em; padding-top: 0.2em; list-style: none }
fieldset.vertical li.checkbox { padding: 0.1em 0 0.1em 0 }
fieldset.vertical li.checkbox label { display: inline }
fieldset.vertical li.last { padding-bottom: 0.5em }
fieldset.vertical ol, fieldset.simple p { margin: 0.1em 0 0.1em 0.4em }
fieldset.vertical input[type="submit"] { margin-bottom: 0.8em }
* html fieldset.vertical legend { margin-left: -10px }

input[type="text"], input[type="password"], textarea { font-family: sans-serif; font-size: 11px; padding: 3px; background-color: #ffffff; border: 1px solid #993399 }
input[type="text"]:focus, input[type="password"]:focus, textarea:focus { background-color: #fdfeef; border: 1px solid #993399 }
input[type="submit"], input[type="button"] { padding: 5px; font-size: 1.2em; cursor: pointer; background-color: #993399; color: #ffffff; font-weight: bold; border: 0 }
input[type="submit"]:hover, input[type="button"]:hover { background-color: #9c4a9c; }

ol.comments { margin: 0; }
ol.comments li { margin: 0; padding: 10px; min-height: 150px; line-height: 1.5em; list-style: none; background-image: url("../images/contentSpacer.png"); background-repeat: no-repeat; background-position: bottom center }
ol.comments li.alt { background-color: #f2f2f2 }

* html ol.comments li { height: 150px }

ol.comments li .author { font-size: 0.8em; float: left; text-align: right; width: 80px; margin: 0 20px 0 10px }
ol.comments li .author img { border: 1px solid #cccccc; padding: 2px }
ol.comments li .author cite a, ol.comments li .author cite a:link { text-decoration: none; font-size: 1.1em }
ol.comments li .author span a, ol.comments li .author span a:link { text-decoration: none; color: #999999 }
ol.comments li .comment { margin-left: 110px }
ol.comments li div { font-size: 1em }
ol.comments li div p { margin-bottom: 1.3em; line-height: 1.7em }

* html ol.comments li .comment { margin-left: 120px }


#ui-page { margin: 0 auto; min-width: 780px; width: 65em; text-align: left }

#ui-head { font-family: "Arial Narrow",Arial,sans-serif; }
#ui-head ul { min-width: 780px; width: 65em; margin-left: 0; float: left; height: 40px; margin-top: 15px; background-image: url("images/navOff.png"); background-repeat: repeat-x }
#ui-head li { background-color: #835c93; border-right: 1px solid #770077; float: left; display: inline; list-style: none; height: 39px; }
#ui-head li a { height: 19px; max-height: 40px; font-size: 1.1em; color: #ffffff; font-weight: bold; text-decoration: none; width: .1em; padding: 10px 18px 10px 19px; display: block; list-style: none; background-image: url("images/navOff.png"); background-repeat: repeat-x; white-space: nowrap }
#ui-head > ul a { width: auto }
#ui-head ul li a { text-align: center; font-size: 13px; letter-spacing: 1px }
#ui-head ul li a:hover { text-decoration: underline }
#ui-head ul li.current_page_item a, body#contact li.page-item-8 a { background: #ff9933 url("images/navOn.png"); background-repeat: repeat-x }

 

* html #ui-head { width: 780px }
* html #ui-head { width: 780px }
* html #ui-head { width: 780px }
* html #ui-page { width: 780px }
* html #top { width: 780px }

* html #ui-head, * html #ui-head ul { width: 780px }
* html #home ul li.page_item a { width: 60px }
* html #whats-new ul li.page_item a { width: 90px }
* html #customers ul li.page_item a { width: 110px }
* html #interesting-stuff ul li.page_item a { width: 120px }
* html #about ul li.page_item a { width: 80px }
* html #contact ul li.page_item a { width: 80px }

#ui-main { margin-top: 10px; clear: both }

#ui-sidebar { margin-bottom: 20px; float: right; padding: 10px; color: #666666; width: 20em }
#ui-content { margin-bottom: 20px; float: left; padding: 10px 0 10px 0; width: 41em }

* html #ui-content { width: 500px; }
* html #ui-sidebar { width: 240px }

#ui-content strong { font-weight: bold }
#ui-content h1 a { text-decoration: none }
#ui-content p { color: #333333 }
#ui-sidebar p { margin-bottom: 1.8em }
#ui-sidebar ul, #ui-sidebar ol { list-style: none; margin: 1em 1em 1em 0; padding-bottom: 1.5em; background-image: url("../images/contentSpacer.png"); background-repeat: no-repeat; background-position: bottom center }
#ui-sidebar ul ul, #ui-sidebar ul ul { padding-bottom: 0; background: none }
#ui-sidebar ul:last-child, #ui-sidebar ol:last-child { background-image: none }

#ui-sidebar ul li { list-style: none; margin-left: 0 }
/* uncomment to enable bullets on list items on the sidebar
#ui-sidebar ul li ul li { list-style: disc;  }
*/

#ui-sidebar h2.widget { color: #faa249; text-transform: lowercase }

#ui-boxed { width: 500px; background-position: top center; background: transparent url("images/boxBg.png"); background-repeat: repeat-y; }
#ui-boxed div.top { height: 20px; background-position: top center; background-repeat: no-repeat; background: transparent url("images/boxTop.png"); }
#ui-boxed div.btm { height: 20px; background-position: bottom center; background-repeat: no-repeat; background: transparent url("images/boxBtm.png"); }
#ui-boxed h1 { margin-top: 20px }
#ui-boxed h2 { color: #333333; font-weight: bold; text-transform: lowercase; text-align: center }
#ui-boxed form { margin: 0 30px 0 30px }
#ui-boxed form fieldset ol li label span { color: #999999 }
#ui-boxed div.thanks, #ui-boxed div.error { margin: 0 30px 0 30px }
#ui-boxed div.error p { text-transform: uppercase; text-align: center; background-color: #EFEFEF; padding: 5px; color: #DD3300; font-weight: bold; font-size: 0.9em }

#ui-foot { color: #999999; border-top: 1px solid #efefef; clear: both; font-size: 0.9em; margin-bottom: 30px; padding-top: 5px }
#ui-foot a, #ui-foot a:link { color: #993399 }
#ui-foot a:hover { color: #ff9933 }
#ui-foot .end { float: right }

#top img { float: left }
#ui-util { float: right; padding-top: 60px; text-align: right; width: 610px }
#ui-util label { display: none }
#ui-util input[type="text"] { width: 180px; padding: 8px; border: 0; background-color: #faa249; color: #fff }
#ui-util input[type="image"] { vertical-align: bottom; width: 45px; height: 30px }

#rss a { padding-top: 10px; /* display: block; */ color: #666666; text-decoration: none; padding-right: 45px; height: 30px; background-image: url("images/rss.png"); background-repeat: no-repeat; background-position: top right }
#rss a:hover { text-decoration: underline }

img.alignleft { float: left; margin: 5px 10px 0 0; }
img.alignright { float: right; margin: 5px 0 0 10px; }
img.centered, img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }

i, em { font-style: italic }
b, strong { font-weight: bold }