@font-face {
    font-family: 'bauserifregular';
    src: url('./fonts/bauserif-webfont.eot');
    src: url('./fonts/bauserif-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/bauserif-webfont.woff') format('woff'),
         url('./fonts/bauserif-webfont.ttf') format('truetype'),
         url('./fonts/bauserif-webfont.svg#bauserifregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

::-moz-selection { color: white; background: #127dbb; }
::selection { color: white; background: #127dbb; }

html {  background-color: #fff; }
body { width:100%; min-height:500px; overflow-x:hidden; padding:0; margin:0; font-family: 'Open Sans', sans-serif; font-size:14px; color: #2e3641; }
a { text-decoration: none; outline: 0; color: #a11313;}
strong { font-weight: bold; }
h1 { display: block; font-size: 2em; font-weight: bold; }
h2 { display: block; font-size: 1.5em; font-weight: bold; }
h3 { display: block; font-size: 1.17em; font-weight: bold; }
h4 { display: block; font-weight: bold; }
th { font-weight:bold; text-align:center; }
td, th { padding:5px; }

ul.menu-item a { color: #127dbb; }

img { margin-top:1%; margin-bottom:1%; }
li { list-style-type: disc; margin-left: 10%; padding: 5px; }
i { display:inline-block; }

blockquote { padding: 0.8em; padding-left: 2.8em; width: 100%; font-style: italic; color: #003566; border-left: 8px solid #76aad9; line-height: 1.6;
    position: relative; background: #EDEDED; }
blockquote::before{ font-family:Arial; content: "\201C"; color:#76aad9; font-size:4em; position: absolute; left: 10px; top:-10px; }
blockquote::after{ content: ''; }


.icon { margin:0; position:absolute; margin-top:4px; }

input[type=text], input[type=email], input[type=number], input[type=password], textarea, select, input[type=url] { width:auto; display: inline-block; text-align: center; padding-top: 10px; padding-bottom: 10px; 
margin: auto; position: relative; margin-top: 10px; margin-bottom: 10px; border: 1px solid; }
input[type=submit], button, a.butt { background-color: #127dbb; color: #f8fcff; border: 0; outline: 0;
cursor: pointer; border:2px solid #127dbb; min-width:100px; padding:10px; text-align:center !important; }
a.butt, button, input[type=submit] { -webkit-appearance: none; }
input[type=radio] { display:inline-block; }

.upload-btn-wrapper { position: relative; overflow: hidden; display: inline-block; cursor:pointer; }
.btn { border: 2px solid #127dbb; background-color: white; color: #2e3641; padding: 8px 20px; border-radius: 8px; font-size: 20px; font-weight: bold; cursor:pointer;}
.upload-btn-wrapper input[type=file] { font-size: 100px; position: absolute; left: 0; top: 0; opacity: 0; cursor:pointer; }

.rating-left, .left { width:49%; min-height:50px; background-color: transparent; vertical-align: top;  display:inline-block; }
.rating-right, .right { width:48%; min-height:50px; background-color:  transparent; vertical-align: top;  display:inline-block; }



.blockOverride { width:48% !important; min-height:50px !important; padding: 0px !important; } .alignRight { text-align:right !important; } .alignLeft { text-align: left !important; }
.hide { display:none !important; }

#top { background-color:#2e3641; width:100%;  max-height: 75px; color: #f8fcff; margin-bottom:1%; position:fixed; z-index:5; top: 0;}
#big { color: #fff; font-weight: bold; font-size: 1.5em; position: relative; top: 7px; }
#big a { color:#fff; position:relative; top:14px; left:10px; }
#small { display:none; cursor:pointer; }

.top-wrapper { width:95%; min-height: 50px; background-color: transparent; margin:auto; }
.top-wrapper .right { text-align:right; height:70px; line-height:70px;  margin-top:10px; }
.top-wrapper .right img { width:100%; }

.profile-pic { margin: auto; width: 50px; height: 50px; overflow: hidden; border: 2px solid #737373; display: inline-block; background-color:#fff; }
.profile-pic img { margin-top:-2px; width:100%; }
.name { position: relative; top: -16px; right: 13px; font-size: 1.15em; }

#row1 { background-color: #fff; min-height:100px; } 
#row2 { background-color: #f1f1f1;  min-height:100px; } 
#row1 .content-wrapper { background-color: #EBE7DA; color: #000; }
#row2 .content-wrapper { background-color: #f1f1f1; color: #000; }

#main-content { width: 97%; margin:auto; min-height:100px; }

#menu { position:fixed; height:100%; background: #fdfdfd; top: 70px; left: 0; padding-top: 15px; padding-right:10px; padding-left:10px; width:11%; font-size:0.9em; line-height:1.5; overflow-x:auto; }
#menu li { list-style: none; text-align:left; }


.menu-user { position:fixed; bottom:0; width:inherit; border-top:1px solid #2e3641; text-align:center; padding-top:10px; }
.menu-equal { color: #a11313; cursor:pointer; }
.submenu { display:none; }
.menu-item { cursor:pointer; margin-bottom:10px; }
.mobile-menu { z-index: 5; width: 100%; }

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

#content-wrapper { background-color: #fff; padding: 10px; width: 80%; right: 60px; position: absolute; top: 70px; }
#content-wrapper .left, #content-wrapper .right { text-align:left; background-color: transparent; min-height:500px; }

#content-wrapper .left { width:21%; }
#content-wrapper .right { width:90%; }

.sticky { background-color: #fafafa; }

.line-break { height:2px; width:100%; position:absolute; background-color: #f0f0f0; }

.writeSomething { border: 1px solid #cacaca; padding: 5px; color: #d8d8d8; font-weight: normal; margin-bottom:10px; }
.noBorder { border:0 !important; color: #a11313; }
.noBorder:hover { text-decoration:underline; }
.story { padding:5px; margin-bottom:10px; cursor:pointer; }
.story:hover { background-color: #fafafa; } 
.story .left { width:auto !important; float:left; height:auto !important;; min-height:1px !important; }
.story .right { width:auto !important; float:left; height:auto !important;; min-height:1px !important; margin-left:10px; }
.story-user img { width:100%; }
.story-name { font-size: 1.3em; display: inline-block; position: relative; }
.story-time { font-size: 0.7em; color: gray; display: inline-block; position: relative; }
.story-edit { display: inline-block; position: relative; }

.story-details { padding:5px; margin-top:60px; }
.story-files { padding:5px; }
.story-files span { color: gray; }
.story-files img { width:5%; }
.story-links { padding:5px; border-top: 1px solid #127dbb; border-bottom:1px solid #127dbb; }
.story-vote { padding-right:5px; }
.story-comments { padding-left:5px; }
.upvote { color: #a11313; }
.easyimage { width:200px; }

.story-comments {  }
.story-comments form { margin-bottom:30px; width:95%; }
.story-comments textarea { width:100%; text-align:left; border:1px solid #d3d3d3; padding-left:10px; margin-bottom:0px; }
.story-comments input { position:relative; float:right; right:-12px; }

.equal { width: 45%; display:inline-block; vertical-align:top; }
.single-full { width:95%; text-align:center; margin:auto; }
.single-full input, .single-full select { width:50%; }
#error { width:95%; margin:auto; display:block; background-color: #a11313; color:#fff; padding:10px; margin-bottom:10px; font-weight:bold; font-size:1.1em;  }

#login { margin-top:3%; text-align:center; }
#login-form { margin:auto; background-color:#fff; width:56%; padding:1%; }
#loginImage { width:8%; }
h3.error { color: #a11313; }
.login-submit { font-size: 1.25em; position: relative; display: block;  width:60%; margin:auto; padding-top:10px; padding-bottom:10px; font-weight: bold; }

#icons { margin-top: 25px; }
#icons img { margin-left: 5px; margin-right:5px; }
#icons p { font-size: 1.5em; display:inline-block; font-weight:bold; top:-20px; position:relative; }

.line-break { width: 95%; height: 2px; background-color: #222; margin-top: .5%; margin-bottom:.5%; position:relative; border:0; outline:0; }

.quote { margin:0px; padding:0px; text-align:center; }

#attendance textarea, #attendance select { display:inline-block; width:40%; margin:0; padding:0; margin-top:10px; margin-bottom:10px;  padding: 10px; }
.attendance { width:100%; border:0;  }
.attendance tr, #attendance th, #attendance td { border: 1px solid #2e3641; }
.attendance th { text-align:center; font-weight:bold; font-size:1.1em; border: 1px solid #2e3641; }
.attendance td { padding:5px; text-align:center; border: 1px solid #2e3641; }

.attendance .holiday { background-color: #d0d0d0; }
.attendance .absent { background-color: #127dbb; color:white; }


#createTask input[type=text], #task textarea, #task select { width:95%; margin:0; margin-top:10px; margin-bottom:10px; text-align:left; padding:5px; }
#createTask select { width: 97.5% }
#task-submit { width:40% !important; float:right; }
#createTask textarea { min-height:150px; }
#createTask .left { width:45%; min-height:10px; }
#createTask .right { width:45%; min-height:10px; }

#showTasks { width:100%; }
#showTasks a { color:#2e3641; }
#showTasks a:hover { text-decoration:underline; }
#showTasks tr { border:0; }
#showTasks th { padding:10px; border:1px solid #000; background-color:#2e3641; color:#fff; }
#showTasks td { padding:10px; }
.pending { background-color: #ffee99; }
.active {  }
.completed { background-color: #dadada; }
.declined { background-color: #ffcccc; }

.task-rating { margin-top:5px; margin-bottom:5px; cursor:pointer; border:1px solid #2e3641; padding:10px; }
.highlighted { background-color: #64a113; color:white; border:1px solid transparent !important; }

.objectives { margin-top: 1px; border-bottom: 1px solid #2e3641; padding: 5px; cursor: pointer; }
.objectives:hover { color: #127dbb; }

.high { background-color: #ff0000; color: #fff; } .medium { background-color: #ffff00; } .low { background-color: #008000; color:#fff; }

.task-desc { padding:5px; }

.logout { color: #a11313; display:inline-block !important; }

@media(max-width: 1150px)
{
	.content-wrapper { width: 100%; }
	#showcase .right { padding-top: 5px; }
	#showcase { background: url("./img/bg copy.jpg"); background-repeat: no-repeat; background-size: cover; background-position-y:100%; }
	.full { width: 85%; left:0; margin:auto; }
	#testy { -webkit-column-count: 3; -moz-column-count: 3; }	
	.page { font-size: 1em; width: 170px;  margin: 1.15%; margin-top: 2.5%; margin-bottom: 2.5%; }
}
@media(max-width: 934px)
{
	body { background-color: #fff; }
	.left { width: 100% !important; display:block; float:none; margin: 0px; }
	.right { width: 100% !important; display:block; float:none; margin:0px; }

	.dropdown { right: -30px; }
	
	#login-form { width: 96%; }
	#loginImage { width:40%; }
	
	#small { display:block; margin-top:10px; }
	#small img {  width:50px !important; }
	#big { display:none; }
	.top-wrapper .left { width:100px !important; display:inline-block !important; }
	.top-wrapper .right { width:auto !important; display:inline-block !important; float:right; }
	
	#menu { width:95%; z-index: -1; }
	
	#content-wrapper { width:95%; right:0px; }
	.equal { width: 95%; padding-left: 5%; }
	.menu-user { position:relative; }
	.menu-user > .equal { width:45% !important; padding:0; }
	.quote { font-size: 1em; }
	
	#showcase { background: url("./img/bg copy.jpg"); background-repeat: no-repeat; background-size: cover; background-position-y:100%; }
	#showcase .right { padding-top: 15px; }
	#showcase .right img { padding: 0; margin:0px; }
	#icons p { font-size: 1em; display:block; }
	.showcase-content { width: 100%; }
	#perks { padding:0; width: 96%; }
	.perk { width: 100%; float:none; }
	#testy { -webkit-column-count: 1; -moz-column-count: 1; }
	.page { font-size: 0.85em; width: 140px; margin: 1.15%; margin-top: 2.5%; margin-bottom: 2.5%; }
	
	.rating-left, .rating-right { width:100%; }
}
@media(max-width: 850px)
{
	.page { display:block; margin:auto; margin-top: 2%; margin-bottom:2%; width:85%; border-bottom-color: transparent; }

	
	#showcase { background: url("./img/bg copy.jpg"); background-repeat: no-repeat; background-size: 215%; background-position-y:20%; }
}