body{
	font-family: 'Open Sans', sans-serif; 
	color: #332639;
	font-size: 11pt;
	line-height: 1.3em;	
	background: rgba(123,123,176,1);
background: -moz-linear-gradient(top, rgba(123,123,176,1) 0%, rgba(143,143,229,1) 31%, rgba(153,153,255,1) 46%, rgba(206,206,240,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(123,123,176,1)), color-stop(31%, rgba(143,143,229,1)), color-stop(46%, rgba(153,153,255,1)), color-stop(100%, rgba(206,206,240,1)));
background: -webkit-linear-gradient(top, rgba(123,123,176,1) 0%, rgba(143,143,229,1) 31%, rgba(153,153,255,1) 46%, rgba(206,206,240,1) 100%);
background: -o-linear-gradient(top, rgba(123,123,176,1) 0%, rgba(143,143,229,1) 31%, rgba(153,153,255,1) 46%, rgba(206,206,240,1) 100%);
background: -ms-linear-gradient(top, rgba(123,123,176,1) 0%, rgba(143,143,229,1) 31%, rgba(153,153,255,1) 46%, rgba(206,206,240,1) 100%);
background: linear-gradient(to bottom, rgba(123,123,176,1) 0%, rgba(143,143,229,1) 31%, rgba(153,153,255,1) 46%, rgba(206,206,240,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7b7bb0', endColorstr='#cecef0', GradientType=0 );
	margin:0px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */
	text-align:center; /* Hack for IE5/Win */
	}
#main {
	width:100%;
	top:0px;
	margin:0px auto; /* Right and left margin widths set to "auto" */
	text-align:left; /* Counteract to IE5/Win Hack */
	padding:0px;
		}
#masthead, #masthead1 {
	position:relative;
	top:0px;
	width:100%;
	height:150px;
	background-image:url(tpo1.JPG);
	background-position:right;
	background-repeat:no-repeat;
	background-color:#FFFFFF;
	
}	
  #masthead2, #masthead3{
	position:relative;
	top:0px;
	width:100%;
	height:150px;
	background-image:url(tpo2.JPG);
	background-position:right;
	background-repeat:no-repeat;
	background-color:#FFFFFF;
	
} 
#masthead3{
	 
	background-image:url(tpo3.JPG);
	 
}	
#mastleft{
	position:absolute;
	top:10px;
	left:10px;
	width:202px;
	height:124px;
	float:left;
	background-color:#FFFFFF;}
#mastright{
	position:relative;
	top:0px;
	width:580px;
	right:0px;
	height:150px;
	float:right;
	padding:0px;
	text-align:left;
}

.topwords {
	margin-top: 20px;
	width: 227px;
	height: 74px;
	font-family:"Times New Roman", serif;
	color:#7892D6;
	font-weight:400;
	font-size:larger;
	float:left;
	}
.topnav {
font-family:Arial, Helvetica, sans-serif;
text-align:center;	
		padding:3px;
	float:right;
	font-weight:500;
	background-color:#FFFFFF;
	}
	
.merit {
color:#4E70AF;
font-size:110%;
}
.menubar  {
position:relative;
text-align:center;
top:0px;
height:24px;
width: 100%;
padding:0px;
margin:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:80%;
font-weight:bold;
background-image:url(../menubg.gif);		
background-color:#f7dd78;
}
 .clear{clear: both; height: 0;}
#leftcol {float: left; width: 20%;}
#rightcol {float: right; width: 79%;}
#centercol{width: 96%; max-width: 70rem; margin: 0 auto;}
/*main menu*/
#mainmenu {  width:100%; padding:0;  margin:0; color: #FFFFFF; height: auto; min-height:28px; overflow: hidden; background-color: #F7F7FF; }
 
#mainmenu a {  padding: 10px 15px; font-size: 0.9em; line-height: 2.1em;  color: #FFFFFF;	}
#mainmenu .YC a { background-color: #66b550;}
#subnav a{ color: #FFFFFF;  padding: 5px 4px; font-size: 1em;}
#mainmenu ul { width:100%; list-style:none; margin: 0 auto; padding:0; }
#mainmenu li{ float:left;  font-weight: BOLD; overflow: hidden; 
     margin: 3px;
    display: inline block;
    -webkit-box-shadow: 0 0 3px 0 #999;
    -moz-box-shadow: 0 0 3px 0 #999;
    box-shadow: 0 0 3px 0 #999;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
	}
  #mainmenu li:last-child , #mainmenu li:first-child { border-left: none; }
  #mainmenu li:hover { background: #e6e1db;}
  #mainmenu li a:hover { color: #bd1f3c;	background: #ffffff;
   } 
   
