.popupResult {
	color: #777;
	padding: 20px;
	text-align: center;
	font-size: 1.1em;
	position: absolute;
	z-index: 1001;
	background-color: #fff;
	border: 3px solid #aaa;
}

.popupResult #okButton {
	margin-top: 20px;
	font-size: 1.2em;
}

#popupError {
	color: #E01E27;
	padding: 20px;
	text-align: center;
	font-size: 1.1em;
	position: absolute;
	z-index: 1001;
	background-color: #fff;
	border: 3px solid #E01E27;
}

#popupError #okButton {
	margin-top: 20px;
	font-size: 1.2em;
}

body{
	background-color: #D0D3C0;
	font-family: "Arial";
}

#mainTable {
	width: 980px;
}

#mainTableHeader {
	background: #fff url('/public/images/header_bg.png') no-repeat top left;
}

#mainTableMiddle {
	background-color: #fff;
}

#mainTableAdvert {
	background-color: #fff;
}

#mainTableFooter {
	background: #434345 url('/public/images/footer_bg.png') no-repeat top left;
}

textarea {
	border: 1px solid #aaa;
	color: #4E4E4E;
	width: 100%;
}

.redButton[type=submit], .redButton[type=button] {
	background-color: #E01E27;
	border: none;
	color: #fff;
	font-weight: bold;
}

.redButton[type=submit]:hover, .redButton[type=button]:hover {
	color: #E8DF60;
	cursor: pointer;
}

.redButton[disabled], .redButton[disabled]:hover {
	color: #fff;
	background-color: #aaa;
}

.select {
	background-color: #D0D3C0;
	/*background-color: #D9D9D9;*/
	border: none;
	width: 205px;
	padding-left: 5px;
}

.greyInput {
	background-color: #D0D3C0;
	/*background-color: #D9D9D9;*/
	border: none;
	margin-right: 10px;
	padding-left: 5px;
	width: 200px;
}

.greyDate {
	background-color: #D0D3C0;
	/*background-color: #D9D9D9;*/
	border: none;
	padding-left: 5px;
	text-align: right;
}

.greyInputWidth{
	background-color: #D0D3C0;
	width: 50px;
	border: none;
	padding-left: 5px;
}

.pagination strong {
	color: #E01E27;
}

#waitForImageDiv{
	visibility: hidden;
	color: #E37700;
	padding: 20px;
	text-align: center;
	font-size: 1.1em;
	position: absolute;
	z-index: 1001;
	width: 471px;
	background-color: #fff;
	border: 3px solid #E37700;
}

#header{
	width: 100%;
	color: #4E4E4E;
	padding: 0px 5px 5px;
	margin-top: -10px;
}

#header #logo img{
	border: none;
	text-decoration: none;
}

#header #description{
	text-align: right;
	font-weight: bold;
	font-size: 1.1em;
}

#header #loginLabel{
	font-size: 1em;
	padding-left: 120px;
}

#header #regist{
	text-align: right;
}

#header #regist a{
	color: #E01E27;
	text-decoration: none;
	font-size: 0.75em;
}


#header #regist a:hover{
	color: #4E4E4E;
}

#header #login{
	text-align: right;
	font-size: 0.7em;
}

#header #login input[type=text], #header #login input[type=password]{
	background-color: #D0D3C0;
	border: none;
	margin-right: 10px;
	padding-left: 5px;
	width: 150px;
}

#header #loginError{
	color: #E01E27;
	font-size: 1.2em;
	font-weight: bold;
	padding-top: 5px;
}

#header #menuTable{
	width: 100%;
	background-color: #E01E27;
	margin-top: 10px;
	padding: 4px 0px;
}

#header #menuTable td{
	text-align: center;
}

#header #menuTable td a{
	color: #FFF;
	text-decoration: none;
	font-weight: bold;
	font-size: 0.8em;
	padding: 7px 10px;
}

#header #menuTable td a:hover{
	background-color: #434343;
	color: #E8DF60;
}

