/*
Projekt przebudowy strony Red Lantern Design
"Head First Web Design", rozdział 1.
http://headfirslabs.com/books/hfwd/ch01/stylesheets/screen.css
*/

/*
Wielkość czcionki ustawiona jest tutaj na 62.5%, by
1em = 10px. Dzięki temu ustawienie typografii będzie
nieco łatwiejsze.
*/
body {
   margin: 0;
   padding: 0;
   background: #7a2122 url('../images/body_bg.gif') repeat-x top;
   font-family: Helvetica, sans-serif;
   font-size: 62.5%;
   color: #333;
}

h1, h2, p, ul, li {
   margin: 0;
   padding: 0;
}

p {
   font-size: 1.4em;
   line-height: 1.4em;
}

ul {
   list-style-type: none;
}

a:link, a:visited {
   color: #333;
   background: #eee;
}

/* Ta reguła dodaje ładny styl do znaków "&". */
span.amp {
   font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif;
   font-weight: normal;
   font-style: italic;
}

/*
"margin: 0 auto" z jednoczesnym podaniem szerokości
spowoduje wyśrodkowanie układu strony w oknie 
przeglądarki.
*/
#masthead {
   margin: 0 auto;
   margin-top: 20px;
   width: 800px;
   color: #fff;
}

#masthead h1 {
   float: left;
}

#nav {
   float: right;
   margin: 50px 10px 0 0;
   font-size: 1.4em;
}

#nav li {
   display: inline;
   margin: 0 0 0 20px;
}

#nav li a {
   color: #fff;
   text-decoration: none;
   background: none;
}

/*
Ponieważ zawartość nagłówka znajduje się poza elementem
<div> opakowującym treść strony, musimy skorzystać z tej
samej sztuczki z "margin: 0 auto", by wyśrodkować układ
strony.
*/
#wrap {
   clear: both;
   margin: 0 auto;
   padding: 10px;
   width: 780px;
   background: #fff;
   border: 10px solid #5c0505;
}

#header img {
   border: 10px solid #ccc;
}

#header h1 {
   font-size: 2em;
   margin: 10px 0 0 0;
   padding: 10px;
   text-align: center;
   background: url('../images/tagline_bg.gif') repeat-x;
}

#content, #sidebar {
   width: 360px;
   margin: 20px 0 20px 0;
   padding: 10px;
}

#content {
   float: right;
}

#content h2 {
   font-size: 2.4em;
   margin: 0 0 10px 0;
}

#content p {
   margin: 0 0 10px 0;
}

#link-list {
   margin: 20px 0 0 0;
   font-size: 1.4em;
}

#link-list li {
   margin: 0 0 10px 0;
}

#sidebar {
   float: left;
   background: #eee;
}

#sidebar h2 {
   font-weight: bold;
   border-bottom: 1px solid #ccc;
   margin: 0 0 20px 0;
   padding: 5px;
}

#port li {
   margin: 0 10px 20px 0;
   float: left;
   border: 5px solid #ddd;
}

#footer {
   clear: both;
   background: #eee;
   padding: 10px;
   border-top: 2px solid #ddd;
   text-align: center;
   color: #777;
}