@font-face
{
    font-family: Kaushan;
    src: url('/fonts/KaushanScript-Regular.otf');
}
@font-face {
    font-family: BootstrapGlyphFont;
    src: url('/fonts/glyphicons-halflings-regular.eot'); /* IE9 Compat Modes */
    url('/fonts/glyphicons-halflings-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('/fonts/glyphicons-halflings-regular.woff') format('woff'), /* Pretty Modern Browsers */
    url('/fonts/glyphicons-halflings-regular.ttf')  format('truetype'), /* Safari, Android, iOS */
}

html, body {
    width:          100%;
    height:         100%;
    margin: 		0;
    padding: 		0;
    font-size:      1rem;
}

/* General */

.users-header {
    text-align: center;
}

.toolbar {
    margin: 1em 0;
    padding: 1em 0;
    border-top : 2px solid #bfbfbf;
    border-bottom : 2px solid #bfbfbf;
}

.center {
    display:		block;
    margin:			auto;
}

.event-item {
    display: table;
    overflow: auto;
    width: 100%;
    /* fix overflow */
    table-layout: fixed;
}

.event-item [class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

.event-item-body {
    border-top: 2px solid rgba(191, 191, 191, 0.58);
    margin-top: 1rem;
    padding-top: 0.5rem;
}

.news-item {
    margin-top: 1em;
    height: 500px;
}
.news-big.news-item {
    height: auto;
}
.news-item-header {
    position: relative;
    text-align: center;
    height: 200px;
    overflow: hidden;
}
.news-big .news-item-header
{
    height: 350px;
}
.news-item-image {
    width: 100%;
    transition: all .2s ease-in-out;
}
.news-item-image:hover {
    transform: scale(1.2);
}
.news-item-start-time {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 5px;
    background: #881717;
    color: #FFFFFF;
}
.news-item-info {
}
.news-overlay {
    position: absolute;
    width: 100%;
    height: 500px;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0);
}
.news-overlay span {
    position: relative;
    display: block;
    text-align: center;
    font-size: 2em;
    margin-top: 200px;
    background-color: rgba(163, 23, 23, 0);
    color: rgba(255, 255, 255, 0);
}
.news-item-info:hover .news-overlay {
    z-index: 50;
    background-color: rgba(255, 255, 255, 0.7);
}
.news-item-info:hover .news-overlay span {
    background: rgba(163, 23, 23, 0.9);
    color: rgba(255, 255, 255, 1);
}
.news-big .news-overlay {
    display: none;
}
.news-item-title {
    position: relative;
    padding-top: 15px;
    padding-bottom: 5px;
    margin-bottom: 10px;
}
.news-item-title .separator {
    position: absolute;
    width: 80%;
    left: 10%;
    bottom: 0;
    border-bottom: 1px solid #bfbfbf;
}
.news-item-title > p {
    font-size: 1.4rem;
    line-height: 1.1;
}
.news-item-body {
    max-height: 175px;
    overflow: hidden;
}
.news-big .news-item-body {
    max-height: none;
    overflow: auto;
}
.news-item-footer {
    display: block;
    position: relative;
}

.clear-both {
    clear: both;
}

.clickable-list {
    display: inline-block;
    font-size: 1.2rem;
    padding: 0 10px;
    margin-right: 10px;
    font-weight: bold;
    font-style: italic;
}
.clickable-list:hover {
    background-color: #a30000;
    color: #FFFFFF;
}
.coach-avatar {
    display: inline-block;
    position: relative;
    width: 100px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0px 0px 2px #dbdbdb;
    z-index: 10;
}
.coach-avatar img {
    width: 100px;
}
.coach-name, .coach-name h3 {
    display: inline-block;
    line-height: 80px;
    vertical-align: top;
    padding: 0;
    margin: 5px;
}

.sideShadow {
    box-shadow: 0 0 50px 5px;
}
.roundCorners {
    border-radius:  4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}
.gradient {
    background:     -webkit-linear-gradient(150deg, #C3C3C3, #FFFFFF) fixed; /* For Safari 5.1 to 6.0 */
    background:     -o-linear-gradient(150deg, #C3C3C3, #FFFFFF) fixed; /* For Opera 11.1 to 12.0 */
    background:     -moz-linear-gradient(150deg, #C3C3C3, #FFFFFF) fixed; /* For Firefox 3.6 to 15 */
    background:     linear-gradient(150deg, #C3C3C3, #FFFFFF) fixed; /* Standard syntax */
}
.header2 {
    display:        inline-block;
    margin:         0.5em 0em 0.5em 0.2em;
    font-size:      1.8em;
    color:			#CC0000;
}
.header3 {
    display:        inline-block;
    margin:         0.5em 0em 0.5em 0.2em;
    font-size:      1.6em;
    color:			#CC0000;
}
.header4 {
    display:        inline-block;
    margin:         0.5em 0em 0.5em 0.2em;
    font-size:      1.4em;
    color:			#CC0000;
    border-bottom:  1px solid #000000;
}
.formal {
    color:          #222222;
    font-family:    Tahoma, Geneva, sans-serif;
    font-size:      14pt;
    margin:         0.2em;
}
.centerWrapper {
    position:       relative;
    width:          100%;
    overflow:       hidden;
}
.leftHalfWrapper {
    position:       relative;
    display:        inline-block;
    width:          49%;
    margin:         0;
    overflow:       hidden;
    clear:          left;
}
.rightHalfWrapper {
    position:       relative;
    display:        inline-block;
    width:          49%;
    margin:         0;
    overflow:       hidden;
    clear:          right;
}

/* Specific */

/* Main page*/
.topBanner {
    margin:             0 0 1em;
    height:             160px;
    background: 	    #222222;
    background-origin:  border-box;
    background-size:    100px;
    overflow:           hidden;
    text-align:         center;
}

.topBanner:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 20%;
    height: 160px;
    z-index: 1;
    opacity: 0.6;
    background: url("/content/images/Kehakarhut_patch.png") no-repeat 50% -5%;
    background-size: 75%;
}

.topBanner .formalTitle {
    position:       relative;
    color:          white;
    font-size:      5.2rem;
    font-family:    Kaushan, Fallback, sans-serif;
    margin:         0;
    top:            50%;
    transform:      perspective(1px) translateY(-50%);
}
.contentHolder {
    margin: 		0 auto;
    padding:        0;
    overflow:       hidden;
    font-size:      1.6rem;
}

.frontpageContent {
    margin:         12px;
}

.frontpageContent p {
    margin:         12px;
}

/* Member search */

.user-item {
    .col-md-12();
    background: #b3d2ee;
    border: 2px solid #ddd;
    border-radius: 3px;
    box-sizing: border-box;
    font-size: 100%;
    padding: 0.625em;
    position: relative;
    transition: border-color 0.2s ease-in-out;
}

.search-list-item {
    position: relative;
    float: left;
    width: 150px;
    margin: 10px 5px;
    border: 1px solid #CC0000;
    border-radius: 2px;
}

.search-list-item-id {
    display: block;
    text-align: center;
    font-size: 1.5em;
    background: #CC0000;
    color: #FFFFFF;
}

.search-list-item-firstname, .search-list-item-surname{
    display: block;
    text-align: center;
}

.margin10 {
    margin : 10px;
}

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

.search-users-submit {
    position:       relative;
    display:        inline-block;
    left:           80%;
    padding:        5px 10px;
    background:     #af0000;
    color:          #FFFFFF;
    font-size:      16pt;
    border-radius:  4px;
    cursor:         pointer;
}

.column-half-page {
    display: inline-block;
    width: 49%;
}

.column-one-third-page {
    display: inline-block;
    width: 32%;
}

.column-one-fourth-page {
    display: inline-block;
    width: 24%;
}

.user-info-form {
    font-size: 2.0rem;
}
.user-info-form h3 {
    margin-top: 2rem;
}
.user-info-form label {
    display: block;
}
.user-info-form input {
    margin-bottom: 1rem;
}
.user-info-form .required {
    font-size:      0.7em;
}

input.userFormButton {
    margin: 1em 45%;
    background: #FF1C1C;
    color: #FFFFFF;
    font-family: Tahoma, Geneva, sans-serif;
    padding: 10px 15px;
    border: 1px solid #999;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}
#body {
    position: 		relative;
    margin: 		5px 10px;
    width:			880px;
}
#header {
    position:		relative;
    width: 			900px;
    margin:			0;
    height: 		320px;
    text-align:		center;
}
#sukupuoli {
    margin-right:   3.5em;
}
.alignField {
    position:       absolute;
    right:          4em;
    border:         1px solid #a0a0a0;
    padding:        2px 2px;
    outline:        0;
    -webkit-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
    box-shadow:     inset 1px 1px 2px rgba(200, 200, 200, 0.2);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius:  5px;
}
.alignRadio {
    position:       relative;
    margin-left:    2em;
    border:         1px solid #a0a0a0;
    padding:        2px 2px;
    outline:        0;
    -webkit-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
    box-shadow:     inset 1px 1px 2px rgba(200, 200, 200, 0.2);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius:  5px;
}
.leftfield {
    float:          left;
}
.rightfield {
    float:          right;
}
.infofield {
    position:       relative;
    height:         280px;
}
.centerfield {
    float:          left;
    width:          88%;
    border:         0;
    border-bottom:  1px dashed #111111;
}
.roleSelector {
}
.sportContainer {
    position:       relative;
    text-align:     left;
    vertical-align: top;
}
.sportContainer input[type="checkbox"], .sportContainer label {
    display: inline-block;
}
.sportContainer label {
    width: 60%;
}
.levelSelect {
    display:        inline-block;
    width:          40%;
    visibility:     hidden;
}
input:checked~.levelSelect {
    visibility:     visible;
}
.sportRoleSelect {
    display:        inline-block;
    width:          40%;
    visibility:     hidden;
}
input:checked~.sportRoleSelect {
    visibility:     visible;
}
.details {
    float:          left;
    width:          35%;
    /*border: 1px solid;*/
}
.levelinfo > select {
    width:          120px;
}
.infoSelectionBar {
    position:       relative;
    width:          90%;
    margin:         2em auto;
    height:         40px;
    z-index:        100;
}
.infoContents {
    position:       relative;
    width:          90%;
    margin:         2em auto;
    top:            -2em;
    border:         1px solid #656565;
    min-height:     200px;
    text-indent:    2em;
    padding-bottom: 5em;
}
.infoSelectorTab {
    position:       relative;
    left:           -1px;
    top:            8px;
    width:          16%;
    height:         32px;
    margin:         0;
    padding:        0;
    display:        inline-block;
    border:         1px solid #656565;
    border-bottom:  none;
    text-align:     center;
    color:          #dddddd;
    background:     #656565;
}
.activeTab {
    color:          #656565;
    background:     rgb(247, 247, 247);
}
.infoSelectorTab > p {
    margin-top:     6px;
    cursor:         pointer;
}
.memberInfoLabel {
    margin-left:    2em;
    text-transform: capitalize;
    font-weight:    bold;
}
.memberInfo_H2 {
    color:          #111111;
}
.memberInfoField {
    position:       absolute;
    left:           175px;
}
.sportLabel, .edulabel {
    text-transform: capitalize;
    font-weight:    bold;
}
.sportLevelField {
    position:       absolute;
    left:           150px;
}
.sportRoleField, .eduOrganization {
    position:       absolute;
    left:           300px;
}

/* Browse members page */

#wrapper.padWrapperContent {
    width:          850px;
    padding:        10px 25px;
}
#wrapper.semiTransparent {
    background:     rgba(247, 247, 247, 0.7);
}
.searchCriteria {
    display:        inline-block;
    min-width:      80px;
    padding:        2px 2px;
    margin:         10px;
    background-color: rgba(230, 230, 230, 50);
    text-align:     center;
    border:         1px solid #222222;
    border-radius:  4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    font-weight:    bold;
    cursor:         pointer;
}
.buttonGradient {
    background: -webkit-linear-gradient(180deg, #E6E6E6, #636363); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(180deg, #E6E6E6, #636363); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(180deg, #E6E6E6, #636363); /* For Firefox 3.6 to 15 */
    background: linear-gradient(180deg, #E6E6E6, #828282); /* Standard syntax */
}
.buttonGradientSelected {
    background: -webkit-linear-gradient(180deg, #E6E6E6, #218121); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(180deg, #E6E6E6, #218121); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(180deg, #E6E6E6, #218121); /* For Firefox 3.6 to 15 */
    background: linear-gradient(180deg, #E6E6E6, #218121); /* Standard syntax */
}

.searchCriteria:hover {
    color:          #E6E6E6;
    background-color: rgba(34, 34, 34, 50);
}
.criteriaForm {
    position:       relative;
    display:        inline-block;
    margin:         10px;
    padding:        2px 2px;
}
.criteriaList {
    border:         1px solid;
    width:          240px;
    height:         180px;
    padding:        0;
    margin:         0;
    background:     rgba(240,240,240,10);
    list-style-type: none;
    overflow-y:     scroll;
}

/* Excel upload page */

#MyUploadForm {
    width:          80%;
    margin:         1em auto;
    text-align:     center;
    color:          #000000;
    font-family:    Tahoma, Geneva, sans-serif;
    padding:        10px 15px;
    /*
    border:         1px solid #999;
    border-radius:  10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    */
}
#MyUploadForm #progressbox {
    position:       relative;
    width:          75%;
    margin:         3em auto;
    height:         2em;
    background:     #77BBFF;
    color:          #000000;
    font-family:    Tahoma, Geneva, sans-serif;
    padding:        2px 2px;
    border:         1px solid #222;
    border-radius:  5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
#MyUploadForm #progressbar {
    width:          0;
    height:         2em;
    background:     #2266FF;
    border-radius:  5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
#MyUploadForm #statustxt {
    position:       absolute;
    left:           48%;
    line-height:    2em;
}

@media screen and (min-width: 1400px) {
    .wrapper {
        width:      1200px;
    }
}

@media screen and (max-width: 1100px) {
    .wrapper {
        width:          95%;
    }
}

@media screen and (max-width: 900px) {

    .wrapper {
        width:          95%;
    }

    .column-one-third-page {
        width:          49%;
    }

    .column-half-page {
        width:          100%;
    }
}

@media screen and (max-width: 650px) {

    .wrapper {
        width:          100%;
    }

    .column-one-third-page {
        width:          100%;
    }

    .column-half-page {
        width:          100%;
    }
}