/* ----------------------------------------------------------------------------------------------------------
HTML
---------------------------------------------------------------------------------------------------------- */

body {background:url("../design/bg.jpg") 50% 0 repeat-x; font:0.8em/1.6 "arial", sans-serif;}
h1, h2, h3, h4, h5, h6, address, blockquote, dl, fieldset, ol, p, table, ul {margin:15px 0;}
h2 {font-size:180%; line-height:18px;}
h3 {font-size:150%; line-height:15px;}
h4, h5 {font-size:100%;}
ul.ul {margin:20px 0 20px 20px;}
ul.ul li {padding:1px 0 1px 16px; background:url("../design/ul.gif") 0 8px no-repeat;}
ul.gallery {margin:20px 0;}
ul.gallery li {float:left; padding-right:20px;}
ul.gallery li.last {padding:0;}
ul.gallery li img {display:block;}
table {margin:0; border-collapse:collapse;}
table th {padding:5px; font-weight:bold;}
table td {padding:5px;}

/* ----------------------------------------------------------------------------------------------------------
LAYOUT
---------------------------------------------------------------------------------------------------------- */

#main {width:960px; margin:0 auto;}
#header {position:relative; overflow:hidden;}
#header #logo {position:absolute; top:100px; left:20px; margin:0;}
#header #nav {position:absolute; top:40px; left:10px; margin:0;}
#header #nav li {display:inline;}
#header #nav li a {display:block; float:left; padding:0 10px; text-decoration:none;}
#header #nav li a:hover {text-decoration:underline;}
#header #nav li.last a {border:0;}
#aside #twitter {padding:10px 0 10px 75px; background:url("../design/twitter.gif") 0 0 no-repeat;}
#footer {padding:20px; background:url("../design/footer.gif") 0 0 repeat-x;}
#footer p {margin:0;}

/* ----------------------------------------------------------------------------------------------------------
HOMEPAGE (BODY#HP)
---------------------------------------------------------------------------------------------------------- */

#hp {background:url("../design/bg-hp.jpg") 50% 0 repeat-x;}
#hp #header {height:520px; background:url("../design/header-hp.jpg") 0 0 no-repeat;}
#hp #header #slogan {position:absolute; top:190px; left:20px; margin:0; font:220%/1 "arial",sans-serif;}
#hp #header #pricetag {position:absolute; top:355px; left:403px; margin:0; font:180%/1 "arial",sans-serif;}
#hp #header #iphone {position:absolute; top:372px; left:673px; margin:0; z-index:100;}
#hp #header #screen-01 {position:absolute; top:138px; left:489px; margin:0;}
#hp #header #screen-02 {position:absolute; top:383px; left:712px; margin:0; z-index:200;}
#hp #header #features {position:absolute; top:380px; left:20px; margin:0;}
#hp #cols {padding:20px; background:url("../design/aside.gif") 620px 50px no-repeat;}
#hp #cols #content {float:left; width:580px;}
#hp #cols #aside {float:right; width:295px; padding-top:20px;}

/* ----------------------------------------------------------------------------------------------------------
SUBPAGE
---------------------------------------------------------------------------------------------------------- */

#header {height:187px; background:url("../design/header.jpg") 0 0 no-repeat;}
#cols-in {background:url("../design/aside.gif") 600px 100px no-repeat;}
#cols {padding:20px 40px 20px 40px; background:url("../design/cols.jpg") 0 0 no-repeat;}
#cols h1 {margin:0 0 25px 0; font-size:220%; line-height:22px;}
#cols #content {float:left; width:580px;}
#cols #aside {float:right; width:255px;}

/* ----------------------------------------------------------------------------------------------------------
OTHERS
---------------------------------------------------------------------------------------------------------- */

img.border {padding:5px;}
img.f-left {margin-right:15px;}
img.f-right {margin-left:15px;}
.bigger {font-size:120%;}
.smaller {font-size:85%;}