/*	ønskeboksen.dk
	sk@opengate.dk 03/01-2018
	
  Generelt
	Text: #000000 rgb(0,0,0);
	Beige: #e5e5d7;
	Dark Beige: #e1e1e1
	Red: #a16656

	Red: #a21b22 rgba(163,11,53,1.0);
	light red: #c59e94;
	    
    Sizes:
	11px = 0.6875em
	12px = 0.75em
	14px = 0.875em
	15px = 0.9375em
	16px = 1em
	17px = 1.0625em
	18px = 1.125em
	20px = 1.25em
	22px = 1.375em
	24px = 1.5em
	28px = 1.75em

*/

.clear { clear:both; height:0px; overflow:hidden; } 
.nowrap { white-space:nowrap; }
.left { float:left }
.right { float:right; }
.required, .mandatory { color:#a21b22; }

/*====================================
  STYLES FOR DIV CONTAINERS - ALL PAGES
=====================================*/
#wrapper {
	position:relative;
	top:220px;
	max-width:971px;
	padding:0 0 2% 0;
	margin:0px auto;
	text-align:left;
	border-collapse:collapse;
	background-color:#ffffff;
	border:2px solid #f4f4f4;
	border-bottom:0 none;

}

/*====================================
  HEADER
=====================================*/
#header { width:100%; float:left; }

/* BANNER */
#banner { width:44%; padding:0% 2% 0 4%; float:left; margin-top:-17px}
#banner img { width:100%; height:auto; }

/* WEBSITE LOGO */
#websiteLogo { 
	margin:-210px auto 0;
}
#websiteLogo figure {
	max-width:450px;
	float:right;
}
#websiteLogo img { width:100%; height:auto; }

#websiteLogo::before {
	position:absolute;
	background:transparent url(../images/balloner.png) left top no-repeat;
	display:block;
	width:190px;
	height:280px;
	left:31px;
	top:-152px;
	content:" ";
}
/*
#websiteLogo::after {
	position:absolute;
	background:transparent url(../images/blue-ballon.png) left top no-repeat;
	display:block;
	width:60px;
	height:200px;
	right:108px;
	top:-49px;
	content:" ";
}
*/
/*
#mainMenu::before  {
	position:absolute;
	background:transparent url(../images/orange-ballon.png) left top no-repeat;
	display:block;
	width:66px;
	height:211px;
	right:56%;
	top:-121px;
	content:" ";
	z-index:-1;
}
*/
/* SHORCUTS FOR MOBILE WEBSITE */
#mobileShortcuts { display:none;  }

#header .ce-textpic .ce-gallery figure.image { margin-bottom:0; }


/*====================================
  MAINMENU
=====================================*/
#mainMenuResponsive { position:relative; width:100%; float:left; margin:0 0 3% 0; }

#mainMenu { 
	width:92%; 
	margin:2% 4% 3% 4%; 
	float:left; 
	z-index:1;
	position:relative;
}
#mainMenu ul {
	padding-top:5px;
	padding-bottom:5px;
	-moz-border-radius:2px 2px 0 0;
	-webkit-border-radius:2px 2px 0 0;
	border-radius:2px 2px 0 0;	
	border-color:#e1e1e1;
	background:#ffffff url(../images/bw_sky_bg.jpg) no-repeat left top; 
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	background-size: 100% auto;	
}
#mainMenu #level-1, 
#mainMenu #level-1 ul { margin:0; list-style:none outside none; z-index:9;}
#mainMenu #level-1 { width:100%; float:left; }
#mainMenu #level-1 > li { 
	float:left; 
	padding:0 2%;
	border-left:1px solid #e5e5d7;
	border-right:1px solid #506066;
}
#mainMenu #level-1 > li:first-child {
	border-left:0 none;
}
#mainMenu #level-1 > li:last-child {
	border-right:0 none;
}

