/* Riverside Butchers Ordsys2 CSS File - ord_layout.css */
/* All code - Paul Willitt - NTSWebco - 2022-23 */

/* This File sets out the order form layout, tables, typography etc. */

/* Basic Section -------------------------------------------- */

html {
	height: 100%;
}

body {
	background-color: black;
	font-family: ralewaylight, Arial, Helvetica, sans-serif;
	line-height: 1.1em;
	color: #ffffff;
	font-size: 16px;
}

/* Page Construction Parameters ------------------------------ */

#container_xs {
	margin: 0 auto;
	width: 980px;
	height: 1200px;
	background-image: url("../_img/background/wrapper_xsorders2_1040.jpg");
	background-position: center top;
	background-repeat: repeat-y;
	background-attachment: fixed;
	padding-top: 10px;
}

#container {
	margin: 0 auto;
	width: 980px;
	height: 1200px;
	background-image: url("../_img/background/wrapper_orders_1040.jpg");
	background-position: center top;
	background-repeat: repeat-y;
	background-attachment: fixed;
	padding-top: 10px;
}


#container_mgmt {
	margin: 0 auto;
	width: 980px;
	height: 1200px;
	background-image: url("../_img/background/wrapper_mgmt_dgrey_1040.jpg");
	background-position: center top;
	background-repeat: repeat-y;
	background-attachment: fixed;
	padding-top: 10px;
}

#container_long {
	margin: 0 auto;
	width: 980px;
	height: 1300px;
	background-image: url("../_img//background/wrapper_orders_1040.jpg");
	background-position: center top;
	background-repeat: repeat-y;
	background-attachment: fixed;
	padding-top: 10px;
}


#header {
	margin: 0 auto;
	width: 900px;
	height: 100px;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	border: 1px solid #a2baaf;
}

#footer {
	margin: auto;
	width: 900px;
	height: 1.5%;
	text-align: left;
	color: #fff;
	font-size: 0.8em;
	font-family: "ralewaylight";
	padding: 20px;
	border: 1px solid #a2baaf;
	margin-top: 0px;
}

/* Full Page Text Area -------------------------------------- */

#content-full {
	margin: auto;
	width: 900px;
	padding: 20px;
	height: 78.5%;
	border: 1px solid #a2baaf;	
	margin-top: 10px;
}

#content-fixed {
	margin: auto;
	width: 900px;
	height: 880px;
	padding: 20px;
	border: 1px solid #a2baaf;	
	margin-top: 10px;
}

#content-full-all {
	margin: auto;
	width: 900px;
	padding: 20px;
	height: 75.5%;
	border: 1px solid #a2baaf;	
	margin-top: 10px;
}

#content-full-long {
	margin: auto;
	width: 860px;
	padding: 20px;
	height: 80.5%;
	border: 1px solid #a2baaf;	
	margin-top: 10px;
}

#content-full-long-2 {
	margin: auto;
	width: 860px;
	padding: 20px;
	height: 81.5%;
	border: 1px solid #a2baaf;	
	margin-top: 10px;
}


/* Order Info panels left and right -------------------------- */

.content-left-small {
	float: left;
	margin-top: 5px;
	margin-left: 10px;
	width: 250px;
	padding-left: 20px;
	padding-top: 0px;
	padding-bottom: 10px;
	padding-right: 10px;
	height: 95%;
	border: 1px solid #a2baaf;	
}

.content-left-mid {
	float: left;
	margin-top: 5px;
	margin-left: 15px;
	width: 270px;
	padding-left: 20px;
	padding-top: 0px;
	padding-bottom: 10px;
	padding-right: 15px;
	height: 95%;
	border: 1px solid green;	
}

.content-left-small-2 {
	float: left;
	margin-top: 5px;
	margin-left: 10px;
	width: 250px;
	padding-left: 15px;
	padding-top: 0px;
	padding-bottom: 10px;
	padding-right: 15px;
	height: 95%;
	border: 1px solid #a2baaf;	
}

.content-right-large {
	float: right;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 30px;
	width: 530px;
	padding: 10px;
	padding-left: 20px;
	padding-right: 0px;
	padding-top: 0px;
	height: 95%;
}

/* Home Page and New Account Information Panel --------------------------------------------------- */

.content-right-large2 {
	float: right;
	margin-right: 0px;
	margin-bottom: 30px;
	width: 570px;
	font-family: "josefin_sanslight";
	font-size: 1.2em;
	line-height: 1.3em;
	padding-left: 5px;
	padding-right: 0px;
	padding-top: 0px;
	height: 95%;
}

.content-right-large2_acv {
	float: right;
	margin-right: 0px;
	margin-bottom: 30px;
	width: 570px;
	font-family: "josefin_sanslight";
/*	font-size: 1.2em; */
	line-height: 1.3em;
	padding-left: 5px;
	padding-right: 0px;
	padding-top: 0px;
	height: 95%;
}

.content-right-large2 ul {
	list-style-type: none;
	text-align: left;
	list-style-position: outside;
	margin-left: 0px;
	padding-left:18px;
	color: #ded0a6; 
	font-size: 0.95rem;
}

.content-right-large2 ul li::before { 
	content: "\25AA";
	color: #ed7511;
	display: inline-block;
	width: 1em;
	margin-left: -1em;
}

.content-right-large2 h3 {
	font-size: 1.6em;
	color: #ded0a6;
	margin-top: 12px;
}

 .centerdiv {
	position: relative;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	width: 50%;
}

