/****** FILE: themes/mytheme/css/reset.css *****/
/* CSS Document */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote { 
	margin:0;
	padding:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
/*
Chris Bolt, commented out ol so that the type attribute can be used in content
ol,*/
ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}
br {font-size: 0}

/****** FILE: themes/mytheme/css/base.css *****/
/* CSS Document */

/* Chris Bolt - added a default line-height */
body, body * {
	line-height: 1.4em;	
}
/* inline styles should inherit their line height */
span, cufon, strong, em, a, b, i {
	line-height: inherit;	
}
/* input elements should not have such a high line-height */
input, select, textarea {
	line-height: normal;	
}
body {
	-webkit-text-size-adjust: none;	
}
/* End CHris Bolt

/* base.css, part of YUI's CSS Foundation */
h1 {
	/*18px via YUI Fonts CSS foundation*/
	font-size:138.5%;  
}
h2 {
	/*16px via YUI Fonts CSS foundation*/
	font-size:123.1%; 
}
h3 {
	/*14px via YUI Fonts CSS foundation*/
	font-size:108%;  
}
h1,h2,h3 {
	/* top & bottom margin based on font size */
	margin:1em 0;
}
h1,h2,h3,h4,h5,h6,strong {
	/*bringing boldness back to headers and the strong element*/
	font-weight:bold; 
	font-style: inherit;
}
abbr,acronym {
	/*indicating to users that more info is available */
	border-bottom:1px dotted #000;
	cursor:help;
} 
em {
	/*bringing italics back to the em element*/
	font-style:italic;
	font-weight: inherit;
}
blockquote,ul,ol,dl {
	/*giving blockquotes and lists room to breath*/
	margin:1em;
}
ol,ul,dl {
	/*bringing lists on to the page with breathing room */
	margin-left:2em;
}
ol {
	/*giving OL's LIs generated numbers*/
	/*list-style: decimal outside;	*/
}
ul {
	/*giving UL's LIs generated disc markers*/
	list-style: disc outside;
	margin-left: 1.4em;
}
dl dd {
	/*giving UL's LIs generated numbers*/
	margin-left:1em;
}
th,td {
	/*borders and padding to make the table readable*/
	/*border:1px solid #000;
	padding:.5em;*/
}
th {
	/*distinguishing table headers from data cells*/
	font-weight:bold;
	text-align:center;
}
caption {
	/*coordinated marking to match cell's padding*/
	margin-bottom:.5em;
	/*centered so it doesn't blend in to other content*/
	text-align:center;
}
p,fieldset,table {
	/*so things don't run into each other*/
	margin-bottom:1em;
}

/* Chris Bolt, added fix for image positioning */
img, iframe {
	vertical-align: bottom;
}

/* Chris Bolt, added fix for outlines */
a:focus, button:focus { 
    outline: none; 
}

/* add HTML 5 defaults */
video {
	background-color: #000;	
}
/*textarea,
input,
select {
  margin: 0;
  vertical-align: bottom;
}*/

/* Chris Bolt, br tags are funny in some browsers ?? */
br {
	font-size: 0;
	line-height: 0;	
}

/* Chris Bolt add support for new HTML 5 elements */
main {display:block;}


/* Begin base silverstripe specific stuff
------------------------------------------------*/
.tableWrapper {
	max-width: 100%;
	overflow: auto;	
	-webkit-overflow-scrolling: touch;
	margin-bottom: 1em;
}
.tableWrapper table {
	margin-bottom: 0;	
}
ul.contentList {
	list-style: none;
	margin: 0;
	padding: 0;	
}
.ErrorPage h1.seo {
	display: block;	
}
.urlSecurity h1.seo {
	display: block;	
}
.clear {
	clear: both;	
}
.seo {
	display: none;	
}
.hidden {
	visibility: hidden;	
}
/* content list */
ul.contentList,
.ss-uploadfield ul,
.WidgetHolder ul,
form .field ul {
	list-style: none;
	margin: 0;
	padding: 0;	
}
ul.contentList > li,
.ss-uploadfield ul li,
.WidgetHolder ul li,
form .field ul li {
	list-style: none;
	padding-left: 0;
	width: auto;
}
ul.contentList > li:before,
.ss-uploadfield ul li:before,
.WidgetHolder ul li:before,
form .field ul li:before { 
	display: none;
}

