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

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

/*-------uncomment and ustomize if you want to use different fonts for different page elements
h2 { font-family: Times }
h3 { font-family: Courier }
h4 { font-family: Trebuchet }
p { font-family: Helvetica }
---------*/
 
 
 


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

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


p { font-size: 80%; }
td, ul, ol, { font-size: 100%; }

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

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

#widgetbox {margin-left:20px; margin-right:20px; width:200px; padding:0px}
#widgetbox p {margin: 0px 0px 0px 0px;}
#widgetbox ul {list-style: none; margin: 0 ;padding: 0 ;}
#widgetbox ul li {padding: 5px ; border: solid #004C99 1px; margin-top:0px; background-color: #f7f7ff}
#widgetbox ul li ul li {padding-left: 0px ; border:none; padding:0px; margin:0px}

#widgetbox li {margin-bottom:20px}
#widgetbox h4 {background: #eeeeff; margin: 0 0 40px 0px; padding-top: 5px; border-bottom: 1px solid #cccccc;}
#widgetbox h4 {font-size: 100%;} 


/*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:		#000999		blue seperaton lines, some links
highlight 1:		#9966cc		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:		#eeeeff		light 	 	lead elements
background 2:		#f7f7ff		light 		lightest bg
box underline:		#cccccc		light grey
---------------------*/


body {color: black}
a:active {color: red}

h1, h2, h3, h1 a:link, h2 a:link, h3 a:link, h1 a:visited, h2 a:visited, h3 a:visited {color: #000099}
ul li a:link, ul li a:visited {color: #000099}
p a:link, p a:visited {color: #000099}
a:link, a:visited {color: #000099}

p.postmetadata a:link, p.postmetadata a:visited {color: #0033CC}

#footer p a:link, #footer p a:visited {color: black}

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



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

a:link, 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:none }

#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}
#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: 0px solid #000999}


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

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

.left {float:left;}

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

.border1 {border: solid 1px #0066cc;}


/*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 blue;}
#header {border: 3px solid blue;}
#content {border: 3px solid blue;}
#sidebar{border: 3px solid blue;}
.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 #004C99;}
#sidebar {border-left: 3px solid #004C99;}



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

body {
	text-align:center;
	}


/* 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:24px; font-size:11px; font-weight:bold; background:transparent url(images/) 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:#000; text-decoration:none; padding:6px 20px 0 20px;height:24px;}
		#nav ul li a:hover,#nav ul li a.current{color:#3366CC	;	background:transparent url(images/) 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: 515px;}
		.narrowcolumn .postmetadata {text-align: right;}

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



/* 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: 230px; margin-top: 10px;	margin-left: 0px;}
		#sidebar form {margin: 0;}
		#sidebar #searchform #s {width: 108px; padding: 5px;}
		#sidebar #searchsubmit {padding: 0px;}


/*==================================my lovely custom CSS===============================================*/

.blogroll h2 {
font-size: 12px;
margin-bottom: 2px;
margin-top: 5px;
padding: 0px 0px 0px 10px;
}

.blogroll ul {
font-size: 12px;
margin: 0;
padding: 0px 0px 0px 10px;
}

.blogroll ul li {
padding: 0px 0px 0px 30px;
}

.cat-item h2 {
font-size: 14px;
margin-bottom: 2px;
margin-top: 8px;
padding: 0px 0px 0px 20px;
}

.cat-item ul {
font-size: 12px;
font-color: red;
margin: 0;
padding: 0px 0px 0px 20px;
}

.cat-item ul li {
padding: 0px 0px 0px 30px;
font-color: red
}


	

.widget_twitter {
background: url(images/news-content.gif) no-repeat bottom left;
height:auto !important;
height:130px;
min-height:130px;
}

#content-right .widget_twitter ul {
padding:10px 20px 0 10px;
}

#content-right .widget_twitter li {
list-style:none;
margin:5px 0 10px 0;
}

.widget_twitter div {
background: url(images/news-head.gif) no-repeat top left;
padding:10px 0;
}

.widget_twitter h2 {
color:#009BD5;
font-size:12px !important;
}

.widget_twitter .entry-meta {
display:block;
font-size:80%;
}

#content-right ul li.widget_twitter li a {
color:#87AE4A;
}

#content-right .widget_twitter h2 span {
color:#87AE4A;
float:right;
font-size:10px;
font-weight:normal;
padding:2px 8px 0px 0px;
text-align:right;
width:110px;
} 
/* style of the headers within the sidebar*/
		.sb_header {background: #eeeeff; 
                            margin: 0 0 10px 20px;	
                            padding-top: 5px; 
                           border-top: 1px solid #cccccc;
	                    border-bottom: 1px solid #cccccc;}

		.sb_header h2 {margin: 0 0 2px 0px; }
			
.post {margin: 0px 0px 0px 10px; 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 {float:left; border-top: 1px solid #cccccc;	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: 5px 3px; text-align: center;}

.entry form { text-align:center;}

select {width: 130px;}

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


div#SGM {
    width: 250px;
    height: 250px;
    border: solid 3px #e09b2c;
    margin: 10px 0 0 0;
}
div#SGM div.infoWindow {
    margin: 0 0 0 10px;
    line-height: 14px;
    font-size: 10px;
    color: #333;
}
div#SGM form {
    margin: 8px 0 0 0;
}
div#SGM input {
    padding: 2px;
    font-size: 10px;
}
div#SGM input.text {
    width: 100px;
    border: solid 1px #bbb;
}
div#SGM input.submit {
    background-color: #89cce2;
    border: solid 1px #53a5c0;
    margin-left: 2px;
}

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

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/final_drop.html
Copyright (c) 2005-2008 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

