/*
 * ets-contentcss
 *
 * content styles for ets.org
 *
/* -- -- -- -- -- -- -- -- -- -- -- -- -- -- */
/*

	dark blue: #003082;
	light blue: #3072be;

	ets burgandy: #660019; (headings)
	gace heading: #830b2c;
	
	gray: #484848; (sub-head)
	light gray: #e1dada; (page background)

	page text: #0a0a0a;
	top-nav text+anchors: #666;
	light gray: #aaa ('for audience' header text)

	action button text: #333; (core-brand home page)
	action button border: #c0c0c0; (core-brand home page)
	action button text:hover #660019; (core-brand home page)

	top-nav borders: #999;

	left nav text: #333;
	left nav background: #e6e6e6;

	light gray background: #e6e6e6 (for brand home page, call to action)
	lighter gray background: #f8f8f8 (banner box)
	darer gray background: #c4cbd7 (banner box)

	important update background: #fdefbd; (right column)

	callout box background: #fffff0;
	callout box border: #999;

	callout box alert background: #fdefbd;
	callout box alert border: #772f28;

	promo wrap border: #999; (right column)

	--

	corp: #3072be;
	gre: #cc6813;
	praxis: #6a8012;
	toefl: #ea9111;
	toeic: #06674e;
	gace: #830b2c;

 */
/* -- -- -- -- -- -- -- -- -- -- -- -- -- -- */

/* -- -- -- -- -- -- -- -- -- -- -- -- -- -- */
/* content rules */

body {
	color: #0a0a0a;
	background: #e1dada;
	font-family: arial, helvetica, sans-serif;
	/* if you change the body size, you must also adjus the width in '#wrapper-center' */
	font-size: 78.7%; /* 12.6 px *//* awkward? yes, without a doubt. */
	line-height: 1.5; /* 18.9 px *//* but that was deemed the preferred size by UX */
	}

h1, h2,  h3,  h4,  h5, h6,
.heading1,
.heading2,
.heading3,
.heading4,
.heading5,	
.heading6 {
 	color: #830b2c; /* per email from kris on 02 apr 13 */
	line-height: 1.2;
	display: block;
	margin-bottom: 0.2em;
	}
	
h1,
.heading1 { font-size: 172.0%; } /* 21.6 px */

h2,
.heading2 { font-size: 142.8%; } /* 18.0 px */

h3,
.heading3 { font-size: 122.0%; } /* 15.3 px */

h4,
.heading4 { font-size: 105.0%; } /* 13.2 px */

h5,
.heading5 { font-style: italic; }

h6,
.heading6 { font-style: italic; }

#center-content h2,
#center-content h3,
#center-content h4,
#center-content h5,
#center-content h6 {
	margin-top: 1.2em; /* ~21px */ 
	}

h1 a, 
#center-content h1 a,
h2 a,  
#center-content h2 a,
h3 a, 
#center-content h3 a,
h4 a,  
#center-content h4 a,
h5 a,
#center-content h5 a,
h6 a,
#center-content h6 a  {
	color: #830b2c;
	text-decoration: none;
	}

h1 a:hover, 
#center-content h1 a:hover,
h2 a:hover,  
#center-content h2 a:hover,
h3 a:hover,  
#center-content h3 a:hover,
h4 a:hover,  
#center-content h4 a:hover,
h5 a:hover,  
#center-content h5 a:hover,
h6 a:hover,
#center-content h6 a:hover {
	text-decoration: underline;
	}

