/* general elements */
body { margin: 0; background: url(images/bg.jpg) no-repeat; #overflow-y: hidden; }
body, p, a, input, textarea, button { font: 13px Arial, Helvetica, sans-serif; line-height: 19px; text-decoration: none; color: #000; }
a:focus, a:active { -moz-outline: none; outline: none; border: none; }
a:hover { text-decoration: underline; }
p { margin: 0 0 20px 0; }

/* classes */
.hidden { display: none; }
.small { font-size: 11px; line-height: 17px; }
.large { font-size: 14px; line-height: 26px; }
.xlarge { font-size: 17px; line-height: 26px; }
.bold { font-weight: bold; }
.caps { text-transform: uppercase; }

/* colours */
.white { color: #fff; }
.cyan { color: #00AEC5; }
.green { color: #8CC63F; }
.red { color: #ED1941; }
.lilac { color: #91278F; }
.orange { color: #F5A01A; }
.blue { color: #2A3990; }

.cyan_bg { background-color: #CCEAEF; }
.green_bg { background-color: #E0EECB; }
.dark_green_bg { background-color: #8CC63F; }
.lilac_bg { background-color: #E0D2E7; }
.orange_bg { background-color: #FDE2C0; }
.blue_bg { background-color: #D9DCEF; }

/* logo */
h1 { padding: 0; margin: 0; cursor: pointer; }
h1.large { background: url(images/logo-large.png) no-repeat; width: 231px; height: 198px; position: absolute; bottom: 27px; right: 47px; }
h1.regular { background: url(images/logo.png) no-repeat; width: 123px; height: 105px; position: absolute; bottom: 20px; left: 18px; }

/* vertical/horizontal align */
html, body, #o, #i { height: 100%; width: 100%; vertical-align: middle; }

/* containers */
#c1 { width: 838px; height: 524px; position: relative; margin: 0 auto; }
#c2 { width: 801px; height: 487px; background-color: #fff; position: absolute; top: 18px; left: 18px; }
#content { width: 427px; height: 338px; padding: 20px; position: absolute; top: 38px; right: 22px; overflow: hidden; }

/* squares */
#s1 { width: 568px; height: 417px; position: absolute; top: 0; right: 0; border: 1px solid #fff; }
#s2 { width: 324px; height: 469px; position: absolute; bottom: 0; left: 0; border: 1px solid #fff; border-right: none; }
#s3 { width: 568px; height: 504px; position: absolute; top: 0; right: 0; border: 1px solid #fff; border-bottom: none; }
#s4 { width: 35px; height: 20px; position: absolute; bottom: 0; right: 0; border: 1px solid #fff; border-left: none; border-top: none; }

/* top menu */
#menu { list-style: none; padding: 0; margin: 0; position: absolute; top: 18px; left: 26px; }
#menu li { float: left; margin-right: 5px; }
#menu a { display: block; width: 36px; height: 159px; background-repeat: no-repeat; overflow: hidden; }
#menu.alt a { height: 40px; }
#menu a:hover, #menu a.selected { height: 159px; text-decoration: none; }
#menu #am { background-image: url(images/about-me.png); }
#menu #mw { background-image: url(images/my-work.png); }
#menu #sp { background-image: url(images/start-up-packages.png); }
#menu #cw { background-image: url(images/corporate-work.png); }
#menu #so { background-image: url(images/special-occasions.png); }
#menu #cm { background-image: url(images/contact-me.png); }
#menu #am:hover { background-image: url(images/about-me-selected.png); }
#menu #mw:hover { background-image: url(images/my-work-selected.png); }
#menu #sp:hover { background-image: url(images/start-up-packages-selected.png); }
#menu #cw:hover { background-image: url(images/corporate-work-selected.png); }
#menu #so:hover { background-image: url(images/special-occasions-selected.png); }
#menu #cm:hover { background-image: url(images/contact-me-selected.png); }

/* footer links */
#footer_links { position: absolute; bottom: -6px; left: 332px; list-style: none; padding: 0; margin: 0; font-size: 11px; line-height: 17px; }
#footer_links.alt { left: 37px; }
#footer_links li { float: left; padding-right: 6px; background: url(images/seperator.png) no-repeat 100% 3px; margin-right: 4px; }
#footer_links li.last { background: none; }
#footer_links a { color: #fff; font-size: 11px; line-height: 17px; }
#email_me { color: #fff; font-size: 12px; position: absolute; bottom: -6px; right: 45px; }

/* contact form */
#contact_form { clear: left; padding: 10px 0 0 0; }
#contact_form div { height: 15px; padding: 10px 0 10px 5px; margin: 7px 7px 0 0; float: left; width: 200px; background: #fff; }
#contact_form input { border: none; background: none; margin-left: 5px; width: 155px; }
#contact_form textarea { border: none; background: #fff; width: 407px; padding: 5px; height: 133px; margin: 7px 0; }
#contact_form button { border: none; background: none; margin: 0; padding: none; float: right; cursor: pointer; }

/* portfolio */
.circle-red, .circle-white { display: block; width: 16px; height: 22px; padding: 2px 0 0 8px; float: left; margin: 0 5px 0 0; text-align: left; background: no-repeat; font-weight: bold; }
.circle-red { background-image: url(images/circle-red.png); color: #fff; }
.circle-white { background-image: url(images/circle-white.png); color: #ED1941; }
.circle-red:hover, .circle-white:hover { text-decoration: none; }
.circle-white:hover { background: url(images/circle-red.png); color: #fff; }
#caption { position: absolute; right: 35px; top: 336px; line-height: 15px; }

/* hide elements for CSS browsers */
h1 span, #menu span { visibility: hidden; }