/*ok, is the css "body" or ".body" ?*/ /*CSS Selectors:*/ /*body - Targets the HTML element (element selector)*/ /*.body - Targets elements with class="body" (class selector)*/ /*#body - Targets element with id="body" (ID selector)*/ body, td, th, div, p, input, select { font-family: Arial, Helvetica, sans-serif; font-size: 11px; } .bodyimg { background-image: url(./images/spacer_gray.gif); } form {padding:0px; margin: 0px;} h1 {margin:0px 0px 10px 0px; padding:0px; font-size:16px; color:#688FB3;} big {font-size:13px;} .blue {color:#386996;} /* das Eingabefeld */ /*input.input, textarea.input, select.input {border:1px solid #000000;*/ input.input, textarea.input, select.input { border: 1px inset #e9eebb; background-color: #e9eebb; font-family: Arial, Helvetica, sans-serif; font-size: 11px; -webkit-box-shadow: 1px 2px 3px #010; -moz-box-shadow: 1px 2px 3px #010; box-shadow: 1px 2px 3px rgba(0, 0, 1, 1); border-radius: 5px; resize: none; width: 100px; } /*#010*/ input.wide, textarea.wide, select.wide {width:400px;} input.small, textarea.small, select.small {width:250px;} input.smallest {width:40px;} input.button {border:1px solid #000000; background-color:#FFFFFF;} textarea.input {height:150px;} textarea.mono {font-family:courier new, arial, verdana;} input.price { font-family:'courier new', arial, sans-serif; font-size:11px; text-align:right } /* das Eingabefeld erste Seite */ input.index {width:150px;} input.button_login {background-color:#688FB3; color:#FFFFFF; border:1 solid #000000;} .inputlabel {border:1px solid #000000; background-color:#fff8dc; font-family:Arial, Helvetica, sans-serif; font-size:11px; -webkit-box-shadow: 1px 1px 2px #010; -moz-box-shadow: 1px 1px 2px #010; box-shadow: 1px 1px 2px rgba(0, 0, 1, 1); border-radius: 5px; resize:none; } .inputlabel100 { border: 1px solid #000000; background-color: #fff8dc; font-family: Arial, Helvetica, sans-serif; font-size: 11px; -webkit-box-shadow: 1px 1px 2px #010; -moz-box-shadow: 1px 1px 2px #010; box-shadow: 1px 1px 2px rgba(0, 0, 1, 1); border-radius: 5px; resize: none; width: 100px; } /* Verweise */ a:link {text-decoration:none; color:#386996;} a:visited {text-decoration:none; color:#386996;} a:hover {text-decoration:underline; color:#386996;} .myLabel { font-weight:bold; font-size: 55px; color: White; background: black; font-family: Arial } .page_title {FONT-size:24px; font-weight:bold; font-family:Arial Narrow, Helvetica, sans-serif; color:#606060;} .page_title_black {FONT-size:24px; font-weight:bold; font-family:Arial Narrow, Helvetica, sans-serif; color:black;} .page_title_black_20_flames {FONT-size:20px; color: #000; background: #000; text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;} /* org */ .page_title_black_20 {FONT-size:20px; color: #fff; background: #666; text-shadow: 0px 0px 1px #000;} .page_title_black_30y {FONT-size:30px; color: #483d8b; /*background: #666;*/ background: #483d8b text-shadow: 0px 1px 3px #000;} .page_title_black_50x {FONT-size:50px; color: #483d8b; /*background: #666;*/ background: #483d8b text-shadow: 0px 1px 3px #000;} .page_title_black_20x {FONT-size:22px; font-weight:bold; font-family:Arial Narrow, Helvetica, sans-serif; color:#483d8b; /*text-shadow: 1px 1px #e0ffff, 2px 2px #e0ffff, 3px 3px #e0ffff;*/ text-shadow: -1px -1px white, 1px 1px #333; } /*color:black; text-shadow: 2px 2px 3px #000;} */ .page_title_black_16 {FONT-size:16px; font-weight:bold; font-family:Arial Narrow, Helvetica, sans-serif; color:black;} /* Zellenblock Inhalt */ .content_block {padding-left:0px; padding-right:4px; padding-top:1px; padding-bottom:1px;} /* Input Label */ .input_label {FONT-size:11px; font-weight:bold; font-family:Arial Narrow, Helvetica, sans-serif; color:#606060; width:120px; -webkit-box-shadow: 1px 1px 2px #010; -moz-box-shadow: 1px 1px 2px #010; box-shadow: 1px 1px 2px #010;} .input_label100 { FONT-size: 11px; font-weight: bold; font-family: Arial Narrow, Helvetica, sans-serif; color: #606060; width: 100px; -webkit-box-shadow: 1px 1px 2px #010; -moz-box-shadow: 1px 1px 2px #010; box-shadow: 1px 1px 2px #010; } .hidden_label {FONT-size:11px; font-weight:bold; font-family:Arial Narrow, Helvetica, sans-serif; color:Silver; background-color:Silver; width:120px;} /* Geben Sie den Namen der Website */ .areaType a:link, .areaType a:hover, .areaType a:visited { color:#FFFFFF; } .areaType .title{ font-size:20px; font-weight:bold; font-family:'arial narrow', helvetica, sans-serif; color:#FFFFFF} .areaType .date { font-family:'arial narrow', helvetica, sans-serif; color:#FFF99D; font-size:20px; font-weight:bold; } .areaType .navigation { text-align:center; color:white; font-size:12px; } /* die wichtigsten Daten Tabelle */ table.main th {background-color:#688FB3;color:#FFFFFF;font-weight:normal;} table.main td.dark {background-color:#F0F0F0;} table.main td.light {background-color:#F8F8F8;} table.main td.np { padding:0px; } table.main th.light {background-color:#84A4C1;} table.main th.dark {background-color:#9BB5CD;} /* Tabelle с groß eingerückt rechts и links в Cells */ table.wide td, table.wide th {padding-left:8px; padding-right:8px;} /* Seite über den Intervallen*/ table.area {background:#688FB3;} table.area th {background:#688FB3; color:#FFFFFF; font-weight:normal; padding:3px;} table.area table.s {width:100%;} /* Stil für den Status - die Intervalle */ .area a:link {text-decoration:underline;} .area a:hover {text-decoration:none;} .area a:visited {text-decoration:underline;} .period_ordered { color:white; background:#EF8282; } .period_blocked {background:#FDAB53; color:#FFFFFF;} .period_avaliable {background:#9EED9A} .period_unavaliable, .period_unavaliable a {background:#98A8B8; color:#FFFFFF;} .period_legend {height:25px; text-align:center; padding:4px;} .white, a.white:link, a.white:visited {color:#FFFFFF;} /* Jahreskalender der Feiertage */ .holidaysCalendar th {font-size:14px; font-family:arial, sans-serif} .holidaysCalendar .month th {font-size:13px; font-family:arial, sans-serif; background:#AAAAAA} .holidaysCalendar .month td {font-size:12px; font-family:tahoma, sans-serif; padding:3px;} .holidaysCalendar .month td {text-align:center;} /* Klasse des Tages, an dem Kalendertag der Woche */ .holidaysCalendar .month td.w1 {background:#DDDDDD; cursor:hand;} .holidaysCalendar .month td.w2 {background:#EAEAEA; cursor:hand;} .holidaysCalendar .month td.w3 {background:#DDDDDD; cursor:hand;} .holidaysCalendar .month td.w4 {background:#EAEAEA; cursor:hand;} .holidaysCalendar .month td.w5 {background:#DDDDDD; cursor:hand;} .holidaysCalendar .month td.w6 {background:#EAEAEA; cursor:hand;} .holidaysCalendar .month td.w7 {background:#DDDDDD; cursor:hand;} .holidaysCalendar .month td.s {color:#FFFFFF; background:red; cursor:hand;} .error { color:red; font-weight:bold; } .red { color:red; } .bigred { color:red; font-family:'arial narrow', helvetica, sans-serif; font-size:21px; font-weight:bold; } /* Fehler */ span.error { color:red; } /* Nachricht */ span.message { display:block; font-weight:bold; text-align:left; width:auto; } /* vor */ span.back { display:block; text-align:center; } .ModalPopupBG { background-color: #666699; filter: alpha(opacity=50); opacity: 0.7; } .modalbackground { background-color:Gray; opacity: 0.5; filter:Alpha(opacity=50); min-width:500px; min-height:300px; float: right; right: 0px; top: 0px; position: relative; } .modalpopup { background-color:White; padding:6px 6px 6px 6px; min-width:500px; min-height:300px; } .HellowWorldPopup { min-width:200px; min-height:150px; background:white; } /*AutoComplete flyout font-family : Tahoma*/ .autocomplete_completionListElement { margin : 0px!important ; background-color : inherit ; color : windowtext ; border : buttonshadow ; border-width : 1px ; border-style : solid ; cursor : 'default' ; overflow : auto ; height : 300px ; min-width : 1000px; font-family : Verdana ; font-size : 11px ; text-align : left ; list-style-type : none ; } /* AutoComplete highlighted item */ .autocomplete_highlightedListItem { background-color : #ffff99 ; color : black ; padding : 1px ; } .autocomplete_completionListElement400 { margin : 0px!important ; background-color : inherit ; color : windowtext ; border : buttonshadow ; border-width : 1px ; border-style : solid ; cursor : 'default' ; overflow : auto ; height : 300px ; min-width : 450px; font-family : Tahoma ; font-size : 11px ; text-align : left ; list-style-type : none ; } /* AutoComplete item */ .autocomplete_listItem { background-color : window ; color : windowtext ; padding : 1px ; min-width : 400px ; } .TitleStyleCssClass { background-color:yellow; font-family:Arial Black; font-size:larger; height:30px; width:140px; } .gv caption { text-align:center; font-weight:bold; font-size:larger; padding: 1px; background-color: Red; } .gvWhite caption { text-align:center; font-weight:bold; font-size:larger; padding: 1px; background-color: White; } .calTitle {font-weight: bold; font-size: 11; background-color:#cccccc; color: black; width: 90px; } .calBody {font-size: 11; border-width: 10px; } .BackColorTab { font-family:Verdana, Arial, Courier New; font-size: 10px; color:Gray; background-color:Silver; } .BackColorTabLightBlue { font-family: Verdana, Arial, Courier New; font-size: 10px; border: 1px solid #999999; border-top: 0; padding: 8px; color: #F0F0F0; background-color: #688FB3 !important; } .MyTabStyle .ajax__tab_tab /*inactive tab*/ { outline: 0; } .MyTabStyle .ajax__tab_active .ajax__tab_tab /*active tab*/ { color: #d13f31; outline: 0; } .btnEdit { padding-left:17px; background:url(../images/buttons/edit.gif) no-repeat; } .btnRemove { padding-left:17px; background:url(../images/buttons/remove.gif) no-repeat; } .btnGlossy { width: 90px; padding: 1px; color: #ffffff; text-shadow: 1px 1px 2px #000; border: solid thin #882d13; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 2px 2px 3px #999; box-shadow: 2px 2px 2px #bbb; background-color: #ce401c; background-image: -webkit-gradient(linear, left top, left bottom, from(#e9ede8), to(#ce401c),color-stop(0.4, #8c1b0b)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0.4, startColorstr=#e9ede8, endColorstr=#8c1b0b)"; } .btnGlossyRed { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d1cbca), color-stop(1, #ff1919) ); background:-moz-linear-gradient( center top, #d1cbca 5%, #ff1919 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1cbca', endColorstr='#ff1919'); background-color:#d1cbca; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid #d83526; display:inline-block; color:#6b526b; font-family:Arial; font-size:12px; font-weight:bold; padding:2px 20px; text-decoration:none; } .btnGlossyRedBlink { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d1cbca), color-stop(1, #ff1919) ); background:-moz-linear-gradient( center top, #d1cbca 5%, #ff1919 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1cbca', endColorstr='#ff1919'); background-color:#d1cbca; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid #d83526; display:inline-block; color:#6b526b; font-family:Arial; font-size:12px; font-weight:bold; padding:2px 20px; text-decoration:blink; } .btnGlossyGreen { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #10ab22), color-stop(1, #bbeec1) ); background:-moz-linear-gradient( center top, #10ab22 5%, #bbeec1 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#10ab22', endColorstr='#bbeec1'); background-color:#10ab22; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid #d83526; display:inline-block; /*color:#6b526b;*/ color:#ffffff; font-family:Arial; font-size:12px; font-weight:bold; padding:2px 10px; text-decoration:none; /*text-align:left;*/ } .btnGlossyBlue { background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0099ff),color-stop(1, #0066ff)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0099ff', endColorstr='#0033ff'); background-color: #0099ff; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid #d83526; display:inline-block; /*color:#6b526b;*/ color:#ffffff; font-family:Arial; font-size:12px; font-weight:bold; padding:2px 10px; text-decoration:none; } .classname:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff1919), color-stop(1, #d1cbca) ); background:-moz-linear-gradient( center top, #ff1919 5%, #d1cbca 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1919', endColorstr='#d1cbca'); background-color:#ff1919; } .classname:active { position:relative; top:1px; } @keyframes blink { 50% { border-color: #ff0000; } } xtable{ /*or other element you want*/ animation-name: blink ; animation-duration: .5s ; animation-timing-function: step-end ; animation-iteration-count: infinite ; animation-direction: alternate ; } input.textbox, select, textarea { font-family : verdana, arial, snas-serif; font-size : 11px; color : #000000; padding : 3px; background : #f0f0f0; border-left : solid 1px #c1c1c1; border-top : solid 1px #cfcfcf; border-right : solid 1px #cfcfcf; border-bottom : solid 1px #6f6f6f; } .input_text:focus, input.input_text_focus { border-color:#646464; background-color:#ffffc0; } .textarea{resize:none; height:120px; max-height:120px; min-height:120px;} /* This imageless css button was generated by CSSButtonGenerator.com */ #wrapper { margin-left:auto; margin-right:auto; width:1600px; float:auto; } .textbox{ behavior: url(border-radius.htc); border: 1px solid #CCCCCC; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; padding: 6px 6px 4px; box-shadow: 2px 3px 2px #eee; -moz-box-shadow: 2px 3px 2px #eee; -webkit-box-shadow: 2px 3px 2px #eee; background: -webkit-gradient(linear, left top, left 15, from(#FFFFFF), color-stop(12%, #f4f4f4), to(#FFFFFF)); background: -moz-linear-gradient(top, #FFFFFF, #f4f4f4 1px, #FFFFFF 15px); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#f4f4f4'); } select { width: 110px; height: 20px; background-color: #FFF; font: 400 12px/18px 'Open Sans' , sans-serif; color: #000; font-weight: normal; border: 1px solid #ccc; margin: 3px 0 0 0; padding: 1px; border-radius: 6px; } selectwide { width: 200px; height: 20px; background-color: #FFF; font: 400 12px/18px 'Open Sans' , sans-serif; color: #000; font-weight: normal; border: 1px solid #ccc; margin: 3px 0 0 0; padding: 1px; border-radius: 6px; } .SingleCheckbox input[type=checkbox] + label { width : 1em; height : 1em; border : 0.0625em solid rgb(192,192,192); border-radius : 0.35em; background : rgb(211,168,255); background-image : -moz-linear-gradient(rgb(240,240,240),rgb(211,168,255)); background-image : -ms-linear-gradient(rgb(240,240,240),rgb(211,168,255)); background-image : -o-linear-gradient(rgb(240,240,240),rgb(211,168,255)); background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(211,168,255)); background-image : linear-gradient(rgb(240,240,240),rgb(211,168,255)); vertical-align : middle; line-height : 1em; text-indent : 20px; font-size : 14px; } .Grid .pgr {background: #363670 url(~Images/decoration/grid-pgr.png) repeat-x top; } .Grid .pgr table { margin: 3px 0; } .Grid .pgr td { border-width: 0; padding: 0 6px; border-left: solid 1px #666; font-weight: bold; color: #fff; line-height: 12px; } .Grid .pgr a { color: Gray; text-decoration: none; } .Grid .pgr a:hover { color: #000; text-decoration: none; } .ajaxtabxp .ajaxtabbody {font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;border-top:0;padding:8px;background-color:#ff77ff !important;} .nice { display: block; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: auto; margin-right: auto; border-style: inset; border-width: 4px; } .hr_red { border: 0; width: 80%; color: #f00; background-color: #f00; height: 5px; } .selKpType { width: 400px; } .selKpType option { width: 400px; } .field-spacer { display: inline-block; width: 20px; /* Adjust spacing as needed */ } .gridview { width: 100%; border-collapse: collapse; margin: 10px 0; } .gridview th { background-color: #4CAF50; color: white; padding: 8px; text-align: left; } .gridview td { padding: 8px; border: 1px solid #ddd; } .gridview tr:nth-child(even) { background-color: #f2f2f2; } .gridview tr:hover { background-color: #e9e9e9; } .message { padding: 10px; margin: 10px 0; border-radius: 4px; } .message.success { background-color: #dff0d8; color: #3c763d; border: 1px solid #d6e9c6; } .message.error { background-color: #f2dede; color: #a94442; border: 1px solid #ebccd1; } .dish-dropdown { flex: 2; padding: 8px; height: 40px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; background-color: white; } .dish-quantity { flex: 1; padding: 8px; width: 90px; height: 40px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; } .remove-dish { background-color: #ff4444; color: white; border: none; border-radius: 4px; padding: 8px 12px; cursor: pointer; height: 40px; font-size: 14px; } .dish-row { margin-bottom: 15px; padding: 15px; border: 1px solid #ddd; border-radius: 4px; background-color: #fafafa; } .modal-content { max-height: 85vh; overflow-y: auto; } #dishSelectionContainer { max-height: 400px; overflow-y: auto; } /* Add to your CSS */ .reservation-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; padding: 15px; } .reservation-section { background: white; border: 1px solid #ddd; border-radius: 8px; padding: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .section-header { font-weight: bold; color: #333; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 2px solid #4CAF50; } .form-row { display: flex; align-items: center; margin-bottom: 10px; gap: 10px; } .form-label { min-width: 120px; font-weight: bold; } .form-input { flex: 1; } /* Button Styles */ .btnGlossyGreen2 { background: linear-gradient(to bottom, #4CAF50, #45a049); color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 14px; } .btnGlossyBlue2 { background: linear-gradient(to bottom, #2196F3, #0b7dda); color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 14px; } /* Form Elements */ .form-input { padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; } .radio-list { display: flex; gap: 15px; } .options-row { display: flex; gap: 20px; margin-top: 10px; } .action-buttons { display: flex; gap: 10px; justify-content: center; margin: 20px 0; padding: 15px; border-top: 1px solid #eee; } /* Responsive Design */ @media (max-width: 768px) { .reservation-container { grid-template-columns: 1fr; } .form-row { flex-direction: column; align-items: flex-start; } .form-label { min-width: auto; margin-bottom: 5px; } }