Sklep
{
	margin: 10px;

	background-color: #FFA500;
	color: #000000;
	font-size: 10pt;
	font-family: "Arial";
}

ListaProduktów, Klienci, ListaZakupów
{
    display: table-cell;
    clear: both;
	table-layout:auto;


}

Klienci:before
{
	margin-left: 5px;
    display: block;
    content: "Klienci";
    font-family: Verdana;
	background-color: rgb(239, 197, 19);
	font-weight: lighter;
	font-style: italic;
    text-align: center;
    font-size: 32px;
	max-width: 205px;
	border: 2px solid red;
    border-radius: 7px;
}

ListaProduktów:before
{
	margin-left: 5px;
    display: block;
    content: "Produkty";
    font-family: Verdana;
	background-color: rgb(255, 98, 0);
	font-weight: lighter;
	font-style: italic;
    text-align: center;
    font-size: 32px;
	max-width: 205px;
	border: 2px solid red;
    border-radius: 7px;
}

ListaZakupów:before
{
	margin-left: 5px;
    display: block;
    content: "Zakupy";
    font-family: Verdana;
	background-color: rgb(183, 82, 19);
	font-weight: lighter;
	font-style: italic;
    text-align: center;
    font-size: 32px;
	max-width: 255px;
	border: 2px solid red;
    border-radius: 7px;
}

Produkt
{
    display: block;
    height: 80px;
    width: 200px;
    margin: 5px;
    float: left;
	padding-top: 2px;
	padding-left: 2px;

	border: 3px dotted red;
    border-radius: 2px;


}

Produkt:hover
{
	background-color: rgb(255, 98, 0);
	border-style: double;


}

Produkt > Nazwa
{
    display: block;
    height: 25px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: left;
}

Produkt > Kalorie
{
	display:block;
	text-align: left;
	text-decoration: underline;
}

Kalorie:before
{
	content: "kalorie: ";
}

Produkt:after
{
	margin-top: 3px;
    content: "Producent: " attr(Producent) "";
    font-size: 10px;
}

Osoba
{
    display: block;
    height: 80px;
    width: 200px;
    margin: 5px;
    float: left;
	padding-top: 2px;
	padding-left: 2px;

	border: 3px dotted red;
    border-radius: 2px;
}

Osoba:after
{

	margin-top: auto;
    content: "Numer id: " attr(IdOsoby) "";
    font-size: 10px;
}

Osoba > Imię
{
    display: block;
    height: 25px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: left;
}

Osoba > Nazwisko
{
	display:block;
	text-align: left;
	text-decoration: underline;
}

Osoba:hover
{
background-color: rgb(239, 197, 19);
	border-style: double;
}


Zakup
{
    display: block;
    height: 80px;
    width: 250px;
    margin: 5px;
    float: left;
	padding-top: 2px;
	padding-left: 2px;

	border: 3px dotted red;
    border-radius: 2px;

}

Zakup:hover
{
background-color: rgb(183, 82, 19);
border-style: double;
}

Zakup:before
{
display: block;

    content: ""attr(IdOsoby)" kupił produkt o id:"attr(IdProduktu)"";
	padding-top: 2px;
	padding-left: 2px;
    text-align: left;

}

DataZakupu:after
{
content: "w dniu "attr(Dzień)"-"attr(Miesiąc)"-"attr(Rok)"";
text-align: left;
padding-top: 2px;
	padding-left: 2px;

}

Płatność:after
{
content: "używając: "attr(rodzaj)"";
text-align: left;
padding-top: 2px;
	padding-left: 2px;

}

Wartość:before
{
 content: "równowartość: "
}

Wartość[Waluta="PLN"]:after
{
    content: "PLN";
}

Wartość[Waluta="USD"]:after
{
    content: "USD";
}

Wartość[Waluta="EUR"]:after
{
    content: "EUR";
}

Autorzy, Poprawki
{
	display:block;
	color: black;
	font-size:10px;
}

Autorzy:before
{
    color: black;
	font-size:10px;
	content: "Autorzy: "
}

Autorzy > Autor:after
{
    content: " [ " attr(Indeks) " ] ";
}

Poprawki:before
{
	color: black;
	font-size:10px;
	content: "Ostatnia poprawka: "
}