#header #menuTable #actual a{
	background-color: #434343;
	color: #E8DF60;
}

#header #menuTable #accentuated a{
	background-color: #E8DF60;
	color: #E01E27;
	padding: 3px 13px;
}

#header #menuTable #accentuated a:hover{
	background-color: #434343;
	color: #E8DF60;
	padding: 7px 13px;
}

#premiumReals{
	/*height: 180px;*/
	color: #4E4E4E;
	background-color: #fff;
	padding: 0px 42px;
	font-size: 0.7em;
}

#premiumReals a{
	text-decoration: none;
	font-weight: bold;
	color: #4E4E4E;
}

#premiumReals  a:hover{
	color: #E01E27;
}

#premiumRealsTable{
	width: 100%;
	background-color: #e7dc60;
	padding: 10px;
}

#premiumRealsTable td{
	vertical-align: top;
}

#premiumReals #kiemelt{
	font-size: 2.1em;
	font-weight: bold;
}

#premiumReals #ajanlataink{
	font-size: 2.6em;
	font-weight: bold;
	margin-top: -10px;
}

#premiumRealsTable .realImage{
	border: 3px solid #fff;
	margin-bottom: 5px;
}

#premiumRealsTable .realCategory{
	font-weight: normal;
	font-size: 0.95em;
	font-weight: bold;
}

#premiumRealsTable .realDecriptionSmall{
	font-weight: bold;
}

#premiumRealsTable .locality{
	font-size: 1.2em;
	font-weight: bold;
}

#premiumRealsTable .price{
	color: #E01E27;
	font-size: 1.2em;
	font-weight: bold;
}

#middle{
	width: 100%;
	padding: 0px 10px 10px 25px;
	background: #fff url('/public/images/quick_search.png') no-repeat top left;
	height: 235px;
	color: #fff;
	font-size: 0.8em;
	vertical-align: text-top;
}

#middle #gyorskereses{
	font-size: 1.7em;
	font-weight: bold;
}

#middle #detailedSearch a{
	color: #e7dc60;
	text-decoration: none;
	padding-left: 15px;
}

#middle #detailedSearch a:hover{
	color: #fff;
}

#middle #quickSearch{
	padding-bottom: 15px;
}

#middle #quickSearch select{
	width: 168px;
	margin-left: 5px;
}

#middle input[type=submit]{
	width: 168px;
	height: 18px;
	margin-left: 5px;
}

#middle #welcome{
	color: black;
	font-size: 0.85em;
	width: 280px;
	/*padding-top: 20px;*/
	vertical-align: top;
	text-align: justify;
}

#middle #welcome a{
	color: #E01E27;
	text-decoration: none;
	font-weight: bold;
}

#middle #welcome a:hover{
	color: #4E4E4E;
}

#middle #welcomeRed{
	color: #E01E27;
	font-size: 1.65em;
	text-align: left;
	/*padding-bottom: 5px;*/
}

#middle #welcomeRedLittle{
	color: #E01E27;
	font-size: 1.15em;
	text-align: left;
	padding-bottom: 5px;
}

#middle #welcome .listingTitle{
	font-weight: bold;
	margin: 3px 0px;
}

#footer{
	width: 100%;
	padding: 20px 5px 20px 5px;
	font-size: 0.75em;
}

#footer #footerMenu{
	color: #fff;
	width: 650px;
}

#footer #footerMenu a{
	color: #fff;
	text-decoration: none;
}

#footer #footerMenu a:hover{
	color: #d1d3c8;
}

#footer #logoGrey{
	text-align:right;
}

#footer #designerLogo{
	text-align: right;
}

#footer #creator{
	color: #d1d3c8;
	text-align: right;
	padding: 10px 0px;
}

#footer #creator a{
	color: #d1d3c8;
	text-decoration: none;
	font-weight: bold;
}

#footer #creator a:hover{
	color: #fff;
}

