html,body {
	padding: 0;
	margin: 0;
}

body {
	background-color: #eee;
	background-image: url(/gratiae/resources/gfx/anmalanEAP/extra_clean_paper.png);
	color: #111;
}

.ribbon {
	margin-top: 100px !important
}

/* The CSS */
.ribbon {
	background-color: #999;
	background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1),
		rgba(0, 0, 0, .1));
	background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1),
		rgba(0, 0, 0, .1));
	background-image: linear-gradient(top, rgba(255, 255, 255, 0.1),
		rgba(0, 0, 0, .1));
	height: 40px;
	width: 812px;
	margin: 0 0 0 -26px;
	color: #fff;
	font: bold 12px/40px sans-serif;
	text-align: left;
	text-shadow: 0 1px #666;
	position: relative;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 0 0 1px #777, 0 1px 0
		#bbb inset;
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 0 0 1px #777, 0 1px 0
		#bbb inset;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 0 0 1px #777, 0 1px 0 #bbb
		inset;
}

.ribbon:before,.ribbon:after {
	content: '';
	border: 6px solid transparent;
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	top: 100%;
}

.ribbon:before {
	left: 0;
	border-top-color: #666;
	border-left-width: 7px;
	border-right-width: 0;
}

.ribbon:after {
	right: 0;
	border-top-color: #666;
	border-right-width: 7px;
	border-left-width: 0;
}

.ribbon .right,.ribbon .left {
	border: 19px solid #999;
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	top: 8px;
	z-index: -1;
}

.ribbon .right {
	-webkit-box-shadow: 0 1px 0 #777, 0 -1px 0 #bbb, 0 -2px 0 #777, 1px 0 0
		#777;
	-moz-box-shadow: 0 1px 0 #777, 0 -1px 0 #bbb, 0 -2px 0 #777, 1px 0 0
		#777;
	box-shadow: 0 1px 0 #777, 0 -1px 0 #bbb, 0 -2px 0 #777, 1px 0 0 #777;
	border-left-color: transparent;
	left: -31px;
}

.ribbon .left {
	-webkit-box-shadow: 0 1px 0 #777, 0 -1px 0 #bbb, 0 -2px 0 #777, -1px 0 0
		#777;
	-moz-box-shadow: 0 1px 0 #777, 0 -1px 0 #bbb, 0 -2px 0 #777, -1px 0 0
		#777;
	box-shadow: 0 1px 0 #777, 0 -1px 0 #bbb, 0 -2px 0 #777, -1px 0 0 #777;
	border-right-color: transparent;
	right: -31px;
}

.ribbon h1 {
	margin-left: 25px;
	border-bottom: medium none;
	font: 1.6em/2em georgia, serif;
	margin-bottom: 0;
	padding-top: 0;
	text-shadow: 0 1px 1px hsla(0, 0%, 100%, .5);
}

.wrapper {
	width: 800px;
	margin: 50px auto 0 auto;
}

#topPanel {
	margin-bottom: 3px;
	position: relative;
}

#topPanel #flags {
	margin-right: 10px;
}

#topPanel #flags img {
	margin-bottom: -4px;
}

#topPanel #left {
}

#topPanel #left span {
    font-weight: bold;
}

#topPanel #right {
    position: absolute;
    bottom: 0;
    right: 0;
}

#flagForm {
	display: inline;
}

.branding {
	background: #f6f6f6;
	padding: 20px 20px 0px;
	z-index: -10;
	
	-webkit-box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, .5), 
						inset 0 20px 50px -25px hsla(0, 0%, 0%, .2),
                		inset -15px 0 50px -25px hsla(0, 0%, 0%, .2), 
                		inset 15px 0 50px -25px hsla(0, 0%, 0%, .2), 
						0 2px 5px hsla(0, 0%, 0%, .25);
	-moz-box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, .5), 
					 inset 0 20px 50px -25px hsla(0, 0%, 0%, .2),
                	 inset -15px 0 50px -25px hsla(0, 0%, 0%, .2), 
                	 inset 15px 0 50px -25px hsla(0, 0%, 0%, .2), 
					 0 2px 5px hsla(0, 0%, 0%, .25);
	box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, .5), 
				inset 0 20px 50px -25px hsla(0, 0%, 0%, .2),
                inset -15px 0 50px -25px hsla(0, 0%, 0%, .2), 
                inset 15px 0 50px -25px hsla(0, 0%, 0%, .2), 
                0 2px 5px hsla(0, 0%, 0%, .25);
		
}