.centerdiv_b {
	margin: auto;
	width: 80%;
}

.centerdiv_full {
	margin: auto;
	width: 90%;
	height: 800px;
	display: flex;
	justify-content: center;
	align-items: center;
}	

.centerdiv_child {
	width: 50%;
	height: 35%;
	padding-top: 40px;
	border: 1px solid #a2baaf;
	text-align: center;
}


/* Final Check Page Panels --------------------------------------------------------- */

.content-left-small-rvw {
	float: left;
	margin-top: 5px;
	margin-left: 10px;
	margin-bottom: 5px;
	width: 250px;
	padding-left: 20px;
	padding-top: 0px;
	padding-bottom: 10px;
	padding-right: 10px;
	height: 86%;
	border: 1px solid #a2baaf;	
}

.content-left-small-rvw-os2 {
	float: left;
	margin-top: 5px;
	margin-left: 10px;
	margin-bottom: 5px;
	width: 250px;
	padding-left: 20px;
	padding-top: 0px;
	padding-bottom: 10px;
	padding-right: 10px;
	height: 92%;
	border: 1px solid #a2baaf;	
}	

.content-right-large-rvw {
	float: right;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 5px;
	width: 550px;
	padding: 10px;
	padding-left: 5px;
	padding-right: 0px;
	padding-top: 0px;
	height: 86%;
	border: 1px solid #a2baaf;
}

.content-right-large-rvw-os2 {
	float: right;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 5px;
	width: 565px;
	padding: 10px;
	padding-left: 5px;
	padding-right: 0px;
	padding-top: 0px;
	height: 92%;
}

.content-right-large-rvw-os2 h4{
	color: #ded0a6;
	margin-top: 5px;
}

.content-agree {
	float: left;
	margin-left: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	width: 850px;
	height: 3%;
	line-height: 1.6em;
	text-align: right;
}

.content-agree-os2 {
	float: right;
	margin-left: 10px;
	margin-top: 15px;
	margin-bottom: 10px;
	width: 850px;
	height: 3%;
	line-height: 1.6em;
	text-align: right;
}
/* Order Review Panels within main content------------------------------- */

#content-top {
	margin-top: 0px;
	width: 880px;
	margin: auto;
	height: 10%;
	border: none;
	font-family: "josefin_sanslight";
	font-size: 1.2em;
	line-height: 1.3em;
}

#content-top-left {
	width: 52%;
	height: 100%;
	float: left;
	margin-right: 36px;
	padding-top: 5px;
}

#content-top-right {
	width: 40%;
	height: 100%;
	float: right;
	margin-right: -30px; 
}

.content-top-left-thanks {
	width: 38%;
	height: 60%;
	float: left;
	margin-right: 30px;
	margin-top: 160px;
	padding-top: 35px;
	background-image: url("../_img/side-image1.jpg");
	background-repeat: no-repeat;
}

.content-top-right-thanks {
	width: 58%;
	height: 60%;
	float: right;
	padding-top: 35px;
	margin-top: 130px;
	font-family: "josefin_sanslight";
	font-size: 1.4em;
	
}

#content-bottom {
	margin-top: 10px;
	margin:auto;
	width: 840px;
	height: 82%;
	border: none;
	font-family: "josefin_sanslight";
	font-size: 1em;
	padding-left: 20px;
	overflow-y:scroll;
	overflow-x: hidden;
}

/* New Standard Page Content Panels ----------------------------------------*/

#content-full-fp {
	margin: auto;
	width: 900px;
	padding: 20px;
	height: 72%;
	border: 1px solid #a2baaf;	
	margin-top: 10px;
}

#content-bottom-fp {
	margin: auto;
	width: 860px;
	height: 4%;
	margin-right: 5px;
	margin-top: 5px;
	padding-top: 8px;
}

#content-bottom-fp2 {
	margin: auto;
	width: 860px;
	height: 6%;
	margin-right: 5px;
	margin-top: 5px;
	padding-top: 8px;
}

#content-top-pg1 {
	margin-top: 0px;
	width: 840px;
	height: 74%;
	border: none;
	font-family: "josefin_sanslight";
	font-size: 1.2em;
	line-height: 1.3em;
	padding-left: 20px;
	padding-right: 20px;
}

#content-top-pg1 ul {
	list-style-type: none;
	text-align: left;
	list-style-position: outside;
	color: #ded0a6;
	font-size: 1.1rem;
	
}
#content-top-pg1 ul li::before { 
	content: "\25AA";
	color: #248c29;
	display: inline-block;
	width: 1em;
	margin-left: -1em;
}


#content-bottom-pg1 {
	margin-top: 10px;
	width: 840px;
	height: 28%;
	border: none;
	font-family: "josefin_sanslight";
	font-size: 1.2em;
	line-height: 1.3em;
	padding-left: 7px;
}

/* Page One Flex Box Settings ----------------------------------------  */

#flexwrapper-col {
	display: flex;
	height: 100%;
	width: 100%;
	flex-direction: column;
	padding-top: 0.8rem;
}

.col-1 {
/*	border: 1px solid #a2baaf; */
	height: 28%;
	width:100%;
	background: none;
	text-align: center;
	margin: 0;
/*	padding: 0.8rem; */
	color: #a2baaf;
}

.col-1b {
/*	border: 1px solid #a2baaf; */
	height: 24%;
	width:100%;
	background: none;
	text-align: center;
	margin: 0;
/*	padding: 0.8rem; */
	color: #a2baaf;
}

