// Place all the styles related to the profile controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
@font-face {
  font-family: 'BitterRegular';
  src: url('../fonts/bitter-regular-webfont.eot');
  src: url('../fonts/bitter-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/bitter-regular-webfont.woff') format('woff'), url('../fonts/bitter-regular-webfont.ttf') format('truetype'), url('../fonts/bitter-regular-webfont.svg#BitterRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'CollegeRegular';
  src: url('../fonts/college-webfont.eot');
  src: url('../fonts/college-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/college-webfont.woff') format('woff'), url('../fonts/college-webfont.ttf') format('truetype'), url('../fonts/college-webfont.svg#CollegeRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'AthleticRegular';
  src: url('../fonts/athletic-webfont.eot');
  src: url('../fonts/athletic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/athletic-webfont.woff') format('woff'), url('../fonts/athletic-webfont.ttf') format('truetype'), url('../fonts/athletic-webfont.svg#AthleticRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

.input, .input_readonly {
  border: none;
}

.full_name {
  padding-top: 5px;
  font-family: 'Amatic SC', cursive;
  font-size: 60px;
  color: #FFF;
  width: 300px;
  height: 80px;
  overflow: hidden;
}

.major {
  font-family: 'Metrophobic', sans-serif;
  font-size: 25px;
  font-weight: normal;
  text-transform: uppercase;
  color: #FFF;
}

.level_text {
  font-family: 'Metrophobic', sans-serif;
  font-size: 30px;
  font-weight: normal;
  text-transform: uppercase;
  text-align: center;
  color: #007594;
  padding-top:20px;
}

.stat_numbers {
  font-family:'CollegeRegular', Arial, Helvetica, sans-serif;
}

.avatar_portal {
  position: absolute;
  left: 400px;
  top: 0px;
  width: 251px;
  height: 688px;
  background-color: #eee;
}

.avatar {
  position: absolute;
  width: 251px;
  height: 688px;
}

.avatar_stats {
  position: absolute;
  left: 20px;
  top: 20px;
}

.avatar_controls {
  position:absolute;
  left: 395px;
  top: 780px;
  font-family:Arial, Helvetica, sans-serif;
  color:#19546E;
  text-align: center;
  font-weight:bold;
  width: 205px;
}

.user_states {
  margin-top:20px;
}

.wardrobe_options {
}

.wardrobe_categories {
}

#user_stats {
  margin-top:35px;
  font-family: 'Metrophobic', sans-serif;
  word-spacing:5px;
  font-size: 25px;
}

.stats_container{
  float:left;
  width:300px;
  height:150px;
  margin-bottom: 20px;
}

.stats_container div{
  margin-top:10px;
  float:left;
  width:280px;
}

.avatar_level {
  position: absolute;
  margin-top: -15px;
  font-size: 128px;
  color: #fd8900;
  text-align: center;
  width: 138px;
}

.stats_container #quest_points {
  position: absolute;
  padding-top: 15px;
  font-size: 128px;
  color: #ffb619;
}

.stats_container #badge_count {
  background-image:url("/images/ui/badge.png");
  background-repeat:no-repeat;
  background-position:0 2px;
  padding: 50px 0 0 35px;
  float:left;
  width:110px;
  height:100px;
  color:#67441B;
  font-size:50px !important;
  text-shadow: 0px -1px 10px #fff; /* horizontal-offset vertical-offset 'blur' colour */
  -moz-text-shadow: 0px -1px 10px #fff;
  -webkit-text-shadow: 0px -1px 10px #fff;
}

.stats_container #level_meter {
  width:280px;
  background-image:url("/images/ui/lvlmter.png");
  height:51px;
  word-spacing:5px;
  color:#3393B1;
}

.stats_container #level_meter #progressbar{
  background-image:url("/images/ui/prgsbar.png");
  background-repeat:repeat-x;
  width:0px;
  margin:3px auto auto 2px;
  height:45px;
}

#progressbar #progress_stats {
  width:268px;
  text-align:center;
  font-size:20px;
  text-transform:uppercase;
}

#subcategory_wrapper {
  overflow:hidden;
  width:230px;
  height:529px;
  left:180px;
  margin-top:50px;
  margin-left:19px;
  position:absolute;
}