.baron {
height:24px;
margin:0px;
padding: 4px;
background-image:url(../menuon.gif);
		color:#FF0000;}
a.bar, a.bar:visited{
	color:#000000;
background: #9999ff; 
}
a.bar:hover{
		color:#FF5555;
		background-image:url(../menuon.gif);
		text-decoration:none;
}
#sideNav{
	width:98%;
	margin:0;
	padding: 0px 1%;
	background-color: #eeeeee;
	border-bottom: 1px solid #cccccc;
}

#content{
	padding: 0px 10px 0px 0px;
	margin:0px 0px auto;
	text-align: center;
}

#pagecontent{
	position:relative;
	padding: 0px 10px 0px 0px;
	margin:0px auto;
	
	text-align:center; 		
}
.advert{
	padding: 5px;
	font-size:0.9em;
	color: #4E70AF;	
	}
.advert h4{
	font-size: 1.5em;
	color: #4E70AF;	
	margin: 0;
    padding: 0;
	}
	
#pageName{
	background-color: #eeeeee;
	padding: 12px 3%;
	margin: 0px;
	width: 93%;
	text-align: left;
	
}
#pageName h2{
	padding: 8px;
	color:#3D3A49;
	}
#pageName h1{
	text-align: center;
	color:#3D3A49;
	}
.box
{
width:20%;
height:auto;
padding:8px;
border-bottom:1px solid #999999;
vertical-align:top;
left:0px;
position:relative;
float:left;
}	
.product{
 font: 90% Arial,sans-serif;
 color:#4E70AF;
 text-align:left;
 margin: 0px;
 padding:0px 10px 0px 0px;
 font-weight:600;
}
.other, .otherviolet, .othergreen, .story {
	width: 21%; float: left; margin: 5px 1% 5px 0;
	padding: 8px 1.5%;
	font-size:smaller;
	vertical-align:top;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
	background: #FFF;
}

#homePage .story {
	 height: 540px; overflow: hidden; 	text-align:left;
	}
.other, .otherviolet, .othergreen {
	font-size:1.5em;
	overflow:hidden;
	text-align:centre;
	background: #FFF;
	height: 100px;
	
	}
.other .style1, .otherviolet .style1, .othergreen .style1 {
	font-size:0.7em; 
	}
	
	
.story:nth-of-type(4n+1) {
	clear:both;
	}
.story img {max-width: 94%; margin: 4px auto; }	
.story75 {
	width: 71%; float: left; margin: 5px 1% 5px 0;
	padding: 8px 1.5%;
	font-size:smaller;
	vertical-align:top;
	text-align:left;
	background: #FFF;
	}	
a:link, a:visited{
	color:#4E70AF;
	text-decoration: none;
}

a:hover{
color:#6666FF;
	text-decoration: underline;
}

h1{
  color:#211F50;
 padding: 0px;
}

h2{
  color:#000033;
 margin: 0px;
 padding: 0px;
}

h3{
text-align:center;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}

h4{
 color: #333333;
 margin: 0;
 padding: 10px;
 }

h5{
  color:#4E70AF;
 margin: 0px;
 padding: 10px 0;
 font-size:1.2em;
}
.style2 {font-size: x-small;
text-align:center;
color:#000000;}
.price {
height:100%;
text-align:center;
vertical-align: top;
background-color:#FFFFFF;
background-image:url(../medallion.JPG);
background-position:bottom;
background-repeat:no-repeat;
}
.breadcrumb {font-size: 0.8em; float: left; font-weight: bold; margin: 5px;}

#globalNav{
position: relative;
font-size:smaller;
width: 100%;
height: 32px;
color: #cccccc;
padding: 0px;
margin: 0px;
background-image:  url("../glbnav_background.gif");
}

#globalNav img{
	margin-bottom: -4px;
 
}
.feature{
	vertical-align:top;
	overflow: hidden;
	background-color:#FFFFFF;	
	margin: 0 auto;
}
.feature > div {
	padding: 20px 5%;
	}

.feature h3{
	font: bold 175% Arial,sans-serif;
	color: #000000;
	padding: 30px 0px 5px 0px;
}

