@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

/* NOLLSTÄLL */
*:not(td) { padding:0px; margin:0px; }
html{min-height:100%; scroll-behavior: smooth;}
body{min-height:100%;}
html, body {-webkit-box-sizing: border-box;-moz-box-sizing:border-box;box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}




/* ALL, MOBILE FIRST */

body { font-family: 'Open Sans', sans-serif; font-size:16px; line-height:normal; color:rgb(21,21,21); letter-spacing:-0.2px; background-color:#d5d9d0; }
	
p, h3 { margin-bottom:6px;}

p {font-size:16px;}

p.mini {font-size:80%;}

H1 {font-family:'Open Sans', sans-serif;font-size:30px; margin:4px 0px 4px 0px;font-weight:700; color:black;}
H2 {font-family:'Open Sans', sans-serif;font-size:24px; margin:4px 0px 4px 0px; font-weight:700;}
H3 {font-family:'Open Sans', sans-serif;font-size:20px; font-weight:700;}
H4 {font-family:'Open Sans', sans-serif;font-size:16px; font-weight:700;}

A, A:visited  {color:rgb(0,85,79);cursor:pointer;text-decoration:none;/*font-weight:700;letter-spacing:-0.75px;*/}

A:hover {color:rgb(0,0,0);cursor:pointer;text-decoration:underline;/*font-weight:700;letter-spacing:-0.75px;*/}

button, input[type="button"], input[type="submit"], .clButton {display: inline-block;font-size:1em;height:min-height:26px;cursor:pointer;background-color:#002f22;color:white;border-top:2px solid #005840; border-right:2px solid black; border-bottom:2px solid black; border-left:2px solid #005840; padding: 0px 10px 0px 10px;font-weight:700;border-radius:3px;margin:1px; min-width:120px; white-space:normal;}

input[type="text"], input[type="password"], input[type="date"], input[type="email"], input[type="file"], input[type="time"], input[type="number"], input[type="url"], textarea, select {font-family: 'Open Sans', sans-serif;border:1px solid black;padding:2px;margin-bottom:2px;width:90%;font-size:1em;width:100%;}

input[type="date"], input[type="time"], input[type="number"], select {width:auto;min-height:48px;}

select {-webkit-appearance: menulist-button;}

input[type="file"] {border:0px;}

.btnCancel {background-color:rgb(102,0,0) !Important; border-top:2px solid rgb(153,0,0) !Important; border-right:2px solid rgb(51,0,0) !Important; border-bottom:2px solid rgb(51,0,0) !Important; border-left:2px solid rgb(153,0,0) !Important;}

label {cursor:pointer; }


input:disabled, select:disabled { opacity:0.5; } 

[required] {
	background-image: url('/images/icon_asterisk_64x64.png');
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size:8px;
	padding-right:10px;
	}

ul, ol {list-style-position:outside;padding-left:35px;padding-top:5px;padding-bottom:9px;}

/* TABLES */
table.colResizable {width:100%;}
table.colResizable td {height:48px; padding-left:2px !Important;}

tr.oddEven:nth-of-type(even) {background-color:rgba(0,0,0,0.05);}
tr.oddEven:nth-of-type(odd) {}
tr.oddEven:hover {background-color:rgba(0,0,0,0.08);}

div.oddEven {width:100%; padding:5px;word-wrap:break-word; display:inline-block;}
div.oddEven:nth-of-type(even) {background-color:rgba(0,0,0,0.06)}
div.oddEven:nth-of-type(odd) {background-color:rgba(0,0,0,0)}

.tableheader {background-color:rgba(0,0,0,0.1);font-weight:bold;}
.tableheader td {border-bottom:1px solid rgb(153,153,153);}


.oddEvenHover:not(.noHover) {background-color:rgba(0,0,0,0.08) !Important;}

.highlightRow {background-color:#abb3a1;}



.tblList {width:100%; border-collapse: collapse; border-spacing: 0; border-top:1px solid rgba(0,0,0,0.2); border-right:1px solid rgba(0,0,0,0.2); border-bottom:1px solid rgba(0,0,0,0.2);}
.tblList thead tr td { background-color:rgba(0,0,0,0.1); border-bottom:1px solid rgba(0,0,0,0.2); font-weight:bold;}
.tblList td {overflow:hidden;padding:2px;padding-left: 2 !important; padding-right: 2 !important; height:40px;border-left:1px solid rgba(0,0,0,0.2); padding-left: 2 !important; padding-right: 2 !important;}









.grayscale {-webkit-filter: grayscale(100%); filter: grayscale(100%);}

#divMainWrapper {display:block;}
.divFloatingContainer{padding:2px 2px 8px 2px;}


#divPageHeader { text-align:center;	cursor:pointer; width:100%; height:auto; line-height:0px;}
#divPageHeader img {width:100%;height:auto;}
#divPageHeaderText {position:absolute; width:78%; top:0px; right:0px; text-align:center; margin-top:1%;}
#divPageHeaderText H1 { font-size: 25px; color:white; text-shadow: 0 0 10px black; display:none;}


#divMenubuttonbar { cursor:pointer; background-color:rgb(0,0,0); color:white; width:100%; height:48px; line-height:0px; border-bottom:1px solid rgb(51,51,51)}

#divMenubuttonbar p {font-size:20px;margin:15px 0px 0px 10px;font-weight:700;float:left;}
#divMenubuttonbar img {height:32px;margin:8px 0px 0px 10px;}

#imgMenubutton {height:32px;margin:8px 0px 0px 10px;} 
#imgMenubutton_c {height:32px;margin:8px 0px 0px 10px;display:none;}


#divClubFacts {background-color:rgba(255,255,255,0.95);border-radius:6px;position:absolute;top:5px;right:5px;display:none;padding:5px 20px 5px 20px;font-size:90%;}


.divOddRow {background-color:rgba(171,179,161,0.2);}

#bgPopup{ display:none; position:fixed; position:absolute; min-height:100%; min-width:100%; top:0px; left:0px; background:rgba(0,0,0,0.90); z-index:20;}

#divAlbumImageContainer {width:98vw;height:100vh;position:fixed;top:0px;left:0px;z-index:50;display:none;}

#divAlbumImage {width:inherit;height:inherit;display:table-cell;vertical-align:middle;text-align:center;}

#imgAlbumImage {/*height:100%;max-width:100%;max-height:100%;*/max-width:100vw;max-height:100vh;box-shadow: 0px 0px 12px rgb(0,0,0);z-index:2;}

#imgCloseAlbumImage {position:fixed;top:0px;right:10px;filter:alpha(opacity=30);opacity:.30;cursor:pointer;width:32px;}
.imgNavAlbumImage, #imgCloseAlbumImage {filter:alpha(opacity=50);opacity:.50;width:64px;cursor:pointer;}
.imgNavAlbumImage:hover, #imgCloseAlbumImage:hover {filter:alpha(opacity=80);opacity:.80;-webkit-filter: drop-shadow(0px 0px 3px #FFF);filter: drop-shadow(0px 0px 3px #FFF); }

.jscroll-added {display:inline;}

.divContainerBox { background-color:rgba(255,255,255,0.9); border-radius:6px; padding:8px 8px 24px 8px; margin:5px 0px 5px 0px; overflow: hidden; }
.divContainerBox img {max-width:100%;}
#divMainWrapper {width:100%;}

#divMenu {display:none;width:100%;}
#divMenubuttonbar {display:block;}
#divLogin {display:none;}
#divLoginMobile {display:none;}

#divMain {float:none;clear:both;width:100%;width:100%;padding:0px 5px 0px 5px;}

#divMenu ul {list-style-type: none;padding:0px;width:100%;border-bottom-right-radius:6px;}
#ulMenu a {color:white; display:block; padding:13px 2px 5px 8px; font-weight:700; min-height:48px;background-color:black;border-bottom:1px solid rgb(102,102,102);}
#ulMenu a:visited {color:white;}
#ulMenu a:hover {color:black;background-color:#abb3a1;text-decoration:none;}
#ulMenu img {height:24px; margin-right:5px; vertical-align:middle;}
#liLogin {display:none;}

.aMember {color:rgba(255,255,255,0.3) !Important;}

#divFlags {text-align:center;padding: 30px 0px;width:90%;margin-left:5%;}

#divFlags img {width:64px;}

.liDisabledMenu {cursor:not-allowed; color:rgb(102,102,102) !Important;}


#divUploadImges {text-align:center;}
#divMyClubColumn {display:none;}





.mobileButton, .touch {min-height:48px;padding-top:10px;}

input[type="button"], input[type="submit"], input[type="text"], input[type="password"], input[type="date"], input[type="email"], input[type="file"], input[type="time"], input[type="number"], textarea, select, .clButton {min-height:48px;}

.divUploadedImageContainer {z-index:1;background-color:black;padding:4px;position: relative; left: 0px; top: 0px;float:left;margin:5px 1% 1% 0px;min-width:150px;line-height: 0px;border-radius:4px;}
	
.imgSearchHits {height:75px;margin:3px;cursor:pointer;}

img {border:0px;max-width:100%;}
img.imgRegisterImage { max-width:100%; margin:0px 0px 10px 0px;}









/* FORUM */

.divForumRight {margin-left:20px;border-left: 1px solid rgba(0,0,0, 0.2); padding: 0px 0px 0px 4px; }
.divForumRow {clear:both;}

/* END FORUM */





/* WEB SHOP */

.divWebShop1 {width:47%;float:left;text-align:center;margin:20px 0px 20px 0px; background-color:#d5d9d0;border-radius:6px;display:table-cell;margin-right:3%;padding-top:25px;padding-bottom:5px;min-height:220px;overflow:hidden;cursor:pointer;}
.divWebshopDisplay {width:23.8%;}
.divProduct {width:46%;float:left;height:225px;padding:5px;text-align:center;margin:0px 0px 10px 10px;display:table-cell;background-color:rgba(0,0,0,0.05);border-radius:4px;overflow:hidden; cursor:pointer;}
.divProduct img {width:120px;height:120px;object-fit: cover;}
.divTrolley {padding:10px; margin:10px; background-color:rgba(0,0,0,0.05);border-radius:5px;cursor:pointer;}

/* END WEB SHOP */







/* REGISTRY */

#myboatbilder img {cursor:move;}
.myVessel {float:left;display:inline-block;}


/* END REGISTRY */







/* POSITION */

.effectPulsate {
	-webkit-animation: pulsate 1s ease-out;
	-webkit-animation-iteration-count: infinite; 
	opacity: 0.0
}


@-webkit-keyframes pulsate {
	0% {/*-webkit-transform: scale(0.1, 0.1); */ opacity: 0.7;}
  50% {opacity: 1.0;}
  100% {/*-webkit-transform: scale(1.2, 1.2);*/ opacity: 0.7;}
}


/* END POSITION*/



/* IMAGES */


#divUploadForm {background-color:rgba(0,0,0,0.05);text-align:center;padding:10px;border-radius:6px;margin-bottom:10px;width:100%;}
#divSearchForm {width:100%;}
#content {clear:both;}


/* END IMAGES */




#divPagefooter {background-color:rgb(51,51,51);padding:5px 0px 10px 0px;margin-top:20px;text-align:center;color:white;min-height:180px;}

#cssHelper {display:none;}
#cssHelper:after {content: "Screen min-width: 320px, iPhone 3 & 4 liggande"; position:absolute; top:0px; right:0px; background-color: rgb(204,204,153); color: black; margin:1px; padding: 2px; border-radius: 2px; font-size: 9px; font-family:Tahoma; box-shadow: 1px 1px 2px #000;}

.divColumn1, .divColumn2 {background-color:rgba(0,0,0,0.08); padding:10px; border-radius:6px;margin-bottom:5px;}
.divColumn1 input[type="button"], .divColumn2 input[type="button"] { white-space: normal;}

#cssSetDesktopLayout {display:block;}
#cssSetMobileLayout {display:none;}


/* Custom required field speech box */
#divReq { display:none; position:absolute; top:100px; left:100px; z-index:100; }
#divReq p {margin:0px;}
#speechBubble { position:relative; padding:5px 10px 5px 10px; border:1px solid gray; border-radius:2px; background-color:white; z-index:100; box-shadow: 1px 1px 1px #666; -webkit-box-shadow: 1px 1px 1px 1px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */ -moz-box-shadow: 1px 1px 1px 1px #ccc;  /* Firefox 3.5 - 3.6 */ }
#speechBubble:before { content: ' '; position: absolute; width: 0; height: 0; left: 10px; top: -8px; border: 4px solid; border-color: transparent transparent gray gray; }
#speechBubble:after { content: ' '; position: absolute; width: 0; height: 0; left: 11px; top: -6px; border: 4px solid; border-color: transparent transparent #fff #fff; }
/* END Custom required field speech box */


#divAds1 img {max-width:170px;margin:0px 20px 20px 0px;}

#caption {
 position: absolute;
 z-index: 99;
 display: none;
 background: rgba(0,0,0,0.6);
 color: white; 
 padding: 2px;  
 font-size:10px;
}

#idCloseNews {color:white;float:right;font-size:23px;font-weight:bold; background-color:rgba(0,0,0,0.2);border-radius:4px;width:32px;height:32px;text-align:center;cursor:pointer;} 


.wrapper {
  display: grid;
  grid-template-columns: auto;
 	grid-template-rows: auto; 
  grid-gap: 10px;

  width:100%;
}

.box {
text-align:center;
  border-radius: 5px;
  padding: 20px;

}

/* ----------------------------------------------------------------------------- */
/* -------- Fr o m iPad stående, iPhone 5, 6 liggande, Android liggande  ------- */
/* ----------------------------------------------------------------------------- */
@media only screen and (min-width: 568px) {#cssHelper:after {content: "Screen min-width: 568px, iPad stående & iPhone 5, 6, Android liggande";}

	.imgSearchHits {height:150px;}
	
}


/* ---------------------------------------------------------- */
/* ------------------- iPad Stående  ----------------- */
/* ---------------------------------------------------------- */
@media only screen and (min-width: 768px) {#cssHelper:after {content: "Screen min-width: 768px, iPad stående";}
	
	#divPageHeaderText H1 { font-size: 50px;}
		
	.divContainerBox { margin:10px 10px 0px 0px; padding:12px 12px 24px 12px;}
	
	.divForumLeft {float:left; width:70%; padding-top:10px; padding-left:10px;}
	.divForumRight {float:right; width:25%;}
	
	.divWebShop1 {width:30%;}
	.divProduct {width:23%;}
	.divWebshopInfo {width: 65%; float:left;}
	.divTrolley {float:right; width:30%;}
	
	.divColumn1, .divColumn2 {float:left; width:48%;margin-right:2%;}
	

	img.imgRegisterImage { width:48%; margin:0px 1% 10px 0px;}
	
	#divClubFacts {display:block;}
	
	
	#divUploadForm {;width:39%; float:right;}
#divSearchForm {width:59%; float:left;}

#idCloseNews {display:none;}

.wrapper { grid-template-columns: auto auto; }
	
}



/* ---------------------------------------------------------- */
/* ------------ Fr o m Desktop 1024 & iPad liggande---------- */
/* ---------------------------------------------------------- */
@media only screen and (min-width: 1024px) {#cssHelper:after {content: "Screen min-width: 1024px, Desktop & iPad liggande";}

	#divMainWrapper {width:100%;}	
	
	#divMenu {float:left; display:table !Important; width:22%; padding-bottom:30px;}
	#divMain {float:right; clear:none; width:78%; padding:0px 0px 0px 10px;} 
	
	#divMenu {margin-top:10px;}
	#divMenu ul {margin:0px 0px 0px 0px; border-top-right-radius:6px; border-bottom-right-radius:6px; overflow:hidden;}
	#ulMenu a {padding:5px 2px 5px 8px; min-height:28px;}
	#liLogin {display:block;}
	
	#divFlags img {width:48px;}

	#divMenubuttonbar {display:none;}
	#divLogin {display:block;}
	#divLoginMobile {display:none !Important;}
	
	#divPageHeaderText H1 { font-size: 70px;}

	.mobileButton, .touch {min-height:0px;padding-top:none;}
	input[type="button"], input[type="submit"], input[type="text"], input[type="password"], input[type="date"], input[type="email"], input[type="file"], input[type="time"], input[type="number"], textarea, select, .clButton {min-height:26px;padding-top: 0px;}
	select {height:auto;}
	table.colResizable td {height:auto;}
	
	#cssSetDesktopLayout {display:none;}
	#cssSetMobileLayout {display:block;}
	
	.wrapper { grid-template-columns: auto auto auto; }
}


/* ---------------------------------------------------------- */
/* ------------------- iPad Liggande enbart ----------------- */
/* ---------------------------------------------------------- */
@media only screen and (width: 1024px) and (device-height: 1024px) {#cssHelper:after {content: "Screen min-width: 1024px and device-height: 1024px, iPad liggande enbart";}

	#ulMenu a { min-height:48px; padding-top:12px; }
	#divFlags img {width:64px;}
	
	input[type="button"], input[type="submit"], input[type="text"], input[type="password"], input[type="date"], input[type="email"], input[type="file"], input[type="time"], input[type="number"], textarea, select {min-height:48px;}
	select {height:48px;}
	table.colResizable td {height:48px;}
	
	
	
}

/*  ------------------- DESKTOP 1366 ------------------------ */
@media only screen and (min-width: 1366px){#cssHelper:after {content: "Screen min-width: 1366px";}
	
	body, p {
		font-size:16px;
	}
	
	#divMenu {width:20%;}
	#divMain {width:80%;} 
	
	#divPageHeaderText H1 { font-size: 80px;}
	
	.divReadable {max-width:60%;}
	.divWebShop1 {width:22%;}
	.divProduct {width:15%;}
	img.imgRegisterImage { width:30%; margin:0px 1% 10px 0px;}
	
	#divFlags img {margin-right:20px;}
	

	
}


/*  ------------------- DESKTOP 1600 ------------------------ */
@media only screen and (min-width: 1600px){	#cssHelper:after {content: "Screen min-width: 1600px";}
	
	body, p {font-size:17px;}
	
	H1 {font-size:34px;}
	H2 {font-size:28px;}
	H3 {font-size:24px;}
	H4 {font-size:16px;}
	
	#divPageHeaderText H1 { font-size: 100px;}
	
		.wrapper { grid-template-columns: auto auto auto auto; }



}


/*  ------------------- DESKTOP 1920 ------------------------ */
@media only screen and (min-width: 1920px){	#cssHelper:after {content: "Screen min-width: 1920px";}
	
	#divMenu {width:18%;}
	#divMain {width:82%;} 
	
	#divPageHeaderText H1 { font-size: 120px;}

	/*.divWebshopDisplay {width:11.5%;}*/
	.divWebShop1 {width:16%;}
	.divProduct {width:10%;}
	img.imgRegisterImage { width:24%; margin:0px 1% 10px 0px;}
	
		.wrapper { grid-template-columns: auto auto auto auto auto; }
	
}

/*  ------------------- DESKTOP 2560 ------------------------ */
@media only screen and (min-width: 2560px){#cssHelper:after {content: "Screen min-width: 2560px";}

	#divMenu {width:12%;}
	#divMain {width:88%;} 
	img.imgRegisterImage { width:15%; margin:0px 1% 10px 0px;}
	

}



/* SAVATTORE COLUMN CSS */

.column { float: left; }
.size-1of1 { width: 100%; }
.size-1of2 { width: 50%; }
.size-1of3 { width: 33.333%; }
.size-1of4 { width: 25%; }

@media only screen and (min-width: 320px) and (max-width: 767px) {
	#grid[data-columns]::before {
		content: '1 .column.size-1of1';
	}
}

@media only screen and (min-width: 768px) and (max-width: 1599px) {
	#grid[data-columns]::before {
		content: '2 .column.size-1of2';
	}
}

@media only screen and (min-width: 1600px) and (max-width: 2559px) {
	#grid[data-columns]::before {
		content: '3 .column.size-1of3';
	}
}

@media only screen and (min-width: 2560px) and (max-width: 4000px) {
	#grid[data-columns]::before {
		content: '4 .column.size-1of4';
	}
}

/* CollagePlus */

.Collage{
	/* define how much padding you want in between your images */
  padding:10px;
	text-align:center;
}

.Collage img{
	/* ensures padding at the bottom of the image is correct */
  vertical-align:bottom;

  /* hide the images until the plugin has run. the plugin will reveal the images*/
  opacity:0;
}