/*************************************************************************************
 *
 * CSS For The Cake Station
 * http://www.thecakestation.co.uk - Version 1.0
 *
 *************************************************************************************
 *
 * Designed and Built by Matthew Davis for Yummy Duck Design
 * Copyright (c) 2010 Matthew Davis
 * Copyright (c) 2010 Yummy Duck Design
 * All rights reserved
 *
 *************************************************************************************
 *
 * Thanks for your interest in the source code
 * Feel free to have a look around and learn from what you see, but please don't steal
 *
 *************************************************************************************/

/************************ RESET ************************/
html, body { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }

html { font-size: 100.01%; }

div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, pre, a, abbr, acronym, address, code, del, dfn, em, img, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }

blockquote, q { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; quotes: "" ""; }
blockquote:before, q:before, blockquote:after, q:after { content: ""; }

th, td, caption { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; text-align: left; font-weight: normal; vertical-align: middle; }

table { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; border-collapse: separate; border-spacing: 0; vertical-align: middle; }

a img { border: none; }

body { line-height: 1.5; font-family: Helvetica Neue, Arial, Helvetica, sans-serif; color: #333333; font-size: 75%; }
body h1 { font-weight: normal; color: #222222; font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
body h1 img { margin: 0; }
body h2 { font-weight: normal; color: #222222; font-size: 2em; margin-bottom: 0.2em; }
body h3 { font-weight: normal; color: #222222; font-size: 1.5em; line-height: 1; margin-bottom: 0.3em; }
body h4 { font-weight: normal; color: #222222; font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
body h5 { font-weight: normal; color: #222222; font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
body h6 { font-weight: normal; color: #222222; font-size: 1em; font-weight: bold; }
body h2 img, body h3 img, body h4 img, body h5 img, body h6 img { margin: 0; }
body p { margin: 0 0 1.2em; }
body a { text-decoration: underline; color: #000099; }
body a:visited { color: #000066; }
body a:focus { color: black; }
body a:hover { color: black; }
body a:active { color: #cc0099; }
body blockquote { margin: 1.5em; color: #666; font-style: italic; }
body strong { font-weight: bold; }
body em { font-style: italic; }
body dfn { font-style: italic; font-weight: bold; }
body sup, body sub { line-height: 0; }
body abbr, body acronym { border-bottom: 1px dotted #666; }
body address { margin: 0 0 1.5em; font-style: normal; }
body del { color: #666; }
body pre { margin: 1.5em 0; white-space: pre; }
body pre, body code, body tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }
body ul { list-style-type: none; margin-bottom: 1em; }
body ol { list-style-type: none; }
body dl { margin: 0 0 1.5em 0; }
body dl dt { font-weight: bold; }
body dd { margin-left: 1.5em; }
body table { margin-bottom: 1.4em; width: 100%; }
body th { font-weight: bold; }
body thead th { background: #c3d9ff; }
body th, body td, body caption { padding: 4px 10px 4px 5px; }
body tr.even td { background: #e5ecf9; }
body tfoot { font-style: italic; }
body caption { background: #eee; }
body em { font-weight: bold; }
/********************** END RESET **********************/

/********************** HTML ***************************/
body { background: #231f20 url('/images/site/bg.jpg') 50% 0 no-repeat; }
.hr { width: 871px; height: 18px; border: none; background: url('/images/site/separator.png') top left no-repeat; margin: 0 auto 15px auto; }
/********************** END HTML * *********************/


/************************ CONTAINER ********************/
#container { border: 10px solid #e93149; border-radius: 35px; -webkit-border-radius: 35px; -moz-border-radius: 35px; width: 960px; margin: 20px auto; background-color: #fff; background: -webkit-gradient(linear, left 50%, left bottom, from(#ffffff), to(#f1dcde)); background: -moz-linear-gradient(-90deg, #ffffff, #ffffff, #f1dcde); }
/********************** END CONTAINER ******************/

/*********** NAVIGATION ****************/
#navigation { background: url('/images/site/navigation.png'); height: 52px; width: 951px; margin: 10px 4px 25px 5px; }
#navigation li { list-style-type: none; float: left; }
#navigation a { height: 46px; display: block; }
#navigation span { display: none; }
#navigation #home { width: 216px; }
body.home #navigation #home, #navigation #home:hover { background: url('/images/site/navigation.png') 0px -52px no-repeat; }
#navigation #about { width: 235px; }
body.about #navigation #about, #navigation #about:hover { background: url('/images/site/navigation.png') -216px -52px no-repeat; }
#navigation #terms { width: 297px; }
body.terms #navigation #terms, #navigation #terms:hover { background: url('/images/site/navigation.png') -451px -52px no-repeat; }
#navigation #contact { width: 201px; }
body.contact #navigation #contact, #navigation #contact:hover { background: url('/images/site/navigation.png') -748px -52px no-repeat; }
#navigation + .hr { width: 874px; height: 10px; border: none; background: url('/images/site/small-separator.png') top left no-repeat; margin: 0 auto 15px auto; }
/*********** END NAVIGATION ************/

/*********** PAGE INFORMATION **********/
#page-information { margin-bottom: 20px;}
#page-information:after { content: " "; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; }

#page-information h1 { text-indent: -9999px; width: 282px; height: 103px; background: url('/images/site/logo.jpg') top left no-repeat; margin-left: 16px; }
#page-information p { width: 425px; padding: 0 0 0 36px; margin: 0; font-size: 1.25em;}
#page-information a.button { padding: 5px 10px; float: right; background-color: #edecde; border: 1px solid #dddac1; border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; color: #636466; text-decoration: none;}
#page-information a.button:hover { text-decoration: underline; }

/**-- Slideshow --**/
#page-information #slideshow { float: right; clear: right; margin: 0 16px 0 16px; }
#page-information #slide-images { position: relative; display: block; margin: 0px; padding: 0px; width: 400px; height: 300px; overflow: hidden; }
#page-information #slide-images li { position: absolute; display: block; list-style-type: none; margin: 0px; padding: 0px; background-color: #ffffff; }
#page-information #slide-images li img { display: block; background-color: #ffff; }

/**-- Cake navigation --**/
#page-information #cake-types { width: 555px; float: right; margin: 0 16px 0 16px; padding: 15px 0; }
#page-information #cake-types #cake-type-navigation li { float: left; width: 255px; margin: 5px 0 0 15px; }
#page-information #cake-types #cake-type-navigation li a { display: block; padding: 5px 10px; text-align: center; background-color: #383c33; background: -webkit-gradient(linear, left 50%, left bottom, from(#5c6356), to(#383c33)); background: -moz-linear-gradient(-90deg, #5c6356, #383c33, #383c33); color: #fff; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; text-decoration: none; }
#page-information #cake-types #cake-type-navigation li a:hover { background-color: #f59265; background: -webkit-gradient(linear, left top, left bottom, from(#f59265), to(#fbc589)); background: -moz-linear-gradient(-90deg, #f59265, #fbc589, #fbc589); text-decoration: underline; }
/******** END PAGE INFORMATION **********/

/************* MAIN CONTENT *************/
#main-content { width: 865px; margin: 0 auto; }
#main-content:after { content: " "; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; }
#main-content .hr { clear: both; }

/**-- Cake type selection --**/
#main-content #cake-type-selection li { float: left; margin: 0 0 25px 30px; }
#main-content #cake-type-selection li img { width: 180px; height: 180px; }
#main-content #cake-type-selection li a.button { display: block; padding: 5px 10px; margin-top: 5px; text-align: center; background-color: #383c33; background: -webkit-gradient(linear, left 50%, left bottom, from(#5c6356), to(#383c33)); background: -moz-linear-gradient(-90deg, #5c6356, #383c33, #383c33); color: #fff; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; text-decoration: none; }
#main-content #cake-type-selection li a.button:hover { background-color: #f59265; background: -webkit-gradient(linear, left top, left bottom, from(#f59265), to(#fbc589)); background: -moz-linear-gradient(-90deg, #f59265, #fbc589, #fbc589); text-decoration: underline; }


/**-- Cake gallery --**/
#main-content #gallery-container { width: 871px; margin: 0 auto; text-align: left; position: relative; }
#main-content #gallery-container #cake-gallery { display: block; padding: 0; margin: 0; }
#main-content #gallery-container #cake-gallery li { display: inline; width: 192px; height: 147px; float: left; margin: 0 0 20px 21px; }
#main-content #gallery-container #cake-gallery li a { display: block; width: 190px; height: 145px; float: left; text-decoration: none; background: #fff; border: 1px solid #999; }
#main-content #gallery-container #cake-gallery li a img { display: block; width: 180px; height: 135px; border: 5px solid #fff; }
#main-content #gallery-container #cake-gallery li a:hover { white-space: normal; position: relative; }
#main-content #gallery-container #cake-gallery li a:hover img { position: absolute; left: -90px; top: -68px; width: 360px; height: 270px; border-color: #ffffff; -webkit-transition-property: left, top, width, height; -webkit-transition-duration: 1s; -moz-transition-property: left, top, width, height; -moz-transition-duration: 1s; }


/**-- Contact form --**/
#main-content form#contact { width: 500px; }
#main-content form#contact label { display: block; font-weight: normal; color: #222222; font-size: 1.5em; line-height: 1; margin-bottom: 0.3em; color: #333; }
#main-content form#contact label.error { color: #f00; }
#main-content form#contact input, #main-content form#contact textarea { color: #555; font-size: 1.5em; margin-bottom: 20px; width: 100%; }
#main-content form#contact input[type=submit] { color: #333; }

/**-- Contact type information --**/
#main-content #contact-types li { float: left; width: 275px; margin-left: 11px; }
#main-content #contact-types li li { float: none; margin: 0; }
/********* END MAIN CONTENT *********/

/**************** FOOTER ************/
#footer p { text-align: center; color: #f00; }
/************ END FOOTER ************/