.wardrobe_subcategories {
  position: absolute;
  z-index:-1;
}

.subcategory_scroll {
  float:left;
  height:528px;
  overflow:hidden;
  padding-left:3px;
}

.subcategory_container {
  float:left;
}

.wardrobe_item {
}

.wardrobe_categories > .wardrobe_item {
}

.wardrobe_subcategories > .wardrobe_item {
}

.selection_instructions {
  float: left;
  width: 150px;
  margin-left: 40px;
  margin-top: 50px;
  padding-top: 70px;
  text-transform:uppercase;
  font-family: 'Ubuntu Condensed', sans-serif;
  font-size:46px;
  text-align:center;
  color:#71B6CF;
}

/*.color_palette {
  position:absolute;
  width:270px;
  left:320px;
  top:600px;
  display:none;
}

.color_palette #color_palette_left_arrow {
  width:20px;
  float:left;
  padding-top:4px;
}

.color_palette  #head_color, #hair_color{
  width:300px;
  border:none;
  display:none
}

.color_palette #color_1, #color_2, #color_3, #color_4, #color_5 , #hair_color_1, #hair_color_2, #hair_color_3, #hair_color_4, #hair_color_5 {
  width:40px;
  height:40px;
  float:left;
  border:2px solid #1D4D67;
  margin-left:6px;
}

.color_palette #color_1 {
  background-color:#E5E4E2;
}

.color_palette #color_2 {
  background-color:#D8C078;
}

.color_palette #color_3 {
  background-color:#B28149;
}

.color_palette #color_4 {
  background-color:#8D6331;
}

.color_palette #color_5 {
  background-color:#553A1C;
}

.color_palette #hair_color_1 {
  background-color:#E8E7E7;
}

.color_palette #hair_color_2 {
  background-color:#E2C13A;
}

.color_palette #hair_color_3 {
  background-color:#A52121;
}

.color_palette #hair_color_4 {
  background-color:#531A1A;
}

.color_palette #hair_color_5 {
  background-color:#030000;
}*/

.clickable {
  cursor: pointer;
}

.button {
  width: 100px;
  height: 50px;
  border-radius: 10px;
  margin: 5px;
  background-color: #ddd;
}

#major_container {
  width:550px;
	margin:auto;
	float:left;
}

#major_container  ul{
  list-style:none;
}

#major_container ul li {
  display:inline;
}

#major_container ul li div{
  width:130px;
	float:left;
	text-align:center;
	margin:15px;
	font-family: 'Ubuntu Condensed', sans-serif;
}

.dialog {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 640px;
  height: 920px;
  background-image: url(/images/ui/bg_640.jpg);
  background-repeat:no-repeat;
  visibility: hidden;
}

.dialog_contents {
  padding: 50px;
  color: white;
}
.warning_popup {
	border:solid 0px #000000;
	-moz-border-radius: 16px;
	-webkit-border-radius: 16px;
	border-radius: 16px;
	-moz-box-shadow: 0px 0px 12px #333333;
	-webkit-box-shadow: 0px 0px 12px #333333;
	box-shadow: 0px 0px 12px #333333;
	background:#FFF url(../images/add_newtask_bg.jpg) repeat;
	width:40%;
	/*height:50%;*/
	margin:-25% 0 0 -25%;
	left:70%;
	top:60%;
	padding:20px 20px 40px 20px;
	position:fixed;
	height:15%;
	z-index:9998;
}
.warning_popup .heading {
	color: #3C68A3;
	font-family: 'CollegeRegular';
	font-size: 21px;
	padding: 4px 15px 0 0;
	border-bottom:#dba29c solid 1px;
	padding:0 0 5px 0;
}
.warning_popup .boxadnt {
	padding:20px;
	font-weight:bold;
	color:#5b5757;
}
.warning_popup .suggestions {
	padding-top:10px;
	color:#3C68A3;
}
.invalid input:required:invalid {
    /*background: white;*/
    border-color: red;
}

.invalid input:required:valid {
    border-color: #17D654 ;
}

input {
  display: block;
  margin-bottom: 10px;
}

.pull-left{
  float: left;
}

.main_footer { 
  color: white;
  font-size: 12px;
  text-align: center;
  text-decoration: none;
}

.main_footer a { 
  color: white;
  text-decoration: none;
}