/* =Si Additions
----------------------------------------------- */

a { color: #333; font-weight: bold; }
a:hover { color: #666; font-weight: bold; }

/* =Layout
----------------------------------------------- */

html, body { height: 100%; margin: 0; padding: 0; }

html { background: white url(../graphics/page.png) repeat-x; font-family: Helvetiva,Arial,sans-serif; font-size: 10pt; text-align: justify; }

#container { margin: 0 auto; min-height: 100%; position: relative; width: 920px; }
#header { background: url(../graphics/header-overlay.png) repeat-x; position: absolute; top: 0; width: 100%; z-index: 1; }
#top-window { background: url(../graphics/block-shadow.png) no-repeat center bottom; height: 520px; padding-bottom: 70px; position: relative; width: 100%; z-index: 0; }
#body { padding-bottom: 80px; }
#footer { background-color: #9cd7d3; bottom: 0; color: #4c4d4f; font-size: 90%; height: 50px; line-height: 50px; margin: 0; padding: 0 40px; position: absolute; text-align: right; width: 840px; }
#footer .back-to-top { background: url(../graphics/back-to-top.png) no-repeat; display: block; height: 12px; right: 19px; overflow: hidden; position: absolute; text-indent: -1000em; top: 19px; width: 11px; }

#header-banner { width: 692px; height: 67px; position: absolute; top: 10px; right: 10px; }
#social { position: absolute; bottom: 11px; left: 11px; height: 28px; }
#social a { opacity: 0.7; }
#social a:hover { opacity: 1; }

h1 { background: url(../graphics/header.png) no-repeat; text-indent: -1000em; }
h1 a { display: block; height: 87px; width: 208px; }

#pane-1 { float: left; width: 580px; }
#pane-2 { float: right; width: 287px; }

.flush { clear: both; }

/* =Navigation
----------------------------------------------- */

#navigation { background: url(../graphics/navigation-withshadow.png) no-repeat; height: 60px; width: 100%; text-align: right; }
#navigation li { display: inline-block; height: 46px; line-height: 46px; margin: 0 1em; text-transform: lowercase; }
#navigation li.current { background: url(../graphics/navigation-current-marker.png) no-repeat center bottom; }
#navigation a:link, #navigation a:visited { color: #4c4d4f; font-weight: normal; }
#navigation a:hover { color: #666; }

/* =Rota
----------------------------------------------- */

#rota-image-list { height: 520px; overflow: hidden; position: absolute; z-index: 0; }
#rota-image-list li { display: block; height: 520px; width: 920px; }
#rota-image-list li:first-child { display: block; }
#rota-image-list li img { display: block; }
#rota-previous, #rota-next { background-image: url(../graphics/rota-button-underlay.png); height: 54px; overflow: hidden; position: absolute; top: 266px; width: 54px; z-index: 1; }
#rota-previous { left: -27px; }
#rota-next { right: -27px; }
#rota-previous a, #rota-next a { background-repeat: no-repeat; display: block; height: 42px; margin: 6px; text-indent: -1000em; width: 42px; }
#rota-previous a.disabled, #rota-next a.disabled { cursor: default; opacity: 0.5; }
#rota-previous a { background-image: url(../graphics/rota-button-previous.png); }
#rota-next a { background-image: url(../graphics/rota-button-next.png); }

#rota-navigation { background: url(../graphics/rota-navigation.png); bottom: 80px; font-size: 90%; height: 30px; position: absolute; width: 100%; }
#rota-navigation li { display: inline-block; line-height: 30px; margin-left: 40px; }
#rota-navigation li a { color: #c3bdb7; font-weight: normal; }
#rota-navigation li.hover a { color: #fff; }
#rota-navigation li.current a { color: #fff; }

#rota .slide-window { height: 520px; width: 920px; position: absolute !important; z-index: 0; }

/* =Thumbnails
----------------------------------------------- */

#thumbnails { list-style: none; overflow: hidden; }
#thumbnails li { margin-top: 2em; position: relative; }
#thumbnails li a { display: block; }
#thumbnails li img { display: block; }
#thumbnails li:first-child { margin-top: 0; }
#thumbnails li .overlay { background: url(../graphics/thumbnail-overlay.png); display: block; height: 131px; position: absolute; right: 20px; top: 0; width: 20px; }
#thumbnails li .overlay-arrow { background: url(../graphics/thumbnail-arrow.png); display: block; width: 12px; height: 20px; left: 3px; position: absolute; top: 55px; }
#thumbnails li.active .overlay { width: 30px; }

#page-about #pane-1 { float: right; }
#page-about #pane-2 { float: left; }

/* =About
----------------------------------------------- */

#page-about #top-window img { height: 520px; }

/* =Kitchens
----------------------------------------------- */

body.kitchens #top-window { background: none; height: 133px; padding-bottom: 30px; }
body.kitchens #kitchen-image-window { background: url(../graphics/block-shadow.png) no-repeat center bottom; padding-bottom: 70px; }
body.kitchens #kitchen-image-list { background-color: #fff; border-color: #fff; border-style: solid; border-width: 0 4px 0 0; height: 200px; overflow: hidden; position: relative; width: 916px; }
body.kitchens #kitchen-image-list li { border-color: #fff; border-style: solid; border-width: 4px 0 4px 4px; float: left; height: 192px; overflow: hidden; position: relative; width: 225px; }
body.kitchens #kitchen-image-list li a { display: block; }
body.kitchens #kitchen-image-list li img { display: block; height: 192px; left: -85px; position: absolute; width: 340px; }

body.kitchens #kitchen-image-grid li { float: left; margin: 15px; }
body.kitchens #kitchen-image-grid li a { display: block; }
body.kitchens #kitchen-image-grid li img { display: block; width: 276px; }
body.kitchens #kitchen-image-grid li .thumbnail-scaled { height: 100px; width: 276px; }

/* =Contact
----------------------------------------------- */

#map { height: 520px; overflow: hidden; position: absolute; width: 100%; z-index: 0; }

#page-contact #pane-1 { float: right; }
#page-contact #pane-2 { float: left; }

#page-contact #contact-details dt { font-weight: bold; margin-bottom: 0.5em; }
#page-contact #contact-details dd { margin: 0 0 1em 1em; }

#contact-form { width: 580px; }
#contact-form .form-layout { list-style: none; }
#contact-form .form-layout li { border-top: 1px dashed #aaa; margin-top: 1em; padding-top: 1em; }
#contact-form .form-layout li:first-child { border-top: none; margin-top: 0; padding-top: 0; }
#contact-form .form-layout label { display: inline-block; margin-right: 10px; text-align: right; vertical-align: baseline; width: 130px; }
#contact-form .form-layout input { vertical-align: baseline; width: 200px; }
#contact-form .form-layout textarea { vertical-align: baseline; width: 380px; }
#contact-form input, textarea { padding: 0.3em; }
#contact-form .form-submit { margin: 1em; padding: 0.25em 0.5em; text-align: center; }

#status-box { background-color: #eee; border: 1px dotted #aaa; display: none; margin-bottom: 2em; padding: 1em; position: relative; text-align: center; }
#status-box.success { border-color: #090; }
#status-box.error { border-color: #c00; }
#status-box p { margin: 1em 0 0 0; }
#status-box p:first-child { margin: 0; }
#status-box #status-box-close { display: block; height: 0; margin: 0; position: absolute; right: 10px; top: 50%; width: 16px; }
#status-box #status-box-close a { background: url(../graphics/accept.png) no-repeat; display: block; height: 16px; margin-top: -8px; text-indent: -1000em; width: 16px; }

/* =Content
----------------------------------------------- */

#body { color: #4c4d4f; line-height: 1.5em; }

input[type="text"], input[type="password"], textarea { border: 1px solid #999; }
input[type="text"].invalid, input[type="password"].invalid, textarea.invalid { border-color: #c00; }
h2 { background: url(../graphics/h2.png) no-repeat left bottom; font-size: 1.4em; margin-bottom: 1.5em; min-height: 20px; padding-bottom: 6px; }
h2 strong { color: #4e3630; }
#pane-2 h2 { background: none; }
p { margin-bottom: 1em; }