@import url("reset.css");
@import url("grid.css");

/*-----------------------------------------------------
	Self Clearing Floats Fix
-----------------------------------------------------*/
.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

/*-----------------------------------------------------
	Global Classes
-----------------------------------------------------*/
.cboth {clear:both;}
.hide {display:none}
.indent { display:block; overflow:hidden; text-indent:-9999px}
.fl {float:left}
.fr {float:right}
.errorText { font-size:10px; color:Red; }

/*-----------------------------------------------------
	Type
-----------------------------------------------------*/
h1,h2,h3 {font-family: Helvetica, Arial, sans-serif; margin-bottom:20px; color:#631E5D}
h4,h5,h6 {font-family: Helvetica, Arial, sans-serif; margin-bottom:5px; color:#631E5D}
h1	{font-size:36px}
h2	{font-size:20px; font-weight:normal}
h3	{font-size:20px; font-weight:normal}
h4	{font-size:14px; font-weight:bold}
h5	{}
p	{}
ul {}
ol {}
li {}
blockquote {}
cite {}
cite:before {}
strong {font-weight:bold;}
em {font-style:italic;}
abbr, acronym {border-bottom:1px dotted #666;}

/*-----------------------------------------------------
	Form Elements
-----------------------------------------------------*/
fieldset {}
legend {}
label {}
input, select, textarea { font:12px Arial, Helvetica, sans-serif;}
input[type="text"] { padding:4px;}
input[type="password"] { padding:4px;}
textarea  { padding:4px;  margin-top:0;}
select  { padding:4px;}
input[type="radio"] {}
input[type="checkbox"] {}
input[type="image"] { width:auto;}
.labelHighlight { color:#999}

/*-----------------------------------------------------
	Links
-----------------------------------------------------*/
a {text-decoration:underline; color:#631e5d }
a:visited {text-decoration:underline; color:#631e5d s }
a:hover, a:focus {text-decoration:none; color:#a1789e}
a:active {text-decoration:underline; color:#631e5d }
a:focus {outline: 1px dotted #000;}

/*-----------------------------------------------------
	Global Layout
-----------------------------------------------------*/
body { font:12px/1.8 Arial, Helvetica, sans-serif; color:#666; background:#fff; width:980px; margin:0 auto;}

#header { height:123px; position:relative}
#header #logo,
#secondary,
ul#primary{ position:absolute}

#header #logo { top:65px; left:20px}

ul#primary {list-style:none; top:71px; right:0}
ul#primary li { float: left; position:relative}
ul#primary li a {float:left; display:block; height:35px; line-height:35px; font-size:12px; padding-left:5px; color:#666; position:relative; z-index:100; text-decoration:none}
ul#primary li a span {padding:0 30px 0 10px; display:block; background: url(../img/tab-current.png) no-repeat right -140px;}

ul#primary li a:hover,
ul#primary li.hover a {background: url(../img/tab-current.png) no-repeat 0 -70px; text-decoration:none; color:#fff  }

ul#primary li a:hover span { background-position: right -105px; color:#fff  }
ul#primary li.hover a span { background-position: right -105px; color:#fff  }

ul#primary li.no-drop a:hover { background-position: 0 -210px}

ul#primary li.no-drop a span {padding:0 15px 0 10px; background:none}
ul#primary li.no-drop a:hover span {background: url(../img/tab-current.png) no-repeat right -35px;}

ul#primary ul { width: 175px; visibility: hidden; position:absolute; top:34px; left: -2px; list-style:none; background: url(../img/flyout-bg.png) no-repeat bottom left; padding: 0 15px 10px; z-index:99}
ul#primary ul li { float:none; padding-bottom:15px }

ul#primary ul li a,
ul#primary li.hover ul li a { height:auto; line-height:normal; background:none; padding:0; color:#666; float:none;}

ul#primary ul li a:hover,
ul#primary li.hover ul li a:hover{ padding:0; background:none; color:#333}

ul#primary ul div { background:url(../img/flyout-top.png) no-repeat 0 0; height:6px; width:205px; margin:0 0 10px -15px}

#secondary {top:18px; right:15px; list-style:none}
#secondary li { float: left}
#secondary li a { float:left; font-size:11px; color:#666; margin-left:20px; padding-left:25px;; text-decoration:none}
#secondary li a:hover { color:#333}
#secondary li:first-child a { margin-left:0;}
#secondary li.sup-session a { background:url(../img/icon-bub-sm.png) no-repeat left center}
#secondary li.reg-product a { background:url(../img/icon-key-sm.png) no-repeat left center}

#content { padding: 30px 9px 0; margin-bottom:20px; border:solid 1px #ccc; border-top:0; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; }

#sub { background:url(../img/shadow.png) no-repeat 160px top; min-height:495px; margin-top:-15px; padding-top:25px; }
#sub .title { display:block; font-size:10px; text-transform:uppercase; letter-spacing:2px; color:#631e5d; margin: 0 0 20px 10px; width:190px }
#sub ul { margin:0 0 20px 10px; width:190px; list-style:none;}
#sub li { line-height:normal; margin: 0 0 20px 0; width:190px}
#sub li a { color:#666; text-decoration:none}
#sub li a:hover { color:#333; text-decoration:none}
#sub li a.current { color:#333; font-weight:bold; background:#fff /*url(../img/sn-arrow.png) no-repeat left center*/; display:block; padding:20px 0 20px 15px; border: solid 1px #ccc; border-right:none; position:relative; margin-left:-10px; -webkit-border-radius: 10px 0 0 10px; -moz-border-radius: 10px 0 0 10px; border-radius: 10px 0 0 10px; }

.hgroup { margin-bottom:25px; width:380px}
.hgroup h1 { font-size:36px; line-height:normal; margin-bottom:0}
.hgroup h2 { font-size:18px; margin-bottom:0; color:#a1789e}

#main { padding-bottom:40px;}
#main p { margin-bottom:20px}
#main ul { margin: 0 0 20px 15px}

#intro { position:relative; padding-bottom:30px; border-bottom: solid 1px #ccc;}
#intro .pack { position:absolute; top:-80px; right:20px;}
#intro ul { list-style:none; width:380px; margin:0; float:left;}
#intro li { background:url(../img/tick.png) no-repeat 0 2px; padding-left:28px; font-size:14px; line-height:1.5; margin-bottom:15px; font-weight:bold;}
#intro hgroup { margin-bottom:25px; width:380px;}
#intro hgroup h1 { font-size:36px; line-height:normal; margin:0; color:#631e5d;}
#intro hgroup h2 { font-size:18px; margin:0; color:#a1789e; font-weight:normal;}
#intro .enquiry { float:right; width:220px; margin-top:50px; line-height:24px;}
#intro .enquiry .tel { font-size:24px; font-weight:bold; color:#066ec1;}



#bespoke { position:relative; padding-bottom:30px; border-bottom: solid 1px #ccc;}
#bespoke .pack { position:absolute; top:-80px; right:20px;}
#bespoke ul { list-style:none; width:680px; margin:0; float:left}
#bespoke li { background:url(../img/tick.png) no-repeat 0 2px; padding-left:28px; font-size:14px; line-height:1.5; margin-bottom:15px; font-weight:bold}

#bespoke2 p { margin-bottom: 5px; }
#bespoke2 ul { list-style: none; width: 100%; margin: 0; float: left; padding-bottom: 20px; }
#bespoke2 li { background:url(../img/tick-sm.png) no-repeat 0 2px; padding-left:28px; font-size:12px; line-height:1.2; margin-bottom:10px; font-weight:normal}

#ytplayer { padding-left: 30px; }



#main .tab-nav {  margin-left:0; padding:20px 0; clear:both; list-style:none; margin-bottom:0}
.tab-nav li { float:left; }
.tab-nav li a { float:left; display:block; height:35px; line-height:36px; margin-left:20px; font-size:12px; padding-left:5px; color:#666; text-decoration:none}
.tab-nav li a span {padding:0 15px 0 10px}

.tab-nav li a:hover, .tab-nav li a:hover span, .tab-nav li a:focus { text-decoration:none; color:#631e5d}

.tab-nav li:first-child a,
.tab-nav li:first-child a.current { margin-left:0}

.tab-nav li a.current {background: url(../img/tab-current.png) no-repeat 0 0;  }
.tab-nav li a.current span { display:block; background:url(../img/tab-current.png) no-repeat right -35px; color:#fff; }

.tab-content { clear:both}
.tab-content h1 { font-size:28px; font-weight:normal; margin-bottom:0;}
.tab-content h2 { margin-bottom:0; font-weight:normal; }
.tab-content iframe { margin-bottom:20px}

#Sage50ResourcesGrid th {text-align: left;}
#Sage50ResourcesGrid td {text-align: left;}
#Sage200ResourcesGrid th {text-align: left;}
#Sage200ResourcesGrid td {text-align: left;}

#credits { border-bottom: solid 1px #ccc; clear:both; margin-left:-9px; width:978px; padding:30px 0}
#credits ul { margin:0 auto; width:910px}
#credits li { float:left; list-style:none; margin-left:16px}
#credits li:first-child { margin-left:0}

#testimonials { border-top: solid 1px #ccc; clear:both; margin-left:-9px; width:960px; padding:20px 9px}
#testimonials blockquote { font:14px Georgia, "Times New Roman", Times, serif; margin-bottom:15px}
#testimonials cite { font-size:11px}
#testimonials h2 { margin-left:10px}

#contact-social { text-align: left; vertical-align: middle; display: flex; justify-content: space-between; width: 200px; }

#footer { padding: 20px 9px; margin-bottom:20px; border:solid 1px #ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

#footer dt,
#footer .news-sign h6 { color:#333; font-size:12px; font-weight:bold; margin-bottom:10px}
#footer dd { font-size:11px }

#footer dd a { color:#666; text-decoration:none}
#footer dd a:hover { text-decoration: underline;}

#footer .sm { padding:5px 0; width:120px; overflow:hidden; display: flex;  justify-content: space-between; }
#footer .sm dd { float:left }
#footer .sm dd a {background:url(../img/sm.png) no-repeat 0 0; width:16px; height:16px; text-indent:-9999px; overflow:hidden; display:block; margin-left:5px;}

#footer .news-sign p { line-height:normal; margin-bottom:10px; font-size:10px}
#footer .news-sign input[type="text"] { margin-bottom:5px}
#footer .news-sign input[type="image"] { float:right}

#sp { font-size:11px; margin-bottom:30px; width:100%; overflow:hidden}

#tick-list { background:url(../img/tick-list-bg.png) no-repeat 0 0; padding-top:20px; margin-bottom:20px; margin-top:30px}
#tick-list h2 { margin: 0 20px 10px; font-size:14px; font-weight:bold; color:#333}
#tick-list ul { margin: 0 20px; font-size:14px; list-style:none;}
#tick-list li { background:url(../img/tick.png) no-repeat left center; padding-left:25px; margin-bottom:5px;}

#callouts { margin-bottom:20px; margin-top:10px}
#callouts ul { list-style:none}
#callouts li { float:left; border-bottom:solid 1px #ccc; border-right:solid 1px #ccc; height:210px; width:299px; }

#callouts li.pos2,
#callouts li.pos4 { padding-left:20px; border-right:none}

#callouts li.pos1,
#callouts li.pos3 { width:299px}

#callouts li.pos3,
#callouts li.pos4 { border-bottom: none}

#callouts h2 { font-size:24px; margin:10px 0}
#callouts p { width:200px; font-size:12px; margin-bottom:15px}
#callouts .bullet { background:url(../img/bullet.png) no-repeat left center; padding:3px 0 4px 28px; height:20px}

#callouts li.pos1 { background:url(../img/icon-monitor.png) no-repeat 208px 60px}
#callouts li.pos2 { background:url(../img/icon-bouy.png) no-repeat 228px 60px}
#callouts li.pos3 { background:url(../img/icon-cog.png) no-repeat 208px 60px}
#callouts li.pos4 { background:url(../img/icon-wallet.png) no-repeat 228px 60px}


/*-----------------------------------------------------
	Mastheads
-----------------------------------------------------*/

#inside-masthead { height:123px; color:#fff; font-size:48px; line-height:123px; padding:0 30px; text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.4)}
.blue { background:url(../img/mast/blue.jpg) no-repeat 0 0}
.aqua { background:url(../img/mast/aqua.jpg) no-repeat 0 0}
.green { background:url(../img/mast/green.jpg) no-repeat 0 0}
.red { background:url(../img/mast/red.jpg) no-repeat 0 0}
.purple { background:url(../img/mast/purple.jpg) no-repeat 0 0}
.lilac { background:url(../img/mast/lilac.jpg) no-repeat 0 0}

#home-masthead { height:323px; background: url(../img/mast/home.jpg) no-repeat 0 0; position:relative;}
#home-masthead .text { position:absolute; top:40px; left:460px; width:420px}
#home-masthead h1 { font-size:40px; color:#fff; line-height:normal; font-weight:normal; text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.8)}
#home-masthead p { font-size:14px; color:#fff; font-weight:bold; width:210px; line-height:normal; text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.8)}
#home-masthead a { position:absolute; top:165px;  left:260px; }
#home-masthead .box-shot { position:absolute; top:35px; left:70px; z-index:10}


#ctl00_BodyContent_gvDisplayResults th { border-bottom:solid 2px #A1789E; background:#631E5D; padding:5px; color:#fff}
#ctl00_BodyContent_gvDisplayResults td { border-bottom:solid 1px #ccc; padding:5px; line-height:normal}
#ctl00_BodyContent_FormView1_gvDisplayResults th { border-bottom:solid 2px #A1789E; background:#631E5D; padding:5px; color:#fff}
#ctl00_BodyContent_FormView1_gvDisplayResults td { border-bottom:solid 1px #ccc; padding:5px; line-height:normal}

table td { border: 0px none; padding: 0px; text-align: left; }
table td.col-price { text-align: right; }
#Sage200ResourcesGrid table td { border: 1px solid black; padding: 2px; text-align: center; }