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

@import url(http://www.family-lawfirm.co.uk/fonts/opensans_regular_macroman/stylesheet.css);
@import url(http://www.family-lawfirm.co.uk/fonts/opensans_bold_macroman/stylesheet.css);

* { 
	margin:0;
	padding:0;
}
* { font-family: 'open_sansregular', arial, 'sans-serif'; color: #4d4d4d; }

img { 
	display: block;
}
.collapse {
	margin:0;
	padding:0;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

body {
	-webkit-font-smoothing:antialiased; 
	-webkit-text-size-adjust:none; 
	width: 100%!important; 
	height: 100%;
	font-size: 14px;
	line-height: 1.5em;
}


img.header-image-small{
	display: none;
	}


/* ------------------------------------- 
		ELEMENTS 
------------------------------------- */
a { color: #8b189b;text-decoration: none;}

/* ------------------------------------- 
		HEADER 
------------------------------------- */
table.head-wrap { width: 100%;}

/* ------------------------------------- 
		BODY 
------------------------------------- */
table.body-wrap { width: 100%;margin: 0;}


/* ------------------------------------- 
		FOOTER 
------------------------------------- */
table.footer-wrap { width: 100%;clear:both!important;font-size: 11px;line-height: 1.3em;}



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

.collapse { margin:0!important;}



/* --------------------------------------------------- 
		RESPONSIVENESS
		Nuke it from orbit. It's the only way to be sure. 
------------------------------------------------------ */

/* 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!important;
	max-width:660px!important;
	margin:0 auto!important; /* makes it centered */
	clear:both!important;
}

/* This should also be a block element, so that it will fill 100% of the .container */
.content {
	padding:20px;
	max-width:620px;
	margin:0 auto;
	display:block; 
}

/* Let's make sure tables in the content area are 100% wide */
.content table { width: 100%; }


/* Odds and ends */
.column {
	width: 330px;
	float:left;
}
.column tr td { padding: 0 20px 0 20px; }
.column-wrap { 
	padding:0!important; 
	margin:0 auto; 
	max-width:660px!important;
}
.column-bg{
	float: left;
	width: 100%;
	background: #FFF;
	}
.column table { width:100%;}


.button{padding: 0 20px 20px 20px;}

/* Be sure to place a .clear element after each set of columns, just to be safe */
.clear { display: block; clear: both; }


.show_on_mobile{display: none !important;}

/* ------------------------------------------- 
		PHONE
		For clients that support media queries.
		Nothing fancy. 
-------------------------------------------- */

@media only screen and (max-width: 660px) {
	
	a[class="btn"] { display:block!important; margin-bottom:10px!important; background-image:none!important; margin-right:0!important;}

	div[class="column"] { width: auto!important; float:none!important;}
	
	td[class="button"] {text-align:center;padding: 10px 20px 20px 20px;}
	
	*[class~=hide_on_mobile] { display: none !important;width: 0; max-height: 0; overflow: hidden; float: left;}       
    *[class~=show_on_mobile] {
        display : block !important;
        width : auto !important;
        max-height: inherit !important;
        overflow : visible !important;
        float : none !important;
    }

}

@media only screen and (max-width: 400px) {
	*[class~=show_on_mobile] { display: none !important;width: 0; max-height: 0; overflow: hidden; float: left;} 
}