/*
Theme Name: Sirup
Theme URI: http://1000ff.de/wordpress-theme-sirup/
Description: A simple magazine and blog layout, easy to customize through an options page. Fast loading CSS-only theme with support for Gravatars and Sidebar Widgets. <a href="http://themes.1000ff.de">Working demo</a> / <a href="http://1000ff.de/sirup-faq/">FAQ</a>.
Version: 1.0.3
Tags: options page, magazine, two columns, right sidebar, fixed width, widget ready, simple, black, yellow, clean, valid XHTML


Color Notes:
  green color: #BDD900
  Yellow color: #ffff30
*/

* html {
height:1%;
}

/* prev background = px15 content px19/17 */
body {
font-size: 0.8em;
font-family: "Helvetica";
color: black;
height:100%;
background-color: black;
background-image:url(images/background.jpg); 
background-attachment: fixed;
background-position: center;
 background-repeat: no-repeat;
position:relative;
text-align:left;
width:930px;
margin:0 auto;
margin-top: 0px;


}


#page {
width:880px;
line-height:19px;  /*used to be 22 */
height:100%;
margin:20px;

margin-top: 20px;
padding-top: 0px;

}


.page_title {
font-family: arial;
width:600px;
}

#wrap {
height:100%;
}

/* header + navigation
--------------------------------------------------*/
#header {
/*height: 140px;
padding:0 0 20px; */
margin-top: 0px;
background-image:url(images/px19.png);
background-repeat:repeat;
width: 622px;

}

#headerimg {
background-image:url(images/header6.png);
background-repeat: no-repeat;
width: 622px;
height: 351px;
margin-bottom: 0px;
}
/*
#headerimg h1 {
margin: 14px 0 30px; 0;
border: 1px solid black;
}
*/
.headerimg h1 a {
font-family:arial;
font-size:1.2em;
font-weight:bold;
padding:1px 3px;

}

.page_title {
font-family:arial;
width:600px;
}

#navi2 {
margin:20px 0 0 0;
padding:0;

}

#navi2 a {
font-family: sans-serif;
font-size:1em;
font-weight:bold;
/*color: #FFFD87 */
color: black;

padding: 1px 3px;
}

#navi2 a:hover {
color: #FFFF30;
background-color: transparent;

}

.description {
font-size:0.8em;
margin:0;
padding:0;
float: right;
width: 300px; padding: 10px; margin-left: 10px;
}

#nav {
margin-top: 220px;

margin-left:10px;
}

#nav li  a {

list-style:none;
margin:0 10px 0 0;
padding:0;
margin-top: 226px;
font-family: sans-serif;
font-weight:bold;

}

.clear {
clear:both;
}

/* colors (#FFFD87 = yellow || #000 = black)
--------------------------------------------------*/
a {
text-decoration:none;
}

#content h1,h2,h3,h4 {
font-family:arial;
color: black;
background-color: #BDD900;
}

#content h1 a{
color: black;

line-height:37px;
padding:1px 3px;
}

#content h2 a,h3 a,h4 a {
line-height:29px;
padding:1px 3px;
}

body a,h3 a:hover,.navigation a:hover {
color: black;
/*background:#FFFD87;
to make outliunes have pattern
background-image:url(images/px19.png);
background-repeat:repeat; */
}

body a:hover,#content h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h3 a {
color:#FFFD87;
background:#000;
}

.postmetadata {
margin-bottom:50px;
}


/* h3 colors, somehow needed
--------------------------------------------------*/
h3 a {
color: black;
background: #000;
}

h3 a:hover {
color: #000;
background:#BDD900;
}



/* sidebar
--------------------------------------------------*/
#sidebar {
float:right;
width:230px;
height:100%;
background-image:url(images/px19.png);
background-repeat:repeat;
padding: 10px ;
margin-top: -351px;
font-family: sans-serif;
}

#sidebar ul,li  {
list-style-type:none;
padding-left: 2px;
background-image:url(images/px19.png);
background-repeat:repeat;
font-size: 12px;
line-height: 19px;
margin-bottom: 3px;
font-weight: bold;


}
#sidebar a {

}

#sidebar h3 {
margin-top:20px;
}

/* frontpage
--------------------------------------------------*/
.feature {
background-image:url(images/px19.png);
background-repeat:repeat;
float:left;
width:620px;
margin:0 10px 10px 0;
padding:0px;
font-family: "Helvetica";
}

.feature h1 {
margin-top:5px;
}

.feature p {
text-align:justify;
padding-right: 01px;
padding: 5px;
}

.feature img {

padding:0px;
}
.entry img {
padding: 5px;
padding-left: 0px;
}