#mainMenu #level-1 > li:first-child { margin:0; }
#mainMenu #level-1 > li:hover {

}
#mainMenu #level-1 > li:hover > a {
	color:#ffffff; 
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6e050a+0,4c050c+100 */
}
#mainMenu #level-1 > li:first-child:hover { 
	-moz-border-radius:10px 0 0 0; 
	-webkit-border-radius:10px 0 0 0; 
	border-radius:10px 0 0 0; 
}

#mainMenu #level-1 > li > a { 
	height:37px; 
	display:table-cell; 
	font-size:16px; 
	color:#506066; 
	text-decoration:none; 
	text-align:center; 
	vertical-align:middle;  
	font-family:Amatic-Bold, arial, sans-serif; 
	font-size:30px;
	letter-spacing:0.7px;
}
#mainMenu #level-1 > li.cur,
#mainMenu #level-1 > li.curIfSub,
#mainMenu #level-1 > li.actIfSub { 

} 
#mainMenu #level-1 > li.cur > a,
#mainMenu #level-1 > li.curIfSub > a,
#mainMenu #level-1 > li.actIfSub > a  { color:#ffffff; }

/* level 2 */
#mainMenu #level-1 li ul { position:absolute;left:-999em; width:200px;padding:0; margin:0 0 0 -2%; background-color:#e1000e; -moz-border-radius:0 0 4px 4px;	-webkit-border-radius:0 0 4px 4px; border-radius:0 0 4px 4px;}
#mainMenu #level-1 li ul li { width:100%; border-top:1px solid #ffffff; }
#mainMenu #level-1 li ul li:first-child { border-top:0 none;}
#mainMenu #level-1 li:hover ul {left:auto;}
#mainMenu #level-1 li ul a { color:#fff;  font-size:14px; padding:4% 5% 4% 12%; text-align:left; display:block; text-transform:none; }
#mainMenu #level-1 li ul a:hover { text-decoration:none; background:transparent url(ulWhite.png) left 11px no-repeat;}

#mainMenuResponsive { display:none; }

/*====================================
  CONTENTCONTAINER
=====================================*/
#content { position:relative; width:100%; float:left; z-index:1; }

#leftCol-1, #rightCol-1, #rightCol-2 {
	padding:2% 3%;
	border:1px solid #506066; 
}
#leftCol-1 { position:relative; width:57%; float:left; margin:0 0 0 4%; background-color:#f4f4f4;}
#leftCol-1 .frame-supplier img { max-width:222px; }
.subpage-1 #leftCol-1 { width:92%;}

/*
#rightCol-1 { position:relative; width:29%; float:right; margin:0 4% 0 0; border: 0 none;}
*/
#rightContainer {
	box-sizing:border-box;		
	width:29%;
	margin-right:4%;
	float:right;
}
#rightCol-1{ 
	box-sizing:border-box;	
	position:relative; 
	width:100%; 
	float:right;
	height:auto; 
 	overflow:hidden;
	visibility: hidden;	
	padding:0;
	margin-bottom:4%;
	border:0 none;
}
#rightCol-1 .as-slide-inner {
	padding-bottom:178.3%;
	float:right;
}
#rightCol-1 figure.image {
	margin-bottom:0;
}

#rightCol-2 { position:relative; width:100%; margin-top:4%; float:right; border:0 none;}
#rightCol-3 { position:relative; width:100%; margin-top:4%; float:right; border:0 none;}
.supplier { padding:2%; margin:0 0 5% 0;}

/* remove information text before registration form - mobile version*/
#c209 {
	display:none;
}
/*====================================
  FOOTER
=====================================*/
#footer { width:100%; float:left; }
#footerCol-1 { padding:2% 3%; }
#footerCol-1 img { max-width:583px; height:auto; }

/*====================================
  EXT: COOKIE
=====================================*/

#cc-notification h2 span, #cc-notification h2 {
	color:#fff;
}

#cc-notification a, #cc-notification a:visited,
#cc-notification.cc-light a, #cc-notification.cc-light a:visited {
	color:#fff;
}

/*====================================
  TYPO3 Form
=====================================*/
div.csc-mailform ol li.csc-form-element { 
	margin-bottom:3.5%;
}

