/*FONT FAMILY===========================================================================================*/

body, td, th {font-family: Verdana, Arial, Helvetica, sans-serif; }
        /*Arial & Helvetica are almost undistinguishable*/

/*-------uncomment and customize if you want to use different fonts for different page elements----*/
h1 { font-family: Verdana, Arial, Helvetica, sans-serif; }
h2 { font-family: Verdana, Arial, Helvetica, sans-serif; }
h3 { font-family: Verdana, Arial, Helvetica, sans-serif; }
h4 { font-family: Verdana, Arial, Helvetica, sans-serif; }
p { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:lighter}

 


/*FONT SIZE=======================================================================================*/

h1 { font-size: 180%; font-weight:lighter} /* - header or special effects */
h2 { font-size: 140%; font-weight:lighter} /* content headings */
h2 a:link, h2 a:visited {font-weight:lighter}
h3 { font-size: 120%; font-weight:lighter } /* content sub-headings */
h4 { font-size: 100%; font-weight:lighter } /* list headings, same size as (p) */
h5 { font-size: 100%; } /* list headings 2, same size as (p) */


p, ul, ol, td { font-size: 80%; }
ul p { font-size: 120%; font-weight:lighter }  /* size for p whithin frame e.g */

ul ul { font-size: 85%; } /*- actually only necessary if the ul size is not 100%  */
td p { font-size: 80%; }



input {
         background-color: #ffffff;
         color: #5b2064;
         border-top: 1px solid #5b2064; 
         border-left: 1px solid #5b2064;
         border-bottom: 1px solid #5b2064; 
         border-right: 1px solid #5b2064;
         font-family: Verdana, Arial, Helvetica, sans-serif;
         font-size: 85%;
}


table.invert {
	border-width: 1px 1px 1px 1px;
	border-spacing: 0px;
	border-style: solid solid solid solid;
	border-color: #5b2064 #5b2064 #5b2064 #5b2064;
	border-collapse: collapse;
	background-color: #E0DBEA;
}
table.invert th {
	border-width: 1px 1px 1px 1px;
	padding: 1px 1px 1px 1px;
	border-style: solid solid solid solid;
	border-color: #5b2064 #5b2064 #5b2064 #5b2064;
	background-color: #E0DBEA;
	-moz-border-radius: 0px 0px 0px 0px;
        padding:5px;
}
table.invert td {
	border-width: 1px 1px 1px 1px;
	padding: 1px 1px 1px 1px;
	border-style: solid solid solid solid;
	border-color: #5b2064 #5b2064 #5b2064 #5b2064;
	background-color: #E0DBEA;
	-moz-border-radius: 0px 0px 0px 0px;
        padding:5px;
}