#footer #copyright, #footer #copyright a{
	text-decoration: none;
	color: #d1d3c8;
}

#footer #copyright a:hover{
	color: #fff;
}

#footer img{
	border: none;
}

#notFound{
	background-color: #fff;
	color: red;
	text-align: center;
	font-size: 1.6em;
	font-weight: bold;
	padding: 30px 0px;
}

#register input[type=text], #register input[type=password]{
	background-color: #D0D3C0;
	border: none;
	width: 200px;
	height: 18px;
	padding-left: 5px;
}

/*#register #result{
	margin-top: 10px;
	font-weight: bold;
}

#register #error{
	margin-top: 10px;
	font-weight: bold;
	color: #E01E27;
	text-align: center;
}*/

/*#activation #result{
	margin-top: 10px;
	font-weight: bold;
}

#activation #error{
	margin-top: 10px;
	font-weight: bold;
	color: #E01E27;
}*/

#contact #companyName{
	color: #4E4E4E;
	font-weight: bold;
	font-size: 1.3em;
	padding-bottom: 10px;
}

#contact #companyAddress{
	color: #4E4E4E;
	font-weight: bold;
	padding-bottom: 20px;
}

#contact #companyPhone{
	color: #4E4E4E;
	font-weight: bold;
	padding-bottom: 10px;
}

#contact #companyHomePage{
	font-weight: bold;
	padding-bottom: 10px;

}

#contact input[type=text]{
	background-color: #D0D3C0;
	border: none;
	margin-right: 10px;
	padding-left: 5px;
	width: 180px;
}

#contact #error{
	margin-top: 10px;
	color: #E01E27;
	font-weight: bold;
	text-align: center;
}

#forgotten #result{
	margin-top: 10px;
	font-weight: bold;
}

#forgotten #error{
	margin-top: 10px;
	font-weight: bold;
	color: #E01E27;
	text-align: center;
}

#forgotten input[type=text], #forgotten input[type=password]{
	background-color: #D0D3C0;
	border: none;
	margin-right: 10px;
	padding-left: 5px;
	width: 200px;
}

#realtyMap img{
	border: none;
}

/*#realtyMap #result{
	margin-top: 10px;
	font-weight: bold;
}

#realtyMap #error{
	margin-top: 10px;
	font-weight: bold;
	color: #E01E27;
}*/

/*#setPassword #result{
	margin-top: 10px;
	font-weight: bold;
}

#setPassword #error{
	margin-top: 10px;
	font-weight: bold;
	color: #E01E27;
	text-align: center;
}*/

#setPassword input[type=password]{
	background-color: #D0D3C0;
	border: none;
	margin-right: 10px;
	padding-left: 5px;
	width: 200px;
}

#adOperation #adImagesTable{
	width: 99%;
}

#adOperation #adImagesTable img{
	width: 130px;
	border: none;
}

#adSearch  #searchResult table{
	width: 99%;
	border: 1px solid #aaa;
	margin: 4px 0px;
}

#adSearch  #searchResult .adSubject{
	width: 99%;
	height: 100%;
}

#adSearch  #searchResult img{
	width: 80px;
	margin: 5px;
	border: none;
}

#adSearch #searchResult .adDescription{
	text-align: justify;
	vertical-align: text-top;
	padding-right: 5px;
}

#adCategory{
	font-style: italic;
	font-size: 0.9em;
}

#adShow #userImage{
	width: 0%;
	text-align: right;
}

#adShow #userImage img{
	width: 130px;
	border: none;
}

#adShow #adType{
	margin-top: 10px;
}

#adShow #adDescription{
	margin: 10px 0px;
}

#adShow #adImages img{
	width: 130px;
	border: none;
	margin-top: 10px;
}

#adShow #adImages table{
	text-align: center;
}

#advert{
	width: 100%;
	padding: 20px 5px 20px 5px;
}

#advert .bannerCell{
	width: 165px;
	color: #4E4E4E;
}

