/* -------------------------------------
     GLOBAL RESETS
 -------------------------------------*/

/*All the styling goes here*/
.code
    background-color: white
    margin: 4px
    border-radius: 5px
    padding: 17px
    font-size: 20px

img
	border: none
	-ms-interpolation-mode: bicubic
	max-width: 100%

body
	background-color: #f6f6f6
	font-family: sans-serif
	-webkit-font-smoothing: antialiased
	font-size: 14px
	line-height: 1.4
	margin: 0
	padding: 0
	-ms-text-size-adjust: 100%
	-webkit-text-size-adjust: 100%

table
	border-collapse: separate
	mso-table-lspace: 0pt
	mso-table-rspace: 0pt
	width: 100%
	td
		font-family: sans-serif
		font-size: 14px
		vertical-align: top

/* -------------------------------------
 *    BODY & CONTAINER
 *-------------------------------------*/

.body
	background-color: #f6f6f6
	width: 100%

/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something*/

.container
	display: block
	margin: 0 auto !important
	/* makes it centered*/
	max-width: 580px
	padding: 10px
	width: 580px

/* This should also be a block element, so that it will fill 100% of the .container*/

.content
	box-sizing: border-box
	display: block
	margin: 0 auto
	max-width: 580px
	padding: 10px

/* -------------------------------------
 *    HEADER, FOOTER, MAIN
 *-------------------------------------*/

.main
	background: #ffffff
	border-radius: 3px
	width: 100%

.wrapper
	box-sizing: border-box
	padding: 20px

.content-block
	padding-bottom: 10px
	padding-top: 10px

.footer
	clear: both
	margin-top: 10px
	text-align: center
	width: 100%
	td, p, span, a
		color: #999999
		font-size: 12px
		text-align: center

/* -------------------------------------
 *    TYPOGRAPHY
 *-------------------------------------*/

h1, h2, h3, h4
	color: #000000
	font-family: sans-serif
	font-weight: 400
	line-height: 1.4
	margin: 0
	margin-bottom: 30px

h1
	font-size: 35px
	font-weight: 300
	text-align: center
	text-transform: capitalize

p, ul, ol
	font-family: sans-serif
	font-size: 14px
	font-weight: normal
	margin: 0
	margin-bottom: 15px

p li, ul li, ol li
	list-style-position: inside
	margin-left: 5px

a
	color: #3498db
	text-decoration: underline

/* -------------------------------------
 *    BUTTONS
 *-------------------------------------*/

.btn
	box-sizing: border-box
	width: 100%
	> tbody > tr > td
		padding-bottom: 15px
	table
		width: auto
		td
			background-color: #ffffff
			border-radius: 5px
			text-align: center
	a
		background-color: #ffffff
		border: solid 1px #3498db
		border-radius: 5px
		box-sizing: border-box
		color: #3498db
		cursor: pointer
		display: inline-block
		font-size: 14px
		font-weight: bold
		margin: 0
		padding: 12px 25px
		text-decoration: none

.btn-primary
	table td
		background-color: #3498db
	a
		background-color: #3498db
		border-color: #3498db
		color: #ffffff

/* -------------------------------------
 *    OTHER STYLES THAT MIGHT BE USEFUL
 *-------------------------------------*/

.last
	margin-bottom: 0

.first
	margin-top: 0

.align-center
	text-align: center

.align-right
	text-align: right

.align-left
	text-align: left

.clear
	clear: both

.mt0
	margin-top: 0

.mb0
	margin-bottom: 0

.preheader
	color: transparent
	display: none
	height: 0
	max-height: 0
	max-width: 0
	opacity: 0
	overflow: hidden
	mso-hide: all
	visibility: hidden
	width: 0

.powered-by a
	text-decoration: none

hr
	border: 0
	border-bottom: 1px solid #f6f6f6
	margin: 20px 0

/* -------------------------------------
 *    RESPONSIVE AND MOBILE FRIENDLY STYLES
 *-------------------------------------*/
@media only screen and (max-width: 620px)
	table[class=body]
		h1
			font-size: 28px !important
			margin-bottom: 10px !important
		p, ul, ol, td, span, a
			font-size: 16px !important
		.wrapper, .article
			padding: 10px !important
		.content
			padding: 0 !important
		.container
			padding: 0 !important
			width: 100% !important
		.main
			border-left-width: 0 !important
			border-radius: 0 !important
			border-right-width: 0 !important
		.btn
			table, a
				width: 100% !important
		.img-responsive
			height: auto !important
			max-width: 100% !important
			width: auto !important

/* -------------------------------------
 *    PRESERVE THESE STYLES IN THE HEAD
 *-------------------------------------*/
@media all
	.ExternalClass
		width: 100%
		line-height: 100%
		p, span, font, td, div
			line-height: 100%
	.apple-link a
		color: inherit !important
		font-family: inherit !important
		font-size: inherit !important
		font-weight: inherit !important
		line-height: inherit !important
		text-decoration: none !important
	#MessageViewBody a
		color: inherit
		text-decoration: none
		font-size: inherit
		font-family: inherit
		font-weight: inherit
		line-height: inherit
	.btn-primary
		table td:hover
			background-color: #34495e !important
		a:hover
			background-color: #34495e !important
			border-color: #34495e !important