/****** FILE: bolttools/thirdparty/jquery-focuspoint/css/focuspoint.css *****/
/* !FOCUSED IMAGES */
/*-----------------------------------------*/
.focuspoint {
	position: relative; /*Any position but static should work*/
	overflow: hidden;
}
.focuspoint img {
	position: absolute;
	left: 0;
	top: 0;
	margin: 0;
	display: block;
	/* fill and maintain aspect ratio */
	width: auto; height: auto;
	min-width: 100%; min-height: 100%;
	max-height: none; max-width: none;
}

/****** FILE: themes/mytheme/css/layout.css *****/
/* CSS Document */
body {
	margin: 0;
	padding: 0;
	
	font-family: Aileron, Arial, Helvetica, sans-serif;
	font-weight: 300;
	color: #666666;
	font-size: 16px;
	/* SET LINE HEIGHT IN base.css */
	
	background: #fff;
}

/* Set project line heights in base.css */

/* msc moved to base.css */

/* Wrapper 
-------------------------------------------- */


/* Header 
-------------------------------------------- */
#Header {
	background-color: #000;
	/*background: url(../images/bg-header-home.jpg) center no-repeat;
	background-size: cover;	*/
	color: #fff;
	overflow: hidden;
}
#Header a {
	color: inherit;
	text-decoration: none;	
}
#HeaderInner {
	position: relative;	
	margin: 0 auto;
}
#Logo {
	position: absolute;	
}
#Logo a {
	display: block;
	text-indent: -1000px;
	overflow: hidden;	
	background: url(../images/logo.png) 0 0 no-repeat;
	background-size: 100% auto;
	padding-top: 25%;
	height: 0;
}
.retina #Logo a {
	background-image: url(../images/logo-retina.png);	
}
#Tagline {
	position: relative;
	margin: 0 auto;
	background: url(../images/tagline.png) center 0 no-repeat;
	background-size: 100% auto;
	text-align: center;
}
.retina #Tagline {
	background-image: url(../images/tagline-retina.png);
}
#Tagline a {
	display: inline-block;
	border: 1px solid #fff;
	font-weight: bold;
	text-transform: uppercase;
	vertical-align: bottom;
}
#Tagline a:hover {
	background-color: #9e218a;
	border-color: #9e218a;	
}

/* Navigation 
-------------------------------------------- */
#Nav {
	Position: absolute;
	top:0;
	right: 0;
	text-align: center;	
}
#Nav h2 {
	position: relative;
	z-index: 2;
	margin: 0;
	padding: 36px 0 0 0;	
	background: url(../images/menu-bg.png) 0 100% no-repeat;
	cursor: pointer;
}
.retina #Nav h2 {
	background-image: url(../images/menu-bg-retina.png);	
}
#Nav h2:before {
	content: "";
	display: block;
	background: url(../images/menu-burger.png) 0 100% no-repeat;
	background-size: 100% auto;
}
.retina #Nav h2:before {
	background-image: url(../images/menu-burger-retina.png);	
}
#Nav ul {
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0;
}
#Nav ul:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/menu-bg.png) 100% 100% no-repeat;
	mix-blend-mode: multiply;
}
.retina #Nav ul:before {
	background-image: url(../images/menu-bg-retina.png);	
}
#Nav ul li {
	position: relative;
	z-index: 1;
	padding: 3px 10px;	
}
#Nav ul li a:hover {
	font-weight: bold;	
}
#Nav ul li a.current, #Nav ul li a.section {
	color: #9e218a;
	font-weight: bold;	
}
#Nav ul li.admin {
	margin: 0 auto;
	border-top: 1px solid #fff;	
}