#advert h3{
	color: #E01E27;
	margin-top: 0px;
	font-size: 1em;
}

#advert .bannerCell a{
	color: #4E4E4E;
	text-decoration: none;
	font-weight: bold;
	font-size: 0.8em;
}

#advert .bannerCell a:hover{
	color: #E01E27;
}

#advert .banner{
	border: 1px solid #bbb;
	padding: 5px 0px;
	margin-bottom: 5px;
	text-align: center;
}

#advert .banner img{
	border: none;
}

#advert td{
	vertical-align: top;
}

#advert #advertContent{
	width: 100%;
}

#advert #advertBlock{
	color: #4E4E4E;
	font-size: 0.8em;
	padding-left: 10px;
	padding-right: 0px;
	margin-top: -20px;
}

#advert #advertBlock a{
	/*color: #4E4E4E;*/
	color: #00c;
	text-decoration: none;
	font-weight: bold;
}

#advert #advertBlock a:hover{
	color: #E01E27;
}

#advert #title{
	color: #E01E27;
	font-weight: bold;
	font-size: 1.5em;
}

#advert #title #steps{
	background-color: #eee;
	padding: 0px 5px;
}

#advert #title #activeStepLink{
	font-size: 0.8em;
}

#advert #title #passiveStepLink{
	font-size: 0.6em;
}

#advertiserDetails #advertiserDetailsTable{
	width: 100%;
}

#advertiserDetails #advertiserDetailsTableTitle{
	font-size: 1.2em;
	font-weight: bold;
}

#advertiserDetails img{
	border: none;
	max-width: 200px;
}

#advertiserDetails #detailsCell{
	width: 100%;
	padding-left: 10px;
}

#advertiserDetails #sendMessage{
	padding-top: 10px;
}

#advertiserDetails #info{
	padding-top: 10px;
}

#googleResult{
	padding: 20px 40px 0px 40px;
}

#joinToFirm #search{
	border: 1px solid #aaa;
	width: 100%;
	padding: 5px;
	margin-bottom: 5px;
}

#firmDatabase #firms table{
	width: 99%;
	border: 1px solid #aaa;
	margin: 2px 0px;
	padding: 7px 3px;
}

#firmDatabase #firms table td img{
	margin: 5px 5px 0px 0px;
	border: none;
	width: 80px;
}

#firmDatabase .firmName{
	width: 100%;
}

#firmDatabase .firmDescription{
	vertical-align: text-top;
	text-align: justify;
}

#firmDetails #detailsTable{
	width: 99%;
}

#firmDetails #detailsTable img{
	border: none;
	width: 130px;
	margin-bottom: 5px;
}

#newestRealsTable{
	width: 100%;
	font-size: 0.9em;
	border-collapse: separate;
	border-spacing: 13px 5px;
}

#newestRealsTable .newReal{
	width: 150px;
	border-bottom: 1px dashed #8E8E8E;
	vertical-align: bottom;
	padding-top: 15px;
}

#newestRealsTable .realImage{
	text-decoration: none;
	border: none;
	padding-bottom: 5px;
}

#newestRealsTable .realCategory{
	font-weight: normal;
	font-size: 0.95em;
	font-weight: bold;
}

#newestRealsTable .realDecriptionSmall{
	font-weight: bold;
}

#newestRealsTable .locality{
	font-size: 1.2em;
	font-weight: bold;
}

#newestRealsTable .price{
	color: #E01E27;
	font-size: 1.2em;
	font-weight: bold;
}

#realSearch #googleSearch{
	padding-left: 5px;
}

#realSearch .realTable{
	width: 100%;
	border: 1px solid #aaa;
	margin-bottom: 5px;
}

#realSearch .realTable img{
	border: none;
}

#realSearch .realTable .realImage{
	vertical-align: middle;
}

#realSearch .realTable .realDescription{
	width: 100%;
}