.content {
	background: #f6f6f6;
	padding: 10px 20px 20px;
	z-index: -10;
	
	-webkit-box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, .5), 
						inset 0 -20px 50px -25px hsla(0, 0%, 0%, .2),
              			inset -15px 0 50px -25px hsla(0, 0%, 0%, .2), 
              			inset 15px 0 50px -25px hsla(0, 0%, 0%, .2),  
						0 2px 5px hsla(0, 0%, 0%, .25);
	-moz-box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, .5),
					 inset 0 -20px 50px -25px hsla(0, 0%, 0%, .2),
              		 inset -15px 0 50px -25px hsla(0, 0%, 0%, .2), 
              		 inset 15px 0 50px -25px hsla(0, 0%, 0%, .2),  
					 0 2px 5px hsla(0, 0%, 0%, .25);
	box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, .5), 
				inset 0 -20px 50px -25px hsla(0, 0%, 0%, .2),
              	inset -15px 0 50px -25px hsla(0, 0%, 0%, .2), 
              	inset 15px 0 50px -25px hsla(0, 0%, 0%, .2), 
				0 2px 5px hsla(0, 0%, 0%, .25);
		
}

.eapMiddagGroup, .eapMiddagGroup label {
	margin-top: 5px;
}

.eapMiddagGroup textarea {
	width: 500px;
}

.eapMiddagGroup .ui-chkbox.ui-widget {
	margin-top: 10px;
}

.ceremoni-fieldset .ui-fieldset-content {
    min-height: 55px;
}

.ceremoni-float-left {
	float: left;
}

/* Tooltipinformation-rutan*/
.tooltipInfo {
    float: right;
    top: 0;
    right: 0;
    width: 50%;
    padding: 12px;
    background-color: #FCFCFC;
    border: 1px solid black;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

/* Promotor-rutan */
h2#promoTitle {
	border-bottom: 1px solid #aaa;
	font: 1.25em/2em georgia, serif;
	margin-bottom: .5em;
	text-shadow: 0 1px 1px hsla(0, 0%, 100%, .5);
}

.promotorPresentation {
	float: right;
	width: 40%;
	padding: 15px;
	background-color: #FCFCFC;
	border: 1px solid black;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

.promotorPresentation h3 {
	margin-top: 0;
	padding-top: 0;
	font-size: 1em;
}

.promotorPresentation p {
	font-style: italic;
	font-size: 0.8em;
}

.promotorPresentation .bildBox {
	float: left;
	margin-right: 15px;
}

.promotorPresentation .bildBox div {
	border: 1px solid black;
	height: 100px;
	width: 100px;
	position: relative;
}

.promotorPresentation .bildBox div img {
	position: absolute;
	top: 0;
	left: 0;
}

.promotorPresentation .bildBox p {
	font-size: 0.7em;
	margin: 2px 0 0 0;
}

td.labelCol {
	width: 115px;
	color: #8e5614;
}

#eapAnmalanForm input.ui-inputfield.ui-inputtext.ui-widget {
	width: 200px;
}

/* Footern på anmälningssidan */

#footer {
	clear: both;
	text-align: center;
	color: #666666;
	font-size: 0.85em;
	padding: 0.2em 0 0 0;
	font-style: italic;
	margin-bottom: 50px;
}

.branding-left {
	float: left;
}

.branding-right {
    float: right;
	z-index:1000;
	position: relative;
}

a, a:VISITED {
	text-decoration: none;
	color: #8e5614;
}

a:HOVER {
	color: black;
}

a img {
	border: 0;
}

/* Loginform - ändra lösenord */
#loginFormId, #losenordAndraForm {
	padding: 30px 0 10px 0;
}

#loginFormId tr > td, #losenordAndraForm tr > td {
	padding-bottom: 3px;
}

#loginFormId .submitButton , #losenordAndraForm .submitButton {
	margin-top: 10px;
}

/*latif  Loginform - NyttLosenordFormId */
#NyttLosenordFormId, #NyttLosenordFormId {
	padding: 30px 0 10px 0;
}

#NyttLosenordFormId tr > td, #NyttLosenordFormId tr > td {
	padding-bottom: 3px;
}

#NyttLosenordFormId .submitButton , #NyttLosenordFormId .submitButton {
	margin-top: 10px;
}



.pwdForgottenInfoText {
	font-size: 0.9em;
}

.pwdFaNyaLosenordText {
	font-size: 0.8em;
}

/* Generella */
.clear {
	clear: both;
}

hr.ui-separator {
	margin: 15px 0;
}

fieldset.ui-fieldset.ui-widget {
	padding-top: 10px;
}

