/*******************************************************************************
    This is the CSS file for Krush Floral Design (www.krushfloraldesign.co.uk)
    Copyright 2010 AHB Business Serivces (www.ahb-bs.com)

    No reproduction, reuse or any other kind of copy of this file can be used
    without the express permission of AHB Business Services (www.ahb-bs.com)
*******************************************************************************/

/* Clear the hatches and make sure the slider bar appears so that switching
   between pages doesn't reposition the menu, headers and footers
*/
* {
    padding: 0;
    margin: 0;  }

html {
    min-height: 100%;
    margin-bottom: 1px;  }


/* Body
   This section manages the body of the html and sets up the basic settings for
   font, size, padding and colour.
*/
body {
    margin: 20px;
    padding: 0;
    font: normal 1em Arial, 'Trebuchet MS', sans-serif;
    color: #444;
    background: #ffffff url('images/background_2.jpg') no-repeat left top;
    text-align: left;
    height: 100%;  }

h1 {
    margin: 10px 0 0 0;
    font: bold 18px Arial, 'Trebuchet MS', sans-serif;
    color: #d25b81;  }


h2 {
    margin: 8px 0 0 0;
    font: bold 16px Arial, 'Trebuchet MS', sans-serif;  }

h3 {
    margin: 5px 0 0 0;
    font: bold 14px Arial, 'Trebuchet MS', sans-serif;  }

p {
    margin: 4px 0 6px 0;
    text-align: justify;
    font: normal 14px Arial, 'Trebuchet MS', sans-serif;  }

a {
    color: #d25b81;
    text-decoration: none;
    font: normal 1em Arial, 'Trebuchet MS', sans-serif;  }

a:hover {
    color: #fe92b2;
    text-decoration: none;
    font: normal 1em Arial, 'Trebuchet MS', sans-serif;  }

img {
    border: 1px solid #999;
    margin: 0px;
    padding: 5px;
    box-shadow: 2px 2px 3px #888;
    -moz-box-shadow: 2px 2px 3px #888;
    -webkit-box-shadow: 2px 2px 3px #888;  }



/* Container
   This section creates the floating 'page' into which the actual html is
   placed.  This entitiy can be placed to the left, right, middle or stretched
   across the entire page.  It allows a different backdrop compared to the Body
   section and can now include (in HTML 5/ CCS3) drop shadows.  */
#container {
    display: block;
    width: 800px;
    background: #fff;
    border: 1px solid #aaa;
    margin: 0 auto;
    padding: 0px;
    box-shadow: 5px 5px 5px #888;
    -moz-box-shadow: 5px 5px 5px #888;
    -webkit-box-shadow: 5px 5px 5px #888;  }


#container #fadeshow1 {
    margin: 0px 0px 10px 0px;
    border-bottom: 4px solid #fe92b2;
    border-right: 0px solid #444;  }

#container #fadeshow1 img {
    border-top: 3px solid #444;
    border-bottom: 3px solid #444;
    border-left: 0px solid #444;
    border-right: 0px solid #444;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    border-bottom: 4px solid #fe92b2;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;  }



/* Header
   This section holds the logo or other header information.  */
#header {
    width: 100%;
    padding: 0px;
    margin: 0px;  }

#header img {
    display: inline;
    float: left;
    border: none;
    margin: 0px;
    padding: 0px;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;  }

#header a {
    color: #444;
    display: inline;
    border: none;
    margin: 0px;
    padding: 0px;  }

#header h3 {
    display: inline;
    float: left;
    margin: 0px;
    width: 170px;
    color: #fe92b2;
    text-align: center;
    padding: 15px 0px 0 0px;
    font: bold 16px Arial, Wingdings, 'Trebuchet MS', sans-serif;  }

#header h4 {
    display: inline;
    float: left;
    width: 170px;
    margin: 0px 0 0 0;
    text-align: center;
    padding: 0px 0px 0 0px;
    font: normal 17px Arial, Wingdings, 'Trebuchet MS', sans-serif;  }