.col-2 {
	border: 1px solid #a2baaf;
	height: 38%;
	width:100%;
	background: none;
	text-align: center;
/*	padding: 0.8rem ; */
	color: #a2baaf;
	margin: 0.8rem 0 0.8rem 0;
}

.col-2b {
	border: 1px solid #a2baaf;
	height: 52%;
	width:100%;
	background: none;
	text-align: center;
/*	padding: 0.8rem ; */
	color: #a2baaf;
	margin: 0.8rem 0 0.8rem 0;
}

.col-3 {
/*	border: 1px solid #a2baaf; */
	height: 28%;
	width:100%;
	background: none;
	text-align: center;
/*	padding: 0.8rem; */
	color: #a2baaf;
}

.col-3 {
/*	border: 1px solid #a2baaf; */
	height: 24%;
	width:100%;
	background: none;
	text-align: center;
/*	padding: 0.8rem; */
	color: #a2baaf;
}

.col-1 h4 {
	font-size: 1.3em;
	font-weight: 500;
	color: #ed7511;
	margin-top: 0px;
	margin-bottom: 10px;
}

.col-1b h4 {
	font-size: 1.3em;
	font-weight: 500;
	color: #ed7511;
	margin-top: 0px;
	margin-bottom: 10px;
}

.col-2  h4 {
	font-size: 1.3em;
	font-weight: 500;
	color: #ded0a6;
	margin-top: 8px;
	margin-bottom: -4px;
}

.col-2b  h4 {
	font-size: 1.3em;
	font-weight: 500;
	color: #ded0a6;
	margin-top: 8px;
	margin-bottom: -4px;
}

.col-2 p.small-2 {
	font-size: 0.8em;
}

.col-2b p.small-2 {
	font-size: 0.8em;
}

.col-3 p {
	color: #fff;
}

.col-3b p {
	color: #a2baaf;
}

.col-1  p {
	color: #fff;
}

.col-1b  p {
	color: #a2baaf;
}

.col-3  h4 {
	font-size: 1.3em;
	font-weight: 500;
	color: #ed7511;
	margin-top: 10px;
	margin-bottom: 5px;
}

.col-3b  h4 {
	font-size: 1.3em;
	font-weight: 500;
	color: #ed7511;
	margin-top: 10px;
	margin-bottom: 5px;
}

.col-2 table {
	border-collapse: collapse;
	border-style: none;
	width: 95%;
}

.col-2b table {
	border-collapse: collapse;
	border-style: none;
	width: 95%;
}

.col2 td {
	font-size: 0.8em;
	color: #ded0a6;
	vertical-align: middle;
	text-align: center;
}

.col-2b td {
	font-size: 0.8em;
	color: #ded0a6;
	vertical-align: middle;
	text-align: center;
}

.col2-1 {
		height: 430px;
		width:100%;
		background: none;
		text-align: center;
		margin: 0;
		color: #a2baaf;
		padding-left: 5px;
		padding-right: 5px;
}

.col2-2 {
	height: 390px;
	width:100%;
	background: none;
	text-align: center;
	margin: 0;
	color: #a2baaf;
	border: 1px solid #a2baaf;
}

 .col2-1 h4, .col2-2 h4{
	font-size: 1.3em;
	font-weight: 500;
	color: #ded0a6;
	margin-top: 8px;
	margin-bottom: -4px;
}
/* ----- Original Flex Settings ------------------------------------------- */

#flexwrapper {
	display: flex;
	height: 82%;
	width: 100%;	
	justify-content: space-around;
}


.flexitem-1 {
	border: 3px outset #a2baaf;
	height: 85%;
	width: 25%;
	background: none;
	text-align: center;
	padding: 1rem;
	color: #248c29;
}

.flexitem-2 {
	border: 3px outset #a2baaf;
	height: 85%;
	width: 25%;
	background: none;
	text-align: center;
	padding: 1rem;
	color: #248c29;
}

.flexitem-3 {
	border: 3px outset #a2baaf;
	height: 85%;
	width: 25%;
	background: none;
	text-align: center;
	padding: 1rem;
	color: #248c29;
}

.flexitem-1,  h4 {
	font-weight: bold;
	color: #a2baaf;
	margin-top: -5px;
	margin-bottom: -4px;
}

 .flexitem-2 h4 {
	font-weight: bold;
	color: #d5af18;
	margin-top: -5px;
	margin-bottom: -4px;
} 

.flexitem-3  h4 {
	font-weight: bold;
	margin-top: -5px;
	margin-bottom: -4px;
}

.flexitem-1 p {
	color: #a2baaf;
	text-align: left;
}

.flexitem-2 p {
	color: #a2baaf;
	text-align: left;
}

.flexitem-3 p {
	color: #a2baaf;
	text-align: left;
}

.flexitem-1 ul {
	list-style-type: none;
	text-align: left;
	list-style-position: outside;
	margin-left: 0px;
	padding-left:18px;
	color: #fff;
	font-size: 1.1rem;
}

.flexitem-1 ul li::before { 
	content: "\25AA";
	color: #248c29;
	display: inline-block;
	width: 1em;
	margin-left: -1em;
}

.flexitem-1 ul li {
 	margin-bottom: 5px;
}

.flexitem-2 ul {
	list-style-type: none;
	text-align: left;
	list-style-position: outside;
	margin-left: 0px;
	padding-left:18px;
	color: #fff;
	font-size: 1.2rem;
}

