/*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 }

h6 { font-family: Helvetica }

p { font-family: Helvetica }

---------*/

 





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



h1 { font-size: 160%; } /* - header or special effects */

h2 { font-size: 135%; } /* content headings */

h3 { font-size: 120%; 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) */

h6 { font-size: 100%; font-weight:bold}




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



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

td p { font-size: 100%; }



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



#widgetbox {margin-left:10px; margin-right:5px; width:300px; padding:0px}

#widgetbox p {margin: 0px 0px 0px 0px;}

#widgetbox ul {list-style: none; margin-left: 0 ;padding: 0 ;}

#widgetbox ul li {padding: 5px ; border: solid #DEDEDE 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:10px}

#widgetbox h2 {background: #eeeeff; margin: 0 0 10px 0; padding-top: 0px; border-bottom: 1px solid #DEDEDE;}

#widgetbox h2 {font-size: 110%; color: #333333} 

#widgetbox h3 {background: #eeeeff; margin: 0 0 10px 0; padding-top: 0px; border-bottom: 1px solid #DEDEDE;}

#widgetbox h3 {font-size: 100%; color: #333333} 


#menubox {margin-left:0px; margin-right:20px; width:305px; padding:0px}

#menubox ul {list-style: none; margin: 0 ;padding: 0 ;}

#menubox ul li {padding: 1px ; border: 0px; margin-top:0px; background-color: #f7f7ff}

#menubox ul li ul li {padding-left: 0px ; border:none; padding:0px; margin:0px}

#menubox a:link, a:visited {color: #ffffff}

#menutbox p {margin: 10px 10px 10px 10px;}

#menubox h2 {background: #eeeeff; width:260px; margin: 10px 0 20px 0; border-bottom: 1px solid #DEDEDE;}

#menubox h2 {font-size: 110%; color: #333333} 



#adbox {margin-left:10px; margin-right:5px; margin-top:5px; width:295px; text-align:left;}

#adbox p {font-size: 70%; color: #333333}

#adbox p {padding: 5px ; border: solid #DEDEDE 1px; background-color: #eeeeff;}

#adbox p a:link, a:visited {text-decoration:none }

#adbox p a:link, p a:visited {text-decoration:none }


#pbox {margin-left:0px;}

#pbox p {margin-top:70px;}



/*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:		#88bb22		green		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

background-image : url(images/bg.jpg);

background-repeat : repeat-x;

background-color : #486688;



}

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: #0066cc}

ul li a:link, ul li a:visited {color: #0066cc}

p a:link, p a:visited {color: #0066cc}

a:link, a:visited {color: #0066cc}



p.postmetadata a:link, p.postmetadata a:visited {color: #88bb22}



#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 { #990000 }

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:underline } /* 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:10px; 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: 1px solid #0066cc}

/*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 15px 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 #88bb22;}*/

#sidebar {border-left: 2px solid #EFEFEF;}

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

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

body {

	text-align:center;

	font-size : 1em;

	}

/* 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;

width: 826px;

color : #333;

background : #f6f6ea url(images/bbg.jpg);

margin:auto;

padding-top : 30px;

padding-left : 20px;

}


#header {

position:relative;	

width: 847px; 

height : 150px;

margin:auto; 

padding-top:0px; 

padding-right : 1px;

background : #fff url(images/headbg.jpg);

background-repeat: no-repeat

}

/* menu bar in header section*/

#nav{position:relative; display:block; width: 847px;height:24px; top: 153px; font-size:14px; font-weight:bold; background:transparent url(images/bgOFF.gif) 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:#fff;	background:transparent url(images/bgON.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: 480px;}

		.narrowcolumn .postmetadata {text-align: right;}



.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: 320px; margin-top: 0px;margin-left: 0px;}

		#sidebar form {margin: 0;}

		#sidebar #searchform #s {width: 108px; padding: 5px;}

		#sidebar #searchsubmit {padding: 0px;}

.box{

position:relative;

float:left;

width:230px;

background:#E2EBF4 url(images/bgbottomright_22.jpg) bottom right no-repeat;

border:1px solid #E4E4E4;

padding:10px;

color:#315E88;

font-size:11px;

margin-top:20px;

margin-right:5px;

}
		

/* 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 { 

position:relative;	

width: 850px; 

height: 33px;

margin: -10px 30px 0 -22px;

background : #fff url(images/footer.gif);

background-repeat: no-repeat;

} 

#footer p { 

text-align : center;

padding-top : 10px;

font-size : 9px;

} 

#footer a { 

color : #486687;

}

#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;}

/*  

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/

*/

#anchor1 {

position: relative;

margin: auto;

float: left;

width : 183px;

height : 201px;

background-image : url(images/red.jpg);

}

#anchor1:hover {

background-image : url(images/bg_red.jpg);

} 

#anchor2 {

float: left;

margin-left: 183px;

position: relative;

width : 183px;

height : 201px;

background-image : url(images/green.jpg);

}

#anchor2:hover {

background-image : url(images/bg_green.jpg);

} 


#anchor3 {

margin-left: 183px;

position: relative;

width : 183px;

height : 201px;

background-image : url(images/blue.jpg);



}

#anchor3:hover {

background-image : url(images/bg_blue.jpg);

} 

#anchor4 {

float: left;

margin-left: 0px;

position: relative;

width : 183px;

height : 201px;

background-image : url(images/indigo.jpg);

}

#anchor4:hover {

background-image : url(images/bg_indigo.jpg);