/* Menu
   This menu sits inside the header section in order to give a simple but
   elegant menu in the bottom right of the header.  This will sit on top of the
   logo or other header information.  */
#menu {
    display: inline;
    float: right;
    width: 51%;
    padding: 0px 8px 0px 0px;
    margin:16px 0px 0px 0px;  }

#menu ul {
    margin: 0px;
    padding: 0px;
    display: inline;
    float: right;  }

#menu li {
    display: block;
    float: left;
    list-style: none;  }

#menu li a {
    display: block;
    margin: 0px 2px;
    padding: 6px 15px 6px;
    width: 65px;
    text-align: center;
    color: #444;
    background: #ffe3eb;
    text-decoration: none;
    border-top: solid 1px #aaa;
    border-left: solid 1px #aaa;
    border-right: solid 1px #aaa;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;  }

#menu li a:hover {
    background: #feabc2;
    color: #111;
    border-top: solid 1px #999;
    border-left: solid 1px #999;
    border-right: solid 1px #999;  }

#menu .active a{
    background: #feabc2;
    color: #fff;
    border-top: solid 1px #777;
    border-left: solid 1px #777;
    border-right: solid 1px #777;  }



/* Main
   This is there the core of your page appears  */
#main {
    display: block;
    border-top: 4px solid #fe92b2;
    padding: 0px;
    margin: 0px;
    float: none;  }

#main #detail {
    display: block;
    padding:  0 10px 10px 20px;
    margin: 0px;
    float: none;  }

#container #main #detail p {
    margin: 4px 0px 6px 0px;
    text-align: justify;
    font: normal 14px Arial, 'Trebuchet MS', sans-serif;
    line-height: 18px;
}

#main #detail h3.news {
    width: 500px;
    margin: 5px 0 0 35px;
    font: bold 14px Arial, 'Trebuchet MS', sans-serif;  }

#main #detail p.news {
    width: 500px;
    border-top: 3px solid #fe92b2;
    border-bottom: 3px solid #fe92b2;
    margin: 0px 0 10px 35px;
    padding: 2px 0 2px 0;
    font: normal 14px Arial, 'Trebuchet MS', sans-serif;  }

#main img.right {
    margin: 0px 0px 5px 10px;
    float: right; }

#main img.right-no-border {
    border: 0px solid #444;
    margin: 0px 0px 5px 20px;
    padding: 0px;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    float: right; }

#main img.left-no-border {
    border: 0px solid #444;
    margin: 5px 20px 0px 0px;
    padding: 0px;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    float: left; }

#main img.left {
    margin: 0px 10px 5px 0px;
    float: left; }

#main img.no-border {
    border: 0px solid #444;
    margin: 0px;
    padding: 0px;
    border-bottom: 4px solid #fe92b2;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;  }

#main img.no-borders {
    border: 0px solid #444;
    margin: 15px auto 5px;
    text-align: center;
    padding: 0px;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;  }



#main #gallery {
    text-align: center;
    display: block;
    margin: 10px 10px 10px;
    padding: 0px 10px 20px;  }

#main #gallery.header {
    height: 280px;
    background: #fcdfe8;
    border-top: 2px solid #fe92b2;
    border-bottom: 2px solid #fe92b2;
    display: block;
    margin: 10px 20px 10px;
    padding: 0px 10px;  }

#main #gallery.header a {
    display: block;
    text-align: center;
    line-height: 180px;
    text-decoration: none;
    margin: 0px;
    padding: 0px;
    float: left;
    width: 230px;
    height: 180px;  }

#main #gallery a {
    display: block;
    text-align: center;
    line-height: 230px;
    text-decoration: none;
    margin: 0px;
    padding: 0px;
    float: left;
    width: 230px;
    height: 230px;  }

#main #gallery a:hover img {
    border: 1px solid #fe92b2;
    box-shadow: 4px 4px 6px #888;
    -moz-box-shadow: 4px 4px 6px #888;
    -webkit-box-shadow: 4px 4px 6px #888;  }