.flexitem-2 ul li::before { 
	content: "\25AA";
	color: #248c29;
	display: inline-block;
	width: 1em;
	margin-left: -1em;
}

.flexitem-2 ul li {
	 margin-bottom: 5px;
}

.flexitem-3 ul {
	list-style-type: none;
	text-align: left;
	list-style-position: outside;
	margin-left: 0px;
	padding-left:18px;
	color: #fff;
	font-size: 1.2rem;
}

.flexitem-3 ul li::before { 
	content: "\25AA";
	color: #248c29;
	display: inline-block;
	width: 1em;
	margin-left: -1em;
}

.flexitem-3 ul li {
	 margin-bottom: 5px;
}

/* Section Image Settings --------------------------------------- */

.section_img {
	float: left;
	height: 62px;
	width: 128px;
	clear: right;
}

.section_img img{
	height: 62px;
	width: 108px;
}

.section_img_txt {
	float: right;
	margin-bottom: 0px;
	height: 62px;
	text-align: right;
	padding-top: 10px;
}

.section_content {
	width: 100%;
	float: left;
}

/* Table Layout Order Pages-------------------------------------------------- */

#content_table table {
	float: left;
	border-collapse: collapse;
	width: 100%;
	border-style: none;
}

#content_table td {
	line-height: 1.8em;
	font-family: "josefin_sanslight";
	font-size: 1em;
	text-align: left;
	vertical-align: bottom;
	color: #ded0a6;
	border-bottom: 1px solid #545454;
}

#content_table_r td{
	text-align: right;
}

#content_table2 table {
	float: left;
	border-collapse: collapse;
	width: 100%;
	border-style: none;
}

#content_table2 td {
	line-height: 1.8em;
	font-family: "josefin_sanslight";
	font-size: 1em;
	text-align: left;
	vertical-align: bottom;
	color: #ded0a6;
}

/* Table Layout for Review Page ------------------------------- */

#review_table {
	float: left;
	border-collapse: collapse;
	width: 100%;
	border-style: none;
}

#review_table td {
	line-height: 1.4em;
	font-family: "josefin_sanslight";
	font-size: 1em;
	text-align: left;
	vertical-align: bottom;
	color: #ded0a6;
	border-bottom: 1px solid #545454;
}

#review_table th {
	text-align: left;
}

#review_table th.rvw {
	text-align: left;
	font-size: 0.9em;
}

#review_table th.small {
	font-size: 0.5em;
}

#review_table td.check {
	line-height: 1.2em;
	font-size: 0.9em;
}

/* Table Layout for confirm and send Page --------------------- */

#confirm_table table {
	float: left;
	border-collapse: collapse;
	width: 100%;
	border-style: none;
}

#confirm_table td {
	line-height: 1.0em;
	font-family: "josefin_sanslight";
	font-size: 0.5em;
	text-align: left;
	vertical-align: bottom;
	color: #ded0a6;
	border-bottom: 1px solid #545454;
}

#confirm_table th {
	text-align: left;
}

/* Confirm table left settings ---------------------------------- */

#confirm_table-left table {
/*	float: left;  */
	border-collapse: collapse;
	width: 100%;
	border-style: none;
}

#confirm_table-left td {
	line-height: 1.2em;
	font-family: "josefin_sanslight";
	font-size: 1em;
	text-align: left;
	vertical-align: bottom;
	color: #ded0a6;
}

#confirm_table-left th {
	text-align: left;
}

/* New Table for Notes on final page ----------------------- */

.new-review-table table {
	float: left;
	border-collapse: collapse;
	width: 100%;
	border-style: none;
}

.new-review-table td {
	line-height: 1.4em;
	font-family: "josefin_sanslight";
	font-size: 1em;
	text-align: left;
	vertical-align: bottom;
	color: #ded0a6;
}

.new-review_table th {
	text-align: left;
}


/* Value Table to display the order total on review page --------- */

#value_table {
	float: right;
	border-collapse: collapse;
	border-style: none; 
	margin-right: 20px;
	width: 100%;
}

#value_table td {
	line-height: 1.6em;
	font-size: 1.2em;
	text-align: right;
	vertical-align: middle;	
}

/* for confirm page ----------------------------------------------- */

#value_table-left table {
/*	float: left; */
	border-collapse: collapse;
	border-style: none;
	width: 100%;
}

#value_table-left td {
	line-height: 1.6em;
	font-size: 1.1em;
	text-align: left;
	vertical-align: top;	
/*	border-bottom: 1px solid #545454; */
}

.td-border {
	border-bottom: 1px solid #545454;
	
}

/* Table for Customer Details Page --------------------------------- */

.content_right_large_table table {
	border-collapse: collapse;
	width: 100%;
	border-style: none;
}

.content_right_large_table td {
	line-height: 1.4em;
	font-family: "josefin_sanslight";
	font-size: 0.9em;
	color: #ded0a6;

}

/* Table Elements --------------------------------------------------- */

.ar {
	text-align: right;
	vertical-align: bottom;
	font-size: 0.9em;
	padding-bottom: 6px;
	
}

.ar_reg {
	text-align: right;
	vertical-align: bottom;
	font-size: 0.8em;
	padding-bottom: 6px;
	
}

.ar_c {
	text-align: center;
	vertical-align: bottom;
	font-size: 0.9em;
	padding-bottom: 6px;
	
}