/* Footer 
-------------------------------------------- */
#Footer {
	background: #9e218a;
	color: #fff;
	font-size: 14px;
	clear: both;	
}
#FooterInner {
	box-sizing: border-box;	
	margin: 0 auto;	
}
#Footer a {
	color: inherit;
	text-decoration: none;	
}
#Footer a:hover {
	text-decoration: underline;	
}
#Footer h2 {
	font-size: inherit;
	padding: 0;
}
#Footer h2:after {
	content: "";
	display: block;
	border-bottom: 1px solid #fff; 	
}
#FooterTop {
	border-bottom: 1px solid #fff;
}
#FooterLogo a {
	display: block;
	text-indent: -1000px;
	overflow: hidden;	
	background: url(../images/logo-footer.png) 0 0 no-repeat;
	background-size: 100% auto;
	padding-top: 25%;
	height: 0;
}
.retina #FooterLogo a {
	background-image: url(../images/logo-footer-retina.png);	
}
#FooterNav {
	margin-top: 0;
	margin-left: 0;
	padding: 0;
	list-style: none;	
}
#FooterNav li.admin {
	font-weight: bold;	
}
#Intuit a:hover {
	text-decoration: none;	
}

/* Content  / Layout
-------------------------------------------- */
.contentSection {
	position: relative;	
}
.contentSection .pageWidth {
	margin: 0 auto;
}
.typography .contentSection .pageWidth p:last-child,
.typography .contentSection .pageWidth .twoColumns:last-child {
	margin-bottom: 0;
}

.roadsideAssist {
	text-align: center;	
	position: relative;
}
.roadsideAssist:before {
	content: "";
	display: block;
	border-top: 2px solid #4d4d4d;
}
.roadsideAssist:after {
	content: "";
	display: block;
	background: url(../images/clock.png) center no-repeat;
	background-size: auto 100%;
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
}
.retina .roadsideAssist:after {
	background-image: url(../images/clock-retina.png);
}
.roadsideAssist a {
	font-weight: bold;	
}

/* misc */
.bgGrey {
	background-color: #e0e0e0;
}
.txtPurple {
	color: #9e218a;
}

/* Screen size specific stuff */
/* Desktop */
@media all and (min-width: 1000px) {
	#Header {
		height: 756px;	
	}
	#HeaderInner {
		max-width: 1058px;
	}
	#Logo {
		top: 36px;
		left: 36px;	
	}
	#Logo a {
		width: 288px;
	}
	#CallUs {
		font-weight: bold;
		font-size: 20px;
		position: absolute;
		top: 85px;
		right: 196px;
	}
	#Tagline {
		top: 248px;
		width: 732px;
		padding-top: 360px;	
	}
	#Tagline a {
		line-height: 42px;	
		font-size: 20px;
		padding: 0 14px;	
		margin: 0 9px;
	}
	/* Navigation */
	#Nav h2 {
		width: 172px;
		height: 148px;
		background-size: 462px auto;
		font-size: 20px;
	}
	#Nav h2:before {
		width: 36px;
		height: 34px;
		margin: 0 auto 13px auto;
	}
	#Nav ul {
		right: -58px;
		width: 288px;
		padding-bottom: 90px;
		padding-top: 218px;
		font-size: 20px;
	}
	#Nav ul:before {
		background-size: 462px auto;
	}
	#Nav ul li.admin {
		width: 184px;
		margin-top: 16px;
		padding: 19px 10px 0 10px;	
	}
	/* Footer */
	#Footer {
		font-size: 14px;	
		padding-top: 41px;
	}
	#FooterInner {
		padding: 0 30px 30px 30px;
		max-width: 1200px;
	}
	#FooterInner:after {
		content: "";
		display: block;
		clear: both;	
	}
	#Footer h2 {
		margin: 22px 0 22px 0;	
	}
	#Footer h2:after {
		height: 24px;
		width: 75px;
	}
	#Footer .large {
		font-size: 25px;
	}
	#FooterTop {
		padding-bottom: 26px;	
	}
	#FooterTop:after {
		content: "";
		display: block;
		clear: both;	
	}
	#FooterLogo {
		float: left;	
	}
	#FooterLogo a {
		width: 214px;	
	}
	#FooterCopyright {
		float: right;
		font-size: 12px;
		padding-top: 40px;
	}
	.footerItem {
		display: inline-block;
		vertical-align: top;
	}
	.footerItem:nth-last-child(n+2) {
		padding-right: 93px;
	}
	#FooterNav li.admin {
		margin-top: 1em;	
	}
	#Intuit {
		float: right;	
	}
	#Intuit a:after {
		content: '';
		display: inline-block;
		vertical-align: bottom;
		width: 33px;
		height: 30px;
		margin-left: 8px;
		background: url(../images/intuit.png) 0 0 no-repeat;
		background-size: 100% auto;	
	}
	.retina #Intuit a:after {
		background-image: url(../images/intuit-retina.png);
	}
	
	/* Content */
	.contentSection {
		/*margin: 0 30px;*/
		margin: 0 auto;
		max-width: 1140px;	
	}
	.contentSection .pageWidth {
		max-width: 752px;
		/*padding: 0 20px;*/
		margin-top: 50px;
		margin-bottom: 55px;
	}
	.roadsideAssist {
		font-size: 25px;	
		padding: 58px 30px 50px 30px;
		max-width: 1140px;
		margin: 0 auto;
	}
	.roadsideAssist:before {
		height: 93px;	
	}
	.roadsideAssist:after {
		height: 133px;
	}
	
	/* misc */
	.bgGrey .contentSection .pageWidth {
		padding-top: 50px;
		padding-bottom: 55px;	
	}
}
/* step to fix contetn section width */
@media all and (min-width: 1000px) and (max-width: 1200px) {
	.contentSection {
		margin: 0 30px;
	}
}