li.csc-form-confirmation-false {
	width:45%;
	display:inline;
}
li.csc-form-confirmation-false input[type="submit"] {
	background:transparent none;
	color:#506066;
	padding-left:0;
	padding-right:0;
	font-size:14px;
	font-weight:normal;
}
li.csc-form-confirmation-false:hover input[type="submit"] {
	text-decoration:underline;
}
li.csc-form-confirmation-true {
	width:45%;
	display:inline;	
}


/*====================================
  EXT: tx-ogmidtpointformular
=====================================*/
.streetInfo { 
	padding:0 0 2% 31%;
}
.streetInfo label { 
	width:90%;
	float:none; 
	padding:0; 
	min-height:20px;
}
.streetInfo input[type="text"], .streetInfo input.text {
	min-width: inherit;
    width: 66%;
}
.streetInfo .fieldWrap { 
	width:18%;
	float:left;
	margin-left:2% 
}
.streetInfo .fieldWrap:first-child{
	margin-left:0;
}
.streetInfo .streetnumber {
	width:15%
}
.streetInfo .streetletter {
	width:21%	
}
.streetInfo .streetfloor {
	width:19%
}
.streetInfo .streetside {
	width:20%	
}
.streetInfo .streetdoor {
	width:15%
}

.fieldWrap.zip { width:20%;}
.fieldWrap.city { width:42%;}
.fieldWrap.residence { width:34%;}

.fieldWrap.animalName { }
.fieldWrap.breed { }
.fieldWrap.animalDayOfBirth { }
#animalDayOfBirth { background-color:#fff; }


.fieldWrap.acceptTerms label {
	width:25%;
}
.fieldWrap.acceptTerms input[type="checkbox"], 
.fieldWrap.acceptTerms input.checkBox {
    float: left;
    margin: 0 10px 50px 0;
    min-height:21px;
}

.loginField { width:90%; }
.longField { width:100%; }
.longField input[type="text"] { width:100%; }
.longField select { width:100%; }
.shortField { width:48%; float:left; }
.shortField input[type="text"] { width:100%; }
.shortField select { width:100%; }
.xtraShortField { width:31%; float:left;}
.xtraShortField input,
.xtraShortField select { width:100%; }
fieldset.contactInfo .shortField { margin-right:0%; }
fieldset.contactInfo .shortField.odd { margin-right:4%; }
fieldset.addressInfo .xtraShortField.even { margin-left:2%; margin-right:2%;}
fieldset.animalInfo .shortField.odd { margin-left:4%;}

.shortField label { width:100%;}

.contactInfo label,
.addressInfo label,
.animalInfo label {
	display:none;
}

.animalInfo .animalFirst.shortField { width:35%; }
.animalInfo .animalFirst label,
.animalInfo .hasInsurance label {
	display:block;	
}
.animalInfo .animalFirst label {
	width:27%;
}
.animalInfo .animalFirst input[type="radio"], 
.animalInfo .animalFirst input.radio {
	margin-top:5px;
	margin-bottom:5px;
	margin-right:0;
}


.animalInfo .hasInsurance.shortField { width:60%; }
.animalInfo .hasInsurance label {
	width:55%;
}
.animalInfo .hasInsurance input[type="radio"], 
.animalInfo .hasInsurance input.radio {
	margin-top:5px;
	margin-bottom:5px;
	margin-right:0;
}


#terms-message { padding:5px; overflow:hidden; }
.ui-dialog-title { padding:5px; }
.ui-dialog-titlebar-close { float:right; }
.ui-icon-closethick { float: left; overflow: hidden; text-indent: 100%; width: 16px; }
.ui-resizable-handle { float:right; margin:-16px 0 0; cursor:pointer;}

/*error messages handling */
.formError {
    background-color: #a21b22;
    border-radius: 4px;
    padding:4px;
    width: 150px;
	margin-left:-100px;	
}
.formErrorContent {
    color: #ffffff;
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
}
.formErrorArrow {
    color: #ffffff;
    font-size: 12px;
    line-height: 16px;
}