.ar_cr {
	text-align: center;
	vertical-align: bottom;
	padding-bottom: 6px;
	color: red;
	
}

.ar_sml {
	text-align: center;
	vertical-align: bottom;
	font-size: 0.7em;
	padding-bottom: 4px;
	padding-top: 4px;
	color: #ded0a6;
	
}

.ar_sml a:link {
color: #08ae2f;
text-decoration: none;

}

.ar_sml a:visited {
color:rgb(199, 162, 79);

}

a:hover, a:active {
color: #fff;
cursor: pointer;

}

.ar_cs {
	text-align: center;
	vertical-align: bottom;
	font-size: 0.6em;
	padding-bottom: 0px;
	
}

.ar_cs_red {
	text-align: center;
	vertical-align: bottom;
	font-size: 0.8em;
	padding-bottom: 0px;
	color: yellow;
	
}

.ar_c2 {
	text-align: center;
	vertical-align: bottom;
	font-size: 0.9em;
	padding-bottom: 16px;
	
}

.ar_l {
	text-align: left;
	vertical-align: bottom;
	font-size: 0.9em;
	padding-bottom: 6px;
	
}

.art2 {
	text-align: right;
	vertical-align: top;
	font-size: 0.9em;
	padding-top: 6px;
	
}

.dp {
	padding-top: 10px;
	line-height: 1.8em;
}


.nb {
	border-bottom: none;
}


/* Form Elements --------------------------------------------------- */

.select-box {
	width: 130px;
	height: 26px;
	border: 1px solid #a2baaf;
	font-family: "josefin_sanslight";
	font-size: 0.9em;
	color: #fff;
	background-color: #393a3a;
	border-radius: 4px;
}

.select-box2 {
	width: 95px;
	height: 24px;
	border: 1px solid #a2baaf;
	font-family: "josefin_sanslight";
	font-size: 0.8em;
	color: #fff;
	background-color: #393a3a;
	border-radius: 4px;
	margin-bottom: 2px;
}

.select-box2b {
	width: 98px;
	height: 24px;
	float: right;
	border: 1px solid #a2baaf;
	font-family: "josefin_sanslight";
	font-size: 0.8em;
	color: #fff;
	background-color: #393a3a;
	border-radius: 4px;
	margin-bottom: 2px;
}

.select-box3 {
	width: 110px;
	height: 26px;
	border: 1px solid #a2baaf;
	font-family: "josefin_sanslight";
	font-size: 0.9em;
	color: #fff;
	background-color: #393a3a;
	border-radius: 4px;
}

input[type="number"] {
	padding: 2px 10px;
	border: solid 1px #a2baaf;
	background-color: #393a3a;
	font-family: "josefin_sanslight";
	color: #fff;
	font-size: 1.0em;
	border-radius: 4px;
}

input[type="number"]:focus {
	background-color: #c1c1c1;
	color: black;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input::-webkit-calendar-picker-indicator {
	  display: none;
	}

input:focus,textarea:focus,select:focus {
	outline: none;
}

input[type="text"] {
	border: solid 1px #a2baaf;
	padding: 2px 12px;
	padding-bottom: 6px;
	font-family: "josefin_sanslight";
	font-size: 1.0em;
	border-radius: 4px;
	background-color: #393a3a;
	color: #ded0a6;
	margin-top:  10px;
	margin-right: 10px;
}

input[type="text"]:required:focus {
	background-color: #c1c1c1;
	color: black;
}

input[type="text"]:required:valid {
	border-color: #248c29;
	background-color: #393a3a;
	background-image: url('../_img/icons/ok.png');
	background-position: right 5px bottom 5px;
	background-repeat: no-repeat;
	color: #ded0a6;
}

input[type="text"]:invalid {
	border-color: red;
	background-color: #393a3a;
	color: #fff;
}

textarea {
	border: solid 1px #a2baaf;
	padding: 2px 12px;
	padding-bottom: 6px;
	font-family: "josefin_sanslight";
	font-size: 0.9em;
	border-radius: 4px;
	background-color: #393a3a;
	color: #ded0a6;
	margin-top:  10px;
	margin-right: 10px;
	resize: none;
	overflow: auto;
}

    input[type="email"], input[type="tel"], input[type="password"] {
	border: solid 1px #a2baaf;
	padding: 2px 12px;
	padding-bottom: 6px;
	font-family: "josefin_sanslight";
	font-size: 0.9em;
	border-radius: 4px;
	background-color: #393a3a;
	color: #ded0a6;
	margin-top:  10px;
	margin-right: 10px;
}

	input[type="email"]:required:focus {
	background-color: #c1c1c1;
	color: black;
}

	input[type="password"]:required:focus {
	background-color: #c1c1c1;
	color: black;
}

    input[type="email"]:required:valid {
	border-color: #248c29;
	background-color: #393a3a;
	background-image: url('/_img/icons/ok.png');
	background-position: right 5px bottom 5px;
	background-repeat: no-repeat;
	color: #ded0a6;
}

	input[type="email"]:invalid {
	border-color: red;
	background-color: #393a3a;
	color: #fff;
}

input[type="password"]:invalid {
	border-color: red;
	background-color: #393a3a;
	color: #fff;
}

 input[type="password"]:required:valid {
	border-color: #248c29;
	background-color: #393a3a;
	background-image: url('/_img/icons/ok.png');
	background-position: right 5px bottom 5px;
	background-repeat: no-repeat;
	color: #ded0a6;
}

input[type="tel"]:required:focus {
	background-color: #c1c1c1;
	color: black;
}

input[type="tel"]:required:valid {
	border-color: #248c29;
	background-color: #393a3a;
	background-image: url('../_img/icons/ok.png');
	background-position: right 5px bottom 5px;
	background-repeat: no-repeat;
	color: #ded0a6;
}

/* input [type="email"]:required:valid {
	border-color: #248c29;
	background-color: #393a3a;
	background-image: url('../_img/icons/ok.png');
	background-position: right 5px bottom 5px;
	background-repeat: no-repeat;
	color: #ded0a6;
}

*/

input#title_dt, input#sname_dt, input#fname_dt, input#firstline_dt, input#town_dt, input#postcode_dt, input#email_dt, input#contactnum_dt {
	border: 1px solid green; 
	background-image: url('../_img/icons/ok.png');
	background-position: right 5px bottom 5px; 
	background-repeat: no-repeat;
}


