/*------------------------------------------------------------------
[Master Stylesheet]

Project:	Jewpiter
Version:	1.1 (Full Width Photo)
Primary use:	Website
-------------------------------------------------------------------*/

/*----- RESET -----*/
@import url('reset.css');

/*-----  PNG Fix for IE6  -----*/
.ie6 * { behavior: url(iepngfix.htc); }

/*----- BASIC -----*/

body {
	font-size: 62.5%; /* Resets 1em to 10px */
	font-family: Helvetica, Arial, sans-serif;
	color: #111;
	text-align: center;
	margin: 0;
	padding: 0; 
	}
a, a:visited { color: #008FA0;	text-decoration: none; }
a:hover, a:active {	/*color: #0d545d; */ color: #0a3237; text-decoration: underline; }

h1, h2, h3, h4, h5, h6 { font-family: Helvetica, Arial, sans-serif; font-weight: bold; padding: 0.8em 0 0.4em 0; color: #111; }
h1 { font-size: 2.5em; }
h2 { font-size: 2.5em; }
h3 { font-size: 1.7em;	}
h3.comments { padding: 0; margin: 40px auto 20px;	}
h4 { font-size: 1.5em; }
h5 { font-size: 1.4em; }
h6 { font-size: 1.3em; }

h2 {  
	font: bold 280%/100% Arial, Helvetica, sans-serif;
	position: relative;
	color: #333;
	letter-spacing: -2px; }
h2 span {
	background: url(images/gradient2.png) repeat-x;
	position: absolute;
	display: block;
	width: 100%;
	height: 24px;
}
.ie6 h2 span{ background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/gradient.png', sizingMethod='scale'); }
.ie7 h2 span { width: 650px; }
h2.details2 { font-size: 330%; }
h2.detailspage { font-size: 330%; }

/*----- WRAPPER/Primary Content -----*/
#wrapper { width: 940px; margin: 0 auto; }


/*----- HEADER -----*/

#header { height: 100px; }
#header h1 { background: url(images/logo-jewpiter.gif) no-repeat; padding: 0; margin-top: 8px; margin-left: 30px; }
#header h1 a { width: 154px; height: 95px; display: block; text-indent: -999em;}


ul#nav { list-style: none; float: right; font-size: 2em; margin-top: 8px; }
#nav li { float: left; line-height: 65px; white-space: nowrap; }
#nav li a {	display: block;	color: #a0a0a0; text-decoration: none;	padding: 4px 17px 5px 17px;	margin:0; border-bottom: 0;	}
#nav li a:hover{ color: #111; text-decoration: underline; background: url(images/nav-over.jpg) repeat-x;	}


ul#nav2 { list-style: none; float: right; font-size: 1.4em; margin-top: 8px; }
#nav2 li { float: left; white-space: nowrap; }
#nav2 li a {	display: block;	color: #a0a0a0; text-decoration: none;	padding: 15px 17px 5px 17px;	margin:0; border-bottom: 0;	}
#nav2 li a:hover{ color: #111; text-decoration: underline; background: url(images/nav-over.jpg) repeat-x;	}

/*----- LOGIN TAB -----*/

#login {  position: relative; left: 780px; top: 0; width: 165px; line-height:normal; font-size: 12px; font-weight: bold;}
.ie #login { left: 380px; }
#login p { font-weight: normal; float: left; padding-top: 5px; color: #aaa; }
#login ul { margin:0; padding:0 0 20px 0; list-style:none; }
#login li { display:inline; margin:0; padding:0; }
#login a { float:right; background: url(images/tab-left.gif) no-repeat left bottom; margin:0;  padding: 0 0 0 5px; text-decoration:none; }
#login a span { float:right; display:block; background:url(images/tab-right.gif) no-repeat right bottom; padding:6px 15px 6px 6px; color:#24618E; }
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#login a span {float:none;}
/* End IE5-Mac hack */
#login a:hover span { color:#fff; }
#login a:hover { background-position:0% -15px; }
#login a:hover span { background-position:100% -15px; }

#login2 {  position: relative; left: 630px; top: 0; width: 300px; line-height:normal; font-size: 12px; font-weight: bold; }
.ie #login2 { left: 315px; }
#login2 p { font-weight: normal; float: left; padding-top: 5px; color: #aaa; }
#login2 ul { margin:0; padding:0 0 5px 0; list-style:none; }
#login2 li { display:inline; margin:0; padding:0; }
#login2 a { float:right; background: url(images/tab-left.gif) no-repeat left bottom; margin:0;  padding: 0 0 0 5px; text-decoration:none; }
#login2 a span { float:right; display:block; background:url(images/tab-right.gif) no-repeat right bottom; padding:6px 15px 6px 6px; color:#24618E; }
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#login2 a span {float:none;}
/* End IE5-Mac hack */
#login2 a:hover span { color:#fff; }
#login2 a:hover { background-position:0% -15px; }
#login2 a:hover span { background-position:100% -15px; }

/*----- FOOTER -----*/

#footer {
	margin: 20px auto 0 auto;
	padding-top: 10px;
	width: 100%;
	clear: both;
	color: /*#c9c9c9*/ #888;
	font-size: 1.1em;
	}
#footer p { line-height: 1.4em; clear: left; }

#footer ul { width: 370px; margin: 0 auto; }
#footer li { float: left; padding: 10px; border-right: 1px dotted #ccc; }
#footer li.last { border: none; }

.copyright a, .copyright a:visited { color: #888; text-decoration: underline; }
.copyright a:hover { color: #222; }

/*----- IMAGE Defaults -----*/

/* These styles apply to general image usage; specific style handle their own images. */
p img {	padding: 0;	max-width: 100%; }
a img {	border: none; }
img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}
img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}
img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}
.alignright { float: right;	}
.alignleft { float: left; }

/*----- MAIN PAGE -----*/


#ler { width: 940px; text-align: left; color: #173a6a; font-size: 15px; white-space: nowrap; padding-left: 33px;}
#ler p { margin: 0; width: 90px; height: 80px; padding-top: 35px; }
#ler img { margin-bottom: 4px; }
#ler img, #ler p { float: left; }
#ler img { margin-right: 10px; }
#ler span { font-size: 12px; }

#ler-sub { width: 221px; float: right; text-align: left; color: #173a6a; font-size: 15px; margin-right: 25px; }
#ler-sub { float: left; margin-top: 55px; }
#ler-sub p { margin-left: 20px; margin-bottom: 10px; }
#ler-sub img { margin-bottom: 4px; }
#ler-sub span { font-size: 12px; }

#wrapper hr { background: url(images/hr.gif) no-repeat; height: 1px; clear: both; display: block; border: 0; }
#wrapper hr.top { margin-top: 15px; }
.continue { font-size: 24px; margin: 10px; color: #173a6a; padding-right: 35px; }
.continue a:active, .continue a:visited, .continue a:hover { color: #fff; } /* for .btn elements */
.continue a.light { color: #888; }
.continue a.light:hover { color: #222; }
.continue .btn { margin-right: 5px; font-size: 16px; }

.btnpanel {float: right; width: 300px; }


#callout-photo { float: right; position: relative; top: -80px; }
/*----- DETAILS PAGE -----*/
#subpage { margin-top: 15px; }
#detailstext, #signuptext { width: 700px; font-size: 1.3em; text-align: left; margin-left: 250px;}
#detailstext p, #signuptext p { margin: 8px 0; line-height: 1.2em; font-size: 1.1em; }

.sectionspecs { margin: 0 0 0 25px; }
#detailstext h3 { font-size: 1.2em; }
#detailstext .sectionspecs h6 { padding: 0; margin: 0; line-height: 0.9em; color: #373f44; }
#detailstext .sectionspecs p { color: #4c4c4c; font-size: 0.9em; line-height: 1.3em; padding: 0; margin: 2px 0 10px 0; }
.imgplaceholder { background-color: #aaa; color: #555; text-align: center; }
#detailstext .imgplaceholder p { padding-top: 20px; }
.examplechart { float: right; margin: 0 0 10px 10px; }
.examplechart { text-align: center; font-size: 0.9em; font-style: italic; color: #888; }

#milesTable, #exampleTable { width: 350px; }

#milesTable { text-align: center; border: 0;  color: #4c4c4c; margin-bottom: 10px;  margin-right: 10px; }
#milesTable td { padding: 5px; border: 1px solid #ddd; }
#milesTable span { font-size: 10px; color: #8c8c8c; }

#exampleTable { text-align: center; border: 0; color: #4c4c4c; margin-bottom: 20px; font-size: 11px; }
#exampleTable td { padding: 2px; border: 1px solid #ddd; }
#exampleTable span { font-size: 10px; color: #777; }
#exampleTable .activity { text-align: left; padding-left: 5px; }
#exampleTable .total { color: #900; }
#exampleTable .bottom { border: none; }

#earn-disclaimer { font-size: 11px; margin-bottom: 30px; font-style: italic; }

#detailstext ol li { list-style-type: decimal; padding-left: 10px; margin-left: 30px; margin-top: 10px; }

/*----- v2 DETAILS PAGE -----*/

#detailstext2 { width: 400px; font-size: 1.3em; text-align: left; margin-left: 500px;}
#detailstext2 p { margin: 8px 0 12px 0; line-height: 1.4em; font-size: 1.2em; }

#detailstext2 .sectionspecs { margin: 0; }
#detailstext2 h3 { font-size: 1.2em; }
#detailstext2 .sectionspecs h6 { padding: 0 0 0.8em 0; margin: 0; line-height: 0.9em; color: #373f44; }
#detailstext2 .sectionspecs p { color: #4c4c4c; font-size: 1em; line-height: 1.3em; padding: 0; margin: 2px 0 10px 0; }
.imgplaceholder { background-color: #aaa; color: #555; text-align: center; }
#detailstext2 .imgplaceholder p { padding-top: 20px; }
#detailstext2 ol li { list-style-type: decimal; padding-left: 5px; margin-left: 25px; margin-top: 10px; }
#detailstext2 ul { list-style-type: disc; padding-left: 5px; margin-left: 25px; margin-top: 10px; margin-bottom: 15px; color: #4c4c4c; }
#detailstext2 ul li { line-height: 1.3em; }


/*----- MEMBERS DETAIL SECTIONS -----*/

#membersdetails { width: 600px; font-size: 1.3em; text-align: left; margin-left: 200px;}
#membersdetails p { margin: 8px 0; line-height: 1.4em; font-size: 1.2em; }

#membersdetails .sectionspecs { margin: 0; }
#membersdetails .sectionspecs h6 { padding: 0; margin: 0; line-height: 0.9em; color: #373f44; }
#membersdetails .sectionspecs p { color: #4c4c4c; font-size: 0.9em; line-height: 1.3em; padding: 0; margin: 2px 0 10px 0; }
.imgplaceholder { background-color: #aaa; color: #555; text-align: center; }
#membersdetails .imgplaceholder p { padding-top: 20px; }
#membersdetails ol li { list-style-type: decimal; padding-left: 5px; margin-left: 25px; margin-top: 10px; }
#membersdetails small { margin: 0; padding: 0; color: #777; font-size: 0.8em; }
#membersdetails .note { font-size: 1em; color: #777; }

#media-classes { width: 800px; font-size: 1.3em; text-align: left; margin-left: 100px;}
#media-classes p { margin: 8px 0; line-height: 1.4em; font-size: 1.2em; }
#media-classes ol li { list-style-type: decimal; padding-left: 5px; margin-left: 25px; margin-top: 10px; }
#media-classes small { margin: 0; padding: 0; color: #777; font-size: 0.8em; }
#media-classes .note { font-size: 1em; color: #777; }
#media-classes h4 { line-height: 1em; padding-bottom: 0; margin-bottom: 0; clear: left; }
#media-classes img { float: left; margin-right: 10px; }

.memberspecs  { margin: 0; }
.memberspecs  h6 { padding: 0; margin: 0; line-height: 0.9em; color: #373f44; }
.memberspecs p { color: #4c4c4c; font-size: 0.9em; line-height: 1.3em; padding: 0; margin: 2px 0 10px 0; }

.memberspecs ul, .memberspecs ol { margin: 10px 25px; }
.memberspecs ol li { list-style-type: decimal; margin-bottom: 5px; }
.memberspecs ul li { list-style-type: disc; margin-bottom: 5px; }
.memberspecs ul ul, .memberspecs ol ol, .memberspecs ol ul, .memberspecs ul ol { margin: 10px 0 10px 20px; }
.memberspecs ul ul li { list-style-type: circle; }
.memberspecs ol ol li { list-style-type: lower-alpha; }

/*----- MEMBERS CONTROL PANEL  -----*/
#memberlogin { background: url(images/login-bg.jpg) no-repeat; padding-top: 7px; font-size: 11px; margin: 10px auto;width: 450px; height: 179px;  }
#memberlogin fieldset { border: none; width: 450px; margin: 15px auto; }
#memberlogin .note { color: #888; font-size: 11px; font-style: italic; padding: 3px 0 10px 20px; }
#memberlogin fieldset p { margin: 15px 0; font-size: 1.3em; }
#memberlogin label {
  float:left;
  width: 140px;
  margin-right: 7px;
  margin-top: 2px;
  padding-top:3px;
  text-align:right;
  font-weight:bold;
  }
#memberlogin label.small {font-size: 0.7em; } 
#memberlogin input, #memberlogin textarea, #memberlogin select { margin-top: 1px; }
#memberlogin input { width: 240px; }
#memberlogin .button { width: 110px; font-size: 1.5em; margin-left: 10px; }

#memberregister { background: url(images/form-bg.jpg) no-repeat; padding-top: 7px; font-size: 11px; margin: 10px auto;width: 450px; height: 384px;  }
#memberregister fieldset { border: none; width: 450px; margin: 15px auto; }
#memberregister .note { color: #888; font-size: 11px; font-style: italic; padding: 3px 0 10px 20px; }
#memberregister fieldset p { margin: 15px 0; font-size: 1.3em; }
#memberregister label {
  float:left;
  width: 145px;
  margin-right: 1px;
  margin-top: 2px;
  padding-top:3px;
  text-align:right;
  font-weight:bold;
  }
#memberregister .small {font-size: 1em; color: #777; margin-left: 180px; text-align: left; width: 240px; line-height: 1.2em; } 
#memberregister input, #memberregister textarea, #memberregister select { margin-top: 1px; }
#memberregister input { width: 240px; }
#memberregister .button { width: 110px; font-size: 1.5em; margin-left: 10px; }

.error { border: 1px solid #900; color: #900; width: 200px; margin: 5px auto; padding: 5px; background-color: #f8e0e0; font-size: 1.1em; line-height: 1.2em; }
.login-note { font-size: 1.4em; line-height: 1.2em; width: 450px; margin: 5px auto; text-align: left; }

#member-minimenu { font-size: 1.3em; width: 300px; margin: 10px auto; text-align: center; }
#member-minimenu li { border-bottom: 1px dotted #ccc; line-height: 1.5em; padding: 5px; }
#member-minimenu li.last {border: none; }

/*----- MILES SUBMISSION PAGE -----*/
#milessubmit { background: url(images/form-bg-miles.jpg) no-repeat; padding-top: 10px; margin-left: 0; font-size: 11px; height: 400px; }
#milessubmit .note { color: #888; font-size: 11px; padding: 0;  }
.ie #milessubmit .note { margin: 0 0 0 195px; }
#milessubmit .notespacer {  }
#milessubmit label {
  float:left;
  width: 190px;
  margin-right: 7px;
  margin-top: 2px;
  padding-top:3px;
  text-align:right;
  font-weight:bold;
  }
html*#milessubmit .note { padding-left: 0; } /*for Safari only */
  
#milessubmit input, #milessubmit textarea, #milessubmit select { margin-top: 1px; }
#milessubmit input, #milessubmit textarea { width: 250px; }
#milessubmit .submit { margin-left: 195px; margin-top: 7px; margin-bottom: 1em; font-size: 1.6em; width: 150px; }

/*----- SIGNUP PAGE -----*/

#jewpitersignup { background: url(images/form-bg.jpg) no-repeat; padding-top: 7px; margin-left: 30px; font-size: 11px; }
#jewpitersignup .note { color: #888; font-size: 11px; font-style: italic; padding: 3px 0 10px 20px; }
#jewpitersignup label {
  float:left;
  width: 190px;
  margin-right: 7px;
  margin-top: 2px;
  padding-top:3px;
  text-align:right;
  font-weight:bold;
  }
#jewpitersignup input, #jewpitersignup textarea, #jewpitersignup select { margin-top: 1px; }
#jewpitersignup .submit { margin-left: 120px; margin-top: 1em; font-size: 1.6em; }
.contact { background: url(images/contact-bg.jpg) no-repeat; width: 450px; height: 75px; margin-left: 30px; font-weight: bold; padding-left: 5px; }
.contact fieldset { width: 200px; float: left; font-size: 18px; margin: 15px 0 0 15px;}
.contact legend { font-size: 0.7em; padding-bottom: 3px; font-size: 15px; }

.termsnote { font-size: 0.9em; color: #6a6a6a; padding-top: 15px; padding-left: 10px; }

/*----- MEDIA PROJECTS QUIZZES -----*/
#mediaprojectquiz { background: #E8EFF9; border: 1px solid #EAEDF2; padding-top: 10px; margin-left: 0; font-size: 11px; }
#mediaprojectquiz .note { color: #888; font-size: 11px; padding: 0; margin: 0 0 0 195px; }
#mediaprojectquiz .notespacer {  }
#mediaprojectquiz label {
  float:left;
  width: 190px;
  margin-right: 7px;
  margin-top: 2px;
  padding-top:3px;
  text-align:right;
  font-weight:bold;
  }
html*#mediaprojectquiz .note { padding-left: 0; } /*for Safari only */
  
#mediaprojectquiz input, #mediaprojectquiz textarea, #mediaprojectquiz select { margin-top: 1px; }
#mediaprojectquiz input, #mediaprojectquiz textarea { width: 250px; }
#mediaprojectquiz #questionlist { margin-left: 50px; margin-top: 25px; font-size: 13px; }
#mediaprojectquiz #questionlist ol li { list-style-type: none; }
#mediaprojectquiz #questionlist label { float: none; width: auto; margin: 0; padding: 0; text-align:left; }
#mediaprojectquiz #questionlist input { width: 40px; }
#mediaprojectquiz #questionlist .mediumfield { width: 100px; }
#mediaprojectquiz #questionlist .longfield { width: 250px; }

#mediaprojectquiz .submit { margin-left: 195px; margin-top: 7px; margin-bottom: 1em; font-size: 1.6em; width: 150px; }

#wrapper hr.quiz-div { background: none; background-color: #ccc; margin: 15px 0 ; }

/*----- SCALABLE BUTTON -----*/

.btn { display: block; position: relative; background: #aaa; padding: 5px; float: right; color: #fff; text-decoration: none; cursor: pointer; }
.btn * { font-style: normal; background-image: url(images/btn2.png); background-repeat: no-repeat; display: block; position: relative; }
.btn i { background-position: top left; position: absolute; margin-bottom: -5px;  top: 0; left: 0; width: 5px; height: 5px; }
.btn span { background-position: bottom left; left: -5px; padding: 0 0 5px 10px; margin-bottom: -5px; }
.btn span i { background-position: bottom right; margin-bottom: 0; position: absolute; left: 100%; width: 10px; height: 100%; top: 0; }
.btn span span { background-position: top right; position: absolute; right: -10px; margin-left: 10px; top: -5px; height: 0; }

* html .btn span,
* html .btn i { float: left; width: auto; background-image: none; cursor: pointer; }

.btn.blue { background: #2ae; }
.btn.green { background: #2b8200; }
.btn.red { background: #cb0a00; }
.btn.pink { background: #e1a; }
.btn.light { background: #fefefe; }
.btn.light:hover { background: #aaa; }

.btn.green:hover { background-color: #1b5300; }
.btn.red:hover { background-color: #a00; }
.btn:hover { background-color: #a00; }
.btn:active { background-color: #444; }
.btn[class] {  background-image: url(images/shade.png); background-position: bottom; }

* html .btn { border: 3px double #aaa; }
* html .btn.blue { border-color: #2ae; }
* html .btn.green { border-color: #2b8200; }
* html .btn.red { background: #cb0a00; }
* html .btn.pink { border-color: #e1a; }
* html .btn:hover { border-color: #a00; }

/*----- MISC -----*/

.alt {
	background-color: #f8f8f8;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	}
strike { color: #777; }
code { font: 1.1em 'Courier New', Courier, Fixed; }
acronym, abbr, span.caps {
	font-size: 0.9em;
	letter-spacing: .07em;
	cursor: help;
	}
acronym, abbr {	border-bottom: 1px dashed #999;	}
.center { text-align: center; }
hr { display: none; }
.clear { clear: both; }