/* step to fix footer */
@media all and (min-width: 1000px) and (max-width: 1060px) {
	.footerItem:nth-last-child(n+2) {
		padding-right: 73px;
	}
}
/* Tablet, large phone */
@media all and (max-width: 999px) {
	#Header {
		height: 396px;	
	}
	#HeaderInner {
		max-width: 846px;
	}
	#Logo {
		top: 26px;
		left: 25px;	
	}
	#Logo a {
		width: 195px;
	}
	#Tagline {
		top: 135px;
		width: 366px;
		padding-top: 184px;	
	}
	#Tagline a {
		line-height: 25px;	
		font-size: 12px;
		padding: 0 10px;	
		margin: 0 6px;
	}
	/* Navigation */
	#Nav h2 {
		width: 86px;
		height: 80px;
		background-size: 231px auto;
		font-size: 13px;
	}
	#Nav h2:before {
		width: 18px;
		height: 17px;
		margin: 0 auto 5px auto;
	}
	#Nav ul {
		right: -65px;
		width: 216px;
		padding-bottom: 68px;
		padding-top: 137px;
		font-size: 13px;
	}
	#Nav ul:before {
		background-size: 346px auto;
	}
	#Nav ul li.admin {
		width: 138px;
		margin-top: 14px;
		padding: 17px 10px 0 10px;	
	}
	/* Footer */
	#Footer {
		font-size: 13px;	
		padding-top: 33px;
	}
	#FooterInner {
		position: relative;
		padding: 0 20px 58px 20px;
		max-width: 796px;
	}
	#Footer h2 {
		margin: 15px 0 15px 0;	
	}
	#Footer h2:after {
		height: 15px;
		width: 56px;
	}
	#Footer .large {
		font-size: 20px;
	}
	#FooterTop {
		padding-bottom: 16px;	
	}
	#FooterLogo {
		width: 160px;	
	}
	#FooterLogo a {
		width: 160px;	
	}
	#FooterCopyright {
		position: absolute;
		bottom: 37px;
		font-size: 10px;
	}
	.footerItem {
		padding-bottom: 1px;	
	}
	#FooterNav li {
		display: inline-block;
		vertical-align: bottom;	
	}
	#FooterNav li:nth-last-child(n+2):after {
		content: " /";	
	}
	
	/* Content */
	.contentSection {
		/*margin: 0 20px;*/
		margin: 0 auto;
		max-width: 756px;	
	}
	.contentSection .pageWidth {
		max-width: 600px;
		padding: 0;
		margin-top: 30px;
		margin-bottom: 32px;
	}
	.roadsideAssist {
		font-size: 17px;	
		padding: 43px 20px 32px 20px;
		margin: 0 auto;
		max-width: 756px;
	}
	.roadsideAssist:before {
		height: 72px;
		border-width: 1px;	
	}
	.roadsideAssist:after {
		height: 98px;
	}
	
	/* misc */
	.bgGrey .contentSection .pageWidth {
		padding-top: 30px;
		padding-bottom: 32px;	
	}
}
/* step to fix contetn section width */
@media all and (max-width: 768px) {
	.contentSection {
		margin: 0 20px;	
	}
}
/* -------------
Put your layout changes above
These options are ONLY for hiding revealing things, only modify the sizes
MUST keep max and min sizes!
*/
/* Big Desktop Size */
@media all and (min-width: 1200px) {
	.bigDesktopHide {
		display: none !important;
	}
	.desktopHide {
		display: none !important;	
	}
}
/* Desktop Size / large tablets */
@media all and (min-width: 1000px) and (max-width: 1200px) {
	.desktopHide {
		display: none !important;	
	}
}
/* Tablet size / very large phones */
@media all and (min-width: 768px) and (max-width: 999px) {
	.tabletHide {
		display: none !important;	
	}
}
/* Mobile */
@media all and (max-width: 767px) {
	.mobileHide {
		display: none !important;	
	}
}