.feature img{
	float: left;
	padding: 0px 10px 0px 0px;
	width: 100%;
	max-width: 450px;
}
.feature  table tr td {
    padding: 5px;
    border-bottom: 1px solid #cdcdcd;
}
.form {max-width: 700px;}
.info { float: right; font-size: 0.8em; color: #adadad; }
.basket
{ width: 100%;
background:#FFF;
}

.story2 {
	padding: 10px 0px 0px 10px;
	font-size:medium;
	background-color:#FFFFFF;
	border-bottom:1px solid #ccd2d2;
	vertical-align:top;
	}
.form {
	padding: 5px 0px 0px 5px;
	font-size:small;
	background-color:#FEFEFF;
	vertical-align:top;
	}
.style1 { text-align:center;}
.footform {
	text-align: left;
	padding: 5px;
	background-color:#FEFEFF;
	vertical-align:top;
	width:600px;
	}
.button{
	padding: 5px 0px 0px 5px;
	font-weight:400;
	background-color:#FEFEFF;
	vertical-align:top;
	}
.story h3{
	font: bold 110% Arial,sans-serif;
	color: #ccd2d2;
}

.story p {
	padding: 0px 0px 10px 0px;
}

.story a.capsule{
	font: bold 1em Arial,sans-serif;
	color: #005FA9;
	display:block;
	padding-bottom: 5px;
}

.story a.capsule:hover{
	text-decoration: underline;
}

td.storyLeft{
	padding-right: 12px;
}



#siteInfo{
	clear: both;
	border-top: 1px solid #cccccc;
	font-size: small;
	color: #cccccc;
	padding: 10px 10px 10px 10px;
	margin-top: 0px;
	background-image:url(../foot.JPG);
}

#siteInfo img{
	padding: 0px 0px 0px 0px;
	vertical-align: middle;
}

#sectionLinks{
	margin: 0px;
	padding: 0px;
	font-size:smaller;
}

#sectionLinks h3{
	padding: 10px 0px 2px 10px;
	border-bottom: 1px solid #cccccc;
	border-right: 1px solid #cccccc;
}

#sectionLinks a:link, #sectionLinks a:visited {
	display: block;
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid #cccccc;
	background-image:  url("../bg_nav.jpg");
	font-weight: bold;
	padding: 3px 0px 3px 10px;
	color:#30304E;
}

#sectionLinks a:hover{
	border-top: 1px solid #cccccc;
	background-color: #DDEEFF;
	background-image: none;
	font-weight: bold;
	text-decoration: none;
}
#footcontainer {clear: both; width: 100%; background:rgba(123,123,176,1); }
.warn {
	background-color:#FF3C00; font-weight: bold; color: #FFFFFF; padding: 5px;position:relative;left:-10px;
}
.int {text-align: right;}

.tablebasic {text-align:center;
vertical-align:top;}

.halfforminput {
    float: left;
    display: block;
    font-family: 'Open Sans', sans-serif;
    width: 46%;
    max-width: 238px;
    margin: 8px 2% 8px 0;
    border: 1px solid #FFFFFF;
    overflow: hidden;
}

.halfforminput  label, .forminput label {
    display: block;
    width: 100%;
    max-width: 500px;
    padding: 0px 5px 0px 0px;
    vertical-align: top;
    font-size: small;
	    margin-bottom: 5px;
    font-weight: bold; text-align: left;
}
.forminput input, .forminput textarea, .forminput select,.halfforminput input, .halfforminput textarea, .halfforminput select,.fifthforminput input, .fifthforminput textarea, .fifthforminput select,.quarterforminput input, .quarterforminput textarea, .quarterforminput select, .threequaterforminput input, .threequaterforminputRight input {
	display: block;
	float: left;
	padding:8px 6px;
	background-color: #e0e0df;
	font-family: 'Open Sans', sans-serif;
	width: 100%;
	max-width: 500px;
	color: #222222;
	margin:0;
	}
.threequaterforminput input[type=checkbox] {
	float: right;
	padding:8px 6px;
	background-color: #e0e0df;
	width: 30px;
	}
