/* seventhstring.css style sheet for Seventh String website	*/
/* foundation.css - see http://foundation.zurb.com/		*/

/* this causes sizes to be measured around outside of border (rather than size of content)	*/
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

html { font-size: 100%; }

body {font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size: 16px; font-size: 1.4rem; line-height: 1; color: #222222;
	position: relative; -webkit-font-smoothing: antialiased; }

/* Links ---------------------- */
a {color: #666; text-decoration: underline; line-height: inherit; font-style: italic;}
a:link, a:visited {color: #666;}
a:hover {color: #c90; }
/*a:focus {color: #2ba6cb; outline: none; }  what does this do? */
p a, p a:visited { line-height: inherit; }

/* Misc ---------------------- */
.left { float: left; }
.right { float: right; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.hide { display: none; }
.highlight { background: #ffff99; }
.middle { vertical-align: middle; }

/* Base Type Styles Using Modular Scale ---------------------- */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td { margin: 0; padding: 0; font-size: 15px; }

p { font-size: 15px; line-height: 1.5; margin-bottom: 13px; }
p.m0 { margin-bottom: 0px; }												/* this one with no margin below */
p.lead { font-size: 17.5px; line-height: 1.6; margin-bottom: 17px; }
p img.left, p img { margin: 17px; margin-left: 0; }
p img.right { margin: 17px; margin-right: 0; }

h1, h2, h3, h4, h5, h6 { line-height: 1.1; margin-bottom: 14px; margin-top: 14px; }
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #888; line-height: 0; }

/* amr: heading sizes. note they are bold by browser default.		*/
h1 {font-size:18px; color:#444; background:#FFCC00;
	/*font-weight:normal;*/
	margin-top:0px; margin-bottom:14px;
	padding:2px;
	text-align: center;
	/* amr: 2px raise to eliminate the gap between image and page title though I don't know why it's needed		*/
	/*margin: -2px 0 0 0;
	padding: 2px 0 0 0;*/
	width: 100%;
	}
h2 {font-size:16px;color:#444; background:#E7E7E7;
	margin-top:0px; margin-bottom:10px;
	padding:2px
	}
h3 {font-size:16px;color:#000000; margin-top:0px; margin-bottom:8px;}
h4 {font-size:14px;color:#000000; margin-top:0px; margin-bottom:5px;}
h5 {font-size:14px;color:#000000; margin-top:0px; margin-bottom:5px;}

h2.screenshot {margin-top: 20px; text-align: center;}

hr { border: solid #ddd; border-width: 5px 0 0; clear: both; margin: 22px 0 21px; height: 0; }

em, i { font-style: italic; line-height: inherit; }

strong, b { font-weight: bold; line-height: inherit; }

small { font-size: 60%; line-height: inherit; }

/* here's how to do a vertical spacer...		*/
/* <div style="height:20px;"></div>		*/

/* Lists ---------------------- */
/* amr: margin bottom is space under main menu	*/
ul, ol {font-size: 15px; line-height: 1.6; margin-top: 0px; margin-bottom: 10px; list-style-position: inside; }
ul a, ol a {font-style: normal;}		/* i.e. not italic		*/
ul.square, ul.circle, ul.disc { margin-left: 17px; }
ul.square { list-style-type: square; }
ul.circle { list-style-type: circle; }
ul.disc { list-style-type: disc; }
ul.no-bullet { list-style: none; }
ul.large li { line-height: 21px; }

/* Blockquotes ---------------------- */
blockquote, blockquote p { line-height: 1.5; color: #777; }
blockquote { margin: 0 0 17px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
blockquote cite { display: block; font-size: 13px; color: #555; }
blockquote cite:before { content: "\2014 \0020"; }
blockquote cite a, blockquote cite a:visited { color: #555; }

/* The Grid ----------------------
amr: this is where the maximum width is set. any larger window and we get margins at the sides */
/* .row { width: 1000px; max-width: 100%; min-width: 768px; margin: 0 auto; } */
.row { width: 850px; max-width: 100%; min-width: 768px; margin: 0 auto; }
.row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.row.collapse .column, .row.collapse .columns { padding: 0; }
.row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.row .row.collapse { margin: 0; }

.column, .columns { float: left; min-height: 1px; padding: 0 15px; position: relative; }
.column.centered, .columns.centered { float: none; margin: 0 auto; }

[class*="column"] + [class*="column"]:last-child { float: right; }
[class*="column"] + [class*="column"].end { float: left; }

.row .one { width: 8.333%; }
.row .two { width: 16.667%; }
.row .three { width: 25%; }
.row .four { width: 33.333%; }
.row .five { width: 41.667%; }
.row .six { width: 50%; }
.row .seven { width: 58.333%; }
.row .eight { width: 66.667%; }
.row .nine { width: 75%; }
.row .ten { width: 83.333%; }
.row .eleven { width: 91.667%; }
.row .twelve { width: 100%; }
.row .offset-by-one { margin-left: 8.333%; }
.row .offset-by-two { margin-left: 16.667%; }
.row .offset-by-three { margin-left: 25%; }
.row .offset-by-four { margin-left: 33.333%; }
.row .offset-by-five { margin-left: 41.667%; }
.row .offset-by-six { margin-left: 50%; }
.row .offset-by-seven { margin-left: 58.333%; }
.row .offset-by-eight { margin-left: 66.667%; }
.row .offset-by-nine { margin-left: 75%; }
.row .offset-by-ten { margin-left: 83.333%; }
.push-two { left: 16.667%; }
.pull-two { right: 16.667%; }
.push-three { left: 25%; }
.pull-three { right: 25%; }
.push-four { left: 33.333%; }
.pull-four { right: 33.333%; }
.push-five { left: 41.667%; }
.pull-five { right: 41.667%; }
.push-six { left: 50%; }
.pull-six { right: 50%; }
.push-seven { left: 58.333%; }
.pull-seven { right: 58.333%; }
.push-eight { left: 66.667%; }
.pull-eight { right: 66.667%; }
.push-nine { left: 75%; }
.pull-nine { right: 75%; }
.push-ten { left: 83.333%; }
.pull-ten { right: 83.333%; }

img, object, embed { max-width: 100%; height: auto; padding: 0;}

/* Nicolas Gallagher's micro clearfix */
/* .row { *zoom: 1; }
.row:before, .row:after { content: ""; display: table; }
.row:after { clear: both; } */

/* Mobile Grid and Overrides ---------------------- */
@media only screen and (max-width: 767px) { body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; width: 100%; min-width: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  .row { width: auto; min-width: 0; margin-left: 0; margin-right: 0; }
  .column, .columns { width: auto !important; float: none; }
  .column:last-child, .columns:last-child { float: none; }
  [class*="column"] + [class*="column"]:last-child { float: none; }
  .column:before, .columns:before, .column:after, .columns:after { content: ""; display: table; }
  .column:after, .columns:after { clear: both; }
  .no-left-margin, .offset-by-one, .offset-by-two, .offset-by-three, .offset-by-four, .offset-by-five, .offset-by-six, .offset-by-seven, .offset-by-eight, .offset-by-nine, .offset-by-ten { margin-left: 0 !important; }
  .left-auto, .push-two, .push-three, .push-four, .push-five, .push-six, .push-seven, .push-eight, .push-nine, .push-ten { left: auto; }
  .right-auto, .pull-two, .pull-three, .pull-four, .pull-five, .pull-six, .pull-seven, .pull-eight, .pull-nine, .pull-ten { right: auto; }
  /* Mobile 4-column Grid */
  .row .mobile-one { width: 25% !important; float: left; padding: 0 15px; }
  .row .mobile-one:last-child { float: right; }
  .row.collapse .mobile-one { padding: 0; }
  .row .mobile-two { width: 50% !important; float: left; padding: 0 15px; }
  .row .mobile-two:last-child { float: right; }
  .row.collapse .mobile-two { padding: 0; }
  .row .mobile-three { width: 75% !important; float: left; padding: 0 15px; }
  .row .mobile-three:last-child { float: right; }
  .row.collapse .mobile-three { padding: 0; }
  .row .mobile-four { width: 100% !important; float: left; padding: 0 15px; }
  .row .mobile-four:last-child { float: right; }
  .row.collapse .mobile-four { padding: 0; }
  .push-one-mobile { left: 25%; }
  .pull-one-mobile { right: 25%; }
  .push-two-mobile { left: 50%; }
  .pull-two-mobile { right: 50%; }
  .push-three-mobile { left: 75%; }
  .pull-three-mobile { right: 75%; } }
/* Block Grids ---------------------- */
/* These are 2-up, 3-up, 4-up and 5-up ULs, suited
for repeating blocks of content. Add 'mobile' to
them to switch them just like the layout grid
(one item per line) on phones

For IE7/8 compatibility block-grid items need to be
the same height. You can optionally uncomment the
lines below to support arbitrary height, but know
that IE7/8 do not support :nth-child.
-------------------------------------------------- */
.block-grid { display: block; overflow: hidden; padding: 0; }
.block-grid > li { display: block; height: auto; float: left; }

.block-grid.two-up { margin: 0 -15px; }

.block-grid.two-up > li { width: 50%; padding: 0 15px 15px; }

/*  .block-grid.two-up>li:nth-child(2n+1) {clear: left;} */
.block-grid.three-up { margin: 0 -12px; }

.block-grid.three-up > li { width: 33.33%; padding: 0 12px 12px; }

/*  .block-grid.three-up>li:nth-child(3n+1) {clear: left;} */
.block-grid.four-up { margin: 0 -10px; }

.block-grid.four-up > li { width: 25%; padding: 0 10px 10px; }

/*  .block-grid.four-up>li:nth-child(4n+1) {clear: left;} */
.block-grid.five-up { margin: 0 -8px; }

.block-grid.five-up > li { width: 20%; padding: 0 8px 8px; }

/*  .block-grid.five-up>li:nth-child(5n+1) {clear: left;} */
/* Mobile Block Grids */
@media only screen and (max-width: 767px) { .block-grid.mobile { margin-left: 0; }
  .block-grid.mobile > li { float: none; width: 100%; margin-left: 0; } }

/* Visibility Classes ---------------------- */
/* Standard visibility targeting */
.show-for-small, .show-for-medium, .hide-for-large, .show-for-xlarge { display: none !important; }

.hide-for-xlarge, .show-for-large, .hide-for-small, .hide-for-medium { display: block !important; }

/* Very large display targeting */
@media only screen and (min-width: 1441px) { .hide-for-small, .hide-for-medium, .hide-for-large, .show-for-xlarge { display: block !important; }
  .show-for-small, .show-for-medium, .show-for-large, .hide-for-xlarge { display: none !important; } }
/* Medium display targeting */
@media only screen and (max-width: 1279px) and (min-width: 768px) { .hide-for-small, .show-for-medium, .hide-for-large, .hide-for-xlarge { display: block !important; }
  .show-for-small, .hide-for-medium, .show-for-large, .show-for-xlarge { display: none !important; } }
/* Small display targeting */
@media only screen and (max-width: 767px) { .show-for-small, .hide-for-medium, .hide-for-large, .hide-for-xlarge { display: block !important; }
  .hide-for-small, .show-for-medium, .show-for-large, .show-for-xlarge { display: none !important; } }
/* Orientation targeting */
.show-for-landscape, .hide-for-portrait { display: block !important; }

.hide-for-landscape, .show-for-portrait { display: none !important; }

@media screen and (orientation: landscape) { .show-for-landscape, .hide-for-portrait { display: block !important; }
  .hide-for-landscape, .show-for-portrait { display: none !important; } }
@media screen and (orientation: portrait) { .show-for-portrait, .hide-for-landscape { display: block !important; }
  .hide-for-portrait, .show-for-landscape { display: none !important; } }

/* Touch-enabled device targeting */
.show-for-touch { display: none !important; }
.hide-for-touch { display: block !important; }
.touch .show-for-touch { display: block !important; }
.touch .hide-for-touch { display: none !important; }

/* Specific overrides for elements that require something other than display: block */
table.show-for-xlarge, table.show-for-large, table.hide-for-small, table.hide-for-medium { display: table !important; }

@media only screen and (max-width: 1279px) and (min-width: 768px) { .touch table.hide-for-xlarge, .touch table.hide-for-large, .touch table.hide-for-small, .touch table.show-for-medium { display: table !important; } }
@media only screen and (max-width: 767px) { table.hide-for-xlarge, table.hide-for-large, table.hide-for-medium, table.show-for-small { display: table !important; } }

/* Sub Navs http://www.zurb.com/article/292/how-to-create-simple-and-effective-sub-na ---------------------- */
/* amr: height here is height of the whole thing, so controls size of margin below the sub-menu.			*/
dl.sub-nav {display: block; width: auto; height: 20px; margin: 0 0 18px;}
dl.sub-nav a {font-style: normal;}		/* i.e. not italic		*/
dl.sub-nav dt, dl.sub-nav dd
	{float: left; display: inline; 
	font-size: 15px;
	/*line-height: 24px;*/	/* important when window is narrow and sub-menu occupies more than one line	*/
	line-height: 30px;	/* increased Dec 2021 due to Google complaining about usability & button sizes	*/
	}
dl.sub-nav dt {color: #999; font-weight: normal;}
/* amr: we can reduce the border radius if we prefer square to rounded corners		*/
/* amr: here are the colours for sub-menu. the second padding figure controls horizontal spacing		*/
dl.sub-nav dd a
	{color: #333;
	text-decoration: none;
	margin-left: 3px; padding: 5px 5px; -webkit-border-radius: 12px; -moz-border-radius: 12px;
	background: #f4f4f4;
	}
dl.sub-nav dd a:hover { background: #dcdcdc; }
dl.sub-nav dd.active a { background: #ffcc00; color: white; }

/* button	*/
.button
	{-webkit-appearance: none;
	-moz-appearance: none;
	border-radius: 0;
	border-style: solid;
	border-width: 0;
	cursor: pointer;
	font-weight: normal;
	line-height: normal;
	margin: 0 0 1.25rem;
	position: relative;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	padding: 12px;
	font-size: 1rem;
	background-color: #f4f4f4;
	border-color: #007095;
	color: #333;
	transition: background-color 300ms ease-out;
	}
.button:hover
	{background-color: #dcdcdc;
	color: black;
	}

.buybutton
	{-webkit-appearance: none;
	-moz-appearance: none;
	border-radius: 5;
	border-style: solid;
	border-width: 2;
	cursor: pointer;
	font-weight: normal;
	line-height: normal;
	margin: 0 0 0 0;
	position: relative;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	padding: 6px;
	font-size: 1.5rem;
	background-color: #ffe0c0;		/* pale orange */
	border-color: #007095;
	color: #333;
	transition: background-color 300ms ease-out;
	}
.buybutton:hover
	{background-color: #f0d0b0;
	color: black;
	}

/* Lists ---------------------- */
ul.nice, ol.nice { list-style: none; margin: 0; }
ul.nice li, ol.nice li { padding-left: 13px; position: relative; }
ul.nice li span.bullet, ul.nice li span.number, ol.nice li span.bullet, ol.nice li span.number { position: absolute; left: 0; top: 0; color: #ccc; }

/* Link List */
ul.link-list { margin: 0 0 17px -22px; padding: 0; list-style: none; overflow: hidden; }
ul.link-list li { list-style: none; float: left; margin-left: 22px; display: block; }
ul.link-list li a { display: block; }

/* Video - Mad props to http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ ---------------------- */
.flex-video { position: relative; padding-top: 25px; padding-bottom: 67.5%; height: 0; margin-bottom: 16px; overflow: hidden; }
.flex-video.widescreen { padding-bottom: 57.25%; }
.flex-video.vimeo { padding-top: 0; }
.flex-video iframe, .flex-video object, .flex-video embed, .flex-video video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) { .flex-video { padding-top: 0; } }

/* Tables ---------------------- */

table { background: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; margin: 0 0 18px; border: 1px solid #ddd; }
table thead, table tfoot { background: #f5f5f5; }
table thead tr th, table tfoot tr th, table tbody tr td, table tr td, table tfoot tr td { text-align: left; }
table thead tr th, table tfoot tr td { padding: 8px 10px 9px; font-weight: bold; color: #222; }
table thead tr th:first-child, table tfoot tr td:first-child { border-left: none; }
table thead tr th:last-child, table tfoot tr td:last-child { border-right: none; }
table tbody tr.even, table tbody tr.alt { background: #f9f9f9; }
table tbody tr:nth-child(even) { background: #f9f9f9; }
table tbody tr td { color: #333; padding: 9px 10px; vertical-align: top; border: none; }
table.nolines {border:none;}

/* amr: margin-top controls space between main banner image and main menu		*/
.nav-bar { height: 40px; background: #4d4d4d; margin-top: 0px; padding: 0; }
.nav-bar > li { float: left; display: block; position: relative; padding: 0; margin: 0; border: 1px solid #333333; border-right: none; line-height: 38px; -webkit-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset; -moz-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset; box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset; }
.nav-bar > li:first-child { -webkit-box-shadow: 0 0 0; -moz-box-shadow: 0 0 0; box-shadow: 0 0 0; }
.nav-bar > li:last-child { border-right: solid 1px #333333; -webkit-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset, 1px 0 0 rgba(255, 255, 255, 0.2); -moz-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset, 1px 0 0 rgba(255, 255, 255, 0.2); box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset, 1px 0 0 rgba(255, 255, 255, 0.2); }
/*.nav-bar > li.active { background: #2ba6cb; border-color: #2284a1; }
.nav-bar > li.active > a { color: white; cursor: default; }
.nav-bar > li.active:hover { background: #2ba6cb; cursor: default; }*/

/* amr: colours for main nav bar		*/
.nav-bar > li.active { background: #ffcc00; border-color: #f3aa00; }
.nav-bar > li.active > a { color: white; cursor: default; }
.nav-bar > li.active:hover { background: #ffcc00; cursor: default; }

.nav-bar > li:hover { background: #333333; }
.nav-bar > li a { color: #e6e6e6; }
.nav-bar > li ul { margin-bottom: 0; }
.nav-bar > li > a:first-child { position: relative; padding: 0 20px; display: block; text-decoration: none; font-size: 14px; }
.nav-bar > li > input { margin: 0 10px; }
.nav-bar.vertical { height: auto; margin-top: 0; }
.nav-bar.vertical > li { float: none; border-bottom: none; }

/* amr: this controls when to switch the main menu to multi-line as window width gets smaller		*/
@media only screen and (max-width: 500px)
	{ .nav-bar { height: auto; }
  .nav-bar > li { float: none; display: block; border-right: none; }
  .nav-bar > li > a.main { text-align: left; border-top: 1px solid #ddd; border-right: none; }
  .nav-bar > li:first-child > a.main { border-top: none; }
	}

/* Standard Forms ---------------------- */
form { margin: 0 0 19.416px; }

.row form .row { margin: 0 -6px; }
.row form .row .column, .row form .row .columns { padding: 0 6px; }
.row form .row.collapse { margin: 0; }
.row form .row.collapse .column, .row form .row.collapse .columns { padding: 0; }

label { font-size: 14px; color: #4d4d4d; cursor: pointer; display: block; font-weight: 500; margin-bottom: 3px; }
label.right { float: none; text-align: right; }
label.inline { line-height: 32px; margin: 0 0 12px 0; }

@media only screen and (max-width: 767px) { label.right { text-align: left; } }
.prefix, .postfix { display: block; position: relative; z-index: 2; text-align: center; width: 100%; padding-top: 0; padding-bottom: 0; height: 32px; line-height: 31px; }

span.prefix, span.postfix { background: #f2f2f2; border: 1px solid #cccccc; }

.prefix { left: 2px; -moz-border-radius-topleft: 2px; -webkit-border-top-left-radius: 2px; border-top-left-radius: 2px; -moz-border-radius-bottomleft: 2px; -webkit-border-bottom-left-radius: 2px; border-bottom-left-radius: 2px; }

.postfix { right: 2px; -moz-border-radius-topright: 2px; -webkit-border-top-right-radius: 2px; border-top-right-radius: 2px; -moz-border-radius-bottomright: 2px; -webkit-border-bottom-right-radius: 2px; border-bottom-right-radius: 2px; }

input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea { border: 1px solid #cccccc; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.75); display: block; font-size: 14px; margin: 0 0 12px 0; padding: 6px; height: 32px; width: 100%; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear; transition: all 0.15s linear; }
input[type="text"].oversize, input[type="password"].oversize, input[type="date"].oversize, input[type="datetime"].oversize, input[type="email"].oversize, input[type="number"].oversize, input[type="search"].oversize, input[type="tel"].oversize, input[type="time"].oversize, input[type="url"].oversize, textarea.oversize { font-size: 18px !important; font-size: 1.8rem !important; }
input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="time"]:focus, input[type="url"]:focus, textarea:focus { background: #fafafa; outline: none !important; border-color: #b3b3b3; }
input[type="text"][disabled], input[type="password"][disabled], input[type="date"][disabled], input[type="datetime"][disabled], input[type="email"][disabled], input[type="number"][disabled], input[type="search"][disabled], input[type="tel"][disabled], input[type="time"][disabled], input[type="url"][disabled], textarea[disabled] { background-color: #ddd; }

textarea { height: auto;}

select { width: 100%; }

@media only screen and (max-width: 767px) { input[type="text"].one, textarea.one { width: 100% !important; }
  input[type="text"].two, textarea.two { width: 100% !important; }
  input[type="text"].three, textarea.three { width: 100% !important; }
  input[type="text"].four, textarea.four { width: 100% !important; }
  input[type="text"].five, textarea.five { width: 100% !important; }
  input[type="text"].six, textarea.six { width: 100% !important; }
  input[type="text"].seven, textarea.seven { width: 100% !important; }
  input[type="text"].eight, textarea.eight { width: 100% !important; }
  input[type="text"].nine, textarea.nine { width: 100% !important; }
  input[type="text"].ten, textarea.ten { width: 100% !important; }
  input[type="text"].eleven, textarea.eleven { width: 100% !important; }
  input[type="text"].twelve, textarea.twelve { width: 100% !important; } }

/* amr: main banner image */
.header-image{
	margin: 0;
	padding: 0;
	width: 100%;
	/*width: 100%; no, don't stretch it beyond its natural size */
}

/* use this for System Requirements	*/
p.note_title{color:#666666; font-weight:bold; font-style:italic; margin-top:10px; margin-bottom:0px;}

/* copyright messages	*/
p.copyright{font-style:italic;}

/* small things	*/
.smallbody {font-size:12px;}

/* for wrapping around tables that may be too wide when the screen is narrow.
this way, the table alone will scroll from left to right while the page stays still	*/
div.contained_table {overflow-x: auto;}

div.notefrequencies_table
	{width:100%;
	overflow-x: auto;
	margin-top: 0.7em;
	margin-bottom: 0;
	}
.notefrequencies_table table
	{margin-left: auto;
	margin-right: auto;
	}
.notefrequencies_table td
	{font-size:13px;
	width:41px;
	text-align: center;
	}
.notefrequencies_table th
	{font-size:15px;
	width:41px;
	}

/* Social links at the bottom of some pages		*/
.SocialLinks .slpair
	{float: left;
	}

.SocialLinks a
	{display: block;
	height: 2.2em;
	padding: 0.2em 0.8em;		/* top&bottom then left&right		*/
	vertical-align: middle;
	}

.SocialLinks img
	{vertical-align: middle;
	}

/* the price table on the Buy page		*/
table.pricetable
	{width: 250px;
	border: 1px solid black;
	}

table.pricetable td
	{margin: 5px;
	padding: 5px;
	border: 1px solid black;
	}

/* the Buy Now table on the Buy page		*/
table.buynow_table
	{width: 100%;
	border: 1px solid black;
	}

table.buynow_table td
	{margin: 5px;
	padding: 5px;
	border: 1px solid black;
	}

ol.faq li {font-style: italic; font-weight: bold;}		/* just the numbers	*/
ol.faq h3 {font-style: normal; display: inline;}
ol.faq p {font-style: normal; font-weight: normal;}

/* sometimes the FAQs contain unordered lists	*/
ol.faq ul li {font-style: normal; font-weight: normal;}

/* this for benefit of Google custom search, see
http://stackoverflow.com/questions/30843561/css-issue-with-styling-the-google-custom-search-box#30843711
here we override some of the styles above, else it doesn't display right.			*/
.cse .gsc-search-button input.gsc-search-button-v2, input.gsc-search-button-v2
	{-webkit-box-sizing: border-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	}
.gsc-input td { padding: 0px; padding-right: 12px; }
.gsc-input table { border: none; }
.gsc-input input[type="text"] { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;  }

/* paragraph with no bottom margin	*/
p.compact {margin-bottom: 0;}

/* simple indent	*/
.tab { margin-left: 30px; }

table.singleborder
	{border: 1px solid black;
	border-collapse: collapse;
	}

table.singleborder td, table.singleborder th
	{border: 1px solid black;
	padding: 5px 5px 2px 5px;
	margin: 2px;
	border-collapse: collapse;
	}

table.pedals td, table.pedals tr
	{height: 180px;
	}

table.pedals img
	{/* width: 100%; */
	height: 180px;
	}

/* for some insane reason we have to set the width else if there is a lot of text it widens the
cell and squashes the image out of shape. Even though here is plenty of vertical room and no
shortage of places to break the line.	*/
table.pedals p
	{margin-bottom: 0;
	width: 400px;
	}