/* CSS Document */
/* Built by Jack at Tristar */
/* Modified for improved browser compatibility by <a href="http://www.os-templates.com/">OS Templates</a> */

/* Reset */
*{margin:0; padding:0;}
img, img a{outline:none; border:none;}
body{background-color:#fff; color:#575757; font:81.3% "Georgia",times,serif; margin:0; padding:0;}
a, a:visited{outline:none; color:#4086c6; text-decoration:none;}
a:hover{text-decoration:underline;}

/* Modern Clear Floating Fix */

.clear:before, .clear:after{content:""; display:table;}
.clear:after{clear:both;}
.clear{zoom:1; /* For IE 6/7 (trigger hasLayout) */}

/* HTML5 Fix */

header, section, footer, aside, nav, article{display:block;}

/* Base Structure */

.bodywidth{width:960px; margin:0 auto; clear:both;}

/* General Type */

h1, h2, h3, h4, h5, h6{color:#2f2f2f; font-family:"Ubuntu",arial;}
.bold{font-weight:bold;}
.blue{color:#4086c6;}

/* Header */

#headerwrap{width:100%; background:url("../images/headerbg.jpg") repeat-x 0 0; height:117px;}
#mainheader{padding:35px 0 0 0; color:#2f2f2f; text-shadow:0 0 1px #fff;}
.logo{float:left; margin:0 10px 0 0; -webkit-transition:-webkit-transform 0.4s ease-out; -moz-transition:-moz-transform 0.4s ease-out; transition:transform 0.4s ease-out;}
.logo:hover{cursor:pointer; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); transform:rotate(360deg);}
#websitetitle{float:left; margin:-8px 0 0 0;}
#websitetitle h1{font-size:2.538em; font-weight:normal;}
#websitetitle h2{font:1.462em "Georgia"; font-style:italic; font-weight:normal; margin:-3px 0 0 0;}
#mainheader nav{float:right; font:1.615em "Ubuntu",arial,; margin:8px 0 0 0;}
#mainheader nav li{list-style-type:none; display:inline; margin:0 0 0 65px;}
#mainheader a, #mainheader:visited{color:#2f2f2f;}
#mainheader a:hover{text-decoration:none; color:#7e7e7e;}

/* Intro */

#introduction{margin-top:25px;}
#introduction h2{font-size:3.231em; font-weight:bold; margin:0 0 5px 0;}
#introduction p{font-size:1.154em; line-height:140%;}
#introleft{float:left; width:540px; margin:0 0 25px 0;}
#introquote{float:right; font-style:italic; font-size:1.15em; width:335px; background:url("../images/leftquotemark.png") no-repeat 0 0; padding:28px 0 0 45px; margin:20px 0 25px 0;}
#introduction .quotename{float:right; height:27px; background:url("../images/rightquotemark.png") no-repeat right top; margin:10px 0 0 0; padding:0 50px 0 0; font:0.9em "Ubuntu"; color:#4086c6;}
a.findoutmore, a.findoutmore:visited{padding:10px; font:0.9em "Ubuntu",arial; font-weight:bold; color:#fff; text-shadow:0 0 1px #1e5298; background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0.12,rgb(109,171,229)),color-stop(0.56,rgb(59,126,189))); background-image:-moz-linear-gradient(center bottom,rgb(109,171,229) 12%,rgb(59,126,189) 56%); background-color:#468ac9; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; margin:13px 0 0 0; float:left;}
a.findoutmore:hover{background-color:#2f2f2f; background-image:none; text-shadow:0 0 1px #000; text-decoration:none;}

/* Main Content */

#maincontent{border-top:1px #dbdbdb solid; padding:25px 0 0 0; overflow:hidden;}
#aboutleft{float:left; width:960px;}
#aboutleft h3{font-size:1.5em; font-weight:bold; margin:0 0 15px 0;}
#aboutleft h4{font-size:1.3em; font-weight:bold; margin:0 0 15px 0;}
#aboutleft p{line-height:135%; margin:0 0 15px 0;}
#articlesright{float:right; width:380px;}
#articlesright article{clear:both; margin:0 0 20px 0; overflow:hidden;}
#articlesright figure{padding:5px; border:1px #dbdbdb solid; float:left; width:119px; height:119px; margin:0 15px 0 0;}
#articlesright p{line-height:135%;}
#articlesright h5{font-size:1.3em; margin:0 0 6px 0; color:#4086c6;}
#articlesright h5:hover{color:#2f2f2f;}
a.readmore, a.readmore:visited{padding:4px; font:0.9em "Ubuntu",arial; font-weight:bold; color:#fff; text-shadow:0 0 1px #1e5298; background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0.12,rgb(109,171,229)),color-stop(0.56,rgb(59,126,189))); background-image:-moz-linear-gradient(center bottom,rgb(109,171,229) 12%,rgb(59,126,189) 56%); background-color:#468ac9; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; margin:10px 0 0 0; float:left;}
a.readmore:hover{background-color:#2f2f2f; background-image:none; text-shadow:0 0 1px #000; text-decoration:none;}

/* Footer */

#footerwrap{width:100%; margin:20px 0 0 0; padding:30px 0; background:#2d2d2d url("../images/footerbg.jpg");}
#mainfooter{text-shadow:0 0 1px #000;}
#mainfooter nav{float:left; font-style:italic; font-size:1.1em;}
#mainfooter nav ul{margin:0; padding:0; list-style:none;}
#mainfooter li{list-style-type:none; float:left; margin:0 35px 0 0;}
#mainfooter li:last-child{margin-right:0;}
#mainfooter a, #mainfooter a:visited{color:#fff;}
.copyright{float:right; color:#b8b8b8;}

/* MEDIA QUERIES */

/* Under 960px */
@media only screen and (max-width: 980px) and (min-width: 821px) {
.bodywidth{width:800px;}
#mainheader nav{font-size:1.4em;}
#mainheader nav li{margin:0 0 0 50px;}
#introleft{width:470px;}
#introquote{width:270px;}
#introduction h2{font-size:2.85em;}
#aboutleft{width:450px;}
#articlesright{width:324px;}
#articlesright article{font-size:0.95em;}
#mainfooter{font-size:0.9em;}
#mainfooter li{margin:0 25px 0 0;}
#mainfooter li:last-child{margin-right:0;}
}

/* Under 800px */
@media only screen and (max-width: 820px) and (min-width: 621px) {
.bodywidth{width:600px;}
#mainheader{padding:40px 0 0 0;}
#mainheader nav{font-size:1.1em; margin:12px 0 0 0;}
#mainheader nav li{margin:0 0 0 25px;}
.logo{width:40px; height:40px;}
#websitetitle h1{font-size:2.3em;}
#websitetitle h2{font-size:1.2em;}
#introleft{width:600px;}
#introquote{display:none;}
#aboutleft{width:400px;}
#articlesright{width:170px;}
#articlesright figure{display:none;}
#mainfooter{font-size:0.9em;}
#mainfooter nav, .copyright{display:block; float:none; width:100%; margin-bottom:15px;}
#mainfooter li{margin:0 15px 0 0;}
#mainfooter li:last-child{margin-right:0;}
.copyright{color:#b8b8b8; margin-bottom:0;}
}

/* Under 600px */
@media only screen and (max-width: 620px) and (min-width: 501px) {
.bodywidth{width:480px;}
#mainheader{padding:25px 0 0 0;}
#mainheader nav{float:left; font-size:1.1em; margin:18px 0 0 0;}
#mainheader nav li{margin:0 30px 0 0;}
.logo{width:40px; height:40px;}
#websitetitle h1{font-size:2.3em;}
#websitetitle h2{font-size:1.2em;}
#introleft{width:480px;}
#introduction h2{font-size:2.7em;}
#introquote{display:none;}
#aboutleft{width:310px; font-size:0.9em;}
#articlesright{width:150px;}
#articlesright article{font-size:0.9em;}
#articlesright figure{display:none;}
#mainfooter{font-size:0.9em;}
#mainfooter nav, .copyright{display:block; float:none; width:100%; margin-bottom:15px;}
#mainfooter li{margin:0 15px 0 0;}
#mainfooter li:last-child{margin-right:0;}
.copyright{color:#b8b8b8; margin-bottom:0;}
}

/* Under 480px */
@media only screen and (max-width: 500px) and (min-width: 341px) {
.bodywidth{width:320px;}
#mainheader{padding:25px 0 0 0;}
#mainheader nav{float:left; font-size:1.1em; margin:18px 0 0 0;}
#mainheader nav li{margin:0 30px 0 0;}
.logo{width:40px; height:40px;}
#websitetitle h1{font-size:2.3em;}
#websitetitle h2{font-size:1.2em;}
#introleft{width:320px; font-size:0.8em;}
#introduction h2{font-size:2.3em;}
#introquote{display:none;}
#aboutleft{width:320px; font-size:0.9em;}
#articlesright{width:320px; float:left; border-top:1px #dbdbdb solid; padding:20px 0 0 0; margin:10px 0 0 0;}
#articlesright article{font-size:0.9em;}
#articlesright figure{display:none;}
#mainfooter{font-size:0.8em;}
#mainfooter nav, .copyright{display:block; float:none; width:100%; margin-bottom:15px;}
#mainfooter li{margin:0 6px 0 0;}
#mainfooter li:last-child{margin-right:0;}
.copyright{color:#b8b8b8; margin-bottom:0;}
}

/* Under 320px */
@media only screen and (max-width: 340px) and (min-width: 5px)  {
.bodywidth{width:300px;}
#mainheader{padding:27px 0 0 0;}
#mainheader nav{float:left; font-size:0.9em; margin:15px 0 0 0;}
#mainheader nav li{margin:0 30px 0 0;}
.logo{width:40px; height:40px;}
#websitetitle h1{font-size:2.3em;}
#websitetitle h2{font-size:1.2em;}
#introleft{width:300px; font-size:0.8em;}
#introduction h2{font-size:2.3em;}
#introquote{display:none;}
#aboutleft{width:300px; font-size:0.9em;}
#articlesright{width:300px; float:left; border-top:1px #dbdbdb solid; padding:20px 0 0 0; margin:10px 0 0 0;}
#articlesright article{font-size:0.9em;}
#articlesright figure{display:none;}
#mainfooter{font-size:0.7em;}
#mainfooter nav, .copyright{display:block; float:none; width:100%; margin-bottom:15px;}
#mainfooter li{margin:0 6px 0 0;}
#mainfooter li:last-child{margin-right:0;}
.copyright{color:#b8b8b8; margin-bottom:0;}
}
/* Form Style */
.form_wrapper{
	background:#fff;
	border:1px solid #ddd;
	margin:0 auto;
	width:350px;
	font-size:16px;
	-moz-box-shadow:1px 1px 7px #ccc;
	-webkit-box-shadow:1px 1px 7px #ccc;
	box-shadow:1px 1px 7px #ccc;
}
.form_wrapper h3{
	padding:20px 30px 20px 30px;
	background-color:#444;
	color:#fff;
	font-size:25px;
	border-bottom:1px solid #ddd;
}
.form_wrapper form{
	display:none;
	background:#fff;
}
.form_wrapper .column{
	width:47%;
	float:left;
}
form.active{
	display:block;
}
form.login{
	width:350px;
}
form.register{
	width:550px;
}
form.forgot_password{
	width:300px;
}
.form_wrapper a{
	text-decoration:none;
	color:#777;
	font-size:12px;
}
.form_wrapper a:hover{
	color:#000;
}
.form_wrapper label{
	display:block;
	padding:10px 30px 0px 30px;
	margin:10px 0px 0px 0px;
}
.form_wrapper input[type="text"],
.form_wrapper input[type="password"]{
	border: solid 1px #E5E5E5;
	background: #FFFFFF;
	margin: 5px 30px 0px 30px;
	padding: 9px;
	display:block;
	font-size:16px;
	width:76%;
	background: 
		-webkit-gradient(
			linear,
			left top,
			left 25,
			from(#FFFFFF),
			color-stop(4%, #EEEEEE),
			to(#FFFFFF)
		);
	background: 
		-moz-linear-gradient(
			top,
			#FFFFFF,
			#EEEEEE 1px,
			#FFFFFF 25px
			);
	-moz-box-shadow: 0px 0px 8px #f0f0f0;
	-webkit-box-shadow: 0px 0px 8px #f0f0f0;
	box-shadow: 0px 0px 8px #f0f0f0;
}
.form_wrapper input[type="text"]:focus,
.form_wrapper input[type="password"]:focus{
	background:#feffef;
}
.form_wrapper .bottom{
	background-color:#444;
	border-top:1px solid #ddd;
	margin-top:20px;
	clear:both;
	color:#fff;
	text-shadow:1px 1px 1px #000;
}
.form_wrapper .bottom a{
	display:block;
	clear:both;
	padding:10px 30px;
	text-align:right;
	color:#ffa800;
	text-shadow:1px 1px 1px #000;
}
.form_wrapper a.forgot{
	float:right;
	font-style:italic;
	line-height:24px;
	color:#ffa800;
	text-shadow:1px 1px 1px #fff;
}
.form_wrapper a.forgot:hover{
	color:#000;
}
.form_wrapper div.remember{
	float:left;
	width:140px;
	margin:20px 0px 20px 30px;
	font-size:11px;
}
.form_wrapper div.remember input{
	float:left;
	margin:2px 5px 0px 0px;
}
.form_wrapper span.error{
	visibility:hidden;
	color:red;
	font-size:11px;
	font-style:italic;
	display:block;
	margin:4px 30px;
}
.form_wrapper input[type="submit"] {
	background: #e3e3e3;
	border: 1px solid #ccc;
	color: #333;
	font-family: "Trebuchet MS", "Myriad Pro", sans-serif;
	font-size: 14px;
	font-weight: bold;
	padding: 8px 0 9px;
	text-align: center;
	width: 150px;
	cursor:pointer;
	float:right;
	margin:15px 20px 10px 10px;
	text-shadow: 0px 1px 0px #fff;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-moz-box-shadow: 0px 0px 2px #fff inset;
	-webkit-box-shadow: 0px 0px 2px #fff inset;
	box-shadow: 0px 0px 2px #fff inset;
}
.form_wrapper input[type="submit"]:hover {
	background: #d9d9d9;
	-moz-box-shadow: 0px 0px 2px #eaeaea inset;
	-webkit-box-shadow: 0px 0px 2px #eaeaea inset;
	box-shadow: 0px 0px 2px #eaeaea inset;
	color: #222;
}
.myButton {
	background-color:#599bb3;
	-moz-border-radius:28px;
	-webkit-border-radius:28px;
	border-radius:28px;
	border:1px solid #29668f;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px #3d768a;
}
.myButton:hover {
	background-color:#408c99;
}
.myButton:active {
	position:relative;
	top:1px;
}
.startButton {
	background-color:#44c767;
	-moz-border-radius:28px;
	-webkit-border-radius:28px;
	border-radius:28px;
	border:1px solid #18ab29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
.startButton:hover {
	background-color:#5cbf2a;
}
.startButton:active {
	position:relative;
	top:1px;
}
.ui-state-highlight{border:1px solid #dad55e;background:#fffa90;color:#777620}
/*** Table Styles **/

.table-fill {
  background: white;
  border-radius:3px;
  border-collapse: collapse;
  height: 320px;
  margin: auto;
  max-width: 600px;
  padding:5px;
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: float 5s infinite;
}
 .table-que {
  background: white;
  border-radius:3px;
  border-collapse: collapse;
  height: 320px;
  margin: auto;
  max-width: 100%;
  padding:5px;
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: float 5s infinite;
}
th {
  color:#D5DDE5;;
  background:#1b1e24;
  border-bottom:4px solid #9ea7af;
  border-right: 1px solid #343a45;
  font-size:14px;
  font-weight: 100;
  padding:24px;
  text-align:left;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  vertical-align:middle;
}

th:first-child {
  border-top-left-radius:3px;
}
 
th:last-child {
  border-top-right-radius:3px;
  border-right:none;
}
  
tr {
  border-top: 1px solid #C1C3D1;
  border-bottom-: 1px solid #C1C3D1;
  color:#666B85;
  font-size:16px;
  font-weight:normal;
  text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}
 

tr:first-child {
  border-top:none;
}

tr:last-child {
  border-bottom:none;
}
 
/*tr:nth-child(odd) td {
  background:#EBEBEB;
}*/
 
/*tr:nth-child(odd):hover td {
  background:#4E5066;
}*/

tr:last-child td:first-child {
  border-bottom-left-radius:3px;
}
 
tr:last-child td:last-child {
  border-bottom-right-radius:3px;
}
 
td {
  background:#FFFFFF;
  padding:20px;
  text-align:left;
  vertical-align:middle;
  font-weight:300;
  font-size:14px;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
  border-right: 1px solid #C1C3D1;
}

td:last-child {
  border-right: 0px;
}

th.text-left {
  text-align: left;
}

th.text-center {
  text-align: center;
}

th.text-right {
  text-align: right;
}

td.text-left {
  text-align: left;
}

td.text-center {
  text-align: center;
}
td.text-right {
  text-align: right;
}