/****** FILE: themes/mytheme/css/typography.css *****/
/* Font face example */
/*@font-face {
    font-family: 'AlrightSans';
    src: url('/themes/mytheme/webfonts/alrightsans-regular-v3-webfont.eot');
    src: url('/themes/mytheme/webfonts/alrightsans-regular-v3-webfont.eot?#iefix') format('embedded-opentype'),
         url('/themes/mytheme/webfonts/alrightsans-regular-v3-webfont.woff') format('woff'),
         url('/themes/mytheme/webfonts/alrightsans-regular-v3-webfont.ttf') format('truetype'),
         url('/themes/mytheme/webfonts/alrightsans-regular-v3-webfont.svg#alright_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}*/

 
/* GENERIC STYLES 
-------------------------------------------- */

.typography {
	
}

/* PARAGRAPHS 
-------------------------------------------- */
.typography p { 
 	
}

.typography .small {
	font-size: 87.5%;	
}

.typography .leadin, .typography .large  {
	font-size: 20px;
}

.typography .leadin {
	text-align: center;	
}

.typography .marginbottom {
	margin-bottom: 1em !important
}
.typography .nomargins {
	margin: 0 !important;	
}

.typography .purple {
	color: #9e218a;	
}

.typography .divider {
	margin-top: 28px;
	padding: 0;	
}
.typography .divider > *:first-child {
	padding-top: 25px;	
}
.typography .divider:before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	border-bottom: 2px solid #4d4d4d;
	height: 0px;
}

/* INLINE STYLES
-------------------------------------------- */

/* TABLES
-------------------------------------------- */
.typography table {
	max-width: 100%;
	margin-top: 1em;
}
.typography table td, .typography table th {
	vertical-align: top;
}
.typography table td[valign='bottom'], .typography table th[valign='bottom'] {
	vertical-align: bottom;
}
.typography table td[valign='middle'], .typography table th[valign='middle'] {
	vertical-align: middle;
}
.typography table tr:last-child td p {
	margin-bottom: 0;	
}

/* base styles for tables with borders */


/* QUOTES
-------------------------------------------- */

/* LINKS 
-------------------------------------------- */

.typography a { 
 	text-decoration: none;
	color: #9e218a;
}
	.typography a:hover { 
 		text-decoration: underline;
	}
	
	.typography a img {
		border: 0;	
	}

.typography h1 a,
.typography h2 a,
.typography h3 a,
.typography h4 a,
.typography h5 a,
.typography h6 a { 
	color: inherit;
}
/* LIST STYLES 
-------------------------------------------- */
.typography ul, .typography ol {
	margin-top: 0;
}
.typography ul ul, .typography ol ol {
	margin-bottom: 0;	
}
.typography ul.contentList > li > ul, .typography ol.contentList > li > ol,
.typography ul.contentList > li > article > ul, .typography ol.contentList > li > article > ol,
.typography ul.contentList > li > div > ul, .typography ol.contentList > li > div > ol {
	margin-bottom: 1em;	
}