.formhide {display: none;}
.shopparagraph .halfforminput input, .shopparagraph .threequaterforminput  input,   .threequaterforminputRight  input { background-color: #FFFFFF;}		
.forminput input[type=submit]{
	display: block;
	background-color: #9999ff;
	font-family: 'Open Sans', sans-serif;
	width: auto;
	margin:5px;
	color: #FFFFFF;
	font-weight: bold;
	float: right;
	border: 0;
	height:auto;
	text-align:center; 
	font-size:1.2em;
	padding:8px 30px ;
	-webkit-box-shadow: 0 0 3px 0 #999; 
	-moz-box-shadow: 0 0 3px 0 #999; 
	box-shadow: 0 0 3px 0 #999;
	}
.forminput input[type=submit]:hover {
	background-color:#e0e0df; 
	color: #e9540d;
	-webkit-box-shadow: 0 0 1px 0 #999; 
	-moz-box-shadow: 0 0 1px 0 #999; 
	box-shadow: 0 0 1px 0 #999;
	}
	
.halfforminput input, .threequaterforminputRight input,  .threequaterforminput input,  .forminput input, .forminput textarea {
	border: 1px solid #cccccc;
	}
.forminput select {
	border:0px;
	}

.submitbutton, .leftbutton {
				background-color: #e9540d;
				color: #FFFFFF !important;
				font-weight: bold;
				float: right;
				border: 0;
				height:auto;
				text-align:center; 
				font-size:1.2em;
				padding:8px 35px !important;
				border: 0px;
				width:auto;
				margin: 2px 3px;
				-webkit-box-shadow: 0 0 3px 0 #999; 
				-moz-box-shadow: 0 0 3px 0 #999; 
				box-shadow: 0 0 3px 0 #999;
		}
		
.submitbutton:hover {
				background-color:#e0e0df; 
				color: #e9540d !important;
}				


.forminput label{
	display: block;
	width: 100%;
	max-width: 500px;
	padding:0px 5px 0px 0px;
	vertical-align:top;
	font-size:small;
	}

.submitinput label{
	display: block;
	width: 100px;
	text-align:left;
	padding:15px 10px 0px 0px;
	float: left;
		vertical-align:top;
		font-size:small;
	color: #948076;	
	}

.compinput, .forminput{ margin:0px 0px 10px 0px;
			clear:left;
			height:auto; overflow: hidden;
		}
.formspace {
			clear: both;
			height:10px;
			width:100%;			
			}	
.choiceinput {
	 margin:0px 0px 10px 0px;
	 			clear:left;
			height:auto;
			max-width: 450px; overflow: hidden;
					}	
.choiceinput input, .choiceinput select {
	float: left;
	width: 3%; padding:0px 5px; margin: 5px;
	}
.choiceinput label{
	display: block;
	width: 92%;
	text-align:left;
	padding:0px 5px;
	float: left;
	}
.multiformGroup .quarterforminput label, .multiformGroup .fifthforminput label {
     color: #888888; 
    font-weight: bold;
	font-size: 0.8em;
} 
.product-table td {vertical-align:top;}
.buybutton {
    display: block;
    background-color: #eeeeFF;
    font-family: 'Open Sans', sans-serif;
    width: auto;
    margin: 5px;
    color: #FFFFFF;
    font-weight: bold;
    float: right;
    border: 0;
    height: auto;
    text-align: center;
    font-size: 0.9em;
    padding: 5px 5px 5px 33px;
	background-image: url(../buy.gif);
	background-size: 30px 20px;
	background-position: left center; 
	background-repeat: no-repeat;
    -webkit-box-shadow: 0 0 3px 0 #999;
    -moz-box-shadow: 0 0 3px 0 #999;
    box-shadow: 0 0 3px 0 #999;
}
.warn {
	background-color:#FF3C00; font-weight: bold; color: #FFFFFF; padding: 5px;position:relative;left:-10px;
}
.int {text-align: right;}

.tablebasic {text-align:center;
vertical-align:top;}
.formContainer{max-width: 500px; margin:0 auto; clear: both;}
.halfforminput {
    float: left;
    width: 48%;
    max-width: 251px;
    margin:0 2% 0 0;
    border: 1px solid #FFFFFF;
    overflow: hidden;
	padding:.5em 0 !important;
	box-sizing: border-box;
}

.halfforminput  label, .forminput label {
    display: block;
    width: 100%;
    max-width: 500px;
    padding: 0px 5px 0px 0px;
    vertical-align: top;
    font-size: small;
	    margin-bottom: 5px;
    font-weight: bold; text-align: left;
}
.service_Atttribute  {
  clear: both; border-bottom: 1px solid #FdFdFd; text-align: left;
   }
.service_Atttribute label {
   float: left;
    width: 30%;
    max-width: 100px;
   }
.forminput input, .forminput textarea, .forminput select,.halfforminput input, .halfforminput textarea, .halfforminput select,.fifthforminput input, .fifthforminput textarea, .fifthforminput select,.quarterforminput input, .quarterforminput textarea, .quarterforminput select, .threequaterforminput input, .threequaterforminputRight input {
	display: block;
	float: left;
	padding:8px 6px;
	background-color: #e0e0df;
	font-family: 'Open Sans', sans-serif;
	width: 100%;
	max-width: 500px;
	color: #222222;
	margin:0; box-sizing: border-box;
	}
.threequaterforminput input[type=checkbox] {
	float: right;
	padding:8px 6px;
	background-color: #e0e0df;
	width: 30px;
	}
.formhide {display: none;}

.multiformGroup .quarterforminput label, .multiformGroup .fifthforminput label {
     color: #888888; 
    font-weight: bold;
	font-size: 0.8em;
} 
.extrasBox,.productBox,.productBoxF,.totalBox{overflow:hidden;text-align:left;float:left;width:98%;height:auto;margin:8px 2% 8px 0;border-bottom:1px solid #eeeefc}
.totalBox{ width:74%; margin-left:26%; }
.product-table td {vertical-align:top;}
.product-table .price2, .product-table .price3, .product-table .price {background:#FFF;border:2px solid rgba(123,123,176,1);border-bottom:0;border-right:0;}
.product-table .price,.product-table .price3{border-top:0;}
.totalBox label,.productBox label{float:left;width:48%;font-size:1em;margin:3px 0 0 10px;text-align:left}
.productBoxF label{float:left;width:30%;font-size:1em;margin:3px 0 0 10px;text-align:left}
.productBoxF label h4{margin:0 0 10px;text-align:left}
.tableCol .productBoxF label{width:60%}
.extrasBox label{float:left;width:290px;font-size:.8em;margin:3px 0 0 10px;text-align:left}
.moreInfo h4{padding:5px}
.breadcrumb {font-size: 0.8em; float: left; font-weight: bold; margin: 5px;}

.moreInfo { display: none; width: 100%; clear: both; margin-top: 2rem;}
.fixtureItemW{width:25%;float:left;display:inline-block;margin:3px 1%}
.fixtureItem{width:20%;float:left;display:inline-block;text-align:right;margin:3px 1%}
.fixtureItemL{width:10%;float:left;display:inline-block;text-align:left;margin:3px 1%}
.story2 input[type="number"]{
	
	width: 40px;
	padding: 5px;
}
.feature .story2 img {
	padding: 0px; 
    width: 30px; 
}
.small {font-size: 0.8em;}
.flexdiv {display: flex; flex-wrap:wrap}
.flex2 > div { width: 50%;}
.service_Atttribute {  padding: 7px 10px;}
@media screen and (max-width: 1100px){
  
 .story {
    width: 43%; overflow: hidden;
 }
 .story img { float: left; margin: 0 20px 20px 0;}
 .story75 {
    width: 98%;   float: none;
    margin: 5px 0;
    padding: 10px 1%;
 }
}
@media screen and (max-width: 810px){
 #rightcol  {
	width: 100%; float: none;
 }
#leftcol {
	display: none;
 }
 #sideNav img {width: 100px; float: left; margin: 0 20px 20px 0; }
 .story {
    width: 98%;
    float: none;
    margin: 5px 0;
    padding: 10px 1%;
    
}
#homePage .story {
	 height:auto;
	}
	.other, .otherviolet, .othergreen  {
	width: 46%; margin: 5px 0.5%; height: 100px; -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
	}
  
}
@media screen and (max-width:780px){
	#mastright {
    display: none;
	}
	#mainmenu li {
		border: none; margin: 3px; display: inline block;
		 -webkit-box-shadow: 0 0 3px 0 #999;
		-moz-box-shadow: 0 0 3px 0 #999;
		box-shadow: 0 0 3px 0 #999;
		-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	}
	#mainmenu a {
		font-size: 0.8em;
		line-height: 1.6em;
	}
	.feature {
		width: 90%;
		padding: 1em 5%;
	}

}
@media screen and (max-width: 420px){
	#mastleft {
     
    width: 40%;
    height: auto;
    
}
#mastleft img {
     
    width: 100%;
    height: auto;
    
}

	#masthead, #masthead2, #masthead3 {
     
    width: 100%;
    height: 110px;
    background-size: 130px auto;
	background-position: right bottom;
}
.other, .otherviolet, .othergreen  {
	width: 100%; float: none; margin: 5px auto;
	}
  .story img {
    float: none;
    margin: 10px auto;
	}

}

