@import url(../contentStyles.css);

/*############################################################# 
#                                                             #
#   Stylesheet for site specific rules.                       #
#   Included only on frontend. Do not style CMS content       #
#   here as it is not included in the management system       #
#   for preview. Style CMS content in ContentStyles.css       #
#                                                             #
#############################################################*/


/* Text Classes
========================================================================================== */
input,
textarea,
select,
body {
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, Sans-Serif;
	color: #424242;
}
input,
select,
textarea,
label {
    font-size: 0.75em;
}
/* Layout
========================================================================================== */
body {
	margin: 50px;
	background-color: #121237;
	text-align: center;
}
body.white {
    background-color: #FFF;
}
.wrap {
	width: 760px;
	margin: auto;
	text-align: left;
	background: #FFF url(../../Images/bg.gif) repeat-y 6px 0;
	border-bottom: solid 6px #FFF;
}
.head {
	background: url(../../Images/Header-1.jpg) no-repeat;
	/*height: 136px;*/
	border: solid 6px #FFF;
	border-bottom: none;
	padding-right:8px;
}
p.hometext
{
    text-align: justify;
    padding: 0 0 10px;
}
.head h1
{
	margin: 6px 0 2px;	
}
.nav {
	width: 188px;
	float: left;
	border: solid 6px #FFF;
	border-bottom: 0;
	background-color: #C7C7C7;
}
.content {
	width: 494px;
	float: right;
	border: solid 6px #FFF;
	border-left: none;
	margin: 30px 30px 30px 0;
	display: inline;
	position: relative;
}
.logo {
	display: block;
	position: absolute;
	z-index: 10;
	top: -190px;
	left: 20px;
	width: 324px;
	height: 211px;
	background: url(../../Images/Logo.png) no-repeat;
}
.home .logo {
	top: -335px;
}
.logo a {
	width: 324px;
	height: 211px;
	display: block;
	text-decoration: none;
}
div.nav span.logo a:link,
div.nav span.logo a:visited,
div.nav span.logo a:hover,
div.nav span.logo a:active {
	background-color: transparent;
}
.foot {
	width: 760px;
	margin: auto;
	font-family: Verdana, Arial;
	font-size: 0.8em;
}
.foot ul {
	list-style: none;
	margin-bottom: 5px;
}
.foot ul.menu
{
	margin-bottom: 20px;	
}
.foot li {
	display: inline;
	color: #FFF;
	font-size: 0.75em;
	padding-right: 6px;
}
.foot li a 
{
	padding-right: 6px;
}
.foot li a:link,
.foot li a:visited,
.foot li a:hover,
.foot li a:active {
	color: #FFF;
	text-decoration: none;
}
.foot .menu {
	text-transform: uppercase;
	margin: 15px 0 10px;
}

/* Nav
========================================================================================== */	
.nav ul {
	list-style: none;
}
.nav li {
	display: block;
	position: relative;
	float: left;
	clear: left;
}
.nav li span {
	font-size: 0.812em;
	text-transform: lowercase;
	padding-left: 4px;
}
.nav ul ul {
	display: none;
}
.nav ul .on ul {
	display: block;
	border-bottom: solid 4px #FFF;
	float: left;
}
.nav li a {
	border-bottom: solid 4px #FFF;
	display: block;
	width: 188px;
	padding: 2px 0;
	text-decoration: none;
	font-size: 0.687em;
	text-transform: uppercase;
	font-weight: bold;
	text-indent: 10px;
	background-color: #C7C7C7;
}
.nav li a:link,
.nav li a:visited,
.nav li a:hover,
.nav li a:active {
	color: #424242;
}
.nav li.on a {
	background-color: #E0E0E0;
}
.nav li.on li a {
	border: none;
	background-color: #E0E0E0;
	padding: 4px 0;	
	text-indent: 20px;
}
.nav li a:hover,
.nav li.on li a:hover,
.nav li.on li.on a {
	background-color: #EEE;
}

.progress li span {
	border-bottom: solid 3px #FFF;
	display: block;
	width: 188px;
	padding: 2px 0 2px 1px;
	text-decoration: none;
	font-size: 0.687em;
	text-transform: uppercase;
	font-weight: bold;
	text-indent: 10px;
	background-color: #E0E0E0;
}
.progress li.on span {
	background-color: #b0b0ae;
	background: #b0b0ae url(../../Images/arrowLeftLight.gif) no-repeat 173px 2px;
	
}
.nav h4 {
	clear: left;
	padding: 10px 10px 6px;
	border-bottom: solid 3px #FFF;	
}