#realSearch .realTable .category{
	font-size: 1.2em;
	font-weight: bold;
	padding-bottom: 5px;
}

#realSearch .realTable .price{
	/*width: 100%;*/
	text-align: right;
	color: #E01E27;
	font-size: 1.2em;
	font-weight: bold;
	float: right;
}

#realSearch .realTable .decriptionSmall{
	padding-bottom: 5px;
}

#realSearch .realTable .locality{
	font-size: 1.2em;
	font-weight: bold;
	padding-bottom: 5px;
}

#realSearch .realTable .description{
	font-size: 0.85em;
}

#realSearch .realTable .createDate{
	font-size: 0.8em;
	text-align: right;
}

#similarRealsTable{
	width: 100%;
	color: #4E4E4E;
	font-size: 0.9em;
}

#similarRealsTable tr td{
	border-bottom: 1px dashed #8E8E8E;
	padding: 10px 0px;
}

#similarRealsTable .realImage{
	border: none;
}

#similarRealsTable .similarRealDescription{
	width: 100%;
	padding-left: 5px;
}

#similarRealsTable .realDecriptionSmall{
	font-weight: bold;
}

#similarRealsTable .locality{
	/*font-family: "Arial Black", "Arial";*/
	font-size: 1.2em;
	font-weight: bold;
}

#similarRealsTable .price{
	color: #E01E27;
	/*font-family: "Arial Black", "Arial";*/
	font-size: 1.2em;
	font-weight: bold;
}

#similarRealsTable .realDescription{
	font-size: 0.9em;
}

#newReal .pageDescription{
	padding-bottom: 5px;
	text-align: justify;
}

#newReal .savedTable{
	border: 1px solid #aaa;
	margin-top: 5px;
	margin-left: 3px;
	padding: 4px;
	margin-bottom: 5px;
}

#newReal .savedTable th{
	text-align: left;
}

#newReal .savedTable td{
	vertical-align: bottom;
	text-align: left;
}

#newReal .savedTable .center{
	text-align: center;
}

#newReal .savedTable .odd{
	background-color: #e5e5e5;
}

#newReal #savedTable{
	width: 515px;
	overflow: auto;
}

#newReal #roomTable{
	width: 700px;
}

#newReal #letAreaTable{
	width: 1400px;
}

#newReal #parkplaceTable{
	width: 99%;
}

#newReal #realImagesTable{
	width: 99%;
}

#newReal #realImagesTable img{
	border: none;
}

#newReal #realImagesTable .border-left{
	border-left: 1px solid #bbb;
	padding-left: 5px;
}

#newReal #realImagesTable .border-right{
	border-right: 1px solid #bbb;
	padding-right: 5px;
}

#newReal #realImagesTable .border-top{
	border-top: 1px solid #bbb;
	padding-top: 5px;
}

#newReal #realImagesTable .border-bottom{
	border-bottom: 1px solid #bbb;
	padding-bottom: 5px;
}

#userDetails #result{
	margin-top: 10px;
	font-weight: bold;
}

#userDetails #error{
	margin-top: 10px;
	font-weight: bold;
	color: #E01E27;
	text-align: center;
}
/*
#userDetails input[type=text], #userDetails input[type=password]{
	background-color: #D0D3C0;
	border: none;
	margin-right: 10px;
	padding-left: 5px;
	width: 200px;
}*/

#userDetails #otherTable img{
	width: 130px;
	border: none;
}

#userDetails .listTable{
	width: 99%;
	border: 1px solid #aaa;
	margin: 4px 0px;
}

#userDetails .listTable #adSubject, #userDetails .listTable #realSubject{
	width: 100%;
	height: 100%;
	font-size: 1em;
	padding-bottom: 5px;
}

#userDetails .listTable img{
	width: 80px;
	margin: 5px;
	border: none;
}

#userDetails .listTable #adDescription, #userDetails .listTable #realDescription{
	text-align: justify;
	vertical-align: text-top;
	padding-right: 5px;
}

