/* Single View, Custom code for this template */
/* two seperate boxes:
#posterBox     { background-color: #fff; margin: 0 10px 10px 0; padding: 8px 10px; width: 100px; float: left; clear: both; border: solid 1px #eee }
#titleBox, #descrBox, #adDataBox       { background-color: #fff; margin-bottom: 10px; margin-left: 130px; padding: 8px 10px; clear: right; border: solid 1px #eee }
*/
/* box in box: */
#posterBox          { background-color: #fff; margin: 0 10px 10px 0; position: relative; top: -8px; left: -9px; float: left; clear: both; border: solid 1px #ddd }
#titleBox, #descrBox, #adDataBox       { background-color: #fff; margin-bottom: 10px; margin-left: 0px; padding: 8px 10px; clear: right; border: solid 1px #eee }
#bdate, #entrytime, #edate  { padding-right: 20px; float: left }
#btime, #etime, #edatetime  { margin-left: 110px }
#teaser { font-weight: 700; color: #222; font-size: 11px; margin-bottom: 10px }
.label     { color: #888; font-size: 9px; border-top: 1px dashed #eee }
.data   { color: #222; font-size: 11px; margin-bottom: 10px }

/* Teaser View, Custom code for this template */
#header     { color: #222; font-size: 12px; font-weight: 700; background-color: #fff; text-transform: uppercase; margin-bottom: 10px; padding: 10px; border: solid 1px #eee }
.teaserRow              { color: #222; font-size: 11px; background-color: #fff; margin-bottom: 10px; padding: 10px; border: solid 1px #eee }
#listViewLink        { background-color: #fff; margin-top: 10px; padding: 10px; border: solid 1px #eee }

/* All kind of Views coded by TYPO3 */
    div.tx-mjseventpro-pi1   { background-color: #f7f7f7; padding: 10px; border: solid 0 #e00 }
    div.tx-mjseventpro-pi1 .help   { color: #777; font-size: 9px; background-color: #ffc; padding: 1px 2px; border: solid 1px #d2d29f }

/* List View, Custom code for this template */
/* Custom styles won't be read by the TYPO3-engine. I use them to design the template and then copy them to the setup code. */		
    div.tx-mjseventpro-pi1 td.list       { padding-top: 2px; padding-right: 4px; padding-bottom: 2px; border-top: 0; border-right: 0; border-bottom: 1px dashed #bbb; border-left: 0 }

/* List View coded by TYPO3 */
    .mjseventpro-listView-title:link { color: #333333; text-decoration: none }
    .mjseventpro-listView-title:visited { color: #333333; text-decoration: none }
    .mjseventpro-listView-title:hover     { color: #d00; text-decoration: underline }
    .mjseventpro-listView-teaser:link  { color: #333333; font-weight: normal; text-decoration: none }
    .mjseventpro-listView-teaser:visited  { color: #333333; font-style: normal; text-decoration: none }
    .mjseventpro-listView-teaser:hover     { color: #d00; font-style: normal; text-decoration: underline }



/* ------------ */

.tx-mjseventpro-pi1 H2 { margin-top: 0px; margin-bottom: 0px; }


/* ------- */
.table-single     { }
.td-single     { }
.tx-mjseventpro-pi1-singleView-Infobox   { font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #f5f5f5; border: dashed 1px #999 }
.tx-mjseventpro-pi1-singleView-DescrBox  { padding: 2px 20px }

.tx-mjseventpro-pi1-browsebox  { color: #333; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #ffc }

.tx-mjseventpro-pi1-listrowField-title  { color: #333; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal; text-transform: uppercase }
.tx-mjseventpro-pi1-listrowField-teaser { color: #333; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif }
.tx-mjseventpro-pi1-listrowField-bdate { color: #333; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif }
.tx-mjseventpro-pi1-listrowField-entrytime { color: #333; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif }
.tx-mjseventpro-pi1-listrowField-time { color: #333; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif }
.tx-mjseventpro-pi1-listrowField-location { color: #333; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif }
.tx-mjseventpro-pi1-listrowField-ticketlink  { color: #333; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif }

/* Teaser View coded by TYPO3 */
    .tx-mjseventpro-pi1-teaserView-events           { background-color: #f7f7f7 }
    .tx-mjseventpro-pi1-teaserViewField-image   { padding-right: 10px; padding-bottom: 10px; float: left; clear: both }
    .tx-mjseventpro-pi1-teaserViewField-title  { font-weight: 700; text-transform: uppercase }
    .tx-mjseventpro-pi1-teaserViewField-bdate,
    .tx-mjseventpro-pi1-teaserViewField-btime,
    .tx-mjseventpro-pi1-teaserViewField-bdatetime { color: #777; font-size: 9px }
    .mjseventpro-teaserView-title:link { color: #333333; text-decoration: none }
    .mjseventpro-teaserView-title:visited { color: #333333; text-decoration: none }
    .mjseventpro-teaserView-title:hover     { color: #333333; text-decoration: underline }
    .mjseventpro-teaserView-teaser:link  { color: #555; font-size: 9px; font-weight: 400; text-decoration: none }
    .mjseventpro-teaserView-teaser:visited { color: #555; font-size: 9px; font-weight: 400; text-decoration: none }
    .mjseventpro-teaserView-teaser:hover     { color: #555; font-size: 9px; font-weight: 400; text-decoration: underline }


/* Single View */

.tx-mjseventpro-pi1-singleView-back   { color: #333; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; text-align: center; margin: 30px 20px 4px; padding: 1px 2px 3px; border: solid 1px #ccc }

.tx-mjseventpro-pi1-singleViewField-image           { font-size: 9px; background-color: #ff9; margin: 0; padding: 10px; clear: both }
.tx-mjseventpro-pi1-singleViewField-imgcap         { color: #888; font-size: 9px; background-color: #ff3; margin: 0; padding: 0 10px 10px }

.tx-mjseventpro-pi1-singleViewField-bdate,
.tx-mjseventpro-pi1-singleViewField-entrytime,
.tx-mjseventpro-pi1-singleViewField-btime,
.tx-mjseventpro-pi1-singleViewField-edate,
.tx-mjseventpro-pi1-singleViewField-etime,
.tx-mjseventpro-pi1-singleViewField-title,
.tx-mjseventpro-pi1-singleViewField-teaser,
.tx-mjseventpro-pi1-singleViewField-cat,
.tx-mjseventpro-pi1-singleViewField-type,
.tx-mjseventpro-pi1-singleViewField-descr,
.tx-mjseventpro-pi1-singleViewField-internalrefs,
.tx-mjseventpro-pi1-singleViewField-location,
.tx-mjseventpro-pi1-singleViewField-files,
.tx-mjseventpro-pi1-singleViewField-links,
.tx-mjseventpro-pi1-singleViewField-promoter,
.tx-mjseventpro-pi1-singleViewField-location,
.tx-mjseventpro-pi1-singleViewField-area,
.tx-mjseventpro-pi1-singleViewField-status,
.tx-mjseventpro-pi1-singleViewField-priority,
.tx-mjseventpro-pi1-singleViewField-fees,
.tx-mjseventpro-pi1-singleViewField-ticketlink,
.tx-mjseventpro-pi1-singleViewField-age { color: #222; font-size: 11px; margin-bottom: 10px }


/* ARCHIVE_VIEW, Custom code for this template */

    .optionBox              { color: #222; font-size: 9px; background-color: #fff; margin-bottom: 10px; padding: 10px; border: solid 1px #eee }
    .select   { padding-right: 10px; padding-bottom: 10px; float: left; clear: both }
    .search {}
    .listRow               { color: #222; font-size: 11px; background-color: #fff; margin-bottom: 10px; padding: 5px 10px; border: solid 1px #eee }

/* ARCHIVE_VIEW coded by TYPO3 */
	select, input { font-size: 9px }
    .tx-mjseventpro-pi1-archiveView-events     { background-color: #f7f7f7 }
    .tx-mjseventpro-pi1-archiveViewField-title { font-weight: 700; font-size: 9px; text-transform: uppercase }
    .tx-mjseventpro-pi1-archiveViewField-bdate  { color: #777; font-size: 9px; width: 160px; float: left; clear: both }
    .mjseventpro-archiveView-title:link     { color: #333333; text-decoration: none }
    .mjseventpro-archiveView-title:visited  { color: #333333; text-decoration: none }
    .mjseventpro-archiveView-title:hover    { color: #333333; text-decoration: underline }


--></style>
	</head>

<body>

<H1>MJS Event Calendar Template</H1>


<hr>
<h3>TEASER_VIEW</h3>
<em>This subpart is use to display a list of upcoming events.</em>
<hr>
<!-- ###TEASER_VIEW### begin -->

	<style type="text/css">
		/*<![CDATA[*/
	<!--

/* Teaser View, Custom code for this template */
    .teaserRow              { color: #222; font-size: 11px; background-color: #fff; margin-bottom: 10px; padding: 10px; border: solid 1px #eee }
    #listViewLink        { background-color: #fff; margin-top: 10px; padding: 10px; border: solid 1px #eee }
/* Teaser View coded by TYPO3 */
    .tx-mjseventpro-pi1-teaserView-events           { background-color: #f7f7f7 }
    .tx-mjseventpro-pi1-teaserView-header { color: #222; font-size: 12px; font-weight: 700; background-color: #fff; text-transform: uppercase; margin-bottom: 10px; padding: 10px; border: solid 1px #eee }
    .tx-mjseventpro-pi1-teaserViewField-image   { padding-right: 10px; padding-bottom: 10px; float: left; clear: both }
    .tx-mjseventpro-pi1-teaserViewField-title  { font-weight: 700; text-transform: uppercase }
    .tx-mjseventpro-pi1-teaserViewField-bdate,
    .tx-mjseventpro-pi1-teaserViewField-btime,
    .tx-mjseventpro-pi1-teaserViewField-bdatetime { color: #777; font-size: 9px }
    .mjseventpro-teaserView-title:link { color: #333333; text-decoration: none }
    .mjseventpro-teaserView-title:visited { color: #333333; text-decoration: none }
    .mjseventpro-teaserView-title:hover     { color: #333333; text-decoration: underline }
    .mjseventpro-teaserView-teaser:link  { color: #555; font-size: 9px; font-weight: 400; text-decoration: none }
    .mjseventpro-teaserView-teaser:visited { color: #555; font-size: 9px; font-weight: 400; text-decoration: none }
    .mjseventpro-teaserView-teaser:hover     { color: #555; font-size: 9px; font-weight: 400; text-decoration: underline }

	-->
		/*]]>*/
	</style>

	###HEADER###

	<!-- ###TEASER_ROWS### begin -->
		<div class="teaserRow">###IMAGE###<!-- # ##BDATE## ## ##BTIME## # -->###BDATETIME###<!--# ##TIME## #-->###TIMELABEL######TITLE######TEASER###</div>
	<!-- ###TEASER_ROWS### end -->

	<div id="listViewLink"><!--## #SEARCHBOX# ##-->###LIST_VIEW_LINK###</div>
<!-- ###TEASER_VIEW### end -->

<hr>
<h3>LIST_VIEW</h3>
<em>This subpart is used to display the regular list of events. It's also used by search-results.</em>
<hr>
<!-- ###LIST_VIEW### begin -->


	<style type="text/css">
		/*<![CDATA[*/
	<!--

/* List View, Custom code for this template */

    .optionBox              { color: #222; font-size: 9px; background-color: #fff; margin-bottom: 10px; padding: 10px; border: solid 1px #eee }
    .select   { padding-right: 10px; padding-bottom: 10px; float: left; clear: both }
    .search {}
    .listRow              { color: #222; font-size: 11px; background-color: #fff; margin-bottom: 10px; padding: 10px; border: solid 1px #eee }

/* List View coded by TYPO3 */
	select, input { font-size: 9px }
    .tx-mjseventpro-pi1-listView-events           { background-color: #f7f7f7 }
    .tx-mjseventpro-pi1-listViewField-image   { padding-right: 10px; padding-bottom: 10px; float: left; clear: both }
    .tx-mjseventpro-pi1-listViewField-title  { font-weight: 700; text-transform: uppercase }
    .tx-mjseventpro-pi1-listViewField-bdate,
    .tx-mjseventpro-pi1-listViewField-btime,
    .tx-mjseventpro-pi1-listViewField-time { color: #777; font-size: 9px }
    .mjseventpro-listView-title:link { color: #333333; text-decoration: none }
    .mjseventpro-listView-title:visited { color: #333333; text-decoration: none }
    .mjseventpro-listView-title:hover     { color: #333333; text-decoration: underline }
    .mjseventpro-listView-teaser:link  { color: #555; font-size: 9px; font-weight: 400; text-decoration: none }
    .mjseventpro-listView-teaser:visited { color: #555; font-size: 9px; font-weight: 400; text-decoration: none }
    .mjseventpro-listView-teaser:hover     { color: #555; font-size: 9px; font-weight: 400; text-decoration: underline }

	-->
		/*]]>*/
	</style>


		<div class="optionBox"><div class="select"><!-- # ##CATEGORY_LABEL## # -->###CATEGORY_SELECT###</div><div class="search">###SEARCHBOX###</div><!-- ## #BROWSERESULTS# ## --><!-- ## #MODESELECTOR# ## --></div>
		

	<!-- ###LIST_ROWS### begin -->
		<div class="listRow">###IMAGE######BDATE######TIME######TITLE######TEASER###<!--# ##LOCATION## ## ##TICKETLINK## #--></div>
	<!-- ###LIST_ROWS### end -->

<!-- ###LIST_VIEW### end -->

<hr>
<h3>SINGLE_VIEW</h3>
<em>This subpart is used to display all the details of a single event.</em>
<hr>
<!-- ###SINGLE_VIEW### begin -->
	<style type="text/css">
		/*<![CDATA[*/
	<!--

/* SINGLE_VIEW */
/* two seperate boxes:
#posterBox     { background-color: #fff; margin: 0 10px 10px 0; padding: 8px 10px; width: 100px; float: left; clear: both; border: solid 1px #eee }
#titleBox, #descrBox, #adDataBox       { background-color: #fff; margin-bottom: 10px; margin-left: 130px; padding: 8px 10px; clear: right; border: solid 1px #eee }
*/
/* box in box: */
#posterBox          { background-color: #fff; margin: 0 10px 10px 0; position: relative; top: -9px; left: -11px; float: left; clear: both; border: solid 1px #ddd }
#titleBox, #descrBox, #adDataBox       { background-color: #fff; margin-bottom: 10px; margin-left: 0px; padding: 8px 10px; clear: right; border: solid 1px #eee }
#bdate, #entrytime, #edate  { padding-right: 20px; float: left }
#btime, #etime, #edatetime  { margin-left: 110px }

.tx-mjseventpro-pi1-singleViewField-title { color: #444; font-size: 24px; font-weight: 700; text-transform: uppercase; margin-bottom: 10px }
.tx-mjseventpro-pi1-singleViewField-teaser { font-weight: 700; color: #222; font-size: 11px; margin-bottom: 10px }

.tx-mjseventpro-pi1-singleViewField-image           { font-size: 9px; background-color: #ffffff; margin: 0; padding: 10px; clear: both }
.tx-mjseventpro-pi1-singleViewField-imgcap         { color: #888; font-size: 9px; background-color: #ffffff; margin: 0; padding: 0 10px 10px }

.tx-mjseventpro-pi1-singleViewField-bdate,
.tx-mjseventpro-pi1-singleViewField-entrytime,
.tx-mjseventpro-pi1-singleViewField-btime,
.tx-mjseventpro-pi1-singleViewField-edate,
.tx-mjseventpro-pi1-singleViewField-etime,
.tx-mjseventpro-pi1-singleViewField-cat,
.tx-mjseventpro-pi1-singleViewField-type,
.tx-mjseventpro-pi1-singleViewField-descr,
.tx-mjseventpro-pi1-singleViewField-internalrefs,
.tx-mjseventpro-pi1-singleViewField-location,
.tx-mjseventpro-pi1-singleViewField-files,
.tx-mjseventpro-pi1-singleViewField-links,
.tx-mjseventpro-pi1-singleViewField-promoter,
.tx-mjseventpro-pi1-singleViewField-location,
.tx-mjseventpro-pi1-singleViewField-area,
.tx-mjseventpro-pi1-singleViewField-status,
.tx-mjseventpro-pi1-singleViewField-priority,
.tx-mjseventpro-pi1-singleViewField-fees,
.tx-mjseventpro-pi1-singleViewField-ticketlink,
.tx-mjseventpro-pi1-singleViewField-age,
.tx-mjseventpro-pi1-singleViewField-edatetime { color: #222; font-size: 11px; margin-bottom: 10px }

.tx-mjseventpro-pi1-singleViewHeader-bdate,
.tx-mjseventpro-pi1-singleViewHeader-entrytime,
.tx-mjseventpro-pi1-singleViewHeader-btime,
.tx-mjseventpro-pi1-singleViewHeader-edate,
.tx-mjseventpro-pi1-singleViewHeader-etime,
.tx-mjseventpro-pi1-singleViewHeader-title,
.tx-mjseventpro-pi1-singleViewHeader-teaser,
.tx-mjseventpro-pi1-singleViewHeader-cat,
.tx-mjseventpro-pi1-singleViewHeader-type,
.tx-mjseventpro-pi1-singleViewHeader-descr,
.tx-mjseventpro-pi1-singleViewHeader-internalrefs,
.tx-mjseventpro-pi1-singleViewHeader-location,
.tx-mjseventpro-pi1-singleViewHeader-image,
.tx-mjseventpro-pi1-singleViewHeader-imgcap,
.tx-mjseventpro-pi1-singleViewHeader-files,
.tx-mjseventpro-pi1-singleViewHeader-links,
.tx-mjseventpro-pi1-singleViewHeader-promoter,
.tx-mjseventpro-pi1-singleViewHeader-location,
.tx-mjseventpro-pi1-singleViewHeader-area,
.tx-mjseventpro-pi1-singleViewHeader-status,
.tx-mjseventpro-pi1-singleViewHeader-priority,
.tx-mjseventpro-pi1-singleViewHeader-fees,
.tx-mjseventpro-pi1-singleViewHeader-ticketlink,
.tx-mjseventpro-pi1-singleViewHeader-age,
.tx-mjseventpro-pi1-singleViewHeader-edatetime { color: #888; font-size: 9px; border-top: 1px dashed #eee }



/*Format fuer das Eingabeformular*/
div.tx-mjseventpro-pi1 td { 
   font-size: 12px;
	line-height: 24px;
	font-family: Arial, Helvetica, sans-serif; 
	padding-top: 4px; 
	}
div.tx-mjseventpro-pi1 td.datetime { 
   padding-top: 0px; 
	}
div.mjseventfeform_message { 
   color: red; 
	font-size: 12px; 
	}
div.tx-mjseventpro-pi1 input, div#mjseventfeform textarea { 
   font-size: 12px; 
   font-family: Arial, Helvetica, sans-serif;
   color: #333;
   background-color: #e1e1e1; 
   padding: 1px 2px 2px 3px; 
	border-style: solid; border-width: 1px; 
   border-color: #999 #999 #999 #999; 
}
div.tx-mjseventpro-pi1 input.button, select  { 
   font-size: 12px; 
   font-family: Arial, Helvetica, sans-serif;
	background-color: transparent;
}
div.tx-mjseventpro-pi1 input.button {
	background-color: ThreedFace;
}
div.tx-mjseventpro-pi1 .fieldHeaderForm  { 
   color: #333; 
   font-size: 12px; 
   text-align: right; 
   margin-right: 10px; 
   margin-left: 2px; !important 
}
.fieldHeaderForm {
	width: 130px;
}
.eventedithelp {
	font-size: 11px;
	letter-spacing: 1px;
	line-height: 14px;
	text-align: right;
	margin-right: 10px; 
	margin-left: 2px;
	color: #89060c;
}
div.tx-mjseventpro-pi1 .fieldHeaderForm2  { 
   color: #333; 
   font-size: 12px; 
   text-align: left; 
   margin-right: 4px; 
   margin-left: 0px; !important 
}
div.tx-mjseventpro-pi1 div.clear  { 
   border-top: 0px dashed #333; 
	}