#main #gallery a h1 {
    margin: 0px 10px 0px 10px;
    font: bold 15px Arial, 'Trebuchet MS', sans-serif;
    width: 240px;
    margin: 5px;
    padding: 0px;
    text-align: center;  }

#main #gallery img {
    background: #fff;
    line-height: 250px;
    vertical-align: middle;
    margin: 10px 20px;
    padding: 5px;  }

#main #detail ul {
    margin: 3px 0 0 20px;
    padding: 0px;  }

#main #detail li {
    margin: 0px 0 3px 0px;
    padding: 0px;
    font: normal 14px Arial, 'Trebuchet MS', sans-serif;  }



/* Service Offerings
   This lays out the offerings on the front page. */
#main #detail #offerings {
    width: 220px;
    display: block;
    float: left;
    background: #fcdfe8;
    margin: 5px 30px 10px;
    padding: 5px 0px;
    border-top: 3px solid #fe92b2;
    border-bottom: 3px solid #fe92b2;  }
    
#main #detail #offerings h2 {
    margin: 0px 10px;
    font: bold 18px Arial, Wingdings, 'Trebuchet MS', sans-serif;
    color: #d25b81;  }

#main #detail #offerings ul li {
    margin: 5px 0px 5px 10px;
    color: #d25b81;  }



/* Service Offerings
   This lays out the offerings on the front page. */
#main #detail #offerings-wide {
    width: 400px;
    height: 80px;
    display: block;
    background: #fcdfe8;
    margin: 10px 0px 10px 280px;
    padding: 5px 0px;
    border-top: 3px solid #fe92b2;
    border-bottom: 3px solid #fe92b2;  }

#main #detail #offerings-wide h2 {
    margin: 0px 10px;
    font: bold 18px Arial, Wingdings, 'Trebuchet MS', sans-serif;
    color: #d25b81;  }

#main #detail #offerings-wide ul{
    display: block;  }

#main #detail #offerings-wide ul li {
    width: 180px;
    text-align: center;
    display: block;
    float: right;
    color: #d25b81;  }



/* Contact
   This sets out how the Contact page is displayed, inlcuding the form and error
   messages. */
#main #detail .contacts {
    display: block;
    width: 500px;
    margin: 30px auto;
    padding: 0px; }

#main #detail .contacts h3 {
    float: left;
    margin: 5px 10px 5px 40px;
    color: #fe92b2;
    width: 110px;
    font: bold 14px Arial, Wingdings, 'Trebuchet MS', sans-serif;
    padding: 0px; }

#main #detail .contacts h4 {
    float: left;
    min-width: 170px;
    text-align: left;
    margin: 0px 10px 0px 40px;
    font: normal 14px Arial, Wingdings, 'Trebuchet MS', sans-serif;
    padding: 0px;  }

#main #detail .contacts a {
    color: #222;  }

#main #detail form {
    width: 450px;
    background: #ffe3eb;
    border: 1px solid #fe92b2;
    padding: 0px 10px 10px;
    margin: 0px auto 30px;  }

#main #detail .row label {
    cursor: pointer;
    clear: both;
    float:left;
    color: #555;
    width: 80px;
    font: bold 14px Arial, Wingdings, 'Trebuchet MS', sans-serif;
    margin: 0px 10px;
    padding: 10px;  }

#main #detail .row input {
    border: 1px solid #fe92b2;
    float: left;
    width: 250px;
    background: #fff;
    font: normal 14px Arial, 'Trebuchet MS', sans-serif;
    margin: 5px 10px;
    padding: 5px;  }

#main #detail .row textarea {
    float: left;
    background: #fff;
    border: 1px solid #fe92b2;
    font: normal 14px Arial, 'Trebuchet MS', sans-serif;
    padding: 5px;
    width: 290px;
    margin: 10px 10px 10px 10px;  }