/* Make the bullet point on UL same as the AI design */
.typography ul,
.typography ol {
	list-style: none;
	margin-left: 0;
}
.typography ul ul,
.typography ol ul {
	list-style: none;
	padding-left: 1.5em;
	margin-left: 0;
}
.typography li {
	position: relative;
	padding-left: 0.75em;	
}
.typography li:before {
	content: "\2022";
	display: inline-block;
	position: absolute;
	left: 0;
	padding-right: 5px;
}
/* make ol lists the same so that we can position the number nicely when centered */
.typography ol {
	counter-reset: ol;
}
.typography ol ol {
	counter-reset: ol2;	
}
.typography ol ol,
.typography ul ol {
	padding-left: 1.5em;	
}
.typography ol > li {
	padding-left: 1.5em;	
}
.typography ol > li:before {
    counter-increment: ol;
    content: counter(ol)". ";
	width: 1.2em;
	text-align: right;
}
.typography ol ol > li:before {
	counter-increment: ol2;
    content: counter(ol2)". ";
}

/* Centered lists, make sure bullet and number is placed nicely */
.typography .center li,
.typography [style*="text-align: center"] li,
.typography li.center,
.typography li[style*="text-align: center"],
.typography .centeredContent li {
	margin: 0 auto;
}
.typography .center li:before,
.typography [style*="text-align: center"] li:before,
.typography li.center:before,
.typography li[style*="text-align: center"]:before,
.typography .centeredContent li:before {
	position: static;
}
		
/* HEADER STYLES 
-------------------------------------------- */

.typography h1, .typography h2 {
	font-size: 20px;
	font-weight: bold;
	color: #9e218a;
	margin: 0 0 25px 0;
	padding: 0 0 25px 0;
	text-align: center;
	clear: both;
}
.typography h1:after, .typography h2:after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	border-bottom: 2px solid #4d4d4d;
	height: 23px;
}

.typography h3 {
	font-weight: bold;
	color: #9e218a;
	font-size: inherit;
	margin: 0;
	clear: both;
}
.typography h4 {
	margin: 0;
	font-size: inherit;
}
.typography h5 {
	margin: 0;
	font-size: inherit;
}
.typography h6 {
	margin: 0;
	font-size: inherit;
}

/* WYSIWYG EDITOR ALIGNMENT CLASSES 
-------------------------------------------- */
.typography .left {
	text-align: left;
}
.typography .center {
	text-align: center;
}
.typography .right {
	text-align: right;
}

/* IMAGES 
-------------------------------------------- */
.typography img {
   /* border: 5px solid #d7d7d7;*/
   max-width: 100%; /* prevents width being wider than 100% */
   height: auto; /* resets the image height so that it maintains its aspect ratio when width is set */
   /*background: transparent url(../images/ajax-loader.gif) no-repeat center center;*/
}
.typography img.left {
    float: left;
    max-width: 50%;
    margin: 5px 20px 10px 0;
}
.typography img.right {
    float: right;
    max-width: 50%; /* Responsive width */
    margin: 5px 0 10px 20px;
}
.typography img.leftAlone {
    /*float: left;
    margin-right: 100%;
    margin-bottom: 10px;*/
    clear: both;
}
.typography img.center {
    float: none;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 10px;
    clear: both;
}
.typography .captionImage { width: 100%; margin-top: 5px; }
.typography .captionImage img { margin: 0; }
  .typography .captionImage.left {
    float: left;
    margin: 5px 30px 20px 0px;
  }
  .typography .captionImage.right{
    float: right;
    margin: 5px 0 20px 30px;
  }
  .typography .captionImage.left[style],
  .typography .captionImage.right[style] {
    max-width: 50%; /* Overides core width to make responsive */
  }
  .typography .captionImage.left img,
  .typography .captionImage.right img {
    float: none;
    max-width: none;
    width: 100%;
  }
  .typography .captionImage.left img {
    margin-right: -10px;
  }
  .typography .captionImage.right img {
    margin-left: -10px;
  }
  .typography .captionImage.right p {
    margin-left: -10px;
    text-align: left;
    margin-left: -10px;
  }
.typography .captionImage.leftAlone{
  float:none;
  margin: 0 20px 20px 0px;
}
.typography .captionImage.center{
  margin: 0 auto 20px;
}
.typography .captionImage p {
  clear: both;
  margin: 5px 0;
  font-style: italic;
  color: #888;
}