#leadpic {
float:left;
margin:0 15px 6px 0;
}

#frontpage {
width:650px;
float:left;
margin-top:50px;
padding:0;
}

.frontcol img {
float:left;
border:5px solid #e9e9e9;
display:block;
background:transparent;
margin:3px 10px 0 0;
padding:0;
}

.frontcol img:hover {
float:left;
border:5px solid #fffd87;
display:block;
margin:3px 10px 0 0;
}

.frontcol {
width:300px;
float:left;
padding-right:30px;
font-family: "Helvetica";
}

.clearfloat {
display:block;
padding:0 0 30px;
}

Float Properties
.clearfloat:after {
display:block;
visibility:hidden;
clear:both;
height:0;
content:".";
}

.box-left {
background-image:url(images/px19.png);
background-repeat:repeat;
float:left;
width:270px;
margin:0 10px 20px 0;
padding:10px 20px;
}

.box-left h2 {
margin-top:15px;
}

.box-right {
background-image:url(images/px19.png);
background-repeat:repeat;
float:right;
width:270px;
margin:0 10px 20px 0;
padding:10px 20px;
}

.box-right h2 {
margin:15px 0;
}

/* search
--------------------------------------------------*/
#s {
font-family: Arial;
width:160px;
background-image:url(images/px19.png);
background-repeat:repeat;
border:1px solid #AFAFAF;
margin-top:3px;
padding:4px;
color: black;
}

/* comments
--------------------------------------------------*/
#comments,#respond {
width:590px;
}

.commentlist {
line-height:150%;
width:590px;
margin:0;
padding:0;
}

.commentlist li {
background-image:url(images/px19.png);
background-repeat:repeat;
list-style:none;
width:590px;
float:left;
margin:0 0 30px;
padding:20px;
}

.comment-btm {
padding:100px 20px;
}

.commentlist cite,.commentlist cite a,.commentlist cite a:visited {
font-style:normal;
}

.commentlist small {
margin-bottom:5px;
display:block;
font-size:87%;
}

#commentform {
margin-top:10px;
font:110%;
width:590px;
}

#commentform p {
margin:0;
padding:6px 0;
}

#commentform input {
width:250px;
background:#FFFFDF;
border:1px solid #AFAFAF;
margin-top:3px;
font-family:Arial;
padding:4px;
}

#commentform textarea {
width:500px;
height:150px;
background:#FFFFDF;
border:1px solid #AFAFAF;
margin-top:3px;
font-family:Arial;
line-height:1.5;
padding:4px;
}

#commentform textarea:focus,#commentform input[type="text"]:focus {
background:#fff;
}

#commentform #submit {
background: transparent;
border:1px solid #AFAFAF;
font:100% georgia;
color: black;
float:left;
width:160px;
height:28px;
cursor:pointer;
}

#gravatar {
width:400px;
}

#gravatar img {
float:left;
margin-right:10px;
}

/* previous + next links
--------------------------------------------------*/
.navigation {
width:600px;
padding-bottom:15px;
height:20px;
}

.navigation a {
color:#FFFD87;
background:#000;
padding:1px 3px;
}

/* wp-stuff
--------------------------------------------------*/
.wp-caption {
border:1px solid #ddd;
text-align:center;
background-color:#f3f3f3;
padding-top:4px;
optionalroundedcornersforbrowsersthatsupportit-moz-border-radius:3px;
-khtml-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
margin:10px;
}

.wp-caption img {
border:0 none;
margin:0;
padding:0;
}

.wp-caption p.wp-caption-text {
font-size:11px;
line-height:17px;
margin:0;
padding:0 4px 5px;
}

.aligncenter,div.aligncenter {
display:block;
margin-left:auto;
margin-right:auto;
}

/* footer
--------------------------------------------------*/
#footer {
clear:both;
padding-top:30px;
}

/* posts
--------------------------------------------------*/
.post,.entry {
font-family: "Helvetica";
width:620px;
text-align:justify;
}

.post { 
background-image:url(images/px19.png);
background-repeat:repeat;

}

.entry {
padding-right: 10px;
}
.post p{
padding: 10px;
}

.left,.alignleft {
float:left;
}

.right,.alignright {
float:right;
}

