﻿/* Base */
body { background: #fcfcfc; margin:0 auto; overflow-x: hidden; }
form { font-family: Nunito; font-size: 0.8em; color: #444; margin:0 auto; margin-top:0px; margin-bottom:0px; width:100%; padding: 0px; width:100%; line-height:1.4em; overflow:hidden;  }
h1 { font-family: Nunito; font-size: 2.0em; letter-spacing:0.01em; color: #3C3C3B; font-weight: normal; margin-top:0px; margin-bottom:10px; text-transform: none; line-height:1.3em; }
h2 { font-family: Nunito; font-size: 2.0em; letter-spacing:0.01em; color: #3C3C3B; font-weight: normal; margin-top:0px; margin-bottom:20px; text-transform: none; line-height:1.3em; }
h3 { font-family: Nunito; font-size: 1.3em; color: #aaa; font-weight: normal; margin-top:0px; margin-bottom:16px; line-height:1.4em;  }
h4 { font-family: Nunito; font-size: 1.3em; color: #222; font-weight: 600; margin-top:0px; margin:20px 0px; line-height:1.4em;  }
a:link, a:active, a:visited { text-decoration:underline; border:none; color: #fff; transition:0.25s; }
a:link, a:active, a:visited { color: #4291C8; transition:0.25s; }
.input { border: solid 1px #ddd; border-radius:2px; padding: 5px; font-family:Nunito; font-size:1.0em; color: #444; }
.input:focus { outline:none; }
img:focus { outline:none; }
.cleardeep { clear:both; height:30px; }
.admin { margin-top:30px; }

/* Header */
#header { width: 100%; height:100px; padding-bottom:0px; margin:0; position: relative; background:#222; }
#header .logo { position: absolute; top:10px; left:0px; }
#header .logo img { height:80px; }
#header .weddinglogo { position: absolute; top:10px; right:0px; }
#header .subtitle { position: absolute; z-index:100; right:20px; top:15px; text-align:right; width:auto; color: #444; font-family: Nunito; font-size:1.0em; letter-spacing:0.01em; text-transform:none; line-height:1.6em; color:#fff; }
#header .subtitle h3 { color: #fff; font-size:1.4em; margin-bottom:6px; }
#header .subtitle a:link, #header .subtitle a:active, #header .subtitle a:visited { color: #FFFDAF; }
#header .subtitle a:link:hover, #header .subtitle a:active:hover, #header .subtitle a:visited:hover { color: #FFFF00; text-decoration:underline; }

/* Footer */
.footer { width:100%; padding: 20px 0px; text-align:center; background: #222; color: #fff; }

/* Login */
.login { position: absolute; left:50%; margin-left:-150px; top:240px; border: solid 1px #ddd; padding:10px; width:280px; }
.login h1 { background: #444; color: #fff; text-decoration:none; font-size:1.2em; padding:10px; margin-left:-10px; margin-top:-10px; width:100%; text-align:center; margin-bottom:20px; }
.login .title { width:70px;  }
.login .value { width:190px;  }
.login .clear { clear:both; height:10px; }
.login .loginbutton { margin-top:10px; margin-bottom:25px; text-align:right; width:calc(100% - 8px); }
.login .input { width:calc(100% - 20px); }
.login .button { font-family:Nunito; background: #666; color: #fff; border: solid 0px #fff; border-radius:3px; padding:5px 15px; font-size:1.0em; transition:0.25s; }
.login .button:hover { background: #222; cursor:pointer; }
.login .warning { margin-top:-23px; color: #dd0000; text-align:left; }

/* Tables */
.titleheading {height:26px; color: #fff; font-weight:400; font-size:1.3em; background:#555655; border-bottom: solid 1px #666; line-height:1.2em; }
.titleheading td { padding: 10px; }
.rowdark {  background: #fff; transition:0.25s; }
.rowlight { background: #fff; transition:0.25s; }
.rowdark td { padding: 6px 8px; border-bottom: solid 1px #ddd;}
.rowlight td { padding: 6px 8px; border-bottom: solid 1px #ddd; }
.rowdark:hover { background: #f6f6f6; }
.rowlight:hover { background: #f6f6f6; }
.edit td { padding-bottom:10px; }

/* Checkbox */
.checkboxlist { background: #f8f8f8; padding:10px; }
.checkboxlist input[type="checkbox"] {  vertical-align:middle; width:1.3em; height:1.3em; margin-right:8px }
.checkboxlist input[type="checkbox"]+label {  vertical-align:middle; }
.checkboxlist input[type="checkbox"]:disabled+label {  vertical-align:bottom; color: #aaa; }
.checkboxlist table td { padding-right:30px; }

/* Buttons */
.removebutton { font-family:Nunito; border: solid 1px #ddd; border-radius:3px; padding: 6px 15px; font-size:1.0em; background: #f8f8f8; transition:0.25s; color: #444; }
.removebutton:hover { background: #aa0000; border: solid 1px #aa0000; color: #fff; cursor: pointer; }
.removebutton:focus { outline:none; }
.savebutton { font-family:Nunito; border: solid 1px #ddd; border-radius:3px; padding: 6px 15px; font-size:1.0em; background: #f8f8f8; transition:0.25s; color: #444; }
.savebutton:hover { background: #00aa00; border: solid 1px #00aa00; color: #fff; cursor: pointer; }
.savebutton:focus { outline:none; }
.editbutton { font-family:Nunito; border: solid 1px #ddd; border-radius:3px; padding: 6px 15px; font-size:1.0em; background: #f8f8f8; transition:0.25s; color:#444; }
.editbutton:hover { background: #444; border: solid 1px #444; color: #fff; cursor: pointer; }
.editbutton:focus { outline:none; }
.cancelbutton { font-family:Nunito; border: solid 1px #ddd; border-radius:3px; padding: 6px 15px; font-size:1.0em; background: #f8f8f8; transition:0.25s; color: #aaa }
.cancelbutton:hover { background: #444; border: solid 1px #444; color: #fff; cursor: pointer; }
.cancelbutton:focus { outline:none; }
.imagebutton { margin:2px 5px; transition:0.25s; height:24px;  }
.imagebutton:hover { cursor:pointer; filter: brightness(90%); }
.imagebutton:focus { outline:none; }
	
/* Left Menu */
.leftmenu { width:220px; height:100%; border-right: solid 0px #ccc; background: #f8f8f8; display:inline-block; vertical-align:top; left:0px; position: relative; }
.leftmenu .menuitem { background: #fff; transition:0.25s; width:calc(100% - 22px); padding: 0px 10px; font-size:1.2em; font-family:Nunito; border-bottom: solid 1px #ccc; position: relative; transition:0.25s; }
.leftmenu .menuitem:hover { background: #f8f8f8; cursor: pointer; }
.leftmenu .menuitem .pic { display:inline-block; width:45px; vertical-align:middle; }
.leftmenu .menuitem .pic img { width:30px; height:30px; filter:grayscale(1); transition:0.25s; }
.leftmenu .menuitem:hover .pic img { width:38px; height:38px; margin-left:-4px; margin-top:-4px; }
.leftmenu .menuitem .label { display:inline-block; vertical-align:middle; width:calc(100%  - 65px); line-height:1.4em; height:20px; padding:10px 0px; }
.leftmenu .menuitem .label .light { color: #888; font-size:0.85em; line-height }
.leftmenu .menuitem .toggle { position: absolute; right:20px; top:50%; margin-top:-12px; transition:0.25s; display:none; opacity:0.25; }
.leftmenu .menuitem .toggle:hover { opacity:0.75; }
.leftmenu .menuitemselected { background: #444; color:#fff; transition:0.25s; width:calc(100% - 20px); padding: 8px 10px; font-size:1.2em; font-family:Nunito; border-bottom: solid 1px #ccc; position: relative; filter:brightness(0.96); }
.leftmenu .menuitemselected .pic { display:inline-block; width:45px; vertical-align:middle; transition:0.25s; filter:brightness(10) grayscale(1); }
.leftmenu .menuitemselected .pic img { width:30px; filter:grayscale(1); transition:0.25s; }
.leftmenu .menuitemselected .label { display:inline-block; vertical-align:middle; width:calc(100%  - 65px); line-height:1.4em; }
.leftmenu .menuitemselected .label .light { color: #888; font-size:0.85em; }
.leftmenu .menuitemselected .toggle { position: absolute; right:20px; top:50%; margin-top:-12px; transition:0.25s; display:none; opacity:0.25; }
.leftmenu .menuitemselected .toggle:hover { opacity:0.75; }
.leftmenu .menuitemhome { background: #f4f4f4; transition:0.25s; width:100%; padding: 0px; font-size:1.2em; font-family:Nunito; border-bottom: solid 1px #ccc; position: relative; }
.leftmenu .menuitemhome:hover { background: #e8e8e8; cursor: pointer; }
.leftmenu .menuitemhome .pic { display:inline-block; width:220px; height:220px; margin-right:10px; }
.leftmenu .menuitemhome .pic img { width:100%; height:100%; filter:grayscale(0); }
.leftmenu .menuitemhome .label { display:inline-block; vertical-align:top; width:calc(100%  - 30px); line-height:1.4em; padding:7px 15px; text-align:left; }
.leftmenu .menuitemhome .label .light { color: #888; font-size:0.8em; line-height:1.3em; margin-top:2px; }
.leftmenu .menuitemhome .toggle { position: absolute; right:20px; top:50%; margin-top:-12px; transition:0.25s; display:none; opacity:0.25; }
.leftmenu .menuitemhome .toggle:hover { opacity:0.75; }
.leftmenu .menu { overflow:hidden; }

/* Controls */
.filters { background: #f8f8f8; padding:5px 10px; display:inline-block; border: solid 0px #fff; border-radius:5px; }
.label { display:inline-block; vertical-align:middle; margin:5px 10px 5px 0px; }
.box { display:inline-block; vertical-align:middle; margin:5px 10px 5px 0px; }
.boxgap { display:inline-block; vertical-align:middle; margin:5px 40px 5px 0px;}
.box .info { color: #888; font-size:0.9em; margin-bottom:3px; }
.gap { display:inline-block; margin-right:30px; }
.box input[type="text"] { border: solid 1px #ddd; border-radius:3px; }
.box input[type="text"]:read-only { background: #FFFB9E; }
.box input[type="submit"] { border: solid 1px #aaa; border-radius:3px; padding: 6px 20px; transition:0.25s; background: #f4f4f4; color: #444; }
.box input[type="submit"]:hover { border: solid 1px #444; background: #444; color: #fff; cursor: pointer; }
.box input[type="submit"]:disabled { opacity:0.5; }
.box input[type="submit"]:disabled:hover { opacity:0.5; background: #f4f4f4; border: solid 1px #aaa; cursor:default; color: #444; }
.clear { clear:both; height:30px; }
.clear10 { clear:both; height:10px; }
.clear20 { clear:both; height:20px; }
.item { border: solid 1px #ddd; border-radius:5px; padding: 10px 30px 10px 15px; width:250px; display:inline-block; margin-right:20px; margin-bottom:20px;  vertical-align:top; transition:0.25s; height:90px; font-size:1.0em; position: relative; line-height:1.5em;  box-shadow:  1px 1px 9px #ddd;   }
.itemnew { border: solid 1px #ddd; border-radius:5px; padding: 10px 30px 10px 15px; width:250px; display:inline-block; margin-right:20px; margin-bottom:20px;  vertical-align:top; transition:0.25s; background: #f8f8f8; height:90px; font-size:1.0em; ine-height:1.5em;  box-shadow:  1px 1px 9px #ddd;  }
.item:hover { background: #f8f8f8; cursor: pointer; }
.itemnew:hover { background: #f4f4f4; cursor: pointer; }
.item h2 { font-size:1.8em; margin-bottom:10px; font-weight:600; }
.item h3, .itemnew h3 { color: #444; margin-bottom:5px; font-weight:600; }
.item .logo { position: absolute; top:8px; right:8px; width:24px; height:24px; }
.item .logo img { max-width:100%; max-height:100%; }
.item .col { position: absolute; top:8px; right:8px; width:12px; height:12px; border-radius:6px; border: solid 0px #fff; }
.item .colred { position: absolute; top:8px; right:8px; width:12px; height:12px; border-radius:6px; border: solid 0px #fff; background: #ff0000; }
.item .colamber { position: absolute; top:8px; right:8px; width:12px; height:12px; border-radius:6px; border: solid 0px #fff; background: #ffa500; }
.item .colgreen { position: absolute; top:8px; right:8px; width:12px; height:12px; border-radius:6px; border: solid 0px #fff; background: #63C661; }
.item .colgrey { position: absolute; top:8px; right:8px; width:12px; height:12px; border-radius:6px; border: solid 0px #fff; background: #ddd }
.item .method { position: absolute; right:8px; bottom:8px; }
.item .method img { width:24px; opacity:1; filter:brightness(0.8); }
.item .items { position: absolute; bottom:8px; right:8px; width:24px; height:24px; border-radius:6px; border: solid 0px #fff; opacity:0.25; transition:0.25s; }
.item .items:hover { cursor: pointer; opacity:1; bottom:6px; right:6px; width:28px; height:28px; }
.item .items img { width:100%; height:100%; z-index:100; }
.item .clickable { position:absolute; left:0px; top:0px; height:100%; width:calc(100% - 40px);  } 
.item .hide { padding:4px; color: #fff; background: #ddd; width:10px; display:inline-block; border-right: solid 1px #ddd; margin-top:5px; text-align:center; line-height:1.0em; }
.item .show { padding:4px; color: #fff; background: #aaa; width:10px; display:inline-block; border-right:solid 1px #ddd; margin-top:5px;  text-align:center; line-height:1.0em; transition:0.25s; }
.item .show:hover { background: #666; }
.caption { padding:20px; margin:30px 0px; border: solid 0px #ddd; background:#f8f8f8; display:inline-block;  }
.caption h3 { color: #222; }
.caption .checkboxtable td {padding-right:20px; }
.caption .checkboxtable input { width:1.4em; height:1.4em; vertical-align:middle; }
.caption .checkboxtable label { vertical-align:middle; }
.table table { border: solid 1px #ddd; border-collapse:collapse; }
.table td { border: solid 1px #efefef; border-collapse:collapse; }
.table .pricedate { font-size:1.0em; position: absolute; top:0px; left:0px; padding: 5px 5px; background:#f8f8f8; color: #444;}
.table .totalcost { position: absolute; bottom:0px; right:0px; background: #D3FFCC; padding: 5px 10px 3px 10px; font-size:0.9em; color: #444; }
.table .day { background: #fff; transition:0.25s; }
.table .day:hover { background: #f8f8f8; }
.table .hiddenday { background: #f8f8f8; }
.table .day .input, .table .hiddenday .input  { font-size:1.2em; }
.table .hiddenday .pricedate { opacity: 0.5; filter:grayscale(1); }
.roomname { background: #f8f8f8; color: #222; position: relative; }
.roomname .col { position: absolute; top:8px; right:8px; width:12px; height:12px; border-radius:6px; border: solid 0px #fff; }
.titleheading { font-size:1.0em; line-height:1.4em; }
.available { background: #f4f4f4; color: #444; transition:0.25s; }
.available:hover { background: #e4e4e4; cursor: pointer; }
.booked { background: #4DBC51; color: #fff; transition:0.25s; }
.booked:hover { background: #45A848; cursor: pointer; }
.light { color: #aaa; font-size:1.0em; }
.inputwarning { border: solid 1px #FFD24C; background: #FFF5DB; padding: 5px 5px; font-family:Nunito; font-size:1.0em; }
.textinput { border: solid 1px #ddd; border-radius:2px; padding: 6px 5px; font-family:Nunito; font-size:1.0em; color: #444; }
.textinputwarning { border: solid 1px #FFD24C; background: #FFF5DB; padding: 5px 5px; font-family:Nunito; font-size:1.0em; }
.note { padding-left:20px; font-style:italic; }

.title { display:inline-block; vertical-align:middle; width:120px; margin-right:10px; }
.titletop { display:inline-block; vertical-align:top; width:120px; margin-right:10px; padding-top:6px; }
.value { display:inline-block; vertical-align:middle; }
.value input { max-width:calc(100% - 20px); }
.clearline { clear:both; height:0px; margin-bottom:10px; padding-bottom:10px; border-bottom:solid 1px #eee; }
.buttons { margin-top:50px; }
.button { border: solid 1px #ccc; border-radius:3px; padding: 9px 20px; transition:0.25s; background: #fff; font-size:1.2em; font-family:Nunito; color: #666; margin-right:10px; }
.button:hover { border: solid 1px #444; background: #444; color: #fff; cursor: pointer; }
.button:disabled { opacity:0.5; }
.button:disabled:hover { opacity:0.5; background: #fff; border: solid 1px #ddd; cursor:default; }

/* Main */
.main { display:inline-block;	 vertical-align:top; padding:30px; height:100%; background:#fff; margin-left:-5px; border-left: solid 1px #ccc; min-height:800px; width:calc(100%  - 286px); z-index:100; position: relative; }

/* Items */
.itemtall { width:458px; height:600px; position: relative;  border: solid 1px #ddd; border-radius:5px; padding: 10px 10px 10px 10px; display:inline-block; margin-right:20px; margin-bottom:20px; vertical-align:top;  box-shadow:  1px 1px 9px #ddd;  }
.itemtalldouble { width:960px; height:600px; position: relative;  border: solid 1px #ddd; border-radius:5px; padding: 10px 10px 10px 10px; display:inline-block; margin-right:20px; margin-bottom:20px; vertical-align:top;  box-shadow:  1px 1px 9px #ddd; }
.itemtall h2, .itemtalldouble h2 { padding:10px 15px; width:calc(100% - 10px); background: #eee; color: #222; margin-bottom:0px; margin-top:-10px; margin-left:-10px; text-align:left; font-size:1.4em; line-height:1.3em;}
.itemtall h3, .itemtalldouble h3 { color: #444; margin-bottom:5px; font-weight:600; }
.itemtall .info { overflow-y:auto; height:calc(100% - 23px); margin-left:-10px; width:calc(100% + 20px); padding: 0px; }
.itemtall .method { position: absolute; right:20px; top:20px; }
.itemtall .method img { width:30px; opacity:0.8; filter:brightness(0.8); }
.itemtall .popup { width:800px; margin-left:-420px; height:660px; margin-top:-350px; border-radius:5px; background: #f8f8f8; }
.itemtall .popup h2 { margin-left:-20px; margin-top:-30px; width:100%; margin-bottom:40px; background:#ddd; font-size:1.7em; padding:20px; }
.itemtall .popup .title { display:inline-block; vertical-align:middle; width:90px; margin-right:10px; }
.itemtall .popup .titletop { display:inline-block; vertical-align:top; width:90px; margin-right:10px; margin-top:10px; }
.itemtall .popup .value { display:inline-block; vertical-align:middle; width:calc(100% - 110px); }
.itemtall .popup .value .iteminput { font-family:Nunito; padding: 3px 5px; color: #444; }
.itemtall .popup .clear { clear:both; height:0px; }
.itemtall .popup .email { margin-top:15px; margin-left:-20px; width:calc(100% + 40px); overflow-x:hidden; height:380px; overflow-y:hidden; }
.itemtall .popup .buttons { position: absolute; bottom:20px; left:0px; width:100%; }
.itemtall .popup .buttons .close { position: absolute; left:20px; bottom:0px; opacity:0.7; }
.itemtall .popup .buttons .confirm { position: absolute; right:20px; bottom:0px; } 
.itemtall .popup .buttons .input { padding: 8px 20px; font-size:1.2em; }

.itemtalldouble .info { overflow-y:hidden; height:calc(100% - 84px); margin-left:-10px; width:calc(100% + 20px); padding: 0px; }
.itemtalldouble .info .left { display:inline-block; width:calc(50% - 15px); vertical-align:top; height:100%; overflow-y:auto; }
.itemtalldouble .info .right { display:inline-block; width:calc(50% - 26px); vertical-align:top; height:100%; overflow-y:auto; overflow-x:hidden; padding:5px 20px; margin-left:-4px; border-left: solid 1px #ccc; } 
.itemtalldouble .enquirynote:hover { cursor: pointer; }
.linkicon { position: absolute; top:5px; right:10px; width:30px; height:30px; transition:0.25s; opacity:0.25; }
.linkicon:hover { opacity:1; cursor: pointer; }
.linkicon img { width:100%; }

.itemtall .controls, .itemtalldouble .controls { margin-left:-10px; padding: 12px 10px; width:100%; background: #fbfbfb; height:40px; vertical-align:middle; }
.itemtalldouble .popup { width:800px; margin-left:-420px; height:660px; margin-top:-350px; border-radius:5px; background: #f8f8f8; }
.itemtalldouble .popup h2 { margin-left:-20px; margin-top:-30px; width:calc(100% + 18px); margin-bottom:40px; background:#56A0DD; }
.itemtalldouble .popup .title { display:inline-block; vertical-align:middle; width:70px; margin-right:10px; }
.itemtalldouble .popup .value { display:inline-block; vertical-align:middle; width:calc(100% - 90px); }
.itemtalldouble .popup .value .iteminput { font-family:Nunito; padding: 3px 5px; color: #444; }
.itemtalldouble .popup .clear { clear:both; height:0px; }
.itemtalldouble .popup h2 { margin-left:-20px; margin-top:-30px; width:100%; margin-bottom:40px; background:#ddd; font-size:1.7em; padding:20px; }
.itemtalldouble .popup .email { margin-top:15px; margin-left:-20px; width:calc(100% + 40px); overflow-x:hidden; height:380px; overflow-y:hidden; }
.itemtalldouble .popup .buttons { position: absolute; bottom:20px; left:0px; width:100%; }
.itemtalldouble .popup .buttons .close { position: absolute; left:20px; bottom:0px; opacity:0.7; }
.itemtalldouble .popup .buttons .confirm { position: absolute; right:20px; bottom:0px; } 
.itemtalldouble .popup .buttons .input { padding: 8px 20px; font-size:1.2em; }

/* Brochures */
.brochureitem { width:270px; height:300px; position: relative;  border: solid 1px #ddd; border-radius:5px; padding: 0px; display:inline-block; margin-right:20px; margin-bottom:20px; vertical-align:top;  box-shadow:  1px 1px 9px #ddd; position:relative; }
.brochureitem h3 { width:calc(100% - 20px); padding: 10px; background: #f4f4f4; text-align:center; color: #222; margin-bottom:0px; height:40px; line-height:1.3em; border: solid 0px #fff; border-top-left-radius:5px; border-top-right-radius:5px; position: relative; z-index:0; }
.brochureitem .pic { width:270px; height:200px; position: relative; z-index:0;  }
.brochureitem .pic img { width:100%; height:100%; border: solid 0px #fff;  }
.brochureitem .link { position:absolute; left:0px; top:0px; width:100%; height:100%; transition:0.25s;  }
.brochureitem .link a:link, .brochureitem .link a:active, .brochureitem .link a:visited { display:block; width:100%; height:100%; }
.brochureitem .click { background: #f8f8f8; padding:12px 5px; width:calc(100% - 10px); color: #444; text-align:center; font-size:1.1em; transition:0.25s;  border: solid 0px #fff; border-bottom-left-radius:5px; border-bottom-right-radius:5px; position: absolute; bottom:0px; left:0px; pointer-events:none; }
.brochureitem .link:hover .click { background: #eee; cursor:pointer; }

.enquirynote { font-size:1.0em; padding:15px 10px 12px 10px;; border-bottom: solid 1px #e6e6e6; transition:0.25s; position:relative; }
.enquirynote:hover { background: #f8f8f8; cursor:default; }
.enquirynote h3 { font-size:1.1em; margin-bottom:2px; }
.enquirynoteby { margin-top:3px; color: #888; }
.enquirynote .green { background: #63C661; height:12px; width:12px; margin-right:10px; display:inline-block; vertical-align:top; border-radius:50%; border: solid 0px #fff; margin-top:3px; }
.enquirynote .grey { background: #ddd; height:12px; width:12px; margin-right:10px; display:inline-block; vertical-align:top; border-radius:50%; border: solid 0px #fff; margin-top:3px; }
.enquirynote .amber { background: #ffa500; height:12px; width:12px; margin-right:10px; display:inline-block; vertical-align:top; border-radius:50%; border: solid 0px #fff; margin-top:3px; }
.enquirynote .red { background: #ff0000; height:12px; width:12px; margin-right:10px; display:inline-block; vertical-align:top;border-radius:50%; border: solid 0px #fff; margin-top:3px;  }
.enquirynote .notedetails { width:calc(100% - 80px); display:inline-block; vertical-align:top; }
.enquirynote .complete { position: absolute; right:10px; top:50%; margin-top:-16px; }
.enquirynote .complete input { width:32px; height:32px; transition:0.25s; opacity:0.3; filter:grayscale(1); }
.enquirynote .complete img { width:32px; height:322px; transition:0.25s; opacity:0.3; filter:grayscale(1); }
.enquirynote .complete input:hover { cursor: pointer; opacity:1; filter:grayscale(0); }
.enquirynote .complete img:hover { cursor: pointer; opacity:1; filter:grayscale(0); }
.enquirynote .documentlink { position: absolute; right:14px; top:10px; height:30px;  opacity:0.25; transition:0.25s; }
.enquirynote .documentlink img { height:100%;}
.enquirynote .documentlink:hover { opacity:1; }
.enquirynote .documentphoto { position: absolute; left:2px; top:2px; height:calc(100% - 4px); width:56px; }
.enquirynote .documentphoto img { width:100%; height:100%; }

.enquirynoteactive { font-size:1.0em; padding:15px 10px 12px 10px;; border-bottom: solid 1px #e6e6e6; transition:0.25s; position:relative; }
.enquirynoteactive:hover { background: #f8f8f8; cursor:pointer; }
.enquirynoteactive h3 { font-size:1.1em; margin-bottom:2px; }
.enquirynoteactiveby { margin-top:3px; color: #888; }
.enquirynoteactive .green { background: #63C661; height:12px; width:12px; margin-right:10px; display:inline-block; vertical-align:top; border-radius:50%; border: solid 0px #fff; margin-top:3px; }
.enquirynoteactive .grey { background: #ddd; height:12px; width:12px; margin-right:10px; display:inline-block; vertical-align:top; border-radius:50%; border: solid 0px #fff; margin-top:3px; }
.enquirynoteactive .amber { background: #ffa500; height:12px; width:12px; margin-right:10px; display:inline-block; vertical-align:top; border-radius:50%; border: solid 0px #fff; margin-top:3px; }
.enquirynoteactive .red { background: #ff0000; height:12px; width:12px; margin-right:10px; display:inline-block; vertical-align:top;border-radius:50%; border: solid 0px #fff; margin-top:3px;  }
.enquirynoteactive .notedetails { width:calc(100% - 80px); display:inline-block; vertical-align:top; }
.enquirynoteactive .complete { position: absolute; right:10px; top:50%; margin-top:-16px; }
.enquirynoteactive .complete input { width:32px; height:32px; transition:0.25s; opacity:0.3; filter:grayscale(1); }
.enquirynoteactive .complete img { width:32px; height:32px; transition:0.25s; opacity:0.3; filter:grayscale(1);  transition:0.25s; }
.enquirynoteactive .complete img:hover { cursor: pointer; opacity:1; filter:grayscale(0); opacity:1;  }
.enquirynoteactive .complete input:hover { cursor: pointer; opacity:1; filter:grayscale(0); opacity:1; }
.enquirenquirynoteactiveynote .complete img:hover { cursor: pointer; opacity:1; filter:grayscale(0); }

/* Status */
.statustitle { display:inline-block; vertical-align:middle; margin-right:10px; }
.statusvalue { display:inline-block; vertical-align:middle; font-size:1.2em; font-weight:bold; }
.statusanswered { padding: 10px 20px; background: #FFE607; border: solid 0px #fff; border-radius:3px; color: #222; }
.statusshowaroundscheduled { padding: 10px 20px; background: #FFAA2B; border: solid 0px #fff; border-radius:3px; color: #fff; }
.statusshowaroundcompleted { padding: 10px 20px; background: #FF8432; border: solid 0px #fff; border-radius:3px; color: #fff; }
.statusshowaroundfollowedup { padding: 10px 20px; background: #FF8432; border: solid 0px #fff; border-radius:3px; color: #fff; }
.statusbooked { padding: 10px 20px; background: #61D856; border: solid 0px #fff; border-radius:3px; color: #fff; }
.statusdepositpaid { padding: 10px 20px; background: #61D856; border: solid 0px #fff; border-radius:3px; color: #fff; }
.statusbalancepaid { padding: 10px 20px; background: #61D856; border: solid 0px #fff; border-radius:3px; color: #fff; }
.statuscompleted { padding: 10px 20px; background: #C8AAFF; border: solid 0px #fff; border-radius:3px; color: #fff; }

/* Progress */
.progress { width:200px; height:200px; margin:20px; display:inline-block; position: relative; background:#fafafa; border: solid 0px #fff; border-radius:50%; }
.progress:hover { cursor: pointer; }
.progress .canvas { position: absolute; left:0px; top:0px; pointer-events:none; }
.progress .value { position: absolute; left:0px; top:0px; font-size:1.2em; width:100%; }
.progress .value .text { font-size:1.8em; color: #666; font-weight:700; margin-top:70px; width:100%; text-align:center; }
.progress .value .subtext { font-size:1.0em; color: #999; font-weight:400; margin-top:12px; width:100%; text-align:center; line-height:1.3em; }

/* Quote Items */
.quoteitems .item { height:200px; }
.quoteitems h4 { margin-bottom:20px; font-size:1.5em; }
.quoteitems h3 { margin-bottom:0px; }
.quoteitems .price { position: absolute; left:10px; bottom:10px; font-size:1.2em; font-weight:600; }
.quoteitems .select { position: absolute; bottom:10px; right:10px; width:40px; height:40px; }
.quoteitems .selectoff { position: absolute; bottom:10px; right:10px; width:40px; height:40px; filter:grayscale(1); opacity:0.25; }
.quoteitems .selectoff:hover { cursor: pointer; filter:grayscale(0); opacity:0.75; }
.quoteitems .select img, .quoteitems .selectoff img { width:100%; height:100%; }
.quoteitems .totalcost { position: fixed; bottom:70px; right:30px; background: #444; padding: 20px 30px; color: #fff; font-size:1.5em; font-weight:600; border:solid 0px #fff; box-shadow: 1px 1px 9px #aaa; }

/* Top */
.summary { margin-top:30px; margin-bottom:30px; }
.summary .item { display:inline-block; vertical-align:middle; margin-right:10px; }

/* Home Menu */
.homemenu { margin:30px 0px; text-align:left; }
.homemenu .icon { display:inline-block; width:100px; margin: 20px; vertical-align:middle; text-align:center; }
.homemenu .icon:hover { cursor: pointer; }
.homemenu .icon .pic { margin-bottom:10px; transition:0.25s; opacity:0.8; }
.homemenu .icon .title { font-size:1.2em; font-weight:bold; color: #666; transition:0.25s; }
.homemenu .icon:hover .pic { opacity:1.0; }
.homemenu .icon:hover .title { color: #222; }

/* Appointments */
.appointments { }
.appointments h3 { color: #888; font-size:1.8em; margin-top:30px; }
.appointments .appointment { background: #f4f4f4; padding:20px 20px 20px 40px; margin-bottom:20px; color: #444; position: relative; }
.appointments .appointment .statusconfirmed { background: #57CE4E; width:20px; position: absolute; top:0px; height:100%; left:0px; }
.appointments .appointment .statusrequested { background: #FFF021; width:20px; position: absolute; top:0px; height:100%; left:0px; }
.appointments .appointment .statusreserved { background: #ffa500; width:20px; position: absolute; top:0px; height:100%; left:0px; }
.appointments .appointment .statuscancellationrequested { background: #dd0000; width:20px; position: absolute; top:0px; height:100%; left:0px; }
.appointments .appointment .statuscancelled { background: #ccc; width:20px; position: absolute; top:0px; height:100%; left:0px; }
.appointments .appointment .statusdatechangerequested { background: #BF6DA7; width:20px; position: absolute; top:0px; height:100%; left:0px; }
.appointments .appointment .date { font-size:1.4em; font-weight:bold; margin-bottom:6px; }
.appointments .appointment .time { font-size:1.2em; margin-bottom:20px;  }
.appointments .appointment .title { font-size:1.2em; margin-bottom:4px; font-weight:bold; }
.appointments .appointment .coordinator { margin-bottom:20px; }
.appointments .appointment .method { position: absolute; right:20px; top:20px; }
.appointments .appointment .method img { width:40px; opacity:0.8; filter:brightness(0.8); }
.appointments .appointment .buttons { position: absolute; bottom:20px; text-align:right; right:20px; }
.appointments .appointment .buttons .button { background: #bbb; color: #fff; font-size:1.2em; padding: 10px 20px; transition:0.25s; border: solid 0px #fff; font-family:Nunito; text-transform:none; margin-left:15px; margin-top:10px; }
.appointments .appointment .buttons .button:hover { background: #444; cursor:pointer; }
.appointments .appointment .buttons .button:focus { outline:none; }

/* Quotes */
.quotes { margin-top:30px; }
.quote {display:inline-block; background: #ddd; color: #fff; margin-right:3px; margin-bottom:3px; padding:0px; height:50px; width:180px; position: relative; overflow:hidden; vertical-align:top; text-align:center; color: #444; transition:0.25s; border: solid 0px #fff; border-bottom:none; border-top-left-radius:6px; border-top-right-radius:6px; text-align:center; }
.quote .notselected { position: absolute; width:calc(100% - 20px); height:100%; top:0px; left:0px; background: #eee; padding:8px 10px; transition:0.25s; color: #444; line-height:1.3em; font-size:1.1em;  }
.quote .notselected:hover { filter: brightness(0.9); cursor:pointer; }
.quote .notselected h3 { color: #444; }
.quote .selected { position: absolute; width:calc(100% - 20px); height:100%; top:0px; left:0px; background: #444; padding:8px 10px; transition:0.25s; color: #fff; line-height:1.3em; font-size:1.1em; }
.quote .selected:hover { filter: brightness(0.9); cursor:pointer; }
.quote .selected h3 { color: #fff; }
.quote h3 { font-size:1.3em; margin-bottom:14px; line-height:1.3em; color: #fff; width:calc(100% - 20px); height:50px; overflow:hidden; font-weight:400; }
.quote .guests { margin-bottom:10px; font-size:1.1em; } 
.quote .price { margin-top:0px; font-weight:700; font-size:1.0em;}
.quote .remove { position: absolute; bottom:10px; left:10px; transition:0.25s; opacity:0.5; }
.quote .remove:hover { cursor:pointer; opacity:1; }
.quote img:focus { outline:none; }
.addquote { display:inline-block; background: #ddd; color: #444; margin-right:20px; margin-bottom:20px; width:220px; height:170px; position: relative; overflow:hidden; vertical-align:top; transition:0.25s; text-align:center; }
.addquote:hover { filter: brightness(0.9); cursor:pointer; }
.addquote h3 { position: absolute; top:50%; margin-top:-30px; width:100%; left:0px; color: #666; font-weight:400; line-height:1.6em; font-size:1.3em; }
.addquote h3 img { width:36px; padding-top:6px; }

.quotedetails { margin-top:0px; border-top: solid 1px #ddd; padding-top:20px; }
.quotedetails h2 { background: #444; padding:12px 20px; color: #fff; margin:0px; font-size:1.5em; width:calc(100% - 40px); }
.quotedetails .dateandguests { background: #f8f8f8; padding: 15px 20px; margin-bottom:20px; width:calc(100% - 40px); position: relative;  }
.quotedetails .dateandguests input { margin:7px 0px; }
.quotedetails .dateandguests .title { margin-bottom:10px; display:inline-block; margin-right:10px; }
.quotedetails .dateandguests .title .textinput { margin-right:10px; max-width:calc(100% - 10px); }
.quotedetails .dateandguests .title .button { background: #6392FF; padding: 7px 15px; color: #fff; font-size:1.2em; font-weight:400; border: solid 0px #fff; border-radius:2px; transition:0.25s; font-family:Nunito; }
.quotedetails .dateandguests .title .button:hover { cursor: pointer; background: #444; }
.quotedetails .dateandguests .title .button:disabled { background: #ddd; }
.quotedetails .dateandguests .title .button:disabled:hover { cursoor:default; background: #ddd; }
.quotedetails .dateandguests .status { display:inline-block; font-size:1.2em; color: #fff; }
.quotedetails .dateandguests .setasfinal { display:inline-block; font-size:1.2em; color: #fff; margin-left:10px; }
.quotedetails .dateandguests .setasfinal .input { font-size:1.0em; color: #fff; background: #666; padding:7px 20px; transition:0.25s; border: solid 0px #fff; border-radius:3px; }
.quotedetails .dateandguests .setasfinal .input:hover { background: #222; cursor: pointer; }
.quotedetails .dateandguests .clear { clear:both; height:0px; }
.quotedetails .dateandguests .label { display:inline-block; margin-right:8px; vertical-align:middle; padding-top:0px; font-size:1.2em; font-weight:400; }
.quotedetails .dateandguests .date { display:inline-block; margin-right:20px; vertical-align:middle;  }
.quotedetails .dateandguests .input { font-family:Nunito; padding: 5px; border: solid 1px #ccc; border-radius:2px; font-size:1.2em; font-weight:400; }
.quotedetails .dateandguests .textinput { font-family:Nunito;  padding: 6px 5px; border: solid 1px #ccc; border-radius:2px;font-size:1.2em; font-weight:400; }
.quotedetails .dateandguests .textinput:focus { outline:none; }
.quotedetails .dateandguests .guests { display:inline-block; margin-right:20px; vertical-align:middle; }
.quotedetails .started { background: #F28E41; padding:7px 20px; transition:0.25s; border: solid 0px #fff; border-radius:3px; }
.quotedetails .completed { background: #3CC13E; padding:7px 20px; transition:0.25s; border: solid 0px #fff; border-radius:3px; }
.quotedetails .final { background: #5084E5; padding:7px 20px; transition:0.25s; border: solid 0px #fff; border-radius:3px; }

.quotedetails .items { width:300px; padding-bottom:2px; border-bottom: solid 1px #efefef; margin-bottom:20px; display:inline-block; vertical-align:top; }
.quotedetails .items .item { background: #eee; font-size:1.2em; color: #222; font-weight:300; width:300px; transition:0.25s; border-bottom: solid 1px #fff; position: relative; display:block; height:80px; }
.quotedetails .items .item .pic { width:80px; height:80px; display:inline-block; background:none; opacity:0.5; border-right:solid 0px #fff; filter:grayscale(1); }
.quotedetails .items .item .pic img { width:100%; height:100%; }
.quotedetails .items .item .details { width:200px; height:80px; display:inline-block; padding:10px; vertical-align:top; }
.quotedetails .items .item:hover { cursor: pointer; background: #ddd; color: #222; }
.quotedetails .items .item:hover .price { color: #444; }
.quotedetails .items .item:hover .option { color: #444; }
.quotedetails .items .selecteditem {  background: #444; font-size:1.2em; color: #fff; font-weight:300; width:300px; transition:0.25s; border-bottom: solid 1px #fff; position: relative; display:block; height:80px; }
.quotedetails .items .selecteditem .pic { width:80px; height:80px; display:inline-block; border-right:solid 0px #fff; filter:grayscale(0); }
.quotedetails .items .selecteditem .pic img { width:100%; height:100%; }
.quotedetails .items .selecteditem .details { width:200px; height:80px; display:inline-block; padding:10px; vertical-align:top; }
.quotedetails .items .selecteditem .price { color: #fff; }
.quotedetails .items .price { background:none; position: absolute; right:10px; bottom:6px; color: #222; font-weight:300; font-size:0.85em; } 
.quotedetails .items .total { background: #444; padding:15px 15px; font-size:1.4em; color: #fff; font-weight:300; width:270px; transition:0.25s; border-bottom: solid 1px #fff; position: relative; display:block; height:18px; font-weight:300; }
.quotedetails .items .total .price { color: #fff; bottom:16px; font-size:1.0em;  font-weight:300; }
.quotedetails .items input:focus { outline:none; }
.quotedetails .name { background:none; position: relative} 
.quotedetails .item .option { background:none; position: relative; color: #444; font-size:0.85em; margin-top:2px; } 
.quotedetails .selecteditem .option { background:none; position: relative; color: #ddd; font-size:0.85em; margin-top:2px; } 

.quotedetails .options { width:calc(100%  - 320px); min-width: 280px; display:inline-block; min-height:100px; background:#fff;  vertical-align:top; }
.quotedetails .options .option { background: #eee; padding:0px; font-size:1.2em; color: #222; font-weight:300; width:100%; max-width:1200px; transition:0.25s; position: relative; height:auto; margin-left:20px; margin-bottom:2px; text-align:left; line-height:1.4em; }
.quotedetails .options .option:hover { cursor:pointer; background: #ddd; color: #222; }
.quotedetails .options .packageoption { background: #ffebbf; font-size:1.2em; color: #222; font-weight:300; width:100%; max-width:1200px; transition:0.25s; position: relative; height:auto; margin-left:20px; margin-bottom:2px; text-align:left; line-height:1.4em; }
.quotedetails .options .packageoption:hover { cursor:pointer; background: #ddd;  color: #222;  }
.quotedetails .options .selectedoption { background: #444; font-size:1.2em; color: #fff; font-weight:300; width:100%; max-width:1200px; transition:0.25s; position: relative; height:auto; margin-left:20px; margin-bottom:2px; text-align:left; line-height:1.4em;  }
.quotedetails .options .selectedoption h3 {  color: #fff; text-align:left; margin-bottom:0px;}
.quotedetails .options .option h3 {  color: #222; text-align:left; margin-bottom:0px; }
.quotedetails .options .option .cost { position: absolute; top:12px; right:15px; color: #888; font-weight:300; font-size:1.4em; }
.quotedetails .options .packageoption h3 { color: #222; text-align:left; margin-bottom:0px; }
.quotedetails .options .packageoption:hover h3 {  }
.quotedetails .options .packageoption .cost { position: absolute; top:12px; right:15px; color: #888; font-weight:300; font-size:1.4em; }
.quotedetails .options .packageoption:hover .cost {  }
.quotedetails .options .selectedoption .cost {  position: absolute; top:12px; right:15px; color: #fff; font-weight:300; font-size:1.4em; }
.quotedetails .options .packageicon { position: absolute; top:10px; right:10px; width:36px; height:36px; }
.quotedetails .options .packageicon img { width:100%; height:100%; }
.quotedetails .options .pic { display:inline-block; width:200px; height:200px; vertical-align:top ; background: url(/images/base/fade.png); }
.quotedetails .options .option .pic { filter:grayscale(1); opacity:0.5; }
.quotedetails .options .packageoption .pic { filter:grayscale(1); opacity:0.5; }
.quotedetails .options .pic img { width:100%; height:100%; }
.quotedetails .options .desc { display:inline-block; width:calc(100% - 240px); padding: 10px 20px; vertical-align:top; height:calc(100% - 20px); overflow:hidden; }

/* Colour Picker */
.colourpicker .colourbutton { width:30px; height:30px; margin-right:5px; margin-bottom:5px; display:inline-block; padding:0px; }

/* Guests */
.guests .categories { margin-top:30px; margin-bottom:0px; }
.guests .categories .item { display:inline-block; background: #eee; color: #fff; margin-right:3px; margin-bottom:3px; padding:0px; height:50px; width:180px; position: relative; overflow:hidden; vertical-align:top; text-align:center; color: #444; transition:0.25s; border: solid 0px #fff; border-bottom:none; border-top-left-radius:6px; border-top-right-radius:6px;  font-size:0.9em; }
.guests .categories .item .colourtag { position: absolute; left:0px; bottom:0px; background: #222; width:100%; height:5px; z-index:100; }
.guests .categories .item .selected { position: absolute; left:0px; top:0px; width:160px; height:100%; background: #666; color: #fff; text-align:center; padding:0px 10px;  }
.guests .categories .item .notselected  { position: absolute; left:0px; top:0px; width:160px; height:100%; background: #eee; transition:0.25s; text-align:center; padding:0px 10px; }
.guests .categories .item .notselected:hover { background:#ddd; cursor: pointer; color: #222; }
.guests .categories h3 { text-align:center; margin-top:14px; color: #222; padding:0px; }
.guests .categories .item .selected h3 { color: #fff; }
.guests .categories .item .notselected:hover h3 { color: #222; }
.guests .categories .item:hover { filter:brightness(0.95); cursor: pointer; }
.guests .categories .item .remove { position: absolute; bottom:8px; right:8px;transition:0.25s; opacity:0.1; }
.guests .categories .item .remove:hover { opacity:0.5; cursor: pointer; }

.guests .items { margin-top:0px; border-top: solid 1px #ddd; padding-top:20px; }
.guests .items .item { display:inline-block; background: #f4f4f4; color: #fff; padding: 0px 0px; width:100%; max-width:440px; position: relative; overflow:hidden; vertical-align:top; text-align:center; color: #444; transition:0.25s; margin-right:10px; height:80px; margin-bottom:10px; }
.guests .items .item .initials { background: #222; width:90px; height:20px; border: solid 0px #fff; color: #fff; font-size:1.5em; margin-right:10px; display:inline-block;text-align:center; margin-left:-10px; padding:30px 0px; font-weight:600; }
.guests .items .item .details { display:inline-block; width:calc(100% - 120px); vertical-align:top; text-align:left;  padding:10px; position: relative; height:calc(100% - 20px); }
.guests .items .item .details .name { margin-top:2px; margin-bottom:1px; vertical-align:top; font-size:1.2em; font-weight:600; }
.guests .items .item .details .preferences { position: absolute; right:10px; bottom:10px; opacity:0.5;  } 
.guests .items .item .details .preferences .imagebutton { filter:grayscale(1); height:20px; }
.guests .items .item .details .age { margin-top:0px; }
.guests .items .item .details .table { margin-top:5px; }
.guests .items .item:hover { filter:brightness(0.95); cursor: pointer; }
.guests .items a:link, .guests .items a:active, .guests .items a:visited { text-decoration:none; transition:0.25s; color:#222; }
.guests .items a:link:hover, .guests .items a:active:hover, .guests .items a:visited:hover { color: #fff; }
.guests .items .plus { margin-top:20px; }

/* Suppliers */
.suppliers .types { margin-top:30px; margin-bottom:0px; }
.suppliers .types .item { display:inline-block; background: #ddd; color: #fff; margin-right:3px; margin-bottom:3px; min-width:110px; padding:0px 20px; height:50px; position: relative; overflow:hidden; vertical-align:top; text-align:center; color: #444; transition:0.25s; border: solid 0px #fff; border-bottom:none; border-top-left-radius:6px; border-top-right-radius:6px;  font-size:0.9em; }
.suppliers .types .item .selected { position: absolute; left:0px; top:0px; width:100%; height:100%; background: #555; color: #fff; }
.suppliers .types .item .notselected  { position: absolute; left:0px; top:0px; width:100%; height:100%; background: #eee; transition:0.25s; }
.suppliers .types .item .notselected:hover { background:#e4e4e4; cursor: pointer; color: #555; }
.suppliers .types h3 { text-align:center; margin-top:13px; color: #555; }
.suppliers .types .item .selected h3 { color: #fff; }
.suppliers .types .item .notselected:hover h3 { color: #555; }
.suppliers .types .item:hover { filter:brightness(0.95); cursor: pointer; }

.suppliers .items { margin-top:0px; border-top: solid 1px #ddd; padding-top:20px; }
.suppliers .items .item { display:inline-block; background: #f8f8f8; color: #fff; margin-right:20px; margin-bottom:20px; width:600px; height:200px; max-width:calc(100% - 20px); position: relative; overflow:hidden; vertical-align:top; color: #444; transition:0.25s; text-align:center; }
.suppliers .items .item .pic { display:inline-block; width:200px; height:200px; transition:0.25s; }
.suppliers .items .item .pic:hover { filter:brightness(0.95); cursor: pointer; }
.suppliers .items .item .pic img { width:100%; filter:grayscale(1); }
.suppliers .items .item h3 {  margin-top:0px; color: #222; margin-bottom:6px; }
.suppliers .items .item .desc { display:inline-block; width:370px; height:180px; padding:10px 15px; vertical-align:top; text-align:left; position: relative; }
.suppliers .items .item .edit { position: absolute; right:10px; bottom:40px;}
.suppliers .items .item .edit .input { padding:4px 8px; color: #444; background: #eee; border: solid 1px #ccc; border-radius:3px; transition:0.25s; }
.suppliers .items .item .edit .input:hover { background: #666; border: solid 1px #666; color: #fff; cursor: pointer; }
.suppliers .items .name { font-size:1.4em; margin:20px 0px 10px 0px; }
.suppliers .items .address { margin-bottom:10px; min-height:40px; }
.suppliers .items .telephone { margin-bottom:5px; }
.suppliers .items .preferred { position: absolute; top:5px; right:5px; }
.suppliers .items .email { margin-bottom:5px; }
.suppliers .items a:link, .guests .items a:active, .guests .items a:visited { text-decoration:none; transition:0.25s; color:#222; }
.suppliers .items a:link:hover, .guests .items a:active:hover, .guests .items a:visited:hover { color: #fff; }
.suppliers .items .plus { margin-top:20px; }
.suppliers .items .item .reviews { position: absolute; bottom:10px; right:10px; width:100px; height:20px; background:#e4e4e4; }
.suppliers .items .item .selector { position: absolute; top:10px; right:10px; transition:0.25s; opacity:0.75; }
.suppliers .items .item .selector:hover { opacity:1; }
.suppliers .items .additem { display:inline-block; background: #f8f8f8; color: #fff; margin-right:20px; margin-bottom:20px; width:600px; height:200px; max-width:calc(100% - 20px); position: relative; overflow:hidden; vertical-align:top; color: #444; transition:0.25s; text-align:center; }
.suppliers .items .additem:hover { filter:brightness(0.95); cursor: pointer; }
.suppliers .items .additem h3 {  margin-top:0px; color: #222; margin-bottom:6px; }

/* Ratings */
.reviews .contact .rating { width:100%; height:100%; position: absolute; top:0px; left:0px; }
.reviews .rating .score { position: absolute; left:0px; top:0px; height:100%; background:gold; z-index:100; }
.reviews .rating .scoreoverlay { position: absolute; left:0px; top:0px; width:100%; z-index:200;  }
.reviews .rating img { width:100%; }
.reviews .norating { width:100%; background: #f8f8f8; text-align:right; color: #888; height:20px; }
.reviewscore .rating { position: relative; width:100px; height:20px; left:50%; margin-left:-50px; margin-top:20px; background:#e8e8e8; }
.reviewscore .rating .score { position: absolute; left:0px; top:0px; height:100%; background:gold; z-index:100; }
.reviewscore .rating .scoreoverlay { position: absolute; left:0px; top:0px; width:100%; z-index:200;  }
.reviewscore .rating img { width:100%; }
.reviewscore .norating { width:100%; background: #f8f8f8; text-align:right; color: #888; height:20px; }

/* Supplier Details */
.supplierdetails { text-align:center; max-width:1200px; margin: 0 auto; }
.supplierdetails h1 { font-size:2.5em; }
.supplierdetails h3 { font-size:1.7em; color: #444; }
.supplierdetails .contact { width: 960px; background: #f8f8f8; padding:20px; margin-top:30px; font-size:1.2em; left:50%; margin-left:-500px; line-height:1.5em; position: relative; }
.supplierdetails .contact .link { display:inline-block; margin: 20px 10px 10px 10px; vertical-align:top; }
.supplierdetails .contact .link a:link, .supplierdetails .contact .link a:active, .supplierdetails .contact .link a:visited { background: #444; width:80px; padding:7px 10px; color: #fff; text-decoration:none; transition:0.25s; display:block; }
.supplierdetails .contact .reviews { position: relative; margin-top:20px; width:100px; height:20px; background: #e4e4e4; left:50%; margin-left:-50px; }
.supplierdetails .photogallery { width:100%; position:relative;  overflow:hidden; margin-bottom:60px;; height:300px; }
.supplierdetails .photogallery .photos { padding:0px 100px; width:calc(100% - 200px); }
.supplierdetails .photogallery .photo { height:300px; }
.supplierdetails .photogallery .photo img { height:100%; }
.supplierdetails .desc { padding:0px 100px; width:calc(100% - 200px); font-size:1.2em; margin-bottom:60px; text-align: justify; line-height:1.4em; }
.supplierdetails .mapholder { padding:0px 100px; width:calc(100% - 200px); margin-bottom:60px;  }
.supplierdetails .map { width:100%; height:400px; filter:grayscale(1); }
.supplierdetails .customerreviews { padding:0px 100px; width:calc(100% - 200px); margin-bottom:60px; }
.supplierdetails .customerreviews h3 { width:100%; padding:10px 0px; text-align:center; background: #444; color: #fff; margin-bottom:20px; }
.supplierdetails .customerreviews .item { background: #f8f8f8; padding:40px; margin-bottom:20px; border: solid 0px #fff; border-radius:10px; }
.supplierdetails .customerreviews .item .desc { font-size:1.0em; margin-bottom:0px; padding:0px; width:100%; margin-bottom:16px; }
.supplierdetails .customerreviews .item .name { font-size:1.2em; font-weight:600; } 

/* Documents */
.documents .types { margin-top:30px; margin-bottom:0px; }
.documents .types .item { display:inline-block; background: #ddd; color: #fff; margin-right:20px; margin-bottom:20px; width:220px; height:100px; position: relative; overflow:hidden; vertical-align:top; text-align:center; color: #444; transition:0.25s;  }
.documents .types .item .selected { position: absolute; left:0px; top:0px; width:100%; height:100%; background: #3CC13E; color: #fff; }
.documents .types .item .notselected  { position: absolute; left:0px; top:0px; width:100%; height:100%; background: #ddd; transition:0.25s; }
.documents .types .item .notselected:hover { background:#3CC13E; cursor: pointer; color: #fff; }
.documents .types h3 { text-align:center; margin-top:20px; color: #222; margin-bottom:8px; }
.documents .types .item .selected h3 { color: #fff; }
.documents .types .item .notselected:hover h3 { color: #fff; }
.documents .types .item:hover { filter:brightness(0.95); cursor: pointer; }

.documents .items { margin-top:0px; border-top: solid 1px #ddd; padding-top:20px; }
.documents .items .item { display:inline-block; background: #ddd; color: #fff; margin-right:20px; margin-bottom:20px; width:220px; height:200px; position: relative; overflow:hidden; vertical-align:top; text-align:center; color: #444; transition:0.25s; }
.documents .items .item:hover { }
.documents .items h3 { text-align:center; margin-top:20px; color: #222; margin-bottom:8px; }
.documents .items .name { font-size:1.4em; margin:20px 0px 10px 0px; }
.documents .items .desc { height:90px; overflow:hidden; margin-bottom:10px; }
.documents .items .link { position: absolute; bottom:0px; left:0px; width:calc(100%  - 0px); }
.documents .items a:link, .documents .items .linkpanel a:active, .documents .items .linkpanel a:visited { background: #aaa; padding:15px 20px; border:solid 0px #fff; transition:0.25s; color: #fff; font-size:1.2em; display:block; text-decoration:none; transition:0.25s; }
.documents .items a:link:hover, .documents .items .linkpanel a:active:hover, .documents .items .linkpanel a:visited:hover { background: #444; }

.popupbg { background: url(/images/base/popupbg.png); position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:1000; }
.popup { background: #fff; padding:20px; position: absolute; left:50%; top:50%; margin-left:-220px; margin-top:-200px; width:400px; height:360px; position: relative; border:solid 0px #fff; border-radius:10px; }
.popup .item { margin-bottom:15px; }
.popup .clear { clear:both; height:20px; }
.popup .cancel { position: absolute; bottom:20px; left:20px; }
.popup .confirm { position: absolute; bottom:20px; right:20px; }
.popup .button { background: #eee; border: solid 1px #444; border-radius:3px; padding: 6px 15px; font-size:1.2em; color: #444; font-weight:400; transition:0.25s; font-family:Nunito; }
.popup .cancel .button { border: solid 1px #999; color: #999; }
.popup .button:hover { background: #444; color: #fff; border: solid 1px #444; cursor:pointer; }
.popup .button:focus { outline:none; }
.popup h2 { background: #CE9E6B; text-align:center; color: #fff; text-align:center; margin-left:-20px; margin-top:-20px; padding:10px 20px; width:100%; margin-bottom:40px; border-top-left-radius:8px; border-top-right-radius:8px; border: solid 0px #fff;  }
.popup .input2 { border: solid 1px #ccc; border-radius:3px; padding:5px 10px; color: #222; font-family:Nunito; font-weight:400; font-size:1.2em; background: #fff; }
.popup .input2:focus { outline:none; }

/* Table Planner */
.tableplannersummary { margin-top:30px; margin-bottom:0px; font-size:1.4em; }
.tableplannersummary .title { display:inline-block; vertical-align:middle; margin-right:10px; width:auto;  }
.tableplannersummary .value { display:inline-block; vertical-align:middle; margin-right:30px; }
.tableplannersummary .key { font-size:0.85em; margin-bottom:0px; background: #fff; padding:20px; min-height:30px; margin-left:-20px; }
.tableplannersummary .key .item { display:inline-block;  margin-right:30px; margin-bottom:10px; }
.tableplannersummary .key .item .colour { width:20px; height:20px;  border: solid 0px #fff; border-radius:50%; background: #eee; margin-right:8px; display:inline-block; vertical-align:middle; }
.tableplannersummary .key .item .label { display:inline-block; vertical-align:middle; }
.tableplanner { width:100%; margin-bottom:40px; position: relative; margin-top:0px; }
.tableplanner .tablemenu { display:inline-block; background: #fff; padding:0px 20px 20px 20px; margin-right:50px; vertical-align:top; width:200px; text-align:center;  }
.tableplanner .item { position: absolute; z-index:100; }
.tableplanner .item:hover { cursor: pointer; }
.tableplanner .menuitem { position: absolute; opacity:0.25; }
.tableplanner .floorplanholder { max-width:100%; overflow-x:auto; display:inline-block; vertical-align:top; margin-bottom:30px; margin-right:40px;}
.tableplanner .floorplan { background: #f8f8f8; position: relative; }
.tableplanner .floorplan h3 { padding-top:10px; text-align:center; z-index:20; position: relative; }
.tableplanner .floorplan .linev { background: #eaeaea; width:1px; height:500px; position: absolute; top:0px; left:0px; z-index:10; }
.tableplanner .floorplan .lineh { background: #eaeaea; width:500px; height:1px; position: absolute; top:0px; left:0px; z-index:10; }
.tableplanner .selectguest { position:absolute; top:20px; z-index:20000; left:0px; background: #f8f8f8; padding:20px; color: #fff; width:300px; height:200px; }
.tableplanner .selectguest h3 { margin-top:0px; margin-bottom:20px; color: #fff; margin-left:-20px; margin-top:-20px; padding: 10px 20px; background: #333; color: #fff; font-size:1.4em; text-align:center; width:100%; }
.tableplanner .selectguest .selector { margin-bottom:10px; }
.tableplanner .selectguest .buttons { position: absolute; bottom:20px; width:calc(100% - 40px); }
.tableplanner .selectguest .button { padding: 6px 12px; background: #eee; border: solid 1px #ccc; border-radius:3px; color: #444; transition:0.25s; font-family:Nunito; }
.tableplanner .selectguest .button:hover { background: #444; border: solid 1px #444; color: #fff; cursor: pointer; }
.tableplanner .selectguest .cancel { position: absolute; bottom:0px; left:0px; opacity:0.5; }
.tableplanner .selectguest .other { position: absolute; bottom:0px; left:120px; }
.tableplanner .selectguest .ok { position: absolute; bottom:0px; right:0px; }
.tableplanner .screencover { background: #000; opacity:0.9; position: fixed; left:0px; top:0px; width:100%; height:100%; z-index:19000; }

.tableplanner .tabletype { position: relative;  }
.tableplanner .tabletype .circle { background: #888; border-radius:50%; position: absolute; transition:0.5s; display: flex;  justify-content: center; align-items: center; color: #fff; font-size:1.4em; }
.tableplanner .tabletype .circle:hover { background: #999; }
.tableplanner .tabletype .chair { background: #ddd; color:#222; font-size:0.85em; border-radius:50%; position: absolute; transition:0.5s; display: flex;  justify-content: center; align-items: center; font-weight:600; }
.tableplanner .tabletype .chair:hover { background: #bbb; color: #fff; }
.tableplanner .tabletype .chairmale { background: #444;  color: #fff; font-size:1.4em; border-radius:50%; position: absolute; transition:0.5s; display: flex;  justify-content: center; align-items: center; color: #fff; font-size:1.4em; font-weight:600; }
.tableplanner .tabletype .chairmale:hover { background: #555; }
.tableplanner .tabletype .chairfemale { background: #444;  color: #fff; font-size:1.4em; border-radius:50%; position: absolute; transition:0.5s; display: flex;  justify-content: center; align-items: center; color: #fff; font-size:1.4em; font-weight:600; }
.tableplanner .tabletype .chairfemale:hover { background: #555; }
.tableplanner .tabletype .chairboth { background: #888;  color: #fff; font-size:1.4em; border-radius:50%; position: absolute; transition:0.5s; display: flex;  justify-content: center; align-items: center; color: #fff; font-size:1.4em; font-weight:600; }
.tableplanner .tabletype .chairboth:hover { background: #666; }
.tableplanner .tabletype .rectangle { background: #888; position: absolute; transition:0.5s; display: flex;  justify-content: center; align-items: center; color: #fff; font-size:1.4em; }
.tableplanner .tabletype .rectangle:hover { background: #999; }
.tableplanner .tabletype .guest { font-size:0.6em; }

.tableplanner .guestlist { display:inline-block; margin-left:0px; vertical-align:top; width:400px; }
.tableplanner .guestlist .selector .input { font-size:1.2em; width:100%; margin-bottom:10px; }
.tableplanner .guestlist .list { min-height:100px; max-height:100%; overflow-y:auto; overflow-x:hidden; }
.tableplanner .guestlist .item {  background: #f8f8f8; color: #fff; padding: 0px 0px; width:100%; max-width:500px; position: relative; overflow:hidden; vertical-align:top; text-align:center; color: #444; transition:0.25s; margin-bottom:5px; }
.tableplanner .guestlist .item .initials { background: #222; width:50px; height:20px; border: solid 0px #fff; color: #fff; font-size:1.5em; margin-right:0px; display:inline-block;  padding:14px 0px; text-align:center; font-weight:bold; margin-left:-20px; }
.tableplanner .guestlist .item .details { display:inline-block; width:calc(100% - 90px); vertical-align:top; text-align:left; padding:5px 0px; padding-left:20px; margin-right:0px; }
.tableplanner .guestlist .item .details .name { margin-top:2px; margin-bottom:0px; vertical-align:top; font-size:1.2em; font-weight:600; }
.tableplanner .guestlist .item .details .preferences { text-align:right; vertical-align:top;  width:150px; position: absolute; bottom:10px; right:10px; } 
.tableplanner .guestlist .item .details .preferences .imagebutton { filter:grayscale(1); height:20px; opacity:0.5; margin:1px; }
.tableplanner .guestlist .item .details .age { margin-top:0px; }
.tableplanner .guestlist .item:hover { filter:brightness(0.95); cursor: pointer; }

.tableplanner .popup { font-size:1.2em; }
.tableplanner .popup .buttons { position: absolute; bottom:20px; width:calc(100% - 40px); }
.tableplanner .popup .cancel { position: absolute; bottom:0px; left:0px; }
.tableplanner .popup .other { position: absolute; bottom:0px; left:120px; }
.tableplanner .popup .ok { position: absolute; bottom:0px; right:0px; }
.tableplanner .popup .tableholder { width:100%; text-align:center; margin-top:50px; }
.tableplanner .popup .tabledisplay { display: inline-block;  }

/* Message Client */
.messageclient { width:100%; height:100%; height:750px; }
.messageclient .left { width: 459px; padding-right:10px; border-right: solid 1px #ddd; height:100%; overflow-y:auto; display:inline-block;  }
.messageclient .right { width:calc(100%  - 520px); display:inline-block; min-height:100%; overflow-y:auto; padding:10px; }
.messageclient .left .date { border-top: solid 1px #ccc; border-bottom: solid 1px #ccc; background: #f4f4f4; padding:6px 20px; font-weight:bold; }
.messageclient .left .flaggedfilter { margin-bottom:10px; }
.messageclient .left .replybutton { font-family:Nunito; border: solid 1px #ddd; border-radius:3px; padding: 6px 15px; font-size:1.0em; background: #f8f8f8; transition:0.25s; color: #444; margin-left:10px;}
.messageclient .left .replybutton:hover { background: #555; border: solid 1px #555; color: #fff; cursor: pointer; }
.messageclient .left .replybutton:focus { outline:none; }
.messageclient .left .replybutton:disabled { opacity:0.5; }
.messageclient .left .replybutton:disabled:hover { background:#f8f8f8; border:solid 1px #fff; color:#444; cursor:default; }
.messageclient .message { padding: 10px 20px; transition:0.25s; border-bottom: solid 1px #eee; color: #888; font-size:0.9em; position: relative; }
.messageclient .message:hover { background: #E6F2FA; cursor: pointer; }
.messageclient .message .remove { position: absolute; top:10px; right:32px; display:none; }
.messageclient .message input[type="image"] { height:20px; }
.messageclient .message .flagged { position: absolute; top:10px; right:10px; display:block; }
.messageclient .message .flagged:focus { outline:none;}
.messageclient .message .unflagged { position: absolute; top:10px; right:10px; display:none; }
.messageclient .message .messagedate { position:absolute; right:15px; top:45px; }
.messageclient .message:hover .remove { display:block; opacity:0.8; filter: grayscale(1); transition:0.25s; }
.messageclient .message:hover .remove:hover { filter:grayscale(0); cursor: pointer; opacity:1; }
.messageclient .message:hover .unflagged { display:block; opacity:0.3; filter: grayscale(1); transition:0.25s; }
.messageclient .message:hover .unflagged:hover { opacity:1; grayscale(0); cursor:pointer; } 
.messageclient .message:hover .unflagged:focus { outline:none;}
.messageclient .message h2 { margin:0px; padding:0px; margin-bottom:5px; font-size:1.4em; font-weight:normal; color: #444; font-weight:bold; }
.messageclient .message h3 { margin:0px; padding:0px; margin-bottom:5px; font-size:1.0em;  color: #5087F4; font-weight:bold; }
.messageclient .message h4 { margin:0px; padding:0px; margin-bottom:5px; font-size:1.0em;  color: #888; font-weight:normal; }
.messageclient .message .desc { width:calc(100% - 60px); }
.messageclient .messagebody { margin-top:10px; }
.messageclient .messagebody h2 { font-size:1.6em; margin-bottom:10px; }
.messageclient .messagebody h3 { margin-bottom:6px; font-size:1.3em; }
.messageclient .messagebody h4 { margin-top:0px; color: #888; font-weight:normal; font-size:1.1em; }
.messageclient .messagebody h4 to { color: #ccc; }

/* AJAX Calendar */
.calendar .ajax__calendar_container { background: #d9d9d9; z-index:255; }
.calendar table { background: #fff; padding: 0; font-size: 0.9em; }
.calendar td { padding: 1px; }
.calendar .ajax__calendar_active { background: #018287; color: #fff; }
.calendar .ajax__calendar_other { background: #e9e9e9; color: #333; }
.calendar .ajax__calendar_day { margin: 1px; padding: 0; }
.calendar .ajax__calendar_day:hover { border: 1px solid #018287; margin: 0; }

@media only screen and (max-width: 736px)
{
	/* Left Menu */
	.leftmenu { width:100%; height:auto; border-right: none; display:block; }
	.leftmenu .menuitem { background: #f4f4f4; transition:0.25s; width:calc(100% - 20px); }
	.leftmenu .menuitem .toggle { display:block; }

	/* Main */
	.main { display:block; padding: 20px; height:auto; margin-left:0px; border-left: none; min-height:0px; width:calc(100%  - 40px); padding-top:30px; }
}