input[type="text"], input[type="tel"], input[type="email"]{
	border: 1px solid red;
}

input#secondline, input#tosecondline, input#tofirstline, input#topostcode, input#totown{
	border: 1px solid #a2baaf;
}

input#view_secondline, input#view_firstline, input#view_town, input#view_postcode, input#view_email, input#view_contactnum{
	border: 1px solid #a2baaf;
}

input#u_name {
	margin-bottom: 5px;
}

input#u_pass {
	margin-top: 4px;
}

.col-2 input {
	margin: auto 0;
}

input#u_login {
	margin-top:  10px;
}

input#view_ref {
	font-family: "source_sansprolight";
	font-size: 1em;
}


.textpos{
	padding-top: 4px;
	text-align: right;
}

.textpos_c{
	padding-top: 4px;
	text-align: center;
}

/* Input Form Button Styles ------------------------------- */

input.buttn1 {
	width: 160px;
	height: 30px;
	border: 1px solid grey;
	font-family: "josefin_sanslight";
	font-size: 0.9em;
	color: #000;
	background-color: #a2baaf;
	border-radius: 4px;
	cursor: pointer;
}

input.buttn2 {
	width: 160px;
	height: 30px;
	border: 1px solid #a2baaf;
	font-family: "josefin_sanslight";
	font-size: 0.9em;
	color: #000;
	background-color: #ded0a6;
	border-radius: 4px;
	cursor: pointer;
}

input.buttn2b {
	width: 100px;
	height: 30px;
	border: 1px solid #a2baaf;
	font-family: "josefin_sanslight";
	font-size: 0.9em;
	color: #000;
	background-color: #ded0a6;
	border-radius: 4px;
	cursor: pointer;
}
	
input.buttn3 {
	width: 160px;
	height: 30px;
	border: 1px solid #a2baaf;
	font-family: "josefin_sanslight";
	font-size: 0.9em;
	color: #fff;
	background-color: #248c29;
	border-radius: 4px;
	cursor: pointer;
}

input.buttn3b {
	width: 160px;
	height: 30px;
	border: 1px solid #a2baaf;
	font-family: "josefin_sanslight";
	font-size: 0.9em;
	color: #fff;
	background-color: #248c29;
	border-radius: 4px;
	cursor: pointer;
}

input.buttn_close {
	width: 190px;
	height: 32px;
	border: 1px solid #a2baaf;
	font-family: "josefin_sanslight";
	font-size: 0.7em;
	color: #fff;
	padding-bottom: 4px;
	background-color: #248c29;
	border-radius: 4px;
	cursor: pointer;
}

input.buttn4 {
	width: 192px;
	height: 30px;
	border: 1px solid #a2baaf;
	font-family: "josefin_sanslight";
	font-size: 0.9em;
	color: #fff;
	background-color: #248c29;
	border-radius: 4px;
	cursor: pointer;
}

input.buttn4b {
	width: 192px;
	height: 30px;
	border: 1px solid #a2baaf;
	font-family: "josefin_sanslight";
	font-size: 1em;
	color: #fff;
	background-color: #248c29;
	border-radius: 4px;
	cursor: pointer;
}

input.buttn5 {
	width: 160px;
	height: 30px;
	border: 1px solid grey;
	font-family: "josefin_sanslight";
	font-size: 0.9em;
	color: #000;
	background-color: rgba(103, 114, 118, 1);
	border-radius: 4px;
}

/* Checkout Grey Button */

button.buttn5 {
	width: 160px;
	height: 30px;
	border: 1px solid grey;
	font-family: "josefin_sanslight";
	font-size: 0.9em;
	color: #000;
	background-color: rgba(103, 114, 118, 1);
	border-radius: 4px;
}

button.buttn3 {
	width: 160px;
	height: 30px;
	border: 1px solid #a2baaf;
	font-family: "josefin_sanslight";
	font-size: 0.9em;
	color: #fff;
	background-color: #248c29;
	border-radius: 4px;
}

/* Checkbox Styling - Test Area ------------------------------------ */

