
<style type="text/css">
	.wideGrid {
		padding: 0 15px;
		margin: 0 -15px;
		overflow-x: hidden;
	}
	
	html
	{
		height: 100%;		
			
	}
	
	body {
		height: 100%;
		padding-top: 0px;
		overflow-y: auto;
		overflow-x: hidden;
			}
	
	
	::-webkit-scrollbar {
    width: 1.2vh;  /* Reduce scrollbar space*/             
    }
	 	 
    ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .5);
    background-color: #6C9E67;  
    /*-webkit-box-shadow: 0 0 2px rgba(255, 255, 255, .5);*/
    }
    
    /*.scrollbar-width-none {
    scrollbar-width: none;  
    }*/
	
input[type=checkbox] {
    transform: scale(1.5);
}

.boxup {
    position: relative;
    position: absolute;
    top: 8%;
    left:88%;
    width: 18px;
    height: 18px;
    z-index: 20;
}

    img.emojione {
    // Override any img styles to ensure Emojis are displayed inline
    margin: 0px !important;
        display: inline !important;
        height: auto;
        horiz-align: right;

        /*width: 50px;*/
    }
    span.emoji {
        font-size: 16px;
        vertical-align: middle;
        horiz-align: right;
        /*line-height: 2;*/
        /*float:right*/
    }


/* Optional: show position indicator in red 
::-webkit-scrollbar-thumb {
    background: #FF0000;
}*/

	#holder {
		min-height: 100%;
		position:relative;
	}

	.container {
	    padding-top: 74px;
	    margin: auto ;
	    max-width:1420px;
        width: 100%;
        overflow: auto;
        
        /*margin-left: 3px;
        margin-right: 3px;
        min-width:1280px;
        height:1200px;
        padding-bottom: 50px;
		margin-bottom: 200px;*/ /* Height of the footer */
	}
	
	.container1 {
	    padding-top: 74px;
	    margin: auto ;
	    margin-top: 15px;
	    max-width: 1420px;
        width: 100%;
        overflow: auto;
        overflow-x: hidden;
        
        /*margin-left: 3px;
        margin-right: 3px;
        min-width:1280px;
        height:1200px;
        padding-bottom: 50px;
		margin-bottom: 200px;*/ /* Height of the footer */
	}
	
	.container4{
	    padding-top: 54px;
	    margin: auto ;    
        max-width:1420px;
        width: 100%;
        overflow: auto;
    }
	
	
	/*used in liga.php*/
	.container2 {		
        padding-top: 2px;
        margin: auto;        
        max-width:1600px;        
     }
     
     .container3 {		
        padding-top: 74px;
        margin: auto;        
        max-width:1200px;        
     }
     

    .container.activities  {
        padding-top: 0px;
    }

    .containerFull {
        padding-left: 15px;
        padding-left: 5%;
        padding-top: 74px;
        /*padding-bottom: 130px;*/
        width: 98%;
    }
    
    .containerVideos {
        color: red !important;
        padding:0px;
        margin-left:0px;
        width: 860px;
        
    }
    
    .columnLeft {
        padding-left: 15px;
    }

    .calendarWidth {
        max-width: 360px;
    }

	#bannerSpace{
		/* background-color: lime; /* For Debug */
		/* Example http://jsfiddle.net/ELUGc/2930/ */		
		max-width: 1160px;
		width: 100%;
		bottom: 60px;
		height: 50px;
		left: 0;
		/*position: absolute;*/
		right: 0;
		
		/*padding-top: 0px;*/
		padding-right: 15px;
		padding-left: 15px;
		margin-bottom: 70px;
		margin-right: auto;
		margin-left: auto;
	}

    #bannerSpace .container{
        padding-top: 0px;
        bottom: 60px;
    }

    .smallScreenNewsPane {
		padding-left:  0px;
		padding-right: 0px;
        margin-bottom: 30px;
    }

    .dateInputSmall {
        padding-left: 5px !important;

    }

    .top-buffer { margin-top:20px; }
	
	.noLeftPadding {
		padding-left: 0px !important;
	}

    .noRightPadding {
		padding-right: 0px !important;
	}

    .smallPadding { /* Used to decrease the padding between columns */
        padding: 7px !important;
        margin: 0 !important;
    }

    .nopadding { /* Used to decrease the padding between columns */
	   padding: 0 !important;
	   margin: 0 !important;
	}
    .borderless td, .borderless th {
        border: none;
        padding: 0px !important;
        padding-right: 3px !important;
    }
	
	
    .centerText {
        text-align:center;
    }

	.center-block {  
	  display: block;  
	  margin-right: auto;  
	  margin-left: auto;  
	  margin-bottom: 10px;
	} 
	/* Small Devices, Tablets */
	@media only screen and (min-width : 500px) {
		.center-block
		{
			width: 80%; /* Making the calendar smaller on "large" small screens */
		}
	} 

	.pagination /* Used for pagination for different locations*/
	{
		margin-top: 10px;
    	margin-bottom: 10px;    	    	
	}
	
	.pagination-sm /* Used for pagination for different locations*/
	{
		margin-top: 3px;
    	margin-bottom: 3px;	
	}
	
	.form-group.dateTimePicker /* Used for pagination for different locations*/
	{		
    	margin-bottom: 5px;	
	}
	.btn.left {
		margin-right: 5px;
	}
	
	.btn.noleft {
		margin-left: 0px;
	}
	
	.btn.noPaddingleft {
		padding-left: 0px;
	}
	
	.btn.right {
		margin-left: 5px;
	}
	
	.btn.top {
		margin-top: 7px;
	}

    .btn.bottom {
        margin-bottom: 7px;
    }
	
	.btn.spacing {
		margin-left: 5px !important;
		margin-right: 5px !important;
		margin-top: 5px !important;
		margin-bottom: 5px !important;
	}
	
	legend.smallMargin {
    	margin-bottom: 10px !important;
	}
	
	.borderless td, .borderless th { /* No borders on table, used at statistik */ 
    	border: none !important;
	}

