CSS der ext 2/3 Columns auslagern?

Hallo habe die ext. fdfx_2cols und fdfx_3cols installiert!
Funktioniert zwar super aber die das CSS wird in die HTML geschrieben

schaut dann ungefähr so aus

/* default styles for extension "tx_fdfx2cols_pi1" */
/*  Layout 1 */
.c2l1-left{
   border-right: 1px solid #FFEDA8;
   padding-right: 5px;
   width:50%;
   white-space:normal;
}
.c2l1-middle{
   padding-left: 5px;
   width:50%;
   white-space:normal;
}
/*  Layout 2 */
.c2l2-left{
   border-right: 1px solid #FFEDA8;
   padding-right: 5px;
   width:50%;
   white-space:normal;
}
.c2l2-middle{
   background-color:#FFEDA8;
   padding-left: 5px;
   width:50%;
   white-space:normal;
}
/* Layout 2 */
.c2l3-left{
   border-right: 1px solid #FFEDA8;
   padding-right: 5px;
   width:70%;
   white-space:normal;
}
.c2l3-middle{
   background-color:#FFEDA8;
   border: 1px solid blue;
   padding-left: 5px;
   width:30%;
   white-space:normal;
}
/*
	Styles 2 Column DIV Section
*/
div.tx-fdfx2cols-pi1{
    position:relative;
    left:0px;
	margin-bottom:10px;
}
/* Layout 1 */
div.c2l1d-left{
   position:absolute;
   left:0px;
   padding: 0px;
   width:380px;
   white-space:normal;
   border:1px solid red;
}
div.c2l1d-middle{
   position:absolute;
   left:390px;
   padding: 0px;
   width:380px;
   border:1px solid blue;
   white-space:normal;
}
/* Layout 2 */
div.c2l2d-left{
   position:absolute;
   left:0px;
   padding: 0px;
   width:380px;
   border:1px solid blue;
   white-space:normal;
}
div.c2l2d-middle{
   position:absolute;
   left:390px;
   padding: 0px;
   width:380px;
   white-space:normal;
   border:1px solid blue;
   background-color:#C0C0C0;
}
/* 
	Layout 3 
	
	embedded
*/
div.c2l3d-left{
   position:absolute;
   left:0px;
   padding: 0px;
   width:770px;
   white-space:normal;
   border:1px solid red;
}
div.c2l3d-middle{
   float:right;
   margin:5px;
   padding: 0px;
   width: 200px;
   height: 100px;
   overflow:auto;
   white-space:normal;
   border:1px solid blue;
   background-color:#C0C0C0;
}
/* default styles for extension "tx_fdfx3cols_pi1" */
/* Layout 1 */
.c3l1-left{
   border-right: 1px solid #CCCCCC;
   padding-right: 7px;
   width:28%;
   white-space:normal;
}
.c3l1-middle{
   border-right: 1px solid #CCCCCC;
   padding-left: 10px;
   padding-right: 10px;
   width:44%;
   white-space:normal;
}
.c3l1-right{
   padding-left: 5px;
   width:28%;
   white-space:normal;
}
/* Layout 2 */
.c3l2-left{
   border-right: 1px solid #CCCCCC;
   padding-right: 5px;
   width:25%;
   white-space:normal;
}
.c3l2-middle{
   border-right: 1px solid #CCCCCC;
   padding-left: 5px;
   padding-right: 5px;
   width:50%;
   white-space:normal;
}
.c3l2-right{
   padding-left: 5px;
   width:25%;
   white-space:normal;
}
/* Layout 3 */
.c3l3-left{
   border-right: 1px solid #CCCCCC;
   padding-right: 5px;
   width:40%;
   white-space:normal;
}
.c3l3-middle{
   border-right: 1px solid #CCCCCC;
   padding-left: 5px;
   padding-right: 5px;
   width:40%;
   white-space:normal;
}
.c3l3-right{
   padding-left: 5px;
   width:20%;
   white-space:normal;
   background-color:#CCCCCC;
}
/*
	Styles 3 Column DIV Section
*/
div.tx-fdfx3cols-pi1{
    position:relative;
    left:0px;
	margin-bottom:10px;
}
/* Layout 1 */
div.c3l1d-left{
   position:absolute;
   left:0px;
   padding: 0px;
   width:250px;
   white-space:normal;
   border:1px solid red;
}
div.c3l1d-middle{
   position:absolute;
   left:260px;
   padding: 0px;
   width:250px;
   border:1px solid blue;
   white-space:normal;
}
div.c3l1d-right{
   position:absolute;
   left:520px;
   padding: 0px;
   width:250px;
   border:1px solid green;
   white-space:normal;
}
/* Layout 2 */
div.c3l2d-left{
   position:absolute;
   left:0px;
   padding: 0px;
   width:380px;
   border:1px solid blue;
   white-space:normal;
}
div.c3l2d-middle{
   position:absolute;
   left:390px;
   padding: 0px;
   width:380px;
   white-space:normal;
   border:1px solid blue;
   background-color:#C0C0C0;
}
/*
	Layout 3

	embedded
*/
div.c3l3d-left{
   position:absolute;
   left:0px;
   padding: 0px;
   width:770px;
   white-space:normal;
   border:1px solid red;
}
div.c3l3d-middle{
   float:right;
   margin:5px;
   padding: 0px;
   width: 200px;
   height: 100px;
   overflow:auto;
   white-space:normal;
   border:1px solid blue;
   background-color:#C0C0C0;
}
	-->
		/*]]>*/
	</style>

