body {
    background-color: #FFFFFF; /* Background color */
    color: #000000; /* Foreground color used for text */
	<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
	font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 12pt;
    line-height: 12pt;
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<style type="text/css">
a:link {text-decoration:no underline;} /* unvisited link */
a:visited {text-decoration:no underline;} /* visited link */
a:hover {text-decoration:underline;} /* mouse over link */
a:active {text-decoration:no underline;} /* selected link */
a:link {color:#000000;} /* unvisited link */
a:visited {color:#777777;} /* visited link */
a:hover {color:#50070e;} /* mouse over link */
a:active {color:#000000;} /* selected link */
</style>

h1 {
font-family: 'Open Sans', sans-serif;
font-size: 16pt;
        text-decoration: none;
        	line-height: 16pt;
        	    font-weight: normal;
}

h1 a {
font-family: 'Open Sans', sans-serif;
font-size: 16pt;
        text-decoration: none;
        	line-height: 16pt;
        	    font-weight: normal;
}

h2 {
font-family: 'Open Sans', sans-serif;
font-size: 12pt;
        text-decoration: none;
        	line-height: 14pt;
        	    font-weight: normal;
}

h2 a {
font-family: 'Open Sans', sans-serif;
font-size: 12pt;
        text-decoration: none;
        	line-height: 14pt;
}

h3 {
font-family: 'Open Sans', sans-serif;

font-size: 12pt;
    text-decoration: none;
        	line-height: 12pt;
}

h3 a {
font-family: 'Open Sans', sans-serif;

font-size: 12pt;
    text-decoration: none;
        	line-height: 12pt;
}
h4 {
font-size: 10pt;
    text-decoration: none;
        	line-height: 12pt;
}

h5 {
font-size: 18pt;
    font-family: 'Open Sans', sans-serif;
        text-decoration: none;
        	line-height: 14pt;
}

.box { float: left; }
#root { max-width: 1200px; margin: 0 auto; }

#box1 { width: 100%; }
#box2 { width: 20%; }
#box3 { width: 80%; }
#box4 { width: 100%; }


/* Laptop/Tablet (1024px) */
@media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: landscape) {
	#box1 { width: 100%; }
	#box2 { width: 100%; }
	#box3 { width: 100%; }
	#box4 { width: 100%; }
}

/* Tablet Portrait (768px) */
@media only screen and (min-width: 321px) and (max-width: 1024px) and (orientation: portrait) {
	#box1 { width: 100%; }
	#box2 { width: 100%; }
	#box3 { width: 100%; }
	#box4 { width: 100%; }
}

/* Phone Landscape (480px) */
@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
	#box1 { width: 100%; }
	#box2 { width: 100%; }
	#box3 { width: 100%; }
	#box4 { width: 100%; }
}

/* Phone Portrait (320px) */
@media only screen and (max-width: 320px) {
	#box1 { width: 100%; }
	#box2 { width: 100%; }
	#box3 { width: 100%; }
	#box4 { width: 100%; }
}