#main #detail .submit input {
    float: left;
    width: 220px;
    color: #333;
    display: block;
    cursor: pointer;
    border: 1px solid #999;
    font: normal 14px Arial, 'Trebuchet MS', sans-serif;
    background: #eee;
    margin: 0px 0px 0px 130px;
    padding: 10px;  }

#main #detail input[type="submit"]:hover, #main #detail input[type="submit"]:focus {
    border: 1px solid #fe92b2;
    color: #111;
    background: #ffe3eb;  }

#main #detail p.error{
    padding: 0;
    text-align: center;
    margin: 5px;
    font: bold 16px Arial, Wingdings, 'Trebuchet MS', sans-serif;
    color: red;  }

#main #detail h2.submitted{
    display: block;
    float: left;
    border: 3px solid #fff;
    padding: 10px;
    text-align: center;
    margin: 20px 0 20px 20px;
    font: normal 15px Arial, Wingdings, 'Trebuchet MS', sans-serif;
    color: #333;  }

#main #detail #facebook {
    text-align: center;
    display: block;
    width: 490px;
    margin: 10px auto 10px;
    padding: 0px; }

#main #detail #facebook img {
    text-align: center;
    padding: 0px;
    border: 0px;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;  }

#main #detail #facebook a {
    text-align: center;
    padding: 0px;
    maring: 0px;
    border: 0px;  }

#main #detail #facebook h3 {
    width: 400px;
    text-align: center;
    padding: 0px;
    border: 0px;  }



/* Lightbox (Pictures)
   This section covers the gallery and the way the images are displayed */
#lightbox {
    position: absolute;
    left: 0; width: 100%;
    z-index: 100;
    text-align: center;
    line-height: 0;  }

#lightbox img {
    margin: 0px;
    padding: 0px;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    width: auto;
    height: auto;  }

#lightbox a img {
    border: none;  }

#outerImageContainer {
    position: relative;
    background-color: #fff;
    width: 250px;
    height: 250px;
    margin: 0 auto;  }

#imageContainer {
    padding: 10px; }

#loading {
    position: absolute;
    top: 40%; left: 0%;
    height: 25%;
    width: 100%;
    text-align: center;
    line-height: 0; }

#hoverNav{
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 100%;
    z-index: 10; }

#imageContainer>#hoverNav{
    left: 0;}

#hoverNav a{
    outline: none;}

#prevLink, #nextLink{
    width: 49%;
    height: 100%;
    background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */
    display: block; }

#prevLink {
    left: 0;
    float: left;}

#nextLink {
    right: 0;
    float: right;}

#prevLink:hover, #prevLink:visited:hover {
    background: url(../images/prevlabel.gif) left 15% no-repeat; }

#nextLink:hover, #nextLink:visited:hover {
    background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer {
    font: 10px Verdana, Helvetica, sans-serif;
    background-color: #fff;
    margin: 0 auto;
    line-height: 1.4em;
    overflow: auto;
    width: 100%; }

#imageData {
    padding:0 10px;
    color: #666; }

#imageData #imageDetails {
    width: 70%;
    float: left;
    text-align: left; }

#imageData #caption {
    font-weight: bold;	}

#imageData #numberDisplay {
    display: block;
    clear: left;
    padding-bottom: 1.0em;	}

#imageData #bottomNavClose {
    width: 66px;
    float: right;
    padding-bottom: 0.7em;
    outline: none;}

#overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
    width: 100%;
    height: 500px;
    background-color: #000; }



/* Footer
   This appears at the bottom o the page.  This footer appears below the
   container so that it comes off the floating page.  */
#footer {
    text-align: right;
    width: 800px;
    padding: 10px;
    font: normal 0.7em Arial, 'Trebuchet MS', sans-serif;;
    color: #bbb;
    margin: 0px auto;  }

#footer p {
    float: right;
    margin: 0;
    padding: 0; }

#footer .AHBfooter p {
    float: left;
    margin: 0;
    padding: 0;  }

.AHBfooter a {
    color: #888 }





/* misc */
.clear, .clearer {clear: both;}
.clearer {font-size: 0;}