/********************/
/* General         */
/********************/
body {text-align: center; background-color: #F5F5F5; font-family: Calibri,Arial; color: #444444; font-size: 14px;}
#container {border-style: none; border-width: 0; margin: 0 auto; width: 800px; background-image: url('/export/system/modules/au.com.creativememories.mycm/resources/images/bg_page.gif'); background-repeat: repeat-y;}
#pageHeader {height: 8px; background-image: url('/export/system/modules/au.com.creativememories.mycm/resources/images/bg_head.gif'); font-size: 1px;}
#pageFooter {height: 8px; background-image: url('/export/system/modules/au.com.creativememories.mycm/resources/images/bg_foot.gif'); font-size: 1px;}
img {border: 0;}
form {margin: 0;}
a {text-decoration: none;}
.clear {clear: both;}
.spacer {height: 20px;}
.small {font-size: 12px; font-style: italic;}
h1 {letter-spacing: 1px; font-weight: normal; font-size: 26px; color: #333333; width: 100%; margin: 0 0 10px 0; font-family: "Book Antiqua",Arial, Helvetica, sans-serif; text-transform: capitalize;}
#mainBody {padding: 0; background-color: #ffffff; text-align: left; margin: 0 auto; width: 770px; border: 1px solid #333333;}
.prop {width: 1px; float: right; height: 500px;}


/********************/
/* Banner           */
/********************/
#banner {height: 176px; background-repeat: no-repeat;}
#consInfo {padding: 25px 10px 0 0; text-align: right; height: 88px; font-family: Verdana;}
#consInfo h2 {font-size: 14px; margin: 2px 0;}
#consInfo p {margin: 0;}
#homeLink {float: left; position: relative; top: 70px; left: 25px;}
#homeLink img {vertical-align: middle;}

/********************/
/* NavTop           */
/********************/
#navTop {font-family: Arial, Helvetica, sans-serif;}
#navTop ul {padding: 0; margin: 0; height: 44px; list-style: none;}
#navTop li {margin: 0 0 0 0; padding: 0 0 0 0; float: left;}
#navTop li a {float: left; display: block; text-decoration: none; font-size: 12px; font-weight: bold; text-align: center; cursor: pointer; height: 14px; padding: 14px 11px 14px 11px;}

/********************/
/* Content          */
/********************/
#mainContent {background-color: #ffffff; clear: both;}
#mainContent p {margin: 0 0 5px 0; text-align: justify;}
#content {padding: 10px 5px 10px 10px; float: left; width: 585px;}
#contentFull {padding: 10px; float: left; width: 750px;}
#mainContent p img {margin-left: 15px; margin-bottom: 15px;}

/********************/
/* NavLeft          */
/********************/

#navLeft { float: left;margin-bottom:20px;width:170px;margin-right:0}
#navLeft h3 {text-transform:capitalize;cursor: pointer; display: block; padding: 7px 5px 6px 10px; font-weight:normal;margin: 0; font-size: 12px; }
#navLeft h3:hover,#navLeft h3.current {cursor: pointer; background-position: left bottom;}
#navLeft ul {border-width: 0; margin: 0; padding: 0;}
#navLeft li {list-style: none outside; display: inline; padding:0;text-transform:capitalize;}
#navLeft li a {display: block; text-decoration: none; padding: 4px 0 4px 5px;font-weight:normal}
#navLeft li a:hover {text-decoration: underline;}

/********************/
/* Footer           */
/********************/
div#footer {clear: both; height: 62px; text-align: center; }
div#footer a {font-size: 12px;}
div#footer a:hover {text-decoration:underline}
div#footer p {font-size: 12px; padding-top: 25px;  text-align: center;}

/********************/
/* Tool Bar         */
/********************/
div.toolBar {margin: 10px 0 3px 0;}
div.toolBar div {float: left; margin-right: 10px; padding: 3px; text-align: center; width: 100px;}
div.toolBar img {vertical-align: middle; border: 0; text-align: center;}
div.toolBar div div {float: none; padding: 0;}
div.toolBar a {text-decoration: none; color: #666666; font-size: 10px;}
div.toolBar div:hover {background-color: #DDDDDD;}

/********************/
/* Right Hand Box   */
/********************/
#statusBox {float: right; width: 175px; font-size: 11px; margin-left: 5px; margin-bottom: 20px; background-color: #EFF7E1; color: #333333;}
#statusBox p {display: block; color: #73982E; padding: 2px 4px; margin: 0;}
#statusBox table {width: 100%;}
#statusBox .box {padding: 1px; border: 1px solid rgb(221, 221, 221); margin: 2px;}

/********************/
/* Homepage         */
/********************/
#home {padding: 10px;}
#personalImage {float: right; margin: 0 0 10px 10px; border: 1px solid #CCCCCC;display:inline}
#personalImage img {margin: 1px; border: 0;display:inline}
#personalMessage, #personalMessage h1 {display:inline}

/***************************/
/*  New Home Page Layouts  */
/***************************/

/* common */
#newFeatures .header , #newSchedule .header , #pageFeature .header {border-bottom:1px solid;text-align:center}
#newSchedule .inner ,#pageFeature .inner {background: url('/export/system/modules/au.com.creativememories.mycm/resources/images/h300.png') repeat-x top; overflow: hidden; padding-top: 10px;}
#newFeatures h1, #newSchedule h1, #pageFeature h1 {padding:4px 0;margin:0;font-size: 18px;}
#newFeatures h2, #newSchedule h2, #pageFeature h2 {padding:8px 0 4px 0;margin:0;font-size:16px;}
#featureScroll, #featureItems, #eventScroll  {position: relative; overflow: hidden;}

/* features */
#newFeatures {background: url('/export/system/modules/au.com.creativememories.mycm/resources/images/h300.png') repeat-x bottom;text-align: center;float: left; width: 393px; margin-right: 16px;  height: 509px;}
#featureScroll {width: 365px; height: 370px; margin: 10px 0 0 12px;}
#featureScroll div.items, div#featureStrip div.items {width: 20000em; position: absolute;}
#featureScroll div.items div.page {width: 365px; height: 370px;}
#featureScroll img {border:1px solid #CCCCCC}

#featureStrip {border: 0; margin: 10px 0 10px 0;padding-left:8px }
#featureItems {width: 300px; height: 60px; float:left;	}
#featureItems .page {width: 60px; padding: 0; border: 0; margin:0}
#featureItems img {height: 50px; width: 50px; margin: 0 3px 0 3px; padding: 1px; border: 1px solid #ffffff;background-color:#cccccc}
#featureItems img.active {border: 1px solid #000;}

/* schedule */
#newSchedule {width: 337px; float: left;margin-bottom:10px}
#newSchedule .inner {height: 160px;}
#newSchedule #actions {float:left }

#newSchedule .event {padding: 10px;}
#newSchedule a {font-size: 16px; display: block; font-weight: bold;}
#newSchedule .eventDate {font-size: 14px; margin: 0;}

#eventScroll {height: 160px;width:297px;float:left}
#eventScroll div.items { height: 20000em; position: absolute;width: 297px;}
#eventScroll div.items div.page {width: 297px; height: 160px;}

/* page layout feature */
#pageFeature {width: 337px; float: left;}
#pageFeature .inner {height: 257px;text-align:center}


/********************/
/* Catalogue        */
/********************/
#catalogue {float: left; overflow: visible; border-style: solid none none solid; border-width: 1px; border-color: #DDDDDD; width: 552px;}
#catalogue .tileCell {float: left; width: 174px; height: 199px; text-align: center; padding: 4px; border-style: none solid solid none; border-width: 1px; border-color: #DDDDDD;}
#catalogue .tileCell a {color: #333333; font-size: 12px;}
#catalogue .tileCell .description {height: 50px; clear: both; overflow: hidden; font-size: 11px;}
#catalogue .tileCell .price {padding-top: 5px; padding-bottom: 5px; color: #666666;}
#catalogue .tileCell .thumb {height: 100px;}
#catalogue .tileCell .add {padding-top: 4px; text-align: center;}
#catalogue .tileCell .add input {width: 30px; text-align: center; font-size: 11px;}
#catalogue .tileCell .add img {cursor: pointer; vertical-align: middle; margin-left: 5px;}
#catalogue .tileCell .qohWarning {color: #FF0000;}

/********************/
/* Buttons          */
/********************/
.buttonBar {text-align: center; margin-top: 10px; margin-bottom: 10px;}
.buttonBar input, .aButton {height: 25px; margin-left: 10px; width: 100px; font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; letter-spacing: 1px; text-transform: uppercase;}

/********************/
/* Report           */
/********************/
table.report, .report table {width: 100%; border-collapse: collapse; clear: both;}
.report th {text-align: left; padding: 8px 4px; font-size: 14px; font-weight: normal;}
.report td {padding: 8px 4px; border-top: 1px solid rgb(221, 221, 221);}
.report img {vertical-align: middle;}
.report p {margin: 0;}

/*********************/
/*  Form template    */
/*********************/
.diaform form,.diaform table {text-align: left; clear: both; width: 100%; margin-bottom: 10px;}
.diaform fieldset {border: none; margin: 0 0 10px 0; padding: 0;}
.diaform .legend {min-width: 0; position: relative; margin: 1px; padding: 5px 10px; font-size: 14px; }
.diaform .label {clear: left; width: 140px; padding-right: 10px; float: left; vertical-align: top; text-align: right;}
.diaform .inner {float: left; clear: right; display: block; vertical-align: top;}
.diaform ol,.diaform table {margin: 0; padding: 0; border: 1px solid rgb(221, 221, 221);}
.diaform li {list-style: none; margin: 0; padding: 3px 10px 3px 10px; line-height: 1.6em;}
.diaform em {font-weight: bold; font-style: normal; color: #f00;}
.diaform .validation {background: #FFFFCC;}
.diaform .mandatory {font-weight: bold;  margin-left: 3px;}
.diaform .mandatoryNotice {color: #C0C0C0; font-size: 10px; font-style: italic;}
.diaform li.error {color: #ff0000; margin-top: -5px; padding-top: 0; font-size: 11px; line-height: 1em;}
.diaform .clear {clear: both; height: 1px; overflow: hidden;}
.diaform .formFoot {text-align: right; color: #999999;}
.formFoot img {vertical-align: middle;}

/*********************/
/*  Tool Tips        */
/*********************/
#tooltip {position: absolute; z-index: 3000; border: 1px solid #111; background-color: #eee; padding: 5px; opacity: 0.85;}
#tooltip h3, #tooltip div {margin: 0; font-weight: normal;}
/***************************/
/*  Scrolling Page Layouts */
/***************************/
div#naviItems, div#pageLayout {position: relative; overflow: hidden;}
div#naviItems div.items, div#pageLayout div.items {width: 20000em; position: absolute;}
div.items div.page {float: left;}

div#naviStrip {border: 1px solid #CCCCCC; background-image: url('/export/system/modules/au.com.creativememories.mycm/resources/images/h300.png'); background-repeat: repeat-x; margin-right: 10px;}
div#naviItems {width: 450px; height: 80px; margin: 10px auto;}
div#naviItems .page {width: 80px; margin: 0 5px;}
div#naviItems img {height: 76px; width: 76px; padding: 1px; border: 1px solid #cccccc;}
div#naviItems img.active {border: 1px solid #000;}

div#pageLayout {width: 575px; height: 550px;padding-top:20px;margin-top:10px}
div#pageLayout .page {width: 575px;}
div#pageLayout .imageWrap {float: right; margin: 0 1px 10px 10px; border: 1px solid #CCCCCC; display: inline; width: 302px;}
div#pageLayout .imageWrap img {margin: 1px; border: none;}
div#pageLayout .description {display: inline;}
div#pageLayout .description h2 {margin-top:0;}

#naviButtons {border-top:1px solid #CCCCCC;}
#naviButtons a.right {float:right}

/* prev, next, prevPage and nextPage buttons */
a.browse {background: url('/export/system/modules/au.com.creativememories.mycm/resources/images/hori_large.png') no-repeat; display: block; width: 30px; height: 30px; float: left; margin: 15px 8px; cursor: pointer; font-size: 1px;}

/* right */
a.right { background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover { background-position:-30px -30px; }
a.right:active { background-position:-60px -30px; } 

/* left */
a.left { margin-left: 0px; } 
a.left:hover { background-position:-30px 0; }
a.left:active { background-position:-60px 0; }

/* up and down */
a.up, a.down {background: url('/export/system/modules/au.com.creativememories.mycm/resources/images/vert_large.png') no-repeat; float: none; margin: 10px 5px;}

/* up */
a.up:hover { background-position:-30px 0; }
a.up:active { background-position:-60px 0; }

/* down */
a.down { margin-top:80px;background-position: 0 -30px; }
a.down:hover { background-position:-30px -30px; }
a.down:active { background-position:-60px -30px; } 

/* disabled navigational button */
a.disabled { visibility:hidden !important; }