das schaut natürlich in der HTML unsauber aus und möchte diese ein die von mir vorgesehene CSS Datei verlagern!

Da ich aber aus diesem Soucecode nicht schlau werde wollt ich hier um hilfe fragen!

LG Billix

In der Datei "typo3conf/ext/fdfx_2colsext_typoscript_setup.txt" habe ich in den Zeilen 117 und 123 die <p> Tags in <div> geändert, um die <h1> bis <h...> zu befreien.

Ansonten habe ich noch ein paar Foreground Colors mit dem Wert "inherit"
nachgetragen, damit der CSS-Validator keine Warnungen ausgibt.

Ich habe alles ins Main-Setup geschrieben:

#----------------------------------------------
# 2 Columns CSS
#----------------------------------------------
[GLOBAL]
plugin.tx_fdfx2cols_pi1{
    _CSS_DEFAULT_STYLE (
.c2l1-left{
   border-right: 1px solid #FFEDA8;
   padding-right: 5px;
   width:50%;
   white-space:normal;
}
.c2l1-middle{
   padding-left: 5px;
   width:50%;
   white-space:normal;
}
.c2l2-left{
   border-right: 1px solid #FFEDA8;
   padding-right: 5px;
   width:50%;
   white-space:normal;
}
.c2l2-middle{
   background-color:#FFEDA8;
   color: inherit;
   padding-left: 5px;
   width:50%;
   white-space:normal;
}
.c2l3-left{
   border-right: 1px solid #FFEDA8;
   padding-right: 5px;
   width:70%;
   white-space:normal;
}
.c2l3-middle{
   background-color:#FFEDA8;
   color: inherit;
   border: 1px solid blue;
   padding-left: 5px;
   width:30%;
   white-space:normal;
}
/* Styles 2 Column DIV Section */
div.tx-fdfx2cols-pi1{
    position:relative;
    margin:10px 0px 10px 0px;
}
div.c2l1d-left{
   position:relative;
   width: 210px;
   white-space:normal;
   float: left;
}
div.c2l1d-middle{
   position:relative;
   padding-left: 1.1em;
   width: 220px;
   border-left: 1px solid silver;
   white-space:normal;
   float: right;
}
div.c2l2d-left{
   position:relative;
   left:0px;
   padding: 0px;
   width:380px;
   border:1px solid blue;
   white-space:normal;
}
div.c2l2d-middle{
   position:relative;
   left:390px;
   padding: 0px;
   width:380px;
   white-space:normal;
   border:1px solid blue;
   background-color:#C0C0C0;
   color: inherit;
}
/* Layout 3 */ 

/* embedded */
div.c2l3d-left{
   position:relative;
   left:0px;
   padding: 0px;
   width:100%;
   white-space:normal;
   border:1px solid red;
}
div.c2l3d-middle{
   float:left;
   margin:5px;
   padding: 0px;
   white-space:normal;
   border:1px solid blue;
   background-color:#C0C0C0;
   color: inherit;
}

)
    templateFile = {$plugin.tx_fdfx2cols_pi1.TEMPLATE_FILE}
    divHeight = {$plugin.tx_fdfx2cols_pi1.DIV_HEIGHT}
    parser < tt_content.text.20.parseFunc
}
tt_content.fdfx_2cols_pi1 = COA
tt_content.fdfx_2cols_pi1 {
10 = < lib.stdheader
10.stdWrap.dataWrap=<div class="csc-fdfx_2cols_pi1-header csc-fdfx_2cols_pi1-header-{field:layout}">|</div>
15=TEXT
15{
field = subheader
required = 1

dataWrap = <div class="csc-fdfx_2cols_pi1-subheader csc-fdfx_2cols_pi1-subheader-{field:layout}">|</div>
htmlSpecialChars = 1

editIcons = tt_content:subheader,layout
editIcons.beforeLastTag = 1
editIcons.iconTitle.data = LLL:EXT:css_styled_content/pi1/locallang.php:eIcon.subheader

prefixComment = 2 | Subheader:
}
20 = < plugin.tx_fdfx2cols_pi1
}

Im Seiten-HTML taucht das CSS nicht auf.