/*** www.baloghjudit.hu stylesheet ***/
/*** ********** ********** ********** ********** LAYOUT  (and some colours) ********** ********** ********** ********** ***/

body{
  background-image: url(../assets/bodystripes.png);
  background-repeat: repeat;
  min-width:778px;
  text-align:center;
}

.clear{
  clear:both;
/*** these next attributes are designed to keep the div
height to 0 pixels high, critical for Safari and Netscape 7 ***/
  height:1px;
  overflow:hidden;
  line-height:1%;
  font-size:0px;
  margin-bottom:-1px;
}

* html .clear{height:auto;margin-bottom:0} /*** stops IE browsers from displaying the clear div ***/

div#wrapper{
width:766px;
margin: 13px auto 0px auto;
padding: 6px;
background: #E1E1E1;
text-align:center;
border-right: 2px #777 solid;
border-bottom: 2px #777 solid;
}

div.headerpic, #sorminta {margin: 0; padding:0; display:block; line-height:0;}

#sorminta{
border-top: 2px #B8B8B8 solid;
padding-bottom: 4px;
}

div.headerpic a {
display:block; /* This prevents the anchor from extending under the image */
line-height:0;
}

div#footer{
background: transparent;
margin: 40px auto 0 auto;
clear: both;
width:778px;
overflow:hidden;
text-align:center;
}

div#footer p{
text-align:center;
font-size: 0.7em;
color: #CCC;
}

div#footer a{
font-weight: bold;
}

span.csel {
display:none;}

/*** ********** ********** ********** ********** END			LAYOUT (and some colours)   ********** ********** ********** ********** ***/



/*** ********** ********** ********** ********** MENU ********** ********** ********** ********** ***/
/* ================================================================ 
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/simple_vertical.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

div#multinav {
margin:0;
position:relative; 
z-index:100;
height: 31px;  
text-align:center;
border-top: 3px #E1E1E1 solid;
border-bottom: 3px #E1E1E1 solid;
}

/* Get rid of the margin, padding and bullets in the unordered lists */
#pmenu, #pmenu ul {
padding:0; 
margin:0; 
list-style-type: none;}

ul#pmenu{
background: #444444;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}

/* Set up the link size, color and borders */
#pmenu a, #pmenu a:visited {
text-decoration:none; 
text-align:center;
background: transparent url("../assets/menuseparator.gif") bottom right no-repeat; /* If bg colour is set for anchor, li.drop will be hidden behind */
color: #DDD;
display: block;
float: left;
margin: 0;
padding: 10px 8px; /*** Vertical padding gives the menu buttons their height ***/
text-decoration: none;
font-weight:normal;
width: 110px;
line-height: 1em;
}

/* Set up the sub level borders */
#pmenu li ul li a, #pmenu li ul li a:visited {
background-image:none;
background: #444;
border-bottom: 1px solid #333;
border-left: 6px solid #D1D1D1;
border-right: 1px solid #333;
}

/* Set up the list items */
ul#pmenu li {
text-align:center;
float: left;
font: 68% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
margin: 0;
padding: 0;
}

#pmenu li ul li {
font-size:100%;
}

/* For Non-IE browsers and IE7 */
#pmenu li:hover {
position:relative;
}

/* Make the hovered list color persist */
#pmenu li:hover > a {
background:#2B2B2B; color:#FFF;}
/* Set up the sublevel lists with a position absolute for flyouts and overrun padding. The transparent gif is for IE to work */
#pmenu li ul {
display:none;}
/* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */
#pmenu li:hover > ul {
display:block; 
position:absolute; 
top:-11px; 
left:80px; 
padding:10px 30px 30px 30px; 
background:transparent url(transparent.gif); 
width:120px;
}

#pmenu li ul li a, #pmenu li ul li a:visited {
text-align:left;}

#pmenu li ul li a:hover {
background:#2B2B2B; color:#FFF;}

/* Position the first sub level beneath the top level links */
#pmenu > li:hover > ul {
left:-30px; 
top:21px;}

/* get rid of the table */
#pmenu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}

/* For IE5.5 and IE6 give the hovered links a position relative and a change of background and foreground color. This is needed to trigger IE to show the sub levels */
* html #pmenu li a:hover {
position:relative; 
background:#2B2B2B; 
color:#FFF;}

/* This is needed for IE6 to change bgcolor on submenu:hover */
* html #pmenu li ul li a:hover {
background:#2B2B2B; color:#FFF;}

/* This is needed for IE6 to align left in submenu items */
* html #pmenu li ul li a, * html #pmenu li ul li a:visited {
text-align:left;}

/* For accessibility of the top level menu when tabbing */
#pmenu li a:active, #pmenu li a:focus {
background:#2B2B2B; 
color:#FFF;}

/* Set up the pointers for the sub level indication */
ul#pmenu li.drop {background:#444444;}


/* This lot is for IE5.5 and IE6 ONLY and is necessary to make the sublevels appear */
/* change the drop down levels from display:none; to visibility:hidden; */
* html #pmenu li ul {
visibility:hidden; 
display:block; 
position:absolute; 
top:-11px; 
left:80px; 
padding:10px 30px 30px 30px;
background:transparent url(transparent.gif);}

/* make the second level visible when hover on first level link and position it */
#pmenu li a:hover ul {
visibility:visible; 
left:-30px; 
top:14px; 
lef\t:-31px; 
to\p:21px;
}

/*** ********** ********** ********** ********** END            MENU ********** ********** ***/




/*** ********** ********** ********** ********** CONTENT STYLING ********** ********** ********** ********** ***/

p {	
margin: 0.50em 0 1em 0;
line-height: 1.50em;
}

#content{
padding: 30px;
background: #222222;
color: #DDDDDD;
text-align: left;
}

#content p {
font-size: 80%;}

#content a{
text-decoration: underline;
}

#content a:hover{
color: #FFA73F;
}

#content .lflt{
float: left;
margin: 0.40em 15px 15px 0;
padding: 8px;
border: 2px #777 solid;
}

#content hr{
margin: 70px 0;
color: #666;
background-color: #666;
height: 5px;
}


/*** **********  Signpost styling  ********** ********** ***/
table.signposts {
border-collapse: collapse;
}

#content div.signpost{
background-color: #444;
padding: 13px;
margin: 0 30px 30px 0;
/* min-height might also be needed if overflow doesn't work */
overflow: auto;
width: 300px; /* Needed for overflow to work in IE. 100% didn't work, it expanded box to the right. */
/* width of 665px is needed for full width signposts. */
}

#content table.signposts td.rightcol div.signpost {
margin-right: 0; /* This is needed for IE6 to prevent expanding #content to the right. */
}

#content div.fullwidth {
width: 665px; /* Needed for overflow to work in IE. 100% didn't work, it expanded box to the right. */
margin: 0 0 30px 0;
}

#content div.signpost img{
float:left;
border: 5px solid #888;
margin: 0 25px 3px 0;
}

#content div.signpost h3{
font-size: 1.1em;
border-bottom: 2px solid #666;
padding: 20px 0 5px 0;
margin: 0 0 10px 15px;
}

#content div.fullwidth h3{
padding: 4px 0 5px 0;
}

#content div.signpost h3 a{
font-size: 1em;
font-weight: bold;
text-decoration: none;
}

#content div.signpost p{
margin-top: 20px;
margin-bottom: 0;
}






/*** **********  Text layout  ********** ********** ***/
p.signature {
text-align: right;
font-style: italic;
}

h2 {
color: #CCC;
font-size: 1.50em;
padding: 8px 4px;
border-bottom: 2px solid #1B1B1B;
border-right: 2px solid #1B1B1B;
background: #333333;
margin-bottom: 1.2em;
}

h4 {
margin: 0px 0px 20px 0px;
padding: 7px 4px 7px 3px;
font-weight: normal;
background-color: #2F2E2C;
border-bottom: 1px solid #161616;
}

ul.toc li {
font-size: 80%;
margin-bottom: 7px;
list-style-position: inside;
list-style-type: square;
}

ul.reallist {
padding-left: 15px;
}

ul.reallist li {
list-style-position: outside;
list-style-type: square;
}

ul.reallist li p {
margin: 0;
padding: 0 0 7px 5px; 
}

div.outertextcontainer {
margin-bottom: 30px;
padding:1px; /* If this is not specified, a vertical scroll bar will be added in IE7 and FF3. */
/*width: 100%;*/
width: 704px; /* This is needed for IE6 to prevent #content from expanding to the rigth. */
overflow:auto;
}

div.gallerypage {
margin-bottom: 0;
}

div.catimg {
width:90px; /* This is needed for the images to be aligned right */
/*height:100%;*/
float:left;
text-align: right;
}

div.catimg img{
display: inline;
border: 5px solid #888;
margin: 0;
}

div.righttextcontainer {
width:590px; /* Set padding between catimg and righttextcontainer using width  */
float:right;
overflow:hidden; /* Webkit adds scroll bar  */
}



div.bottompaging {
margin-top: 40px;
font-size: 80%;
}

div.bottompaging .previous {
float: left;
}

div.bottompaging .next {
float:right;
}


div.leftandright {
display: block;
width: 100%;
overflow: auto;
font-size: 70%;
margin-bottom: 7px;
padding: 2px 0;
}

div.leftandright .left a, div.leftandright .right a {
/* Needed for IE7 to show underline */
display: block;
padding-bottom: 1px;
color: #AAA; 
}

div.leftandright .left {
float: left;
}

div.leftandright .right {
float:right;
}

div.leftandright a.arak {
background-image: url(../assets/arak.png);
background-repeat: no-repeat;
padding: 3px 0 6px 27px; /* Positions the link at the horizontal centre of the bkg image - needs to be changed if font size is amended! */
}




table.realtable {
border-collapse: collapse;
margin-top: 30px;
margin-bottom: 30px;
}

table.realtable td {
border-top: 3px solid #222;
border-right: 2px solid #222;
font-size: 80%;
padding: 5px 20px 10px 10px;
vertical-align: middle;
line-height: 1.5em;
background-color: #2A2A2A;
}



/*** **********  Single polaroid-style photobox  ********** ********** ***/
div.photo {
margin: 20px auto;
padding: 10px;
background-color: #D3D3D3;
}

div.landscapeimg{
width: 480px;
}

/*** .portraitimg width must be overridden through inline css for images with special width ***/
div.portraitimg{
width: 334px;
}

div.photo p {
margin: 7px 0 0 0;
padding: 0;
color: #000;
font-size: 80%;
}

#content div.photo a {
color: #222;
}

#content div.photo a:hover {
color: #BD6800;
}

/*** **********  Special boxes  ********** ********** ***/
div.album, #flashcontent {
width: 570px;
}

div.album {
margin: 20px auto;
}

#flashcontent {
margin: 20px auto 0 auto;
height: 620px;
background-color: #2A2A2A;
}

#flashcontent p {
padding: 20px 20px 0 20px;
}

div.flushright, div.flushleft{
text-align: right;
margin-bottom: 15px;
font-size: 70%;
}

div.flushright a, div.flushleft a {
color: #AAA;
}

div.flushright {
text-align: right;
}

div.flushleft{
text-align: left;
}

/*** ********** ********** ********** ********** END		CONTENT STYLING ********** ********** ********** ********** ***/
