/* == STYLESHEET FUNCTIONS - Global reset and base element styling
------------------------------------------------------------------------------------------------------------------------ 

/* == Global Reset 
------------------------------------------------------------------------------------------------------------------------ */

html, body, div, span, h1, h2, h3, h4, h5, h6, p, hr, 
a, a img, font, img, dd, dl, dt, li, ol, ul, blockquote,
fieldset, form, label, legend, table, caption, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	line-height: inherit;
	font-family: inherit;
	font-size: 100%;
}
ol, ul {
	list-style: none;
}

/* == Base Element Styling
------------------------------------------------------------------------------------------------------------------------ */

body{font-size: 75%;text-align: center;font-family: Arial, helvetica, Sans-Serif;color: #666; background: #f2f2f2;}

h1, h2, h3, h4, h5, h6{font-weight: bold;color: #3D3D3D;margin: 10px 0;}
h1{margin: 0 0 10px 0;font-size: 200%;letter-spacing: -1px;}
h2{color: #C3000E;font-size: 150%;letter-spacing: -1px;}
h3{font-size: 130%;}
h4{font-size: 120%;}
h5{font-size: 110%;}
h6{font-size: 100%;}

h2.withDivider{font-size: 130%; background: #e3e3e3; border-left: solid 6px #d90017;color: #3E3E3E;margin: 0 0 10px 0;line-height: 31px; padding-left: 5px;}

h3.withDivider{font-size: 130%; background: #e3e3e3; border-left: solid 6px #d90017;color: #3E3E3E;margin: 0 0 10px 0;line-height: 31px; padding-left: 5px;}

h2 img{vertical-align: middle;}

p{margin: 15px 0;line-height: 1.7em;}
blockquote{margin: 20px;}

ul{margin: 15px 0 15px 20px; list-style-type: none;list-style-image: url(/__style/structure/images/bullet.gif);}
ul li{margin: 5px 0;}
ol{margin: 15px 0 15px 25px; list-style-type: decimal;}
ol li{margin: 5px 0;}

dl{margin: 10px 0;}
dt{font-weight: bold;}
dd{text-indent: 15px;}

table{border-collapse: collapse;}
thead{}
tfoot{}
th{background: #d0d0d0;padding: 4px 5px;color: #111;font-weight: bold;border: solid 1px #fff;}
tr{}
td{padding: 4px 5px;border: solid 1px #fff;}

#wrap form{margin: 10px 0;}
legend{font-weight: bold;}
.label{float: left; width: 30%;font-weight: bold;}
.inputText, textarea{border:solid 1px #ababab;background: #ffffff;padding: 3px;margin: 0 0 4px 0;font-family: Arial;font-size: 100%;}
.inputAlt{padding: 3px;margin: 0 0 4px 0;}
.formRow{border: solid 1px #ccc; border-width: 1px 0 1px 0;background: #fafafa url(/__style/structure/images/form-row-gradient.gif) top left repeat-x;padding: 5px;margin: 0 0 5px 0;}
.formRow .inputText, .formRow textarea{margin: 0;background: #fff;}
.formRow ul{list-style-image: none;margin: 0;}
.formRow ul li{display: inline;}
select{margin: 0 0 4px 0;border:solid 1px #ababab;}
select option{padding: 0 5px;}
.btn{border: 0;background: #fc2424 url(/__style/structure/images/btn-bg.gif) bottom left repeat-x;color: #fff;font-weight: bold;font-family: Arial;padding: 3px 10px;cursor: pointer; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }


/** checkbox wrapper **/
.chkHolder{float:left;width:510px;margin:0 0 5px 0;}
.chkHolder label{float:left;width:220px;margin: 2px 0;}
.chkHolder input{float:left;margin: 2px 12px 2px 0;}

.errorTarget{border: solid 1px #ccc;border-width: 1px 0 1px 0;padding: 5px;margin: 0 0 5px 0;background: #fafafa url(/__style/structure/images/form-row-gradient.gif) top left repeat-x;}
.errorTarget .inputText, .errorTarget select, .errorTarget textarea{margin: 0;background: #fff;border: solid 1px red;}
.errorTarget .label{color: Red;}

/* Cross browser hr styling */
hr{border: 0;border-top: solid 1px #ccc; height: 1px; margin: 5px 0;}
div.hr{margin: 5px 0px; border: none; border-top: 1px dotted #dadada;clear:both;}
div.hr hr{display:none;}

a{color: #ae0000;text-decoration: none;}
a:hover{text-decoration: underline;}

a.btnLink{background: url(/__style/structure/images/btn-link-left.gif) top left no-repeat;text-decoration: none;color: #525252;font-weight: bold;}
a.btnLink span{float: left;background: url(/__style/structure/images/btn-link-right.gif) top right no-repeat; height: 19px; line-height: 19px;cursor: pointer;padding: 0 8px;}

a.btnLinkLarge{border: solid 1px #afafaf;padding: 0 15px;background: #fc2424 url(/__style/structure/images/btn-bg.gif) bottom left repeat-x;color: #fff;height: 30px;line-height: 27px;font-weight: normal;font-family: Arial;font-size: 150%;}

img{vertical-align: bottom;}
img.siteBase{float: left;position: relative; left: -6px;}

/* = Independent Global Styles
------------------------------------------------------------------------------------------------------------------------ */

/** layout **/
.floatLeft{float: left;}
.floatRight{float: right;}
#wrap .noPad{padding: 0;}
.textRight{text-align: right;}
.textLeft{text-align: left;}
/** clearing **/
.clr{clear: both;}
.clrSml{clear: both;line-height:1px;height:1px;}
.clrLeft{clear: left;}
.clrNone{clear: none;}
/** presentation **/
.hlFixIE, .hlFix{height: 1%;}
.hlFix:after{content: ".";clear: both;display: block;height: 0;visibility: hidden;}
.standoutText, .prom{color: #d31616;}
.date{color: #d31616;}
.black{color: #000;}
.padder10{padding: 10px;}
.padder5{padding: 5px;}
.snug{margin-bottom: 0;}
.leadPara{margin-top: 0;}
.highlight{background-color: #C30011; color: #fff;}
.btnBlock{background: #eee;overflow: auto;height: 1%;}
.framedImage{background: #ccc; text-align:center; padding: 10px 0; margin-bottom: 14px;}
.thumbLeft{float: left; border: solid 1px #ccc; padding: 2px;margin: 0 10px 10px 0;}
.sml{font-size: 90%;}
.withBorder{border: solid 1px #d5d5d5;}
.bold{font-weight: bold;}
.intro{font-size: 120%; line-height: 1.5em;}

.iconPrint{background: url(/__style/structure/images/icon-sprite.gif) 0 0 no-repeat;padding: 2px 0 2px 23px;}
.iconShare{background: url(/__style/structure/images/icon-sprite.gif) 0 -23px no-repeat;padding: 2px 0 2px 25px;}
.iconCommentAdd{background: url(/__style/structure/images/icon-sprite.gif) 0 -46px no-repeat;padding: 2px 0 2px 20px;}
.iconComment{background: url(/__style/structure/images/icon-sprite.gif) 0 -68px no-repeat;padding: 2px 0 2px 20px;}
.iconCamera{background: url(/__style/structure/images/icon-sprite.gif) 0 -91px no-repeat;padding: 2px 0 2px 20px;}
.iconVideo{background: url(/__style/structure/images/icon-sprite.gif) 0 -110px no-repeat;padding: 2px 0 2px 25px;}

.hide{display: none;}
.abs{position:absolute;}
.rel{position:relative;}
.fix{position:fixed;}

#subNav3 ul{margin: 15px 0 15px 20px; list-style-type: none;list-style-image: url(/__style/structure/images/bullet.gif); background: pink; display: inline;}
#subNav3 ul li{margin: 5px 8px; float: left; display: inline;}




/* Chris' Styles */


/* = Register / Login
------------------------------------------------------------------------------------------------------------------------ */
.registerLogin { padding: 15px; margin: 0 0 10px; background: #e3e3e3; }

.registerLogin .formRow,
.registerLogin .errorTarget { border: 0; background: none; padding: 0; color: #454545; }
.registerLogin .formRow label,
.registerLogin .errorTarget label { padding: 8px 0 0; }
.registerLogin .formRow input,
.registerLogin .errorTarget input { width: 67%; margin: 5px 0; border: 1px solid #c2c2c2; }
.registerLogin .formRow select { width: 69%; padding: 3px; }

.registerLogin .formRow .checkboxes { width: 67%; float: left; margin: 5px 0; }
.registerLogin .formRow .checkboxes input { width: auto; float: left; margin: 2px 0; }
.registerLogin .formRow .checkboxes span { width: 90%; float: right; }

.forgottonPassword h2 { color: #454545; margin: 0 0 5px; }
.forgottonPassword p { color: #666; margin: 0 0 5px; }

/* = My Account
------------------------------------------------------------------------------------------------------------------------ */
.myAccount { width: 45%; padding: 15px; margin: 0 0 10px; background: #e3e3e3; }

.myAccount label { padding: 8px 0 0; width: 40% !important; }
.myAccount input { width: 57% !important; margin: 5px 0 !important; background: #fff !important; border: 1px solid #c2c2c2 !important; }
.myAccount select { width: 59%; padding: 3px; }
.myAccount p { margin: 0 0 15px; }

.businessProfile { }
.businessProfile h3 { float: left; }
.businessProfile img { margin: 0 20px 0 0; }
.businessProfile th { padding: 10px; }
.businessProfile td { background: #fff; border: 1px solid #ccc; padding: 10px; }

/* == My Account Tabs
----------------------------------------------------------------------------------------------------------------------*/
.myAccountTabs, 
.businessTabs {margin: 0 0 20px; padding: 10px 0 0;border-top: 1px solid #ccc;}
.businessTabs{margin: 0 0 2px;border:none;}
.myAccountTabs:after, 
.businessTabs:after { content: "."; clear: both; display: block; height: 0; visibility: hidden; }
.myAccountTabs li, 
.businessTabs li { float: left; list-style-image: none; margin: 0  0 0 12px; position: relative; }
.myAccountTabs li:first-child, 
.businessTabs li:first-child {margin: 0;}
.myAccountTabs li.on .arrow{width: 14px; height: 7px; position: absolute; bottom: -7px; left: 46%; background: url(/_img/my-account-tabs-on.jpg) no-repeat; }
.myAccountTabs li .arrow{ width: 14px; height: 7px; position: absolute; bottom: -7px; left: 46%; background: none; }
.myAccountTabs li a, 
.businessTabs li a{float: left;color: #454545; font-weight: bold;padding: 10px 0;background: #e3e3e3;text-align: center;width: 150px;}
.myAccountTabs li a:hover,
.myAccountTabs li a.on,
.businessTabs li a:hover{color:#fff;background:#d80015;text-decoration: none;}
.businessTabs li span{display:block;background:none;}
.businessTabs li a.on span{background:#c0c0c0;padding:10px 0;color:#282828;}
.businessTabs li a.on{background:#fff url(/_img/business-tabs-on.gif) no-repeat center bottom;padding:0 0 6px;}

/* == News / Offer Details
----------------------------------------------------------------------------------------------------------------------*/
.offerDetails { width: 48%; float: left; }
.offerDetails h3 { float: none; }
.offerDetails .inner { padding: 15px; margin: 0 0 10px; background: #e3e3e3; }
.offerDetails .inner label { padding: 8px 0 0; }
.offerDetails .inner input { width: 67%; margin: 5px 0; border: 1px solid #c2c2c2; }
.offerDetails .inner textarea { width: 67%; margin: 5px 0; border: 1px solid #c2c2c2; }
.offerDetails .inner select { width: 69%; padding: 3px; }

.offerPreview { width: 48%; float: right; }
.offerPreview h3 { float: none; }
.offerPreview .inner { padding: 15px; margin: 0 0 10px; background: #e3e3e3; }

.headlinePrefix {background-color:#d90016; color:white; font-size:90%;font-weight: bold; padding: 2px 2px 2px 2px}
.headlineFeatPrefix {font-size:90%;font-weight: bold;}



/*

Notes for Natalie - 3/8/12

I have done most of the styling but need some tech to make it all fit in to place...

http://nwn.news.platini.ii.web/register.aspx

- Forgot your password > Remove the text inside the div and move the submit button outside the myAccount div
  (NH: no control over this as it looks to be using a built in asp .net password recovery control)
- No capture (NH: this will be fine once on live)

http://nwn.news.platini.ii.web/account.aspx

- Can we add a class "on" to the li under the My Account title? Styles are in place NH: done
- Password > move the span next to the input and also move the submit buttons outside the myAccount div
  NH: same issue as above with built in asp.net control
- Business Profile > Remove "btn" class on the delete button NH: done

*/

/* Job Recruiting Styles */    
.jobRecruiting{float:left; width:100%; margin:30px 0; padding:10px 0; border-top:solid 3px #e0e0e0;}
.jobRecruiting .listingWrap{position:relative; float:left; width:100%; margin:5px 0; background:#eee;}
.jobRecruiting .listing{float:left; width:622px; margin:20px 0 20px 15px;}
.jobRecruiting .listing ul,
.jobRecruiting .listing ul li{float:left; margin:0; padding:0; list-style:none;}
.jobRecruiting .listing ul{left:0;}
.jobRecruiting .listing ul li{width:202px; height:110px; margin:0 8px 0 0;}
.jobRecruiting .listing ul li.liEnd{margin:0;}
.jobRecruiting .listing ul li a.img{float:left; width:200px; height:85px; margin:0 0 5px 0; border:solid 1px #e3e3e3;}
.jobRecruiting .listing ul li a.img:hover{opacity:0.8;}
.jobRecruiting .listing ul li a{clear:both; display:block; text-align:center; font-weight:bold;}
.jobRecruiting .scan,
.jobRecruiting .jcarousel-prev,
.jobRecruiting .jcarousel-next{position:absolute; top:50%; left:-13px; width:27px; height:54px; margin-top:-38px; opacity:0.7; background:#000 url('/__style/bespoke/images/news_north_wales/scan-arrow-l.png') center center no-repeat; cursor:pointer;}
.jobRecruiting .scan:hover,
.jobRecruiting .jcarousel-prev:hover,
.jobRecruiting .jcarousel-next:hover{opacity:1;}
.jobRecruiting .jcarousel-prev-disabled,
.jobRecruiting .jcarousel-next-disabled,
.jobRecruiting .jcarousel-prev-disabled:hover,
.jobRecruiting .jcarousel-next-disabled:hover{opacity:0.2;}
.jobRecruiting .scanNext,
.jobRecruiting .jcarousel-next{left:auto; right:-12px; background-image:url('/__style/bespoke/images/news_north_wales/scan-arrow-r.png');}