.moretext {font-size: 80%;
          color: #009900 }

/*WIDGETBOX=============================================================================================*/

#widgetbox {margin-left:20px; margin-right:10px; width:270px; padding:3px}
#widgetbox p {margin: 0px 0px 0px 0px;}
#widgetbox ul {list-style: none; margin: 0 ;padding: 0 ;}
#widgetbox ul li {padding: 5px ; border: solid #5b2064 0px; margin-top:0px; background-color: #ffffff}
#widgetbox ul li ul li {padding-left: 0px ; border:none; padding:0px; margin:0px}

#widgetbox li {margin-bottom:20px}
#widgetbox h2 {background: #ffffff; margin: 0 0 20px 0px; padding-top: 5px; border-bottom: 1px solid #5b2063;}
#widgetbox h2 {font-size: 130%; font-weight:lighter} 


/*FONT COLORS=============================================================================================*/
/*--------------------
below is the color scheme used - it's for info only, if you want to change you need to change below (after the body tag)
lead  color: 		#0066cc  	blue		h1, h2, h3
second color:		#dadada		purple		seperaton lines, some links
highlight 1:		#dadada		purple		not used but matching color - if you want to highlight something
highlight 2:		#990000		red		not used but matching color - if you want to highlight something

background 1:		#dadada		light 	 	lead elements
background 2:		#f7f7ff		light 		lightest bg
box underline:		#cccccc		light grey
---------------------*/


body {color: #5b2064}
a:active {color: #5b2064}

h1, h1 a:link, h1 a:visited {color: #5b2064}
h2, h2 a:link, h2 a:visited {color: #5b2064}
h3, h3 a:link {color: #009900}
h3 a:visited {color: #5b2064}

ul li a:link {color: #5b2064}
ul li a:visited {color: #009900}
p a:link {color: #5b2064} 
p a:visited {color: #009900}
a:link {color: #5b2064}
a:visited {color: #009900}


p.postmetadata a:link, p.postmetadata a:visited {color: #5b2064}

#footer p a:link, #footer p a:visited {color: #5b2064}

#sidebar h1, #sidebar h1 a:link, #sidebar h1 a:visited {color: #5b2064}
#sidebar h2, #sidebar h2 a:link, #sidebar h2 a:visited {color: #5b2064}
#sidebar h3, #sidebar h3 a:link {color: #5b2064}
#sidebar h3 a:visited {color: #5b2064}

#sidebar ul li a:link {color: #5b2064}
#sidebar ul li a:visited {color: #5b2064}
#sidebar p a:link {color: #5b2064} 
#sidebar p a:visited {color: #5b2064}
#sidebar a:link {color: #5b2064}
#sidebar a:visited {color: #5b2064}

/*-------uncomment and customize below example if you want to add colors 
h2, h2 a:link, h2 a:visited { #990000 }
h3, h3 a:link, h3 a:visited { #9966cc }
---------*/



/*LINK STYLE other than color====================================================*/

a:link {text-decoration:none }
a:visited {text-decoration:none }
p a:link, p a:visited {text-decoration:none } /* orphan text remains undecorated */

a:hover {text-decoration:underline }
h1 a:hover {text-decoration:underline }

#footer p a:link, #footer p a:visited {text-decoration: none}
#footer p a:hover {text-decoration:underline}

/*MARGINS, BORDERS AND PADDING for elements (not for containers)===========================================*/

body {margin:0px; padding: 0px;}
ul, ol {list-style: outside}
ol {list-style-type: lower-roman}

ul.NoBullet {list-style-type: none} /*when you dont want a bullet on your list... */

#sidebar ul, #sidebar ol {margin-left: 0;	padding-left: 0; list-style-type: none; padding-right:7px;	}


h1, h1 a:link, h1 a:visited, h1 a:hover {margin-top:0}
h2, h2 a:link, h2 a:visited, h2 a:hover {margin-top:0}
h3, h3 a:link, h3 a:visited, h3 a:hover {margin-top:0}
h4, h4 a:link, h4 a:visited, h4 a:hover {margin-top:0}


a img {border: 2px solid #ffffff}
a img.invert {border: 1px solid #5b2064}

#highlightit a img{border: 1px solid #ffffff; 
        /* Required for IE 5, 6, 7 */
        /* ...or something to trigger hasLayout, like zoom: 1; width 100% ; */
        zoom: 1; 

        /* Theoretically for IE 8 & 9 (more valid) */
        /* ...but not required as filter works too */
        /* should come BEFORE filter */
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

        /* This works in IE 8 & 9 too */
        /* ... but also 5, 6, 7 */
        filter: alpha(opacity=100);

        /* Older than Firefox 0.9 */
        -moz-opacity:1.0;

        /* Safari 1.x (pre WebKit!) */
        -khtml-opacity: 1.0;

        /* Modern!
        /* Firefox 0.9+, Safari 2?, Chrome any?
        /* Opera 9+, IE 9+ */
        opacity: 1.0;
}

#highlightit a:hover img{border: 1px solid #5b2064; 
        /* Required for IE 5, 6, 7 */
        /* ...or something to trigger hasLayout, like zoom: 1; */
        zoom: 1; 

        /* Theoretically for IE 8 & 9 (more valid) */
        /* ...but not required as filter works too */
        /* should come BEFORE filter */
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";

        /* This works in IE 8 & 9 too */
        /* ... but also 5, 6, 7 */
        filter: alpha(opacity=75);

        /* Older than Firefox 0.9 */
        -moz-opacity: 0.75;

        /* Safari 1.x (pre WebKit!) */
        -khtml-opacity: 0.75;

        /* Modern!
        /* Firefox 0.9+, Safari 2?, Chrome any?
        /* Opera 9+, IE 9+ */
        opacity: 0.75;
}

/*
a img.highlightit:hover img{
color: red; /* Dummy definition to overcome IE bug */
} */


/*MULTI-USE TAGS==========================================================================================*/

.center {text-align: center;}
.alignleft {text-align: left;}
.alignright {text-align: right;}
.justify {text-align: justify;}

.left {float:left;}

.bg1 {background: #ffffff}
.bg2 {background: #f7f7ff}

.border1 {border: solid 1px #5b2064;}




/*IMAGE TAGS==========================================================================================*/


/*the below will make images float left if they have no other tags (like 'right')*/
img {float: left; margin:0px 5px 0px 0px}
/*the below will make images float right but you have to add 'class="right" inside the image tag)*/
img.right {float: right; margin: 0px 0px 0px 5px}

#header img {border: none}


/*=========================================================================================
===========================================================================================
===========================================================================================
*/




/* DIV FRAMING =============================================================
un-comment the next few lines and you will see colored borders around the main elements on your site - this helps you to identify which DIV you need to change if you want to change the layount (e.g. make the page or the sidebar wider)==========================================================================*/

/*
#page {border: 3px solid green;}
#header {border: 3px solid red;}
#content {border: 3px solid brown;}
#sidebar{border: 3px solid aqua;}
.post {border: 3px solid #0066cc;}
#comments {border: 3px solid black;}
.commentlist {border: 3px solid yellow;}
*/


/* change the color or the width of the line below the header and left of the sidebar*/
#header {border-bottom: 3px solid #5b2064;}
#sidebar {border-left: 3px solid #5b2064;}



/* not much in the body tag================================================
==========================================================================*/

body 

p {
   text-align: justify;
   }


/* BEGIN DIVS and other layout stuff========================================
this is the tricky bit - here you change your layout - make sure you back-up before changing ==========================================================================*/

#page {margin:auto;	margin-top:20px; width: 850px; text-align:left;}

#header {position:relative;	width: 850px; margin-top:10px; margin:auto;}

/* menu bar in header section*/
#nav{position:relative; display:block; height:26px; font-size:15px; font-weight:bold; background:transparent url(--) repeat-x top left;}
		#nav ul{margin:0; padding:0; list-style-type:none; width:auto;}
		#nav ul li{display:block; float:left;}
		#nav ul li a{display:block; float:left;color:#FF9114; text-decoration:none; padding:6px 20px 0 20px;height:26px;}
		#nav ul li a:hover,#nav ul li a.current{color:#5b2064;	background:transparent
 url(images/--.gif) repeat-x top left;}

#content {padding-left: 10px; padding-right: 0px; margin-top: 10px;}

.narrowcolumn {float: left;	padding: 0 0px 20px 45px;	margin: 0px 0 0; width: 525px;}
		.narrowcolumn .postmetadata {text-align: right;}

/* Form and input definitions for Narrow Column Area */

.narrowcolumn form {margin: 0;}

.narrowcolumn #searchform #s {width: 300px; padding: 2px; border-top: 1px solid #5b2064; 
         background-color: #E0DBEA;
         border-left: 1px solid #5b2064;
         border-bottom: 1px solid #956F9B; 
         border-right: 1px solid #956F9B}

/* to change the search button */



.narrowcolumn #searchsubmit {background-color: #5b2064;
         color: #ffffff; font-family: "Arial Black", Arial, sans-serif;
         font-size: 85%; 
         font-weight: 900;
	 padding: 1px; padding-left: 4px; padding-right: 4px; border-top: 1px solid #956F9B; 
         border-left: 1px solid #956F9B;
         border-bottom: 2px solid #E0DBEA; 
         border-right: 2px solid #E0DBEA;}


.widecolumn {float: left;	padding: 0 0px 20px 45px;	margin: 0px 0 0; width: 840px;}



/* navigation here refers to the link to the next on previous post (not needed if you do pages only)*/
.navigation {display: block; text-align: center; margin-top: 10px; margin-bottom: 10px;}

/* sidebar refers to the main element on the right hand side of the page which contains all navigation links*/
#sidebar{position:relative;	float:right; padding: 0px 0 0px 0;	width: 290px; margin-top: 10px;	margin-left: 0px;}

#sidebar form {margin: 0;}

/* to change the search box in sidebar*/

#sidebar #searchform #s {background-color: #E0DBEA; width: 150px; padding: 2px; border-top: 1px solid #5b2064; 
         border-left: 1px solid #5b2064;
         border-bottom: 1px solid #956F9B; 
         border-right: 1px solid #956F9B}

/* to change the search button in sidebar */

#sidebar #searchsubmit {background-color: #5b2064;
         color: #ffffff; font-family: "Arial Black", Arial, sans-serif;
         font-size: 85%; 
         font-weight: 900;
	 padding: 1px; padding-left: 3px; padding-right: 3px;border-top: 1px solid #956F9B; 
         border-left: 1px solid #956F9B;
         border-bottom: 2px solid #E0DBEA; 
         border-right: 2px solid #E0DBEA;}

/* style of the headers within the sidebar*/
		
.sb_header {background: #eeeeff; margin: 0 0 20px 20px;	padding-top: 5px; border-top: 1px solid #cccccc;	border-bottom: 1px solid #cccccc;}
.sb_header h2 {margin: 0 0 2px 0px; }
			
.post {margin: 0 0 40px 0; text-align: left; display:block;	clear:both;}
	
.postmetadata ul, .postmetadata li {display: inline; list-style-type: none;	list-style-image: none;}

.blockquote {margin: 15px 30px 0 10px; padding-left: 20px; border-left: 5px solid #ddd;}
		.blockquote cite {margin: 5px 0 0; display: block;}

#footer {border-top: 1px solid #000000;	padding: 0;	margin: 20px 0 0 0;	clear:both;	width: 850px;}
		#footer p {margin: 0; padding: 5px 10px; text-align: center;}

#comments { clear:left;}

.commentlist {padding: 0; text-align: left;	margin-left: 0;}
	.commentlist li {margin: 15px 0 5px; padding: 5px 10px 5px;	list-style: none;}
	.commentlist p {margin: 10px 5px 10px 0;}
	.commentlist p {text-transform: none;}

#commentform p {margin: 5px 0;}
#commentform input {width: 170px; padding: 5px;	margin: 5px 5px 0px 0;}
#commentform textarea {width: 500px;	padding: 0px;}
#commentform #submit {margin: 0; float: right;}

.commentmetadata {margin: 0; display: block;}

.nocomments {text-align: center; margin: 0;	padding: 0;}

#searchform {margin: 10px auto;	padding: 1px 1px; color: #5b2064; text-align: left;}

.entry form { background-color: #ffffff;
         color: #5B2064;
         font-size: 85%;text-align:left;}

select {width: 130px;}

.alt {background-color: #f8f8f8; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; margin: 0; padding: 10px;}

/*  
Theme Name: Drikatruu Jelly
Theme URI: http://www.drikatruu.com/
Description: Widget ready, customizable CMS theme with commented template files for easy customization.
Version: 1.1w
Author: Thomas Natter
Author URI: http://www.drikatruu.com/
*/