/* Base for label styling */
  [type="checkbox"]:not(:checked),
  [type="checkbox"]:checked {
	position: absolute;
	left: 0;
	opacity: 0.01;
  }
  [type="checkbox"]:not(:checked) + label,
  [type="checkbox"]:checked + label {
	position: relative;
	padding-left: 2.3em;
	font-size: 1.05em;
	line-height: 1.7;
	cursor: pointer;
  }

  /* checkbox aspect */
  [type="checkbox"]:not(:checked) + label:before,
  [type="checkbox"]:checked + label:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 1.4em;
	height: 1.4em;
	border: 1px solid #ff6600;
	background: #393a3a;
	border-radius: .2em;
	/* box-shadow: inset 0 1px 3px rgba(0,0,0, .1), 0 0 0 rgba(203, 34, 237, .2);   */
	-webkit-transition: all .275s;
		transition: all .275s;
  }

  /* checked mark aspect */
  [type="checkbox"]:not(:checked) + label:after,
  [type="checkbox"]:checked + label:after {
	content: '✕';
	position: absolute;
	top: .525em;
	left: .18em;
	font-size: 1.375em;
	color: #ded0a6;
	line-height: 0;
	-webkit-transition: all .2s;
		transition: all .2s;
  }

  /* checked mark aspect changes */
  [type="checkbox"]:not(:checked) + label:after {
	opacity: 0;
	-webkit-transform: scale(0) rotate(45deg);
		transform: scale(0) rotate(45deg);
  }

  [type="checkbox"]:checked + label:after {
	opacity: 1;
	-webkit-transform: scale(1) rotate(0);
		transform: scale(1) rotate(0);
  }

  /* Disabled checkbox */
  [type="checkbox"]:disabled:not(:checked) + label:before,
  [type="checkbox"]:disabled:checked + label:before {
	box-shadow: none;
	border-color: #bbb;
	background-color: #e9e9e9;
  }

  [type="checkbox"]:disabled:checked + label:after {
	color: #777;
  }

  [type="checkbox"]:disabled + label {
	color: #aaa;
  }

/* Radio Button Styling -------------------------------------------- */

/* Customize the label (the container) */
.container-radio {
  display: inline;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 0.9em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container-radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 12;
  left: 0;
  height: 16px;
  width: 16px;
  background-color: #393a3a;
  border-radius: 50%;
  border: 1px solid #a2baaf;
}

/* On mouse-over, add a grey background color */
.container-radio:hover input ~ .checkmark {
  background-color: #a2baaf;
}

/* When the radio button is checked, add a green background */
.container-radio input:checked ~ .checkmark {
  background-color: #248c29;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container-radio input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container-radio .checkmark:after {
  top: 4px;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #393a3a;
}

/* Password Checker Styling -------------------------------------------- */

#password-strength-status {
	padding: 4px 10px;
	color: #ffffff;
	border-radius: 4px;
	margin-top: 8px;
}

#password-strength-status_2 {
	padding: 4px 10px;
	color: #ffffff;
	border-radius: 4px;
	margin: auto;
	margin-top: 8px;
	width: 60%;
}

.pwdmedium {
	background-color: #e4db11;
	border: #bbb418 1px solid;
	font-size: 0.8em;
}

.pwdweak {
	background-color: #ff6600;
	border: #aa4502 1px solid;
	font-size: 0.8em
}

.pwdstrong {
	background-color: #12cc1a;
	border: #0fa015 1px solid;
	font-size: 0.8em;
}


/* Basic Styles ---------------------------------------------------- */

hr.long {
	height: 1px;
	border-width: 0;
	color: #a2baaf;
	background-color: #a2baaf;
	width: 100%;
}

hr.long-margin {
	margin-top: 10px;
	height: 1px;
	border-width: 0;
	color: #a2baaf;
	background-color: #a2baaf;
	width: 100%;
}

hr.short {
	height: 1px;
	border-width: 0;
	color: #a2baaf;
	background-color: #a2baaf;
	width: 50%;
}

hr.vshort {
	height: 1px;
	border-width: 0;
	color: #ded0a6;
	background-color: #a2baaf;
	width: 50%;
}

hr.medium {
	height: 1px;
	border-width: 0;
	color: #a2baaf;
	background-color: #a2baaf;
	width: 60%;
}

hr.medium2 {
	height: 1px;
	border-width: 0;
	color: #a2baaf;
	background-color: #a2baaf;
	width: 90%;
}

.clear_b {
	clear: both;
}

/* Fonts - table text sizing etc.--------------------------------------------- */


h1, h2, h3, h4 {
	font-family: "josefin_sanslight";
}

h4.white {
	color: white;
}

h2.cent {
	text-align: center;
}

.headermain {
	color: #ded0a6;
}

.content-left-mid h4 {
	color: #ded0a6;
	font-size: 1.15em;
	font-weight: 400;
}

.labelinfo {
	color: #ded0a6;
}

h2.info_lge {
	color: #ded0a6;
	font-weight: 400;
}

.labelinfo2 {
	color: #248c29;
}

.smaller {
	color: #ded0a6;
	font-size: 0.9em;
}

.nocolor {
	color: white;
}

.headernotify {
	color: #d5af18;
}

.headersection {
	color: #a2baaf;
}

.errmsg {
	font-family: "ralewaylight";
	font-size: 0.75em;
	color: #d42020;
}

.errmsg_s {
	font-family: "ralewaylight";
	font-size: 0.7em;
	color: #d42020;
}

.new-errmsg {
	font-family: "ralewaylight";
	font-size: 0.8em;
	color: #ed7511;
}

.note-this {
	color: #ed7511;
	font-size: 1.2em;
	font-weight: 300;
}

.import {
	color: #ed7511;
}

.info {
	font-family: "ralewaylight";
	color: #d5af18;
}

.info_m {
	font-family: "ralewaymedium";
	color: #d5af18;
}