/* Screen size specific stuff */
/* Desktop */
@media all and (min-width: 1000px) {
	.typography .twoColumns {
		text-align: left;
		margin-bottom: 1em;
		
	   -webkit-column-count: 2;
	   -moz-column-count: 2;
	   column-count: 2;
	
	   -webkit-column-gap: 20px;
	   -moz-column-gap: 20px;
	   column-gap: 20px;
	}
	/*
	.typography .threeColumns *:first-child,
	.typography .twoColumns *:first-child {
		margin-top: 0 !important;
	}*/
	.typography .twoColumns h1,
	.typography .twoColumns h2,
	.typography .twoColumns h3,
	.typography .twoColumns h4,
	.typography .twoColumns h5,
	.typography .twoColumns h6,
	.typography .twoColumns li {
		-moz-column-break-inside:avoid;
		-webkit-column-break-inside:avoid;
		column-break-inside:avoid;	
		
		/* for browsers without column-break-inside support */
		display: inline-block;
		vertical-align: top;
		width: 100%;
	}
	
	/* Prevent breaking accross columns */
	.typography p.noColumnBreak,
	.typography li.noColumnBreak,
	.typography .noColumnBreak li,
	.typography .noColumnBreak p {
		margin: 0;
		padding-bottom: 1em;
		-moz-column-break-inside:avoid;
		-webkit-column-break-inside:avoid;
		column-break-inside:avoid;	
		
		/* for browsers without column-break-inside support */
		display: inline-block;
		vertical-align: top;
		width: 100%;
	}
}
/* Tablet, large phone */
@media all and (max-width: 999px) {
	body.mceContentBody, .typography {
		font-size: 13px;	
	}
	.typography .leadin, .typography .large  {
		font-size: 15px;
	}
	
	.typography .divider {
		margin-top: 15px;
	}
	.typography .divider > *:first-child {
		padding-top: 14px;	
	}
	.typography .divider:before {
		border-width: 1px;	
	}
	
	.typography h1, .typography h2 {
		font-size: 17px;
		margin: 0 0 11px 0;
		padding: 0 0 10px 0;
	}
	.typography h1:after, .typography h2:after {
		height: 9px;
		border-width: 1px;
	}
}


/****** FILE: themes/mytheme/css/form.css *****/
/** ----------------------------------------------------------
 *
 * This stylesheet includes both generic form styles and 
 *    additional form styles for the User Defined Form Module.
 *
 ** ------------------------------------------------------- */


/* GENERIC FORMS
----------------------------------------------- */

form {
    
}
div.field {
    margin: -1px 0 0 0;
}
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}
form label {
    
}
    form label.left {
        display: block;
    }
	.typography form label.right {
		text-align: left;
    }

form input.text,
form textarea,
form select,
form span.readonly {
    width: 100%;
    padding: 10px 0;
    background-color: #fff;
    border: 1px solid #fff;
	font-family: inherit;
	font-size: inherit;
	box-sizing: border-box;
	color: inherit;
}
form input.text,
form textarea {
	border-radius: 0;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
}

form input.text:focus,
form textarea:focus,
form .textajaxuniquetext:focus,
form select:focus {
    outline:none;
}
form input[disabled], form textarea[disabled] {
    background-color: #f7f7f7;
    border: 1px solid #dad9d9;
}
textarea {
    resize: vertical; /* forces text area to be resized vertically only */
}

div.field.text , div.field.readonly {
	border-top: 1px solid #9e218a;
	border-bottom: 1px solid #9e218a; 	
}


/* Radio and Checkbox */
.field .checkbox, .field .radio {
	vertical-align: middle;
	margin-bottom: 3px;
}
    .checkbox label.right,
    .radio label.right {
        display: inline;
    }

/* Chris Bolt, Options set field */
.optionset ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.optionset li {
	float: left;
}
.optionset.stacked li {
	float: none;
	clear: both;
}
.stacked {
	clear: left;
	float: none;
}

/* Messages */
.message {
	display: inline-block;
    background-color: #fef4ba;
    padding: 5px 10px;
    border: 1px solid #e8c805;
}
    .message.good {
        background-color: #ecf9d0;
        border-color: #8fbe00;
    }
    .message.bad, .message.required {
        background-color: #f9d0d0;
        border-color: #cf0000;
        color: #b80000;
    }
	
/* This code builds a label on the side form */
.middleColumn {
	display: block;
	margin: 0;
	padding: 0;
	width: 70%;
	float: right;
}
.field:after {
	content: '';
	display: block;
	clear: both;	
	/*margin-bottom: 10px;*/
}
label.left {
	width: 30%;
	float:left; 
	padding: 10px 0;
	color: inherit;
	font-weight: bold;
}
.field .description {
	margin-left: 30%;
	padding-bottom: 10px;
}
/* End label on the side form */
	
label.left {
	font-weight: bold;	
}
label.left:after {
	content: ':';	
}
/*.requiredField label.left {
	position: relative;
}
.requiredField label.left:before {
	content: '*';
	display: inline-block;
	color: #FF0000;
}*/
.field .description {
	font-style: italic;	
	display: block;
	clear: both;
	font-size: 0.9em;
}
span.readonly {
	display: block;
}	


/* ACTIONS */
.Actions {
	margin-top: 2em;
    margin-bottom: 1em;
	text-align: right;
}
.Actions:after {
	content: '';
	display: block;
	clear: both;	
}
    a.btn, .Actions button, .Actions input[type="submit"], .Actions .action {
        display: inline-block;
		background: none;
		font-weight: normal;
		width: auto;	
		height: auto;
		border: 1px solid #9e218a;
		color: #9e218a;
		text-transform: uppercase;
		
		border-radius: 0;
		-moz-appearance: none;
		-webkit-appearance: none;
		appearance: none;
		
		cursor: pointer;
    }
	.Actions button, .Actions input[type="submit"], .Actions .action {
		margin-left: 10px;	
		float: right;
	}
	.Actions button:first-child, .Actions input[type="submit"]:first-child, .Actions .action:first-child, .Actions input[name=action_discount_process] {
		background: 	#9e218a;
		color: #ffffff;
	}
	
    a.btn:hover, .Actions button:hover, .Actions input[type="submit"]:hover, .Actions .action:hover {
        text-decoration: none;
	}

/* AREA SPECIFIC */
    /* LOGIN and FORGOT PASSWORD */
    #Remember {
        min-height: 20px;
    }
    #ForgotPassword {
        clear: left;
    }

/* style placeholders */
::-webkit-input-placeholder {
	color: inherit;	
    opacity: 1; 
}
:-moz-placeholder {
	color: inherit;	
    opacity: 1; 
}
::-moz-placeholder {
	color: inherit;	
    opacity: 1; 
}
:-ms-input-placeholder {
	color: inherit;	
    opacity: 1; 
}
.labelTextFieldInactive {
	color: inherit;	
    opacity: 1; 
}

/* Misc */
form h3 {
	padding-top: 1em;
	padding-bottom: 1em;	
	/*border-bottom: 2px solid #4d4d4d;
	margin-bottom: -1px;
	position: relative;*/
}
#PurchaseForm_PurchaseForm_Premium_readonly,
#PurchaseForm_PurchaseForm_MembershipNumber_readonly {
	font-weight: bold;	
}
#ProductID li:hover, #ProductID li.active {
	background-color: #e0e0e0;
}
#ProductID li {
	cursor: pointer;	
	border-top: 1px solid #9e218a;
	border-bottom: 1px solid #9e218a; 
	margin: -1px 0 0 0;
	padding: 10px;
}
#ProductID li label {
	cursor: pointer;	
}
#ProductID li .title {
	padding-left: 10px;	
}
#ProductID li .premium {
	font-weight: bold;
	float: right;	
}

input[name="VehicleRegistration"] {
	text-transform: uppercase;	
}

#ForgotPassword {
	clear: both;	
}

/* Screen size specific stuff */
/* Desktop */
@media all and (min-width: 1000px) {
	
	a.btn, .Actions button, .Actions input[type="submit"], .Actions .action {
		letter-spacing: 3px;
		font-size: 16px;
		line-height: 40px;
		padding: 0 16px;
	}
}
/* Tablet, large phone */
@media all and (max-width: 999px) {
	a.btn, .Actions button, .Actions input[type="submit"], .Actions .action {
		letter-spacing: 2px;
		font-size: 11px;
		line-height: 28px;
		padding: 0 9px;
	}
	
}