.prj {
}
.prj p{
padding: 5px;
text-align:justify;
padding-bottom: 20px;
}
.postleft {
width: 320px;

}
.postright {
float: right; 
top: 0px; 
width: 300px; 
margin-top: 0px; 
padding: 0px; 
margin-right: 0px; 
color: black; 
font-size: 12pt; 
font-weight: bold;
}
/* ================================================================ 
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 {
border-bottom:3px solid #BDD900;
border-left:80px solid #BDD900;
float:right;
font-family:arial,sans-serif;
height:50px;
padding-top:0;
position:relative;
top:270px;
width:542px;
z-index:100;
}
/*.menu {width:562px; height:50px;  position:relative; z-index:100; font-family:arial, sans-serif;  top: 181px; margin-right: 0px; float:right; border-left:60px solid #BDD900; background-color: none; padding-top: 40px;}
*/

/* hack to correct IE5.5 faulty box model */
* html .menu {width:746px; w\idth:745px;}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {padding:0;margin:0;list-style-type:none;}
.menu ul ul {margin: 0; width:70px;}
/* 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:76px; position:relative; list-style-type:none; padding-left:0px; margin-left: 0px; margin: 0; }
/* style the links for the top level */
.menu a, .menu a:visited {display:block;font-size:12px;text-decoration:none; color:#FFFD87; width:67px; height:50px;  background:black; padding-left:10px; line-height:29px; font-weight:bold; border-left:10px solid black;}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {width:70px; w\idth:70px;}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {border:1px solid red; width: 70px; }
/* style the second level hover */
.menu ul ul a.drop:hover{background:#000; width: 70px;}
.menu ul ul :hover > a.drop { width: 70px;}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background: black; width: 70px; border-left: 10px solid black; }
/* style the third level hover */
.menu ul ul ul a:hover {background:black;  }


/* 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:49px;left:0; width:80px; border-top:0px solid #000;}
/* another hack for IE5.5 */
* html .menu ul ul {top:50px;t\op:51px;}

/* position the third level flyout menu */
.menu ul ul ul{margin-left:90px; top:0px; width:70px;}

/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {left:-90px;}

/* 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 {display:block;font-size:12px;text-decoration:none; color:#FFFD87; width:70px; height:60px;   border-right:10px solid black; background:black; padding-left:10px; line-height:20px; font-weight:bold; border-bottom:1px solid #BDD900;}
/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited {width:60px;w\idth:60px;}

/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{color:white; background: black; border-left:10px solid #BDD900; border-right:10px solid black;}
.menu :hover > a, .menu ul ul :hover > a {color:white; background: black; border-right: 10px solid #BDD900; }

/* 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: black;
  border-left: 1px solid black;
}

.menu .current_page_item a {
  color: red;
  font-weight: bold;
  background: black;
}

.menu ul .current_page_item ul a {
  color: black;
  font-weight: normal;
  background: black;
}

.menu ul .current_page_item ul a:hover {
  background: gray;
}

.menu .current_page_item a:hover {
  background: black;
}

.zeroBorder {border: 1px dotted gray; padding: 0px; margin: 0px;}
.zeroBorder td {border: 1px dotted gray; padding: 0px;}
.zeroBorder th {border: 1px dotted gray; padding: 0px;}
.zeroBorder p { padding: 0px;}

/* column container */


	.colmask {
		position:relative;	/* This fixes the IE7 overflow hidden bug */
		float:left;
		width:620px;			/* width of whole page */
		overflow:hidden;		/* This chops off any overhanging divs */
	padding: 0px;
	background-image: none;
margin-top: -10px;
font-family: "Arial";
	}
	/* common column settings */
	.colright,
	.colmid,
	.colleft {
		float:left;
		width: 100%;			/* width of page */
		position:relative;
	}
	.col1,
	.col2,
	.col3 {
		float:left;
		position:relative;
		padding:0 0 1em 0;	/* no left and right padding on columns, we just make them narrower instead 
						only padding top and bottom is included here, make it whatever value you need */
		overflow:hidden;
	}
	/* 3 Column settings */
	.threecol {
			/* right column background colour */
			background-image: none;
	}
	.threecol .colmid {
		right:25%;			/* width of the right column */
			/* center column background colour */
	}
	.threecol .colleft {
		right:50%;			/* width of the middle column */
	/* left column background colour */
	}
	.threecol .col1 {
		width:46%;			/* width of center column content (column width minus padding on either side) */
		left:102%;			/* 100% plus left padding of center column */
		background-image:url(images/px19.png);
background-repeat:repeat;	
	}
	.threecol .col2 {
		width:21%;			/* Width of left column content (column width minus padding on either side) */
		left:31%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
		background-image:url(images/px19.png);
background-repeat:repeat;	
	}
	.threecol .col3 {
		width:21%;			/* Width of right column content (column width minus padding on either side) */
		left:85%;			/* Please make note of the brackets here:
						(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
background-image:url(images/px19.png);
background-repeat:repeat;	
	}