.newitem {
	color: #248c29;
}

.newitem_2 {
	color: #248c29;
	font-size: 1.2em;
	font-weight: 300;
}

.newhead {
	color: #248c29;
	font-weight: bold;
}

.price {
	color: white;
}

.price_R {
	color: white;
	text-align: right;
}

.old_price {
	color: #a2baaf;
}

.sect_info {
	color: #a2baaf; 
}

.sect_info2 {
	color: #a2baaf; 
	font-size: 1.1em;
}

.copy_info {
	color: #d5af18;
}

.foot_left {
	float: left;;
}
.foot_right {
	float: right;
}

.checklabel {
	padding-top: 3px;
}

.inlabel {
	font-size: 0.9em;
	line-height: 1.4em;
}

#content-top-pg1 p {
	color: #a2baaf;
	font-size: 0.9em;
}

#content-top-pg1 p::first-letter {
	font-weight: bold;
	font-size: 1.2em;
	color: #fff;
}

.content-right-large2 p::first-letter {
	font-weight: bold;
	font-size: 1.2em;
	color: #fff;
}

.content-right-large2 p {
	color: #a2baaf;
	font-size: 0.9em;
}

.content-right-large2 p.top {
	font-size: 0.6em;
	margin-top: 0px;
}

.content-right-large2 h2.l1 {
	font-family: "josefin_sanslight";
	font-size: 1.2em;
	font-weight: 400;
	margin-top: 5px;
	margin-bottom: 15px;
	
}

.content-right-large2 h2.l2 {
	font-family: "josefin_sanslight";
	font-size: 1.3em;
	font-weight: 300;
	margin-top: 25px;
	margin-bottom: 8px;
	
}

.content-right-large2 h2.l3 {
	font-family: "josefin_sanslight";
	font-size: 1.3em;
	font-weight: 300;
	margin-top: 5px;
	
}

.content-right-large2 h3 {
	font-family: "josefin_sanslight";
	color: #fff;
	font-size: 1.3em;
	font-weight: 400;
	margin-top: 5px;
	margin-bottom: 25px;
}

.content-right-large2 h4 {
	font-family: "josefin_sanslight";
	font-size: 1.1em;
	font-weight: 300;
	color: #ed7511;
	margin-top: 5px;
}

.centerdiv_child h4 {
	font-family: "josefin_sanslight";
	font-size: 1.1em;
	font-weight: 300;
	color: #ded0a6;
}

.centerdiv_child p {
	color: #a2baaf;
	font-size: 0.9em;
}

#content-top-pg1 h3 {
	margin-top: 0px;
}

#content-top-pg1 h4 {
/*	font-family: "ralewaylight"; */
	margin-bottom: -8px;
	margin-top: 14px;
}

#content-top-pg1 p {
	margin-bottom: 0px;
}

.content-left-small h3, .content-left-small-2 h3, .content-left-mid h3, .content-left-small-rvw-os2 h3{
	font-size: 1.6em;
	color: #ded0a6;
}

#flexwrapper-col .col-1b h3 {
	font-size: 1.6em;
	color: #ded0a6;
	margin-top: -5px;
}

#flexwrapper-col .col-1b h4 {
	margin-top: -5px;
}

#flexwrapper-col .col-1b p {
text-align: left;
padding-left: 15px;
}

#flexwrapper-col .col-3b p {
text-align: left;
padding-left: 15px;
}

#flexwrapper-col .col-3b h4 {
text-align: center;
}

.content-left-small-rvw h3 {
	font-size: 1.4em;
	color: #ded0a6;
}

.content-right-large-rvw h3 {
	color: #ded0a6;
	font-size: 1.4em;
}

.content-right-large, 
.content-right-large-rvw, p {
	font-size: 0.9em;
	color: #fff;
	line-height: 1.4em;
}

.content-left-small p, .content-left-small-rvw p, .content-left-small-2 p {
	font-size: 0.9em;
	color: #a2baaf;
	line-height: 1.4em;
}

.content-left-mid p {
	font-size: 0.92em;
	color: #a2baaf;
	line-height: 1.4em;
}

.content-left-small h4 , .content-left-small-rvw h4,.content-left-mid h4 {
	padding-bottom: 0px;
	margin-bottom: 0px;
}

.content-left-mid h4 {
	margin-top: 6px;
}

.content-left-small-2 h4 {
	padding-top: 10px;
}

.agreement {
	line-height: 1.4em;
	font-size: 0.9em;
	color: #ded0a6;
}

.c-t-l-lge {
	font-size: 1.2em;
}

.c-t-l-lge-w {
	font-size: 1.2em;
	color: white;
}

.c-t-l-m {
	font-size: 1.1em;
	color: white;
}

.c-t-l-text {
	color: #ffffff;
}

.vt-large {
	color: #ded0a6;
	text-align: right;
	font-size: 1.4em;
	padding: 3px;
	border: 1px solid green;
	}
	
.vt-large-c {
	color: #ed7511;
	}

.content-top-right-thanks p {
	line-height: 1.8em;
	color: #ded0a6;
}

.tdr {
	text-align: right;
}

.cent {
	text-align: middle;
}

.ref {
	font-family: "source_sansprolight";
}
p.left {
	text-align: left;
	padding-left: 5px;
	padding-right: 5px;
}

p.left_h {
	color: #ded0a6;
	font-size: 1em;
	text-align: left;
	padding-left: 5px;
}