body > div > nav > div > div.navbar-header > a > img {   
 	max-width: 220px;
	max-height: 62px;
	min-height: 62px;		
	overflow: visible;
	margin-top: 4px;
	margin-left: 12px;
}

@media (min-width: 1200px) {
    .navbar > .container-fluid{
        max-width: 1200px; /* Max widh of top-menu */
    }
}

.navbar {
	min-height: 70px;	
	margin-bottom: 10px;	    
}

.navbar-nav {
    margin:10px;
    font-size: 1.6rem;    
}

.coloreBg {
        font-family: Arial, Helvetica, sans-serif;
        height: 2800px;
        background-color: #cccddd;          
}

.coloreBgPx {
        font-family: Arial, Helvetica, sans-serif;        
        background-color: #cccddd;/*ger bakgrundsfärg violett*/  
}

.coloreGreen {
        font-family: Arial, Helvetica, sans-serif;
        background-color: #dff0d8;
        padding: 1px;  
}

.coloreWhite {
        font-family: Arial, Helvetica, sans-serif;
        background-color: #ffffff;
        padding: 20px;  
}

.green {
        font-family: Arial, Helvetica, sans-serif;
        background-color: #dff0d8;  
}
    
.violett {
       font-family: Arial, Helvetica, sans-serif;
       background-color: #cccddd;       
}

.black {
        font-family: Arial, Helvetica, sans-serif;
        background-color: #000000;  
}

.spacetotop-5 {
    border: none;
	margin-top: 5px;	
}

.spacetotop-10 {
    border: none;	
	margin-top: 10px;	
}

.spacetotop-75 {
    border: none;	
	margin-top: 75px;	
}

.spacetotop-minus-1{
    border: none;
    margin-top: -80px;
	margin-bottom: 5px;		
}

.spacetotop-minus-2 {
    border: none;	
	margin-top: -140px;	
	margin-bottom: 0px;	
}

.spacetotop-minus-20 {
    border: none;	
	margin-top: -20px;	
}

.spacetotop-minus-75 {
    border: none;	
	margin-top: -75px;	
}

.spacetotop-minus-120 {
    border: none;	
	margin-top: -120px;	
}

.spacetotop-minus-240 {
    border: none;	
	margin-top: -240px;	
}

.navbar-fixed-top {
	margin-bottom: 22px;
}

.navbar-fixed-bottom {
	max-height: 50px;
	min-height: 50px;	
	padding-top: 0px;
	padding-bottom: 0px;
	margin-bottom: 0px;
}

.navbar-brand {
  padding: 10px 24px;
}

.navbar-rek {
    margin-bottom: 60px;
    background-color: white; !important;
}