.eapLabelColor {
	color: #8e5614;
}

.buttonPanel {
	margin: 10px 0 0;
}

.buttonPanel button {
	margin-right: 10px;
}

.ui-dialog .ui-dialog-content.ui-widget-content {
	padding: 15px;
}

.dialogSubmitBtn {
	margin-top: 15px;
}

.eapDialogTableIcon {
	display: inline-block;
}

.eapDialogTableIcon:FIRST-CHILD {
	margin-right: 15px;
}

tr.ui-widget-content.ui-datatable-empty-message {
	font-weight: bold;
	color: blue;
}


/* Start - Lägg till kyrkogäst/hospites/kransflicka/middagsgäst */
.add-kyrkogast-hospites-grid-container {
	margin-bottom: 5px;
	display: grid;
	grid-template-rows: auto auto;
	grid-template-areas: "fornamnlabel efternamnlabel efternamnlabel"
						 "fornamn efternamn addeditbtn";
	justify-content: start;
	column-gap: 5px;
}

.add-kransflicka-grid-container {
	margin-bottom: 5px;
	display: grid;
	grid-template-rows: auto auto;
	grid-template-areas: "fornamnlabel efternamnlabel alderlabel langdlabel langdlabel"
						 "fornamn efternamn alder langd addeditbtn";
	justify-content: start;
	column-gap: 5px;
}

.fornamn-label {
	padding-left: 2px;
	align-self: end;
	grid-area: fornamnlabel;
}

.efternamn-label {
	padding-left: 2px;
	align-self: end;
	grid-area: efternamnlabel;
}

.alder-label {
	padding-left: 2px;
	align-self: end;
	grid-area: alderlabel;
}

.langd-label {
	padding-left: 2px;
	align-self: end;
	grid-area: langdlabel;
}

.fornamn {
	align-self: center;
	grid-area: fornamn;
}

.efternamn {
	align-self: center;
	grid-area: efternamn;
}

.alder {
	align-self: center;
	grid-area: alder;
}

.langd {
	align-self: center;
	grid-area: langd;
}

.add-edit-btn {
	align-self: center;
	grid-area: addeditbtn;
}
/* Slut - Lägg till kyrkogäst/hospites/kransflicka/middagsgäst */


.ui-fieldset-legend.ui-corner-all.ui-state-default {
	border: none;
	font-size: 1.1em;
	background: none;
}


.preview-warning {
	font-size: 1.2em;
	font-weight: bold;
	color: red;
}


/* Professorsinstallation - start */

.profWrapper .lbl {
	color: #8e5614;
}

.name-container {
	display: grid;
	grid-gap: 6px;
	grid-template-columns: 1fr 4fr;	
}

.subject-container {
	display: grid;
	grid-gap: 6px;
	grid-template-columns: 1fr 5fr;	
}

.placing-container {
	display: grid;
	grid-gap: 6px;
	grid-template-columns: 1fr 2fr;	
}

.manuscript-item {
	padding: 10px 0 0 0;
}

.textarea-container {
	padding-bottom: 6px;
}
/* Professorsinstallation - slut */


/*** Tillgänglighet ***/

/* Om man vill lägga till en osynlig label med ett for-attribut t ex */
.screen-reader-only {
	display: none;
}

.ui-commandlink.ui-widget.ui-state-focus {
	outline: 2px solid rgb(0, 0, 0);
}

.ui-inputfield.ui-password.ui-widget.ui-state-default.ui-corner-all.ui-state-focus {
	outline: 2px solid rgb(0, 0, 0);
}

.ui-inputfield.ui-inputtext.ui-widget.ui-state-default.ui-corner-all.ui-state-focus {
	outline: 2px solid rgb(0, 0, 0);
}


.ui-radiobutton-box.ui-widget.ui-corner-all.ui-state-default.ui-state-focus {
	outline: 2px solid rgb(0, 0, 0);
}

.ui-selectonemenu.ui-widget.ui-state-default.ui-corner-all.ui-state-focus {
	outline: 2px solid rgb(0, 0, 0);
}

.ui-chkbox-box.ui-widget.ui-corner-all.ui-state-default.ui-state-focus {
	outline: 2px solid rgb(0, 0, 0);
}

.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only.ui-state-focus {
	outline: 2px solid rgb(0, 0, 0);
}

.ui-inputfield.ui-inputtextarea.ui-widget.ui-state-default.ui-corner-all.ui-inputtextarea-resizable.ui-state-focus {
	outline: 2px solid rgb(0, 0, 0);
}