.menu {width:850px; height:30px; position:relative; z-index:100;border-right:px solid #000; font-family:arial, sans-serif;}



/* hack to correct IE5.5 faulty box model */

* html .menu {width:850px; w\idth:745px;}

/* remove all the bullets, borders and padding from the default list styling */



.menu ul {padding:0px;margin:0px;list-style-type:none;}



.menu ul ul {width:106px;}



/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */

.menu li {float:left;width:106px;position:relative;}



/* style the links for the top level */

.menu a, .menu a:visited {display:block;font-size:12px;text-decoration:none; color:#004C99; width:106px; height:30px; border:1px solid ; border-width:0px 0 0px 0px; background:; padding-left:0px; line-height:30px; font-weight:bold;}



/* a hack so that IE5.5 faulty box model is corrected */

* html .menu a, * html .menu a:visited {width:106px; w\idth:106px;}



/* style the second level background */

.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#7EB6FF url(http://www.cssplay.co.uk/menus/breadcrumbs/grey-arrow.gif) no-repeat 106px center;}



/* style the second level hover */

.menu ul ul a.drop:hover{background:#7EB6FF url(http://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) no-repeat 106px center;}



.menu ul ul :hover > a.drop {background:#CAE1FF url(http://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) no-repeat 106px center;}



/* style the third level background */

.menu ul ul ul a, .menu ul ul ul a:visited {background:#7EB6FF}



/* style the third level hover */

.menu ul ul ul a:hover {background:#CAE1FF}





/* hide the sub levels and give them a positon absolute so that they take up no room */

.menu ul ul {visibility:hidden;position:absolute;height:0;top:30px;left:0; width:106px;border-top:0px solid #000;}



/* another hack for IE5.5 */



* html .menu ul ul {top:30px;t\op:31px;}



/* position the third level flyout menu */

.menu ul ul ul{left:106px; top:-1px; width:106px;}



/* position the third level flyout menu for a left flyout */

.menu ul ul ul.left {left:-106px;}



/* style the table so that it takes no ppart in the layout - required for IE to work */

.menu table {position:absolute; top:0; left:0; border-collapse:collapse;;}



/* style the second level links */

.menu ul ul a, .menu ul ul a:visited {background:#7EB6FF; color:#000; height:auto; line-height:1em; padding:5px 10px; width:106px;border-width:1px; border-color:#004C99; font-weight:;}



/* yet another hack for IE5.5 */

* html .menu ul ul a, * html .menu ul ul a:visited {width:150px;w\idth:128px;}



/* style the top level hover */

.menu a:hover, .menu ul ul a:hover{color:#000; background:#7EB6FF; border-width:1px 1px 1px 1px; border-color:#004C99; }

.menu :hover > a, .menu ul ul :hover > a {color:#000; background:#CAE1FF; border-width:1px 1px 1px 1px; border-color:#004C99; }



/* make the second level visible when hover on first level list OR link */

.menu ul li:hover ul,

.menu ul a:hover ul{visibility:visible; }





/* keep the third level hidden when you hover on first level list OR link */

.menu ul :hover ul ul{visibility:hidden;}

/* make the third level visible when you hover over second level list OR link */

.menu ul :hover ul :hover ul{ visibility:visible;}







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

   This CSS is further CSS I have created specifically for Wordpress

   so that the current page is highlighted in two levels.

   If you want it in three levels let me know.



   Author: Isaac Rowntree

   Website: www.zackdesign.biz

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





.menu ul ul .current_page_item a {

  color: red;

  background: white;

  border-left: 1px solid black;

}



.menu .current_page_item a {

  color: red;

  font-weight: bold;

  background: white;

}



.menu ul .current_page_item ul a {

  color: white;

  font-weight: normal;

  background: black;

}



.menu ul .current_page_item ul a:hover {

  background: gray;

}



.menu .current_page_item a:hover {

  background: white;

}
_______________________
E-card
_____________________________

#ft_wpecards_image_select_list{
	width:300px;
}

.ft_wpecards_image_select_item {
	list-style:none;
	display:block;
	float:left;
	padding-right:10px;
}

.ft_wpecards_image_select_item span {
	display:block;
	text-align:center;
}

.entry #ft_wpecards_image_select_list li:before {
	content: none;
}

#ft_wpecards_sender_recipient_info {
	clear:left;
}

ul#ft_wpecards_sender , ul#ft_wpecards_recipient {
	list-style:none;
	float:left;
	width:180px;
}

.ft_wpecards_rname_item , .ft_wpecards_remail_item , 
.ft_wpecards_rname_field , .ft_wpecards_remail_field , 
.ft_wpecards_sname_item , .ft_wpecards_semail_item , 
.ft_wpecards_sname_field , .ft_wpecards_semail_field {
	float:left;
	clear:left;
}

.entry form {
	text-align:left;
}

.ft_wpecards_image_instructions, .ft_wpecards_message_instructions {
	font-weight:bold;
}

#ft_wpecards_message {
	width:300px;
	height:100px;
}

#ft_wpecards_message_group {
	float:left;
	clear:left;
	width:250px;
	margin-left:40px;
}

.ft_wpecards_error_item {
	color:red;
}
#ft_wpecards_body{
	background: #fff;
	border: 2px solid #404040;
	padding: 10px;
	float:left;
}

/* Wordpress calendar */
 .calnk a:hover {
         background-position:0 0;
         text-decoration:none;  
         color:#000000;
         border-bottom:1px dotted #000000;
         }
    .calnk a:visited {
         text-decoration:none;
         color:#000000;
         border-bottom:1px dotted #000000;
        }
    .calnk a {
        text-decoration:none; 
        color:#000000; 
        border-bottom:1px dotted #000000;
        }
    .calnk a span { 
        display:none; 
        }
    .calnk a:hover span {
        color:#333333; 
        background:#F6F79B; 
        display:block;
        position:absolute; 
        margin-top:1px; 
        padding:5px; 
        width:150px; 
        z-index:100;
        }
     .calendar-table {
        border:none;
        width:100%;
     }
     .calendar-heading {
        height:25px;
        text-align:center;
        border:1px solid #D6DED5;
        background-color:#E4EBE3;
     }
     .calendar-next {
        width:25%;
        text-align:center;
     }
     .calendar-prev {
        width:25%;
        text-align:center;
     }
     .calendar-month {
        width:50%;
        text-align:center;
        font-weight:bold;
     }
     .normal-day-heading {
        text-align:center;
        width:25px;
        height:25px;
        font-size:0.8em;
        border:1px solid #DFE6DE;
        background-color:#EBF2EA;
     }
     .weekend-heading {
        text-align:center;
        width:25px;
        height:25px;
        font-size:0.8em;
        border:1px solid #DFE6DE;
        background-color:#EBF2EA;
        color:#FF0000;
     }
     .day-with-date {
        vertical-align:text-top;
        text-align:left;
        width:60px;
        height:60px;
        border:1px solid #DFE6DE;
     }
     .no-events {

     }
     .day-without-date {
        width:60px;
        height:60px;
        border:1px solid #E9F0E8;
     }
     span.weekend {
        color:#FF0000;
     }
     .current-day {
        vertical-align:text-top;
        text-align:left;
        width:60px;
        height:60px;
        border:1px solid #BFBFBF;
        background-color:#E4EBE3;
     }
     span.event {
        font-size:0.75em;
     }
     .kjo-link {
        font-size:0.75em;
        text-align:center;
     }
     .event-title {
        text-align:center;
        font-weight:bold;
        font-size:1.2em;
     }
     .event-title-break {
        width:96%;
        margin-left:2%;
        margin-right:2%;
        margin-top:5px;
        margin-bottom:5px;
        text-align:center;
        height:1px;
        background-color:#000000;
     }
     .event-content-break {
        width:96%;
        margin-left:2%;
        margin-right:2%;
        margin-top:5px;
        margin-bottom:5px;
        text-align:center;
        height:1px;
        background-color:#000000;
     }
     .calendar-date-switcher {
        height:25px;
        text-align:center;
        border:1px solid #D6DED5;
        background-color:#E4EBE3;
     }
     .calendar-date-switcher form {
        margin:0;
        padding:0;
     }
     .calendar-date-switcher input {
        border:1px #D6DED5 solid;
     }
     .calendar-date-switcher select {
        border:1px #D6DED5 solid;
     }
     .cat-key {
        width:100%;
        margin-top:10px;
        padding:5px;
        border:1px solid #D6DED5;
     }