/* Common navigation elements
========================================================================================== */
div.btn a,	
input.btn,
a.btn {
	color: #424242;
	border-style: none;
	background: #e0e0e0 url(../../Images/RightArrows.gif) no-repeat center right;
	display: block;
	font-size: 0.625em;
	font-weight: 700;
	padding: 1px 8px 1px 0;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	width: 127px;	
}
input.back,
a.back {
	background: #e0e0e0 url(../../Images/LeftArrows.gif) no-repeat center left;
	padding: 1px 0 1px 8px;
}
input.btn{
	height: 17px;
	padding: 0 8px 0 0;
}
input.back{
	height: 17px;
	padding: 0 0 0 8px;
}
a.btn:link,
a.btn:visited,
a.btn:active,
a.btn:hover
{
	color: #424242;
	text-decoration: none;
}
/*
a.btn,
input.btn,
.btn a {
	display: block;
	width: 120px;
	text-align: center;
	padding: 2px 4px 1px;
	background-color: #e0e0e0;
	font-weight: bold;
	border: solid 1px #C7C7C7;
	background: #e0e0e0 url(../../Images/arrowRight.gif) no-repeat center right;
}
a.back,
input.back
{
	background: #e0e0e0 url(../../Images/arrowLeft.gif) no-repeat center left;
}
a.down,
input.down
{
	background: #e0e0e0 url(../../Images/arrowDown.gif) no-repeat center right;
}
input.btn {
	cursor: pointer;
}
a:link.btn,
a:visited.btn,
a:hover.btn,
a:active.btn,
.btn a:link,
.btn a:visited,
.btn a:hover,
.btn a:active {
	font-size: 0.687em;
	color: #424242;
	text-decoration: none;
}
a:hover.btn,
.btn a:hover,
input:hover.btn {
	background-color: #EEE;
}
*/

.bsk {
	position: absolute;
	z-index: 1;
	top: -30px;
	right: -20px;
	padding: 2px 5px;
	font-weight: bold;
}
.bsk a:link,
.bsk a:visited,
.bsk a:hover,
.bsk a:active {
	font-size: 0.75em;
	color: #424242;
	text-decoration: none;
}
.bsk span {
	font-weight: bold;
	padding-right: 10px;
	text-transform: uppercase;
}

/* Home
========================================================================================== */
.home .head {
	background: #424242;
}
.home .head img {
	float: right;
	margin-bottom: 5px;
}
.home .head h1 {
	font-size: 0.75em;
	text-transform: uppercase;
	color: #FFF;
	margin-left: 350px;
	clear: right;
}
.home .head p {
	margin-left: 350px;
	color: #FFF;
	font-size: 0.75em;
}
.homeHead {
	border: solid 6px #FFF;
	border-bottom: none;
	display: block;
}
div.homeHead {
	display: none;
	background-color: #000;
}
.homeContent {
	list-style: none;
	float: left;
	width: 560px;
}
.homeContent li {
	display: block;
	float: left;
	background-color: #333;
	background-repeat: no-repeat;
	border-top: solid 6px #FFF;
	border-right: solid 6px #FFF;
}
.homeContent li a {
	width: 274px;
	height: 139px;
	position: relative;
}
/*.homeContent li.prePrint a {
	width: 554px;
}*/
.homeContent li.perStat {
	background-image: url(../../Images/Personalised-Stationery.jpg);
}
.homeContent li.prePrint {
	background-image: url(../../Images/Pre-Printed-Stationery.jpg);
}
.homeContent li.weddings {
	background-image: url(../../Images/Wedding-Stationery.jpg);
}
.homeContent li.office {
	background-image: url(../../Images/LeatherGoods.jpg);
}
.homeContent a {
	display: block;
	text-decoration: none;
	font-size: 0.75em;
	font-weight: bold;
}
.homeContent a:link,
.homeContent a:visited,
.homeContent a:hover,
.homeContent a:active {
	color: #FFF;
}
.homeContent span {
	position: absolute;
	bottom: 10px;
	right: 15px;
	display: block;
}

/* Sitemap
========================================================================================== */
.Sitemap {
    padding: 30px 50px;
}
.Sitemap h1 {
	font-size: 1em;	
}
.Sitemap li {
	font-size: 0.76em;
	margin-left: 15px;
	padding-bottom: 3px;	
}
.Sitemap ul {
    margin: 10px 0;
}
.Sitemap p {
	font-size: 0.9em;
	line-height: 1.3;
}
.Sitemap li li,
.Sitemap li p {
    font-size: 1em;
}

/* Manager Buttons
========================================================================================== */
.pnlParaBtns {
    float: right;
    padding-right: 7px;
}
.pnlParaBtns select {
    position: relative;
    top: -4px;
}
.SiteHeader {
    float: right;
}
.pnlConfirm {
    clear: both;
    padding: 40px;
    text-align: center;
}
.paraControls {
    clear: both;
}
.paraControls a:link,
.paraControls a:visited,
.paraControls a:hover,
.paraControls a:active {
    font-size: 0.75em;
    color: #999;
    text-decoration: none;
}

.Crumbs{
	font-size: 0.687em;	
	padding-bottom: 10px;
}
.Crumbs span{
	font-weight: bold;
}
.Crumbs a:link,
.Crumbs a:visited,
.Crumbs a:hover,
.Crumbs a:active {
	color: #000;
}

div.Form
{
    margin-top: -20px;
}

.NLF td
{
    font-size: 0.8em;   
}
.NLF input
{
    font-size: 1em;   
}