body {margin: 0; padding: 0; background: #fff; text-align: center; font: 14px 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; color: #000;}
table, td {font: 14px 'Lucida Grande', Geneva, Verdana, Arial, sans-serif; color: #000;}

#header {width: 680px; margin: 10px auto; text-align: center;}

#main, #breadcrumb, #footer {width: 680px; margin: 15px auto; text-align: left;}
#main div.column {text-align: left; margin-bottom: 1em;}
#main p {margin: 0 0 1em 0;}
#main p.last {margin: 0;}
#main p.intro {font-weight: bold;}
#main .lite {color: #79767c;}
#main h1 {font-size: 24px; margin: 0 0 .1em 0;}
#main h2 {font-size: 16px; margin: 0;}
#main h3 {font-size: 12px; margin: 0;}
#main h4 {font-size: 10px; margin: 0;}
#main .more {text-align: right;}

#main a.pdf {background: url(http://www.grahamenglish.net/survey/images/globaliconpdf12x12.gif) left top no-repeat; display: block; padding-left: 20px;}
#main a.html {background: url(http://www.grahamenglish.net/survey/images/globaliconhtml12x1220050802.gif) left top no-repeat; display: block; padding-left: 20px;}
#main a.qt {background: url(http://www.grahamenglish.net/survey/images/globaliconqt12x12.gif) left top no-repeat; display: block; padding-left: 20px;}
#main a.ical {background: url(http://www.grahamenglish.net/survey/images/globaliconical12x12.gif) left top no-repeat; display: block; padding-left: 20px;}
#main a.dl {background: url(http://www.grahamenglish.net/survey/images/globalicondl11x10.gif) left top no-repeat; display: block; padding-left: 20px;}
#main a.dmg {background: url(http://www.grahamenglish.net/survey/images/globalicondmg12x12.gif) left top no-repeat; display: block; padding-left: 20px;}
#main a.zip {background: url(http://www.grahamenglish.net/survey/images/globaliconzip12x12.gif) left top no-repeat; display: block; padding-left: 20px;}
#main a.keynote {background: url(http://www.grahamenglish.net/survey/images/globaliconkeynote12x12.gif) left top no-repeat; display: block; padding-left: 20px;}
#main a.audio {background: url(http://www.grahamenglish.net/survey/images/globaliconaudio12x12.gif) left top no-repeat; display: block; padding-left: 20px;}

#main .subcolumn1-2 {float: left; width: 330px;}
#main .subcolumn2-2 {float: right; width: 330px;}
#main .subcolumn1-3, #main .subcolumn2-3, #main .subcolumn3-3 {width: 212px; float: left;}
#main .subcolumn1-3, #main .subcolumn2-3 {margin-right: 20px;}

#content {float: left; width: 450px;}

#content .subcolumn1-2 {float: left; width: 215px;}
#content .subcolumn2-2 {float: right; width: 215px;}
#content .subcolumn1-3, #content .subcolumn2-3, #content .subcolumn3-3 {width: 135px; float: left;}
#content .subcolumn1-3, #content .subcolumn2-3 {margin-right: 22px;}

#sidebar {float: right; width: 200px; font: 10px 'Lucida Grande', Geneva, Verdana, Arial, sans-serif;}
#sidebar h2 {font-size: 12px; margin: 0;}
#sidebar h3 {font-size: 11px; margin: 0;}
#sidebar h4 {font-size: 10px; margin: 0;}

select#findastore {width: 200px;}

#main .box {border: 1px solid #a1a5a9; padding: 0 5px 5px 5px; margin: 0 0 1.25em 0;}
#content .box h2 {border-bottom: 1px solid #a1a5a9; padding: 5px; background: #f2f2f2; margin: 0 -5px 5px -5px; font-size: 12px;}
#sidebar .box h2 {border-bottom: 1px solid #a1a5a9; padding: 5px; background: #f2f2f2; margin: 0 -5px 5px -5px; font-size: 11px;}

img {border: 0;}
img.left {float: left; margin: 2px 10px 5px 0; border: 0;}
img.right {float: right; margin: 2px 0 5px 10px; border: 0;}
img.across {margin: 0 0 10px 0; border: 0;}

.showmac {display: none;}
.showwin {}

ul {list-style: none outside; margin: 0; padding: 0 0 1em 0;}
ul.square {list-style: square outside; margin: 0 0 0 16px; padding: 0 0 1em 0;}
ul.circle {list-style: circle outside; margin: 0 0 0 16px; padding: 0 0 1em 0;}
ol {list-style: decimal; margin: 0 0 0 2.8em; padding: 0 0 1em 0;}
li {padding-bottom: .3em;}
ul ul.circle {margin-top: .3em;}
ul ul.square {margin-top: .3em;}

ol.last {padding: 0;}
ul.last {padding: 0;}
dl.last {padding: 0;}
li.last {padding: 0;}

sup {vertical-align: baseline; font-size: 1em; color: #76797c;}

.sosumi {font-size: 10px !important; color: #76797c;}
ol.sosumi {margin-left: 0; padding-left: 1.5em; clear: both;}

#breadcrumb, #footer {text-align: center; clear: both;}
#breadcrumb {clear: both; font-size: 10px; padding: 1em 0;}

#footer {font: 10px 'Lucida Grande', Geneva, Verdana, Arial, sans-serif; border-top: 1px solid #a1a5a9; padding-top: 1em;}
#footer form {margin-bottom: 2em;}
#footer form input {vertical-align: bottom;}

div.clearer {clear: both; display: block; margin: 0; padding: 0; height: 0; line-height: 1px; font-size: 1px;}

#nojs {background: #f93; padding: 5px 0;}

/* Paragraph Formats
   Based on Sawchuk 0.5 by Kirk Montgomery
---------------------------------------------------------- */
.download, .code, .note,
.alert, .new, .construction,
.information {
	background-position: 15px 10px;
	background-repeat: no-repeat;
	line-height: 115%;
	margin: 10px auto;
	padding: 10px 10px 10px 50px;
	text-align: left;
	}
ul.download, ul.code, ul.note,
ul.alert, ul.new, ul.construction,
ul.information {
	line-height: 115%;
	list-style-type: disc;
	list-style-position: inside;
	padding: 10px 10px 10px 50px;
	}
ol.download, ol.code, ol.note,
ol.alert, ol.new, ol.construction,
ol.information {
	line-height: 115%;
	list-style-type: decimal;
	list-style-position: inside;
	padding: 10px 10px 10px 65px;
	}	
dl.download, dl.code, dl.note,
dl.alert, dl.new, dl.construction,
dl.information {
	line-height: 115%;
	padding: 10px 10px 10px 50px;
	}
dl.download dt, dl.code dt, dl.note dt,
dl.alert dt, dl.new dt, dl.construction dt,
dl.information dt {
	font-weight: bold;
	line-height: 115%;
	}
dl.download dd, dl.code dd, dl.note dd,
dl.alert dd, dl.new dd, dl.construction dd,
dl.information dd {
	line-height: 115%;
	list-style-type: disc;
	}
.download {
	background-image: url('http://www.grahamenglish.net/survey/images/download.png');
	background-color: #D0F29D;
	border-top: 2px solid #9CD941;
	border-bottom: 2px solid #9CD941;
	}
.download a, .download a:visited {
	color: #ed1c24;
	text-decoration: none !important;
	border-bottom: 2px dotted #ed1c24;
	}
.download a:hover {
	color: #c90404;
	text-decoration: none !important;
	border-bottom: 2px dotted #c90404;
	}
.code { /* use p class=code when you want to fake it, sometimes handy */
	background-image: url('http://www.grahamenglish.net/survey/images/code.png');
	background-color: #f2f2f2;
	border-top: 2px solid #CCC;
	border-bottom: 2px solid #CCC;
	font-family: 'Courier New', Courier, Fixed;
	}
.alert {
	background-image: url('http://www.grahamenglish.net/survey/images/alert.png');
	background-color: #ffcccc;
	border-top: 2px solid #f1795e;
	border-bottom: 2px solid #f1795e;
	}
.new {
	background-color: #fbe9bd;
	background-image: url('http://www.grahamenglish.net/survey/images/new.png');
	border-bottom: 2px solid #febd72;
	border-top: 2px solid #febd72;
	}
.construction {
	background-image: url('http://www.grahamenglish.net/survey/images/construction.png');
	background-color: #fbf2c2;
	border-top: 2px solid #f4d64f;
	border-bottom: 2px solid #f4d64f;
	}
.information {
	background-image: url('http://www.grahamenglish.net/survey/images/information.png');
	background-color: #9DD1F2;
	border-top: 2px solid #419ED9;
	border-bottom: 2px solid #419ED9;
	}
.note {
	background-image: url('http://www.grahamenglish.net/survey/images/note.png');
	background-color: #ededed;
	border-top: 2px solid #ccc;
	border-bottom: 2px solid #ccc;
	}
.callout {
	border-bottom: 2px solid #CCC;
	border-top: 2px solid #CCC;
	color: #CCC;
	margin: 10px auto;
	padding: 10px;
	text-align: justify;
	}