#userDetails .listTable #expired{
	color: #E01E27;
	font-weight: bold;
}

#userDetails .savedTable{
	width: 99%;
	border: 1px solid #aaa;
	margin-top: 5px;
	margin-left: 3px;
	padding: 4px 0px;
}

#userDetails .savedTable .odd{
	background-color: #eee;
}

#userDetails .savedTable th{
	padding: 0px 5px 5px 5px;
}

#userDetails .savedTable td{
	vertical-align: bottom;
	text-align: left;
}

#userDetails .savedTable .locality{
	text-align: left;
}

#userDetails .savedTable #id{
	padding: 0px 2px;
}

#userDetails .savedTable .center{
	text-align: center;
}

#userDetails #savedTable{
	/*width: 500px;*/
	overflow: auto;
}

#logos a{
	text-decoration: none;
	color: #4E4E4E;
}

#logos a:hover{
	color: #E01E27;
}

#logos img{
	border: 1px solid #aaa;
}

#logos .hand{
	cursor: pointer;
}

#logos #HTMLcode{
	padding: 10px 5px;
	border: 2px solid #bbb;
	font-size: 0.9em;
}

#logos #closeButton{
	margin: 20px;
}

#logos td{
	padding-right: 20px;
	padding-top: 20px;
	vertical-align: middle;
}

#partners li{
	margin-top: 5px;
}

#bannerPartners{
	width: 100%;
	margin-bottom: 10px;
}

#bannerPartners td{
	text-align: center;
	vertical-align: bottom;
	width: 50%;
}

#bannerPartners a img{
	border: none;
	padding-bottom: 5px;
}

#price td{
	padding-right: 10px;
}

#realDetail{
	background-color: #fff;
	padding: 0px 42px;
	font-size: 0.75em;
}

#realDetailHeader{
	color: #fff;
	padding: 20px;
	background-color: #434343;
}

#realDetailHeader #ingatlan{
	font-size: 1.3em;
}

#realDetailHeader #adatlap{
	font-size: 1.4em;
	font-weight: bold;
}

#realDetailHeader #backToList a{
	color: #e7dc60;
	text-decoration: none;
	margin-left: 650px;
	/*font-size: 0.8em;*/
	font-weight: bold;
}

#realDetailHeader #backToList a:hover{
	color: #fff;
}

#realDetailBody{
	padding: 20px;
	background-color: #D0D3C0;
	color: #4E4E4E;
}

#realDetailTable{
	width: 100%;
}

#realDetailTable td{
	vertical-align: top;
	/*border: 1px solid black;*/
}

#realDetailBody #images{
	max-width: 280px;
}

#realDetailBody #imageScroll{
	width: 280px;
	max-height: 493px;
	overflow: auto;
	margin-right: 10px;
}

#scrolledTable td{
	padding-bottom: 5px;
	padding-right: 5px;
}

#scrolledTable img{
	border: none;
}

#realDetailBody #realDescriptionSmall{
	color: #4E4E4E;
	font-weight: bold;
	font-size: 0.7em;
	padding-bottom: 5px;
}

#realDetailBody #locality{
	color: #4E4E4E;
	font-size: 1.4em;
	font-weight: bold;
	padding-bottom: 5px;
}

#realDetailBody #price{
	color: #E01E27;
	font-size: 1.4em;
	font-weight: bold;
	padding-bottom: 10px;
}

#realDetailBody .realDescription{
	color: #4E4E4E;
	/*font-size: 0.8em;*/
}

#realDetailBody #details{
	width: 100%;
	/*font-size: 0.8em;*/
	padding-bottom: 10px;
}

#realDetailBody #details td{
	vertical-align: bottom;
	/*padding-bottom: 5px;*/
}

#realDetailBody .bold{
	font-weight: bold;
}

#realDetailBody .detailDescriptionTitle{
	font-weight: bold;
	padding-top: 10px;
	font-size: 1.1em;
	/*padding-bottom: 5px;*/
}

