/*
Theme Name: Make Fun!
Theme URI: http://pakkeimak.com
Description: A theme designed only for Make Fun Studio
Version: 1.0
Author: Pak-Kei Mak
Tags: 
*/

html, body {padding: 0; margin: 0; height: 100%; min-width: 1000px; overflow-x: hidden; overflow-y: auto;}


/* FONTS */

h2 {font: bold 24pt Century Gothic, Arial, sans-serif; color: #CD6424; text-transform: lowercase; text-align: center; letter-spacing: -1px;}
h3 {font: bold 18pt Century Gothic, Arial, sans-serif; color: #D38038; text-transform: lowercase; text-align: center; letter-spacing: -1px;}
p, font {font: 9pt Lucida Sans Unicode, Lucida Grande, sans-serif; line-height: 15pt; text-align: justify;}
strong {color: #BB6600;}
a {color: #880000;}
#footer p {font: 7pt Lucida Sans Unicode, Lucida Grande, sans-serif; line-height: 12pt; text-align: right;}

.nav-item {font: bold 14pt Century Gothic, Arial, sans-serif; color: #D38038; text-transform: lowercase; text-align: center; letter-spacing: -1px;}
.nav-item a {color: #808080; text-decoration: none;}
.nav-item a:hover {color: #BB6600;}


/* POSITION */

#page {position: relative; min-height: 100%;}

#header {position: relative; left: 0; width: 100%; height: 260px; z-index: 2;}
#header #logo {position: absolute; left: 50%; margin-left: -200px; top: 50px;}
#header #ruler {position: absolute; left: 50%; margin-left: 240px; top: 120px; right: 0; height: 24px; background: url('/images/logo-ruler.png') repeat-x;}
#header #nav {position: absolute; left: 50%; margin-left: -310px; top: 220px; width: 620px; text-align: center;}
.nav-item {display: inline; padding: 5px;}

#footer {position: relative; left: 50%; margin-left: -300px; width: 600px; height: 60px; padding-top: 40px;}

#background {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}
#content {position: relative; left: 50%; margin-left: -300px; width: 600px; z-index: 2;}

.separator {text-align: center; padding: 20px 0 0 0;}


/* SCATTERBRAIN */

#about-tl {position: absolute; width: 197px; height: 165px; left: 50%; margin-left: -440px; top: 0; background: url('/images/about-tl.png') no-repeat;}
#about-tr {position: absolute; width: 335px; height: 557px; left: 50%; margin-left: 240px; top: 0; background: url('/images/about-tr.png') no-repeat;}
#about-bl {position: absolute; width: 685px; height: 526px; left: 50%; margin-left: -800px; top: 450px; background: url('/images/about-bl.png') no-repeat;}
#about-br {position: absolute; width: 212px; height: 207px; right: 40px; bottom: 20; background: url('/images/about-br.png') no-repeat;}

#portfolio-tl {position: absolute; width: 135px; height: 1002px; left: 0; top: 0; background: url('/images/portfolio-tl.png') no-repeat;}
#portfolio-tr {position: absolute; width: 135px; height: 759px; right: 0; top: 0; background: url('/images/portfolio-tr.png') no-repeat;}
#portfolio-l {position: absolute; width: 153px; height: 292px; left: 0; top: 1002px; background: url('/images/portfolio-l.png') repeat-y;}
#portfolio-r {position: absolute; width: 109px; height: 567px; right: 0; top: 759px; background: url('/images/portfolio-r.png') repeat-y;}

#services-tl {position: absolute; width: 298px; height: 529px; left: 0; top: 0; background: url('/images/services-tl.png') no-repeat;}
#services-tr {position: absolute; width: 254px; height: 195px; right: 0; top: 0; background: url('/images/services-tr.png') no-repeat;}
#services-br {position: absolute; width: 152px; height: 386px; right: 0; bottom: 0; background: url('/images/services-br.png') no-repeat;}
#services-l {position: absolute; width: 184px; height: 579px; left: 0; top: 600px; background: url('/images/services-l.png') no-repeat;}
#services-r {position: absolute; width: 180px; height: 399px; right: 0; top: 600px; background: url('/images/services-r.png') no-repeat;}

#studio-tl {position: absolute; width: 212px; height: 117px; left: 50%; margin-left: -560px; top: 170px; background: url('/images/studio-tl.png') no-repeat;}
#studio-tr {position: absolute; width: 347px; height: 315px; left: 50%; margin-left: 250px; top: 0; background: url('/images/studio-tr.png') no-repeat;}
#studio-bl {position: absolute; width: 258px; height: 670px; left: 50%; margin-left: -580px; bottom: 0; background: url('/images/studio-bl.png') no-repeat;}
#studio-r {position: absolute; width: 213px; height: 189px; right: 0; top: 600px; background: url('/images/studio-r.png') no-repeat;}

#workshop-tl {position: absolute; width: 327px; height: 705px; left: 50%; margin-left: -560px; top: 0; background: url('/images/workshop-tl.png') no-repeat;}
#workshop-tr {position: absolute; width: 307px; height: 593px; left: 50%; margin-left: 250px; top: 0; background: url('/images/workshop-tr.png') no-repeat;}
#workshop-bl {position: absolute; width: 409px; height: 631px; left: 50%; margin-left: -700px; bottom: 0; background: url('/images/workshop-bl.png') no-repeat;}
#workshop-br {position: absolute; width: 188px; height: 796px; right: 0; bottom: 0; background: url('/images/workshop-br.png') no-repeat;}

#blog-tl {position: absolute; width: 168px; height: 536px; left: 0; top: 0; background: url('/images/blog-tl.png') no-repeat;}
#blog-tr {position: absolute; width: 139px; height: 675px; right: 0; top: 0; background: url('/images/blog-tr.png') no-repeat;}

#press-tl {position: absolute; width: 226px; height: 282px; left: 0; top: 0; background: url('/images/press-tl.png') no-repeat;}
#press-b {position: absolute; width: 1003px; height: 108px; left: 50%; margin-left: -501px; bottom: 0; background: url('/images/press-b.png') no-repeat;}

#contact-tl {position: absolute; width: 476px; height: 550px; left: 50%; margin-left: -600px; top: 0; background: url('/images/contact-tl.png') no-repeat;}
#contact-tr {position: absolute; width: 339px; height: 204px; left: 50%; margin-left: 200px; top: 0; background: url('/images/contact-tr.png') no-repeat;}
#contact-br {position: absolute; width: 134px; height: 611px; right: 0; bottom: 0; background: url('/images/contact-br.png') no-repeat;}