/*for topmenu*/
.navbar-default {
  color: #FFFFFF;
  
  background-color: #6C9E67; 	/**bakgrund topmenyn, bottommenyn**/
  border-color: transparent;							/**ramfärg navbar**/
  background-image: linear-gradient(to bottom, #9bb6de 0%, #6C9E67; 100%);
  background-repeat: repeat-x;      
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#6C9E67;, endColorstr=#6C9E67;);    
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#fad59f, endColorstr=#fffaaa";);
  /*border-top-width: 0px; /* Removes border arround the banner */
  border-radius: 1px; /**runda hörn top- och bottommenyn**/
  border: 0px solid;
  border-color: #FFFEEB;
  font-weight: bold;  
}

.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-brand
{
  	color: #;
}

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover
{
	color: #76CC8F;
	opacity: 0.88;
}

.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover
{
	color: #76CC8F;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  	color:  #;
  	background-color: transparent;
}

.navbar-default .navbar-text {
  	color:  #;  	 	      
}

.navbar-default .navbar-nav > li:last-child > a {
  	border-right: 0px solid #5c88c9;
}
.navbar-default .navbar-nav > li > a {
  	color: #FFFFFF;						/*textfärg menytexter*/  
  	/*border-left: 1px solid #5c88c9; 					ev border runt menyalternativen*/
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  	color:  #000000;					/**textfärg topmeny hover**/
 	background-color: #76CC8F;	/**bakgrund topmenyn**/    
}

.navbar-default .navbar-nav > .disabled > a,
.navbar-default .navbar-nav > .disabled > a:hover,
.navbar-default .navbar-nav > .disabled > a:focus {
  	color: #cccccc;  
  	background-color: transparent;
}


.navbar-default .navbar-toggle {
	border-color: #FFFFFF; 			/*färg ram mobilknappen*/
}

.navbar-default .navbar-toggle .icon-bar {  	
	background-color: #;  	/**färg strecken i mobilknappen**/	
}

.navbar-default .navbar-toggle .icon-bar {  	 
  	background-color: #FFFFFF; 
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {  
  	background-color: transparent;					/**färg hover mobilknappen**/  	
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  	border-color:  #6C9E67; 
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {  	  						
  	background-color: #76CC8F;	/*background menytexter open*/
  	color: #;  					/*textfärg öppnad meny*/
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
  	border-top-color: #;			/*färgg på lilla submenypilen*/
  	border-bottom-color: #;		/*färg på lilla submenypilen*/
}

/*	dropdown ********************************************************/
.navbar-default .navbar-nav > .dropdown > a .caret {
  	border-top-color: #FFFFFF;			/*färg lila pilen ned*/
  	border-bottom-color: #FFFFFF;
}

.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {  
  	border-top-color: #FFFFFF;
  	border-bottom-color: #FFFFFF;  
}
 	
.navbar-nav>li>.dropdown-menu{ 	
  	min-width: 200px;
    padding: 0px 0px; 	/*tar bort vita kanter*/
  	border-radius: 4px;  							/**runda hörn dropdownmenyn**/  					
}

.navbar-default .navbar-nav .open .dropdown-menu > li > a{
   /* color: black; This option turns the links black at mobile devices, dosnt work when menu is black...*/
   background-color: transparent;   
   }

.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus{
    color:  #;					/**textfärg submeny hover**/
    background-color: #76CC8F;	/**bakgrund dropdownmenyn hover**/
}


.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #ffffff;
  background-color: #5c88c9;
}

.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    font-style:italic;
    color: gray;
    background-color: silver;
    
}


/*fall out sub2menu items on mouse hover */
ul.nav li.dropdown-submenu:hover > ul.dropdown-menu{
    display: block;
}


/*	link ********************************************************/
.navbar-default .navbar-link {
  	color: #000000;  	    
}

.navbar-default .navbar-link:hover {
  	color: #ff0000;  
}


/*	sub-meny	*************************************/
.dropdown-submenu{
    color: transparent; /*färg lilla fyrkanten*/
    color: white; /*färg lilla fyrkanten*/
    font-size: 102%;   
}

.dropdown-submenu > .active > a,
  .dropdown-submenu > .active > a:hover,
  .dropdown-submenu  > .active > a:focus {
    color: #fff00f;
    background-color: #ddd8c9;
}
  

.dropdown-submenu > li > a{
  color: #000000; 		/*textfärg submenu*/
  background-color: transparent;
}

.dropdown-submenu > li > a:hover,
.dropdown-submenu > li > a:focus {
  color: #ffffff;	/*textfärg submeny hover*/
  background-color: #5c88c9;
 text-decoration: none;   
}

.banner-bottom
    {
        width: 75%;
        padding-left: 20%;
        height: auto;
        margin-bottom: 10px;
    }


/*	mobile ********************************************************/

@media (max-width: 767px) { 
	body > div > nav > div > div.navbar-header > a > img {
		max-height: 60px;		
	}
	
	.navbar {
		margin-bottom: 4px;
	}
	
	.navbar-fixed-bottom {
		margin-bottom: 0px;
	}

	.navbar-brand {
		/*padding: 4px 4px;*/
	}
	
	.navbar-default .navbar-nav .open .dropdown-menu > li > a{
	    color: #FFFFFF !important;
	}
	
	.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
	.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
	    color: #FFFFFF!important;
	}
	.container
	{
		/* For banner */
		/*padding-bottom: 250px;*/
	}

    .banner-bottom
    {
        width: 75%;
        padding-left: 20%;
        height: auto;
        margin-bottom: 10px;
    }

	#bannerSpace{
		height: 120px;
		max-width: 400px;
        margin-bottom: 80px;
        padding-top: 0px;
    }
}


/*    desktop ********************************************************/
@media (min-width: 767px) { 
		.noRightPadding	{
		padding-right: 0px !important;
	}
}

@media print { /* Removes links when printing*/
  a[href]:after {
    content: none !important;
  }
}


    .typeahead,
    .tt-query,
    .tt-hint {
        width: 150%; /*396px;*/
        height: 30px;
        padding: 8px 12px;
        /*font-size: 24px;*/
        line-height: 30px;
        border: 1px solid #ccc;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 4px;
        outline: none;
    }

    .typeahead {
        background-color: #fff;
    }

    .typeahead:focus {
        border: 2px solid #0097cf;
    }

    .tt-query {
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    }

    .tt-hint {
        color: #999
    }

    .tt-menu {
        width: 422px;
        margin: 12px 0;
        padding: 8px 0;
        background-color: #fff;
        border: 1px solid #ccc;
        border: 1px solid rgba(0, 0, 0, 0.2);
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
        -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
        box-shadow: 0 5px 10px rgba(0,0,0,.2);
    }

    .tt-suggestion {
        padding: 3px 20px;
        font-size: 18px;
        line-height: 24px;
    }

    .tt-suggestion:hover {
        cursor: pointer;
        color: #fff;
        background-color: #0097cf;
    }

    .tt-suggestion.tt-cursor {
        color: #fff;
        background-color: #0097cf;

    }

    .tt-suggestion p {
        margin: 0;
    }

    .gist {
        font-size: 14px;
    }

    /* example specific styles */
    /* ----------------------- */

    #custom-templates .empty-message {
        padding: 5px 10px;
        text-align: center;
    }

    #multiple-datasets .league-name {
        margin: 0 20px 5px 20px;
        padding: 3px 0;
        border-bottom: 1px solid #ccc;
    }

    #scrollable-dropdown-menu .tt-menu {
        max-height: 150px;
        overflow-y: auto;
    }

    #rtl-support .tt-menu {
        text-align: right;
    }

    fieldset.scheduler-border {
        border: solid 1.2px #447BB3 !important;
        padding: 0px 10px 10px 10px;
        margin-bottom:2px;
        border-bottom: none;
    }

    legend.scheduler-border {
        width: auto !important;
        border: none;
        padding: 10px;
        margin-bottom:0px;
        font-size: 14px    ;
        font-weight: bold;
        font:bold;
    }
    

    
/*    .panel-info>.panel-heading-gh {
        color: #;
        background-color: #6C9E67;
        background-color: #76CC8F;        
        border-color: #ddd;
    }
*/
    
    /*panel primary - for all normal panels - heading color as topMenu ***************************/
    .panel-primary {
        /*color: #;*/
        /*background-color: lightgray; ger background body*/                  
        border-color: #6C9E67;        
     }
    
    /*headings for primary panels*/
    .panel-primary>.panel-heading {     
        color: #FFFFFF;
        font-weight: bold;
        background-color: #6C9E67;                          
        border-color: #6C9E67;        
     }
     
     .panel-primary>.panel-body {        
        /*color: #;*/
        /*background-color: #6C9E67;*//*ger background body*/                  
        border-color: #6C9E67;        
     }
    
    .clickable
    {
        cursor: pointer;
    }

    .clickable .glyphicon
    {
    background: rgba(0, 0, 0, 0.15);
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px
    }
    
    
    
    /*buttons *************************************************/
    .btn-success, .btn-success:active, .btn-primary, .btn-primary:active, .btn-primary:visited {
        background-color: #6C9E67 !important;
        border-color: #76CC8F !important;
        font-weight: bold;
    }
    
    .btn-success:visited {
        background-color: #6C9E67 !important;
        border-color: #76CC8F !important;
    }
    
    .btn-success:hover, .btn-primary:hover:hover {
        background-color: #76CC8F !important;        
        color:black;
    }
    
    .btn-danger {        
        font-weight: bold;
    }
    
    .btn-danger:hover, .btn-warning:hover {        
        color:black;
    }
    
    .btn-warning {        
        font-weight: bold;        
    }    
    
    .dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.padding-8 { 
padding-top:8px;
padding-left:0px;
padding-right:2px;

//width:50%;
//margin-left:-20px;
//margin-right:20px; 
}

.padding-5 { 
padding:5px; 
}

.padding-10 { 
padding:10px; 
}

.padding-right-20 { 
padding-right:20px; 
}
    
.align-right{
text-align: right;
}     
    
</style>