#realDetailBody .detailDescription{
	/*padding-bottom: 10px;*/
}

#realDetailBody .childTableTitle{
	padding-bottom: 5px;
	font-weight: bold;
}

#realDetailBody .childDiv{
	width: 559px;
	overflow: auto;
	border: 1px solid #aaa;
	margin-bottom: 10px;
}

#realDetailBody .childTable{
	width: 100%;
	padding: 5px;
}

#realDetailBody .childTable td{
	padding-left: 3px;
	vertical-align: middle;
}

#realDetailBody .childTable th{
	padding-bottom: 5px;
}

#realDetailBody .childTable .odd{
	background-color: #e0e3d0;
}

#realDetailBody .childTable .center{
	text-align: center;
}

#realDetailBody #letAreaTable{
	width: 1400px;
}

#realDetailBody #createDate{
	font-size: 0.8em;
	text-align: right;
}

#realDetailBody #contactCell{
	width: 100%;
	/*font-size: 0.8em;*/
}

#realDetailBody #contactTitle{
	
}

#realDetailBody a{
	text-decoration: none;
	/*color: #4E4E4E;*/
	color: #00c;
	font-weight: bold;
}

#realDetailBody a:hover{
	color: #E01E27;
}

#realDetailBody #realtyMap{
	text-align: right;
}


#firmsByCounty table{
	widht: 100%;
}

.firmListBlock{
	padding: 0px 10px 15px 10px;
	border: 1px solid #ccc;
}

.firmListBlock #countyName{
	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
	color: #E01E27;
	margin-bottom: 10px;
	border-bottom: 1px solid #ccc;
}

/*
 * This is used just to have a position: relative so I can then put the tabbed panels in it.
 * it is ugly and a mess, I wonder what people where thinking when they thought about this
 * boxing model.
 */
div#tabFrame{
	position: relative;
}


div#tabMenuDiv{
   /* position MUST be relative so to palce this and the TabFiller into a common z-order reference
    * this fix the Internet Explorer crappy BUG
    */
	position: relative;
   /* since the z-index is four this will be on top of the tabFiller border */
	z-index: 4;
}

/* this is used to fill the tabs with something so they do not mess up with the page
 * This div will be used to set the size of the tabPane, the width is automatic.
 * so, basically, the only thing to set is the height, use the em unit !
 */
div#tabFiller{
   /* position MUST be relative so to palce this and the TabFiller into a common z-order reference
    * this fix the Internet Explorer crappy BUG
    */
   position: relative;
   background: #fff;
   border: 1px solid #aaa;
   height: 40em;
   /* z-Index must be lower than the one of tabMenuDiv since this div should be below it */
   z-index:1;
}

/*
 * This defines the general properties of the tabMenu something like borders, colors, etc.
 * One important property is the z-index, it must be above the other panels.
 */
span.tabMenu, span.tabMenuActive, span.tabMenuOver{
   /* the background must be the same as the tabFiller background */
   background: #fff;
   border: 1px solid #aaa;
   margin: 0px 0px 0px 0px;     /* this moves the buttons to the right */
   padding: 0px 12px 0px 10px;
   cursor: pointer;
}

span.tabMenuActive{
   /* the color must be the same as the tabFiller background */
   border-bottom: 1px solid #fff;
   cursor: default;
}

span.tabMenuOver{
   /* You can set whatever foreground and background color you wish */
   background: red;
   color: #FFFFFF;
}


/* the various tab panels are in absolute position relative to the parent, so basically
 * they all overlap one with the other.
 * The problem is that their size is dependent on the content and therefore that has to be adjusted.
 * to do this I need of javascript...
 * If you want to define some special fonts for the tabbed pane, do it here.
 */
div.tabPane{
  position: absolute;
  margin: 4px;
  overflow: auto;
  /* the background of this must be the same of tabFiller */
  background: #fff;
}

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(/public/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/public/images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }