@font-face {
    font-family: 'overpassregular';
    src: url('fonts/overpass_regular_macroman/Overpass_Regular-webfont.eot');
    src: url('fonts/overpass_regular_macroman/Overpass_Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/overpass_regular_macroman/Overpass_Regular-webfont.woff') format('woff'),
         url('fonts/overpass_regular_macroman/Overpass_Regular-webfont.ttf') format('truetype'),
         url('fonts/overpass_regular_macroman/Overpass_Regular-webfont.svg#overpassregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'overpassbold';
    src: url('fonts/overpass_bold_macroman/Overpass_Bold-webfont.eot');
    src: url('fonts/overpass_bold_macroman/Overpass_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/overpass_bold_macroman/Overpass_Bold-webfont.woff') format('woff'),
         url('fonts/overpass_bold_macroman/Overpass_Bold-webfont.ttf') format('truetype'),
         url('fonts/overpass_bold_macroman/Overpass_Bold-webfont.svg#overpassbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
	font: 0.9em/1.2 Arial, Helvetica, sans-serif;
	/*background-color: #000e1a;
	background-image: url(images/blue_verticals_2.jpg);
	background-position: center top;
	background-repeat: repeat-y;*/
	margin: 0;
	padding: 0;
	color: #222;
}
#overlay {
	position: absolute;
	left: 60%;
	top: 0px;
	width: 30%;
	max-width: 260px;
	height: 1700px;
	z-index: 1;
	background: transparent url(images/overlay.png) repeat-y 0px -200px;
}
h1 {
	font-family: 'overpassregular';
	font-size: 0.9em;
	text-transform: uppercase;
	margin: 0px !important;
	padding: 16px 15px 18px 15px;
	color: rgb(50, 50, 50);
	background-color: rgb(220, 220, 220);
	border-top: 1px solid rgb(150, 150, 150);
	/* background: -webkit-linear-gradient(left, rgb(235, 235, 235), rgb(255, 255, 255), rgb(235, 235, 235));  For Safari 5.1 to 6.0 */
   /* background: -o-linear-gradient(left, rgb(235, 235, 235), rgb(255, 255, 255), rgb(235, 235, 235));  For Opera 11.1 to 12.0 */
   /* background: -moz-linear-gradient(left, rgb(235, 235, 235), rgb(255, 255, 255), rgb(235, 235, 235));  For Firefox 3.6 to 15 */
   /*background: linear-gradient(left, rgb(235, 235, 235), rgb(255, 255, 255), rgb(235, 235, 235));  Standard syntax (must be last) */
}
h1#title1 {
	font: 0.9em/1.1 'Times New Roman', Times, serif;
	letter-spacing: 0.2em;
	border: 0px;
	margin: 0px;
	padding: 0px;
	padding-top: 16px;
	color: #FFF;
	background-color: rgb(30, 70, 110);
}
h1#title1 span {
	text-transform: lowercase;
	font-style: italic;
}
h1#title2 {
	text-transform: uppercase;
	font-style: bold;
	font-size: 2.7em;
	border: 0px;
	margin: 0px;
	padding: 0px;
	line-height: .9em;
	color: #FFF;
	background-color: rgb(30, 70, 110);
}
h1#title3 {
	font: 0.7em/1 'Times New Roman', Times, serif;
	letter-spacing: 0.2em;
	border: 0px;
	margin: 0px;
	padding-bottom: 16px;
	color: #FFF;
	background-color: rgb(30, 70, 110);
	text-transform: lowercase;
	font-style: italic;
}
#ppl1 {
	color: #FFF;
	font-size: 0.5em;
	background-color: rgb(30, 70, 110);
	padding: 6px;
}
#ppl2 {
	color: #000;
	padding-top: 12px;
}
.blue-back {
	background-color: #1e466e;
	padding: 10px;
}

hr {
	color: #939597;
	background-color: #939597;
	height: 1px;
	border: 0px;
	padding: 0px;
	margin: 6px 0px;
}
p {
	padding: 0px;
	margin: 0px;	
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}

/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a {
	color: rgb(30, 70, 110);
	text-decoration: none; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}

input {
	font-size: 0.8em;
	display: block;
}

select {
	font-size: 0.5em;
	display: block;
}
#exp-book, #exp-digital, #exp-pay, #exp-price, #exp-share, #exp-edit {
	cursor: pointer;
}
/*Remove or comment out divs that should start already toggled open*/
#book, /*#digital, #pay, */#purchase, /*#share, */#edit {
	display: none;
}
/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
	width: 80%;
	max-width: 800px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
	min-width: 300px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
	padding: 20px 0px;
}

/* ~~ This is the layout information. ~~ 

1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.

*/
.flrt {float: right;}
.italic {font-style: italic;}
.content {
	margin: 0px;
	padding: 6px 0px;
	/*background-color: red;*/
}
.expand-button-holder {
	float: right;
	z-index: 5;
	width: 140px;
	height: 15px;
	background: url("images/expand-button.png") 0px 0px no-repeat;
}
.expand-button-holder:hover {
	background: url("images/expand-button.png") 0px -15px no-repeat;
}
.expand_block {
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	padding: 0px 20px 20px 20px;
	background: rgb(235, 235, 235);
	background: -webkit-linear-gradient(left, rgb(235, 235, 235), rgb(255, 255, 255), rgb(235, 235, 235)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(left, rgb(235, 235, 235), rgb(255, 255, 255), rgb(235, 235, 235)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(left, rgb(235, 235, 235), rgb(255, 255, 255), rgb(235, 235, 235)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(left, rgb(235, 235, 235), rgb(255, 255, 255), rgb(235, 235, 235)); /* Standard syntax (must be last) */
}
.expand_block p {
	padding-top: 20px;	
}
#title {
	text-align: center;
	font-size: 1.4em;
	padding: 20px 0px 20px 0px;
	background: rgb(255, 185, 0);
	background: -webkit-linear-gradient(left, rgb(255, 135, 0), rgb(255, 185, 0), rgb(255, 135, 0)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(left, rgb(255, 135, 0), rgb(255, 185, 0), rgb(255, 135, 0)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(left, rgb(255, 135, 0), rgb(255, 185, 0), rgb(255, 135, 0)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(left, rgb(255, 135, 0), rgb(255, 185, 0), rgb(255, 135, 0)); /* Standard syntax (must be last) */
}

#instructions h3, #thanks_text h3 {
	padding: 0px;
	padding-bottom: 8px;
	margin: 0px;
}
#instructions {
	/*font: 0.8em/1.2 "Times New Roman", Times, serif;
	color: #000;
	padding-bottom: 14px;
	margin: 0px;*/
	width: 70%;
}

div.col1 label {
	padding: 8px 0px 4px 0px;
	display: block;
}
p.small-text {
	padding: 4px 0px 8px 0px;
	font-size: .75em;	
}
input.purchase_now, input#download {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}
#quantity {
	display: block;
	text-align: center !important;
	width: 80px;
	font-size: 0.8em;
	text-transform: uppercase;
	padding: 4px 8px !important;
	background-color: #FFF;
	border-radius: 6px;
	border: 1px solid #999;
}
input.purchase_now, input#download, input.expander {
	display: block;
	font-family: 'overpassbold';
	font-size: 0.8em;
	text-transform: uppercase;
	padding: 8px 16px !important;
	border-radius: 10px;
	background-color: rgb(30, 70, 110);
	border: 0;
	color: #FFF;
}
input.expander {
	float: right;
	margin: 10px 20px;
}
input.purchase_now:hover, input#download:hover, input.expander:hover {
	background-color: rgb(255, 185, 0);
	border: 0;
	color: #000;
}

/*-------------------------THANK YOU PAGE -------------------------------*/

#thanks {
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	padding: 0px 40px 40px 40px;
	background: rgb(235, 235, 235);
	background: -webkit-linear-gradient(left, rgb(235, 235, 235), rgb(255, 255, 255), rgb(235, 235, 235)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(left, rgb(235, 235, 235), rgb(255, 255, 255), rgb(235, 235, 235)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(left, rgb(235, 235, 235), rgb(255, 255, 255), rgb(235, 235, 235)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(left, rgb(235, 235, 235), rgb(255, 255, 255), rgb(235, 235, 235)); /* Standard syntax (must be last) */
}
#h1thanks {
	font-family: 'overpassregular';
	font-size: 0.9em;
	text-transform: uppercase;
	margin: 0px !important;
	padding: 8px 15px 8px 15px;
	color: rgb(50, 50, 50);
	background: rgb(220, 220, 220);
	border-top: 1px solid rgb(150, 150, 150);
}
#thanks_text {
	color: #000;
	width: 100%;
	min-height: 300px;
	padding-bottom: 14px;
	margin: 0px;
}
#first_thanks {
	width: 100%;
	padding: 60px 0px 10px 0px;
	min-width: 250px;	
}