@charset "utf-8";
/* CSS Document */

body {background:url(images/background.gif) repeat; font:normal 13px/18px Arial, Helvetica, sans-serif; text-align:center; margin:0 auto;}
a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#000;}
p { margin:10px 0px 0px 0px; padding:0px; text-align:left; font-size:16px;}

/* -------------------------------------------------------------------CONTAINER AREA-----------------------------------------------------------------------*/
#container {margin:0 auto; width:996px; height:580px; text-align:left; background-color:#fff; position:relative;}
/* ---------------------------------------------------------------END CONTAINER AREA-----------------------------------------------------------------------*/

/* -------------------------------------------------------------------LOGO AREA----------------------------------------------------------------------------*/
#logoarea{display:block; width:996px; height:66px; margin:0 auto; position:relative;}
#logoarea ul {margin:0px; padding:0px; list-style-type:none;}
#logoarea li {float:left;}
#logoarea div#cakelogo {width:78px; height:66px; background:transparent url(images/logo_cake.gif);}
#logoarea div#namelogo {width:279px; height:66px; background:transparent url(images/logo_title.gif);}
#logoarea div#blank {width: 484px; height:66px; background: transparent;}
#logoarea div#bylogo {width:155px; height:66px; background:transparent url(images/logo_byorly.gif);}
/* ---------------------------------------------------------------END LOGO AREA----------------------------------------------------------------------------*/

/* -------------------------------------------------------------------MAIN MENU----------------------------------------------------------------------------*/
#menu {display:block; width:996px; height:42px; margin:0 auto; position:relative;}
#menu ul {margin:0px; padding:0px; list-style-type:none;}
#menu li {float:left;}
#menu a:link, #menu a:visited { height:42px;}
#menu li.home1 {width:75px; background:transparent url(images/btn_home.gif);}
#menu li.cakeservices1 {width:85px; background:transparent url(images/btn_cakeservices.gif);}
#menu li.flavoursfillings1 {width:173px; background:transparent url(images/btn_flavoursfillings.gif);}
#menu li.cakegallery1 {width:130px; background:transparent url(images/btn_cakegallery.gif);}
#menu li.orderonline1 {width:131px; background:transparent url(images/btn_orderonline.gif);}
#menu li.contactus1 {width:116px; background:transparent url(images/btn_contactus.gif);}  
#menu a {display:block; height:42px; color:#000; overflow:hidden;}
#menu a:hover {height:42px;}

#menu a#home {width:75px; background:transparent url(images/btn_home_on.gif) 0px -42px no-repeat;}
#menu a#cakeservices {width:85px; background:transparent url(images/btn_cakeservices_on.gif) 0px -42px no-repeat;}
#menu a#flavoursfillings {width:173px; background:transparent url(images/btn_flavoursfillings_on.gif) 0px -42px no-repeat;}
#menu a#cakegallery {width:130px; background:transparent url(images/btn_cakegallery_on.gif) 0px -42px no-repeat;}
#menu a#orderonline {width:131px; background:transparent url(images/btn_orderonline_on.gif) 0px -42px no-repeat;}
#menu a#contactus {width:116px; background:transparent url(images/btn_contactus_on.gif) 0px -42px no-repeat;}
#menu div#blank {width:402px; height:42px; background: url(images/btn_blank.gif)}
#menu div#filler {width:3px; height: 42px; background: url(images/menufiller1.gif)}

#menu a#home:hover {background-position:0px 0px; z-index:50;}
#menu a#cakeservices:hover {background-position:0px 0px; z-index:50;}
#menu a#flavoursfillings:hover {background-position:0px 0px; z-index:50;}
#menu a#cakegallery:hover {background-position:0px 0px; z-index:50;}
#menu a#orderonline:hover {background-position:0px 0px; z-index:50;}
#menu a#contactus:hover {background-position:0px 0px; z-index:50;}
/* -------------------------------------------------------------------END MAIN MENU------------------------------------------------------------------------*/

/* -------------------------------------------------------------------FLAVOURS & FILLINGS------------------------------------------------------------------------*/
#table {width:992px; text-align:left; background-color:#fff; position:relative; margin:20px auto; list-style:none;}
#table ul {padding:0px; margin:0px; list-style:none;}
#table li {float:left;} 

#column {width:247px; text-align:left; position:relative;}
#column.spacing {margin-right:1px;}
#header {height:25px; text-align: center; font-weight:bold; background-color:#000; color:#fff; font-size:16px; line-height:25px;}
#column ul {list-style:none; margin:0; padding:0;}
#column li {width:247px; height:20px; font-size: 12px; text-indent:5px; line-height:20px; color:#000; text-decoration:none; background-color:#ccc;}
#column li.odd {background-color:#f1f1f1;}
#column li.even {background-color:#e7e7e7;}
#column li.oddspecial {font-weight:bold; text-align:left;}
#column li.evenspecial {font-weight:bold; text-align:left;}
/* -------------------------------------------------------------------END TABLE------------------------------------------------------------------------*/


/* -------------------------------------------------------------------CAKE GALLERY-------------------------------------------------------------------------*/
.photo {width:990px; text-align:left; position:relative; margin:0 auto; top:0px;}
.photo ul.topic {padding:0; margin:0; list-style:none; width:990px; height:auto; position:relative; z-index:10;}
.photo ul.topic li {display:block; width:165px; height:31px; float:left;}
.photo ul.topic li a.set {display:block; font-size:18px; width:164px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; border:1px solid #fff; border-width:1px 1px 0 0; background:#ccc; font-size:16px;}
.photo ul.topic li a ul, .photo ul.topic li ul {display:none;}
.photo ul.topic li.active a{color:#000; background:#ccc;}
.photo ul.topic li a:hover,.photo ul.topic li a {color:#fff; background:#000; font-weight:bold;}
.photo ul.topic li.active ul {display:block; position:absolute; left:0px; top:30px; list-style:none; padding:0; margin:0; height:620px; background:#7f0606; width:929px; padding:10px 10px; border:20px solid #000; z-index:1;}
.photo ul.topic li a:hover ul, .photo ul.topic li:hover ul {display:block; position:absolute; left:0px; top:30px; list-style:none; padding:0; margin:0; height:620px; background:#7f0606; width:929px; padding:10px 10px; border:20px solid #000; z-index:100;}
.photo ul.topic li ul li {display:inline; width:128px; height:152px; float:left; border:1px solid #000; margin:1px;}
.photo ul.topic li ul li a {display:block; width:126px; height:150px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;}
.photo ul.topic li ul li a img {display:block; width:116px; height:140px; border:5px solid #fff;}
.photo ul.topic li a:hover ul li a:hover, .photo ul.topic li:hover ul li a:hover {white-space:normal; position:relative;}
.photo ul.topic li a:hover ul li a:hover img, .photo ul.topic li:hover ul li a:hover img {position:absolute; left:-50px; top:-32px; width:220px; height:280px; border-color:#000;}
/* -------------------------------------------------------------------END CAKE GALLERY----------------------------------------------------------------------*/


/* -------------------------------------------------------------------ORDER FORM----------------------------------------------------------------------------*/
#orderform{ display:block; width:585px; height:450px; position:relative; float:left;}
#orderform ul {border:0px; margin:0px; padding:0px; list-style-type:none;}
#orderform li {clear:both;}
label {text-align:right; width:130px; float:left; padding-right:3px; padding-bottom:8px; font-weight:bold;}
input {text-align:left; float:left; margin-right:5px; width:150px; padding:0px;}
input.short {width:32px;}
select {text-align:left; float:left; margin-right:5px; width:154px; padding:0px;}
#orderprocessarea {width:411px; height:472px; background: #000; position:relative; float:left;}
#step {width:411px; height:90px; position:relative; margin-bottom:10px;}
#createaccount {width:90px; height:90px; background:transparent url(images/orderingstep1.png); position:relative; float:left; margin-left:5px;}
#makerequest {width:90px; height:90px; background:transparent url(images/orderingstep2.png); position:relative; float:left; margin-left:5px;}
#awaitresponse {width:90px; height:90px; background:transparent url(images/orderingstep3.png); position:relative; float:left; margin-left:5px;}
#makepayment {width:90px; height:90px; background:transparent url(images/orderingstep4.png); position:relative; float:left; margin-left:5px;}
#orderprocesstext{color:#fff; height:90px; width:316px; position:relative;}
#orderprocesstitle {display:block; margin-top:10px; margin-bottom:25px; color:#fff; text-align:center; font-weight:bold; font-size:22px;}
#buttonarea {
	display:block;
	width:189px;
	height:35px;
	margin:0px auto;
	background:transparent url(images/btn_createaccount.jpg);
	position:relative;
	clear:both;
}
#buttonarea a:hover {display:block; width:189px; height:35px; margin:0 auto; background:transparent url(images/btn_createaccount_on.jpg); position:relative;}
/* -------------------------------------------------------------------END ORDER FORM------------------------------------------------------------------------*/

/* -------------------------------------------------------------------CONTENT AREA--------------------------------------------------------------------------*/
#underconstruction{position: relative; background-image: url(images/underconstruction.jpg); height: 500px; width:996px; top: 2px; margin: 0; padding: 0;}
h1 {font-size:26px; color:#000; letter-spacing:-1px; font-weight:bold; text-align:center; margin:20px 5px 20px 5px; padding:0px; position:relative;}
h2 {font-size:18px; color:#000; font-weight: normal; text-align:center; position:relative;}
h3 {font-size:16px; color:#000; text-align:center; position:relative;}
h4 {font:normal 14pt/150% Arial, Verdana, sans-serif; color:#444; margin:0px; }
hr.a {border:1px solid #cfo; height:1px; margin:0 auto; text-align:left; position:relative;}
hr.b {border:1px solid #cfo; height:1px; margin:0 auto; text-align:left; position:relative;}
#smalltext {font-size:14px; color:#000; text-align:left; margin:5px 5px 5px 5px; position:relative;}
#footer {font-size:9px; color:#000; text-align:left; margin:5px 5px 5px 5px; position:relative;}
#tip {font-size:11px; color:#000; text-align:left; float:left; position:relative;}
#smalltextbold {font-size:14px; color:#000; text-align:left; font-weight:bold; margin:5px 5px 5px 5px; position:relative;}
#textcenter { text-align:center;}
#sectionintro {display: block; width:994px; height:auto; padding-bottom:25px; background-color: #fcc; text-align:center; line-height:20px; font-size: 16px; color:#000; margin:5px auto 10px 0; position:relative; border:1px solid #000; }

#main { background:#fcc; padding:20px; overflow:auto; height:auto; }
#content { float:left; width:49.9% }
#slideshow { float:left; width:476px; background:none; }
.clearer { clear:both; }

#slideshow {
    position:relative;
    height:600px;
    border:1px solid #fff;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
    width:476px;
    height:600px;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}

div.padded { padding:20px; }

/* -------------------------------------------------------------------END CONTENT AREA----------------------------------------------------------------------*/