h6, h6 a { color: #0a0a0a; }

.heading1, .heading2, .heading3, .heading4, .heading5, .heading6 {
	font-weight: bold;
	/* margin-bottom: -0.2em; */
	}

.blueheading { color: #003082; }

.blueheading a { /* only on the ets home page? */
	color: #003082;
	text-decoration: none;
	}

.blueheading a:hover {
	text-decoration: underline;
	}
	
p {
	margin: 0 0 0.8em 0;
	}

p.indented35 { margin-left: 35px; } /* no idea where this actually appears */
p.indented25 { margin-left: 25px; } /* maybe only in an important update? */

/* -- -- -- -- -- -- -- -- -- -- -- -- -- -- */
/* start: anchor rules */

	a {
		color: #003082;
		white-space: normal;
		}
	a:link {}
	a:visited {}
	a:active {}
	a:hover {
		}

	/* always underline the links in the center copy of document pages */
	#center-content a { text-decoration: underline; }
	
	/* on core-brand pages, center and right copy links */
	/* should not be underlined except on hover */
	.core-brand-page #main-content a { text-decoration: none; }
	.core-brand-page #main-content a:hover { text-decoration: underline; }

	/* links in center area of main page are bold */
	.core-brand-page .column-box a { font-weight: bold; }
	
/* end: anchor rules */
/* -- -- -- -- -- -- -- -- -- -- -- -- -- -- */

.strike { text-decoration: line-through; }
.underline { text-decoration: underline; }

abbr { border-bottom: .1em dotted; cursor: help; }
acronym { border-bottom: .1em dotted; cursor: help; }

b { font-weight: bold; }
strong{ font-weight: bold; }
.text-bold { font-weight: bold; }

em { font-style: italic; }
i { font-style: italic; }
.text-italic { font-style: italic; }

cite { font-style: italic; }
dfn { font-style: italic; }
var { font-style: italic; }

del { text-decoration: line-through; }
ins { background: yellow; }

big { font-size: larger; }
.text-large { font-size: 1.5em; }
small { font-size: smaller; }
.text-small { font-size: smaller; }

.text-black { color: #0a0a0a; }

.footnote {
	margin: 1em 0;
	padding: 0;
	color: #333;
	font-size: 90%;
	}

.alert { color: #c00; }
.alert a { color: #c00; }

.asterick { color: #f00; }
.required { color: #f00; }

ul,
ol {}

h1 + ul, h1 + ol,
h2 + ul, h2 + ol {
	margin-top: 0.8em; /* lists that directly follow headers need some top margin (core-brand page, mostly) */
	}                  /* same as paragraph bottom margin */

ul li,
ol li {
	margin-left: 2.5em;
	margin-bottom: 0.8em;
	}

ul.nobullets,
ol.nobullets {
	list-style: none;
	margin-left: 0;
	}

.noindent,
.noindent li {
	margin-left: 0;
	padding-left: 0;
	}

.noindent ul li,
.noindent ol li {
	margin-left: 2.5em;
	}

ul.nospacing,
ol.nospacing {
	margin-bottom: 1.5em;
	}
ul.nospacing li,
ol.nospacing li {
	margin-bottom: 0.25em;
	}	
	
ul { list-style-type: disc; }
ul ul { list-style-type: circle; }
ul ul ul { list-style-type: disc; }

ol { list-style-type: decimal; }
ol.upper-roman { list-style-type: upper-roman; }
ol.decimal { list-style-type: decimal; }
ol.upper-alpha { list-style-type: upper-alpha; }
ol.lower-alpha { list-style-type: lower-alpha; }

ol.upper-roman { list-style-type: upper-roman; }
ol.upper-roman ol { list-style-type: upper-alpha; }
ol.upper-roman ol ol { list-style-type: decimal; }
ol.upper-roman ol ol ol { list-style-type: lower-alpha; }
ol.upper-roman ol ol ol ol { list-style-type: lower-roman; }

ol.upper-alpha { list-style-type: upper-alpha; }
ol.upper-alpha ol { list-style-type: decimal; }
ol.upper-alpha ol ol { list-style-type: lower-alpha; }
ol.upper-alpha ol ol ol { list-style-type: lower-roman; }
ol.upper-alpha ol ol ol ol { list-style-type: lower-alpha; }


dl {}
dt { 
	font-weight: bold; 
	margin-bottom: 0; 
	padding-bottom: 0; 
	}
dd {
	margin: 0 0 0 1.5em; 
	padding: 0; 
	}

/* contact lists */
dl.contact-info { 
	margin-left: 3em; 
	margin-bottom: 2em; 
	}
dl.contact-info dt { 
	float:left; 
	}
dl.contact-info dd { 
	margin-left: 5em; 
	}

/* For when you need things a little wider */
dl.contact-info-2 { 
	margin-left: 2.5em; 
	margin-bottom: 2em; 
	}
dl.contact-info-2 dt { 
	float:left; 
	white-space: normal; 
	margin-bottom: 0.8em; 
	width: 10em; 
	}
dl.contact-info-2 dd { 
	margin-left: 10em; 
	white-space: normal; 
	margin-bottom: 0.8em; 
	}


	/* -- -- -- -- -- -- -- -- -- -- -- -- -- -- */
	/* ex: /faqs */
	.faqs	dl {
			margin-left: 1.5em;
			margin-top: 0;
			}

	.faqs	dt {
			margin-bottom: 0.5em;
			font-weight: bold;
			}
	.faqs	dt:first-child {
			margin-top: 1em;
			}
	.faqs	dd+dt {
			margin-top: 2.5em;
			}

	.faqs	dd {
			margin-bottom: 0em;
			}
	.faqs	dd+dd {
			margin-bottom: 1em;
			}

	/* -- -- -- -- -- -- -- -- -- -- -- -- -- -- */

/*
---
show/hide based on the h2
---
*/
/*
	.faqs h2.faq-js:hover {
		text-decoration: underline;
		cursor: pointer;
		}

	.faqs-js dt {
		font-weight: bold;
		}
*/
	/* -- -- -- -- -- -- -- -- -- -- -- -- -- -- */
		/* added then the js adds the 'faq-js' class to the dl
		   to handle the show/hide */
/*
---
individual question show/hide
---
*/
		dl.faq-js {
			margin-left: 1.5em;
			}

		dl.faq-js dt {
			margin-bottom: 0.5em;
			cursor: pointer;
			font-weight: normal;
			}

		dl.faq-js dt:hover {
			text-decoration: underline;
			}

		dl.faq-js dt.text-bold {
			font-weight: bold;
			}
		dl.faq-js dt.text-bold:hover {
			text-decoration: none;
			}

		dl.faq-js dd+dt {
			margin-top: 0;
			margin-bottom: 0.5em;
			}

		dl.faq-js dd {
			margin-top: 0.5em;
			margin-bottom: 2em;
			margin-left: 1.5em;

			transition: all 0.5s ease 0s;
			-moz-transition: all 0.5s ease 0s; /* Firefox 4 */
			-webkit-transition: all 0.5s ease 0s; /* Safari and Chrome */
			-o-transition: all 0.5s ease 0s; /* Opera */

			}

	/* -- -- -- -- -- -- -- -- -- -- -- -- -- -- */
	
	
	
#main-content input[type="text"],
#main-content input[type="password"],
#main-content select.fancy {
	/* border: 1px solid #7b93bd; */
	margin-bottom: 0.5em;
	padding: 0.19em;
	}

#main-content #right-content input[type="text"],
#main-content #right-content input[type="password"] {
	width: 10.5em;
	}

#main-content input[type="submit"].fancy,
#main-content input[type="button"].fancy,
a.btn {
	border: 1px solid #003082;
	color: #fff;
	background: #003082;
	border-radius: 4px;
	padding: 0.35em 1em 0.25em 1em;
	margin: 0;
	min-width: 80px;
	min-height: 24px;
	font-size: 94%;
	font-weight: bold;
	text-decoration: none !important;
	}
.promo h4 + p:last-child a.btn:first-child {
	display: block;
	margin-top: 0.3em;
	padding: 0.35em 1em 0.2em 1em;
	width: 1%;
	min-height: 1px;
	white-space: nowrap;
	}	
	
.lt-ie8 a.btn,
.lt-ie9 a.btn {
	display: inline;
	margin-top: 0.3em;
	padding: 0.2em 1em;
	width: auto;
	min-height: 1px;
	white-space: nowrap;
	}	
	
#main-content input[type="submit"].fancy:hover,
#main-content input[type="button"].fancy:hover,
a.btn:hover {
	border: 1px solid #3072be;
	background: #3072be;
	cursor: pointer;
	}

#main-content input[type="text"].fancy:focus,
#main-content input[type="password"].fancy:focus,
#main-content select:focus {
	border: 1px solid #003082;
	}

	
input[aria-invalid="true"],
select[aria-invalid="true"] {
	border: 1px solid #c00;
	background: #fcc;
	}	
	

/* end: content rules */
/* -- -- -- -- -- -- -- -- -- -- -- -- -- -- */


.promo {
	}

/* home/core-brand-page promo headings are 10% larger than normal */
.container-280 .promo h1 { font-size: 182.0%; }
.container-280 .promo h2 { font-size: 152.8%; }
.container-280 .promo h3 { font-size: 132.0%; }
.container-280 .promo h4 { font-size: 115.0%; }

.promo h1, .promo h1 a,
.promo h2, .promo h2 a,
.promo h3, .promo h3 a,
.promo h4, .promo h4 a,
.promo h5, .promo h5 a,
.promo h6, .promo h6 a {
	color: #003082;
	text-decoration: none;
	}
	
.promo h1 a:hover,
.promo h2 a:hover,
.promo h3 a:hover,
.promo h4 a:hover,
.promo h5 a:hover,
.promo h6 a:hover {
	text-decoration: underline;
	}

.promo a {
	text-decoration: none;
	}
	
.promo a:hover {
	text-decoration: underline;
	}	

/* -- -- -- -- -- -- -- -- -- -- -- -- -- -- */
/* tables */	
table {
	border-collapse: collapse;
	margin: 0 0 1em 0;
	padding: 0;
	width: 100%;
	border: 1px solid #bfa777;
	}

li table {
	margin-top: 1em;
	}	

table caption{
	position: absolute;
	left: -999px;
	}
	
table tr {
	}

table th, td {
	text-align: left;
	vertical-align: top;
	padding: 0.2em 0.5em;
	}

table th {
	background: #ebe5d5;
	}

table th.as-td {
	background: #fff;
	font-weight: normal;
	}	

tr.shade th,
tr.shade th.as-td,
tr.shade td,
th.shade,
td.shade {
	background: #f0f0f0;
	}	

	
tr.subhead th {
	background: #d9e0ec;
	border-color: #bbb;
	}

tr.subhead-first th {
	background: #d9e0ec;
	border-color: #bbb;
	}
tr.subhead-nth th {
	background: #ffe;
	border-color: #bbb;
	}

tr.rowheadings th,
tr.rowheadings td {
	font-weight: bold;
	background: #d9e0ec;
	border-color: #bbb;
	}
	
table.line-v th,
table.line-v td{
	border-right: 1px solid #bfa777;
	border-left: 1px solid #bfa777;
	}

table.line-h th,
table.line-h td {
	border-top: 1px solid #bfa777;
	border-bottom: 1px solid #bfa777;
	}
	
tr.numbers th, tr.numbers td,
th.numbers, td.numbers,
th.price, td.price {
	text-align: right;
	}	

tr.centered th, tr.centered td,
th.centered, td.centered {
	text-align: center !important;
	}

tr.left th, tr.left td,
th.left, td.left {
	text-align: left !important;
	}

tr.right th, tr.right td,
th.right, td.right {
	text-align: right !important;
	}

/* tables */	
/* -- -- -- -- -- -- -- -- -- -- -- -- -- -- */	

div.important-msg-box {
	margin: 0 0 1em 0;
	padding: 1em;
	border: 1px solid #660019;
	/* background: #fffff0; */
	border-radius: 5px;
	}

div.important-msg-box h2 {
	margin: 0 1em 0.5em 1em !important;
	padding: 0 0 0 27px;
	background: url(../img/wrap/icon_alert_message.gif) no-repeat left center;
	font-size: 120%;
	color: #cc0000;
	}

div.important-msg-box p { margin: 0 1em 0.5em 1em; }
div.important-msg-box ul { margin: 0 1em; padding: 0; }
div.important-msg-box ul li { margin-bottom: 0; }
div.important-msg-box h4 { margin-left: 1em; }
	
/* -- -- -- -- -- -- -- -- -- -- -- -- -- -- */
/* this appears, as far as i can tell, only on the app home pages */

div.wrap-graybkground {
	background: #e6e6e6;
	margin: 0 20px 0 0;
	padding: 20px;
	border-radius: 6px;
	float: left;
	}

div.wrap-graybkground + div.wrap-graybkground {
	margin-right: 0;
	}

div.wrap-graybkground h2,
#main-content div.wrap-graybkground h2 {
	margin: 0;
	padding: 0;
	}

div.wrap-graybkground hr {
	margin-bottom: 1em;
	display: block;
	}

ul.in-line {
	list-style-type: none;
	margin: 20px 0 0 0; /* -10 to undo margin on 1st li */
	padding: 0;
	height: 1.5em;
	}

ul.in-line li {
	float: left;
	border-right: 1px solid #0a0a0a;
	margin: 0;
	padding: 0;
	}

ul.in-line li.l {
	border: 0;
	}

ul.in-line li a {
	display: block;
	margin: 0 10px;
	}

div.wrap-graybkground label {
	/* changes here mean changes to the margin for 'div.wrap-graybkground ul.in-line' and 'div.wrap-graybkground input[type=submit]' (below )*/
	min-width: 80px;
	margin-bottom: 1em;
	display: inline-block;
	vertical-align: top;
	content:": ";
	}
div.wrap-graybkground input.fancy[type=submit] {
	margin-left: 85px !important;
	}
div.wrap-graybkground ul.in-line {
	margin-left: 75px;
	}

div.wrap-graybkground input.text-lg-field {
	width: 17em;
	}

	
	
/* -- -- -- -- -- -- -- -- -- -- -- -- -- -- */
	
	
/* -- -- -- -- -- -- -- -- -- -- -- -- -- -- */
/* fin */