a:link {
  color: #00CC00;
}

a:visited {
  color: #FF0000;
}

a:active {
  color: Red;
}

a:hover {
  color: #00CC00;
}body {
  font-family: Verdana, Arial, sans-serif;
  color: Black;
  background-color: White;
}
body {
background-color: #FF99FF;
  padding: 0;


behavior: url(CSS/csshover.htc);
font: medium/1.8em Verdana, Helvetica, Arial, sans-serif;
}

a:hover {
color : #FF3300
}


.deal {
position:absolute;
z-index: 1;
top: 10px;
left: 600px;
width: 100px;
height:76px;
background-image: url(../UTI-Pics/LOOMDEAL.gif);
  background-position: center;
  background-repeat: no-repeat
}


/* tabellenformatierung Anfang */

caption {

text-align: left;
margin: 0 0 0 100px;
caption-side: top
}


#wechseltext {


margin: 0 auto;
}



#loompen  {
width: 350px;
border: 1px solid #333333;
font-size: 0.8em;
table-layout: fixed;
margin:5px auto 10px auto;
display: table;
empty-cells: show;
}

#popart  {
width: 688px;
border: 1px solid #333333;
font-size: 0.8em;
table-layout: fixed;
margin:5px auto 10px auto;
display: table;
empty-cells: show;
}

#popart td {
border: 1px solid #333333;
font-size: 0.8em;
table-layout: fixed;
overflow: hidden;
}

#loompen2  {
table-layout:fixed;
width: 688px;
border: 1px solid #333333;
margin:5px auto 10px auto;
font-size: 0.7em;
display: table;

}

#loompen2 .X {
text-align: center;
font-size: 2em;
color:#FF3300;
}



tr {
  background-color: transparent
}

tr:hover {
  background-color: #333333
}

td.smile {
  background-image: url(../UTI-Pics/14.gif);
  height:40px;
  background-repeat: no-repeat;
  background-position: center;
}


td.nosmile {
  background-image: url(../UTI-Pics/Sad-Smiley-1.gif);
  height:40px;
  background-repeat: no-repeat;
  background-position: center;
}




#loompen, #loompen2 td {
color:#FFFFFF;
vertical-align: middle;
border: 1px solid #333333;
overflow: hidden;
}

table {
width:688px;
border: thin solid white;
font-size: 1em;
table-layout: fixed;
margin:5px auto 10px auto;
}


#preisliste {

}


#preisliste table {
width:auto;
font-size: 0.8em;
margin:5px auto 10px auto;
border-collapse: collapse;
color: #999999 ;
border: none;
}

#preisliste td {
width:200px;
border: 1px solid #333333;
padding-left: 10px;
}



#preisliste td.firstrow {
width:200px;
border: 1px solid #333333;
padding: 10px;
}

#preisliste td:hover {
background-color: #003333;
color: #FFFF99;

}




 #preisliste tr:hover {
  background-color: transparent;
}


.red {
  background-color: #CC0033
}


.redtwo {
  margin: 15px;
    background-color: #CC0033
}




.grey {
  background-color: #333333
}

.greytwo {
  padding: 0 5px 0 5px;
  background-color: #333333;
  float:left;
  width: 200px;
}

div.downloadtable table {
width:688px;
font-size: 1em;
margin:5px auto 10px auto;
border: none;
}

td.pdfico {
width: 20px;
text-align: left;

}






/* tabellenformatierung ende */

h1 {
margin: 0px 0px 0px 0px;
padding: 0px;
font-size:1.1em;
color: #FE7200;
letter-spacing:0.8em;
}



h2 {
margin: 0px 0px 10px 0px;
padding: 5px 10px 5px 10px;
font-size: 0.9em;
color: #000000;
background-image: url(../UTI-Pics/diags.gif);
}

h2.galleryheading  {
height:20px;
margin: 0px 0px 10px 0px;
padding: 10px 0px 0px 10px;
font-size: 0.7em;
line-height:0.6em;
color: #CCCCCC;
background-image: url(../UTI-Pics/H-block-5-50.jpg);
background-position: bottom;
background-repeat: repeat-x
}




h2.headline {
width: 730px;
margin: 0px 0px 1px 0px;
padding: 10px 10px 10px 10px;
font-size: 0.7em;
color: #CCCCCC;
background-image: url(../UTI-Pics/H-block-5-50.jpg);
background-repeat: repeat-x;
background-position: top
}


p.headlinetwo {
width: 670px;
margin: 0px 0px 1px 0px;
padding: 10px 10px 10px 10px;
font-size: 0.8em;
line-height: 1.4em;
color: #FFFFFF;
background-image: url(../UTI-Pics/H-block-6-50.jpg);
background-repeat: repeat-x;
background-position: top;
  background-color: #000000
}


h2.double {
width: 320px;
margin: 0px 0px 1px 0px;
padding: 5px 10px 5px 10px;
font-size: 0.8em;
color: #CCCCCC;
background-image: url(../UTI-Pics/H-block-5-50.jpg);
background-repeat: repeat-x;
background-position: top
}

h3 {
margin: 0px 0px 0px 0px;
padding: 10px 0px 10px 10px;
font-size: 70%;
color: #CCCCCC;
background-image: url(../UTI-Pics/stripe-2.jpg);
background-position: 0px 0px;
background-repeat: no-repeat
}

h3 a{
color: #CCCCCC;
display:block;
text-decoration: none;
width: 200px;
}



p.hot  {
padding: 10px 10px 0px 0px;
font-size: 0.8em;
color: #CCCCCC;
text-align: right;
font-weight: bold;
background-color: transparent;
background-image: url(../UTI-Pics/grey-top-stripe-1.jpg);
background-repeat: no-repeat;
background-position: 0 0px;

}

p.hotzwei  {

padding: 10px 0px 0px 0px;
font-size: 0.7em;
color: #FF9933;
text-align: left;
background-image: url(../UTI-Pics/orange-top-stripe-1.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;

}

p.hotdrei  {
padding: 10px 10px;
margin: 0 auto;
font-size: 0.8em;
color: #FFFFFF;
text-align: right;
}

p.hotvier  {

padding: 10px 0px 0px 0px;
font-size: 0.7em;
color: #FF9933;
text-align: left;
background-image: url(../UTI-Pics/orange-top-stripe-1.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;

}




p {
margin: 0px 0px 0px 0px;
font-size: 0.8em;
padding: 0px;
color:  #CCCCCC;
line-height: 1.6em;
letter-spacing: normal;
font-weight: normal;
}


.fett {
font-size: 1em;
  font-weight: bold
}



p.thumbs {
margin: 0px 0px 0px 10px;
font-size: 0.8em;
padding: 0px;
color: #FF3300;
line-height: 1.4em;
letter-spacing: 1px;
}



p.text {
margin: 0px 0px 0px 0px;
font-size: 0.8em;
font-weight:bold;
padding: 0px;
color: #CCCCCC;
line-height: 1.4em
}

p.impressum {
margin: 0px 0px 0px 0px;
font-size: 0.8em;
padding: 0px;
color: #CCCCCC;
line-height: 1.4em
}


.copyright {
clear : both;
margin: 30px 0 0 auto;
font-size: 75%;
color: #CCCCCC;
text-align: right
}


img {
display:block;
border: none;
}






/* main wrapper that holds it all centrally */

#wrapper {
width:750px;
margin:0 auto;
background-color: #333333;
padding: 0px 0px 0px 0px;
}

/* default masthead holding the banner and mainNav */
/* headers here */



/* definition für die bildhintergründe */


 #wrapperone {
width:750px;
margin:0 auto;
background-color: #333333;
padding: 0px 0px 0px 0px;
}



#header.home {

width: 750px;
height: 500px;
float:left;

background-color: #000000

}

#headerws {

width: 750px;
height: 250px;
background-image: url(../LL-Seiten-Pics/Header/WS-header-1.jpg);
background-repeat: no-repeat;
 
}


#headernb {

width: 750px;
height: 250px;
background-image: url(../LL-Seiten-Pics/Header/NB-Header-1.jpg);
background-repeat: no-repeat;
}





#headerwo {

width: 750px;
height: 250px;
background-image: url(../LL-Seiten-Pics/Header/WO-header-1.jpg);
background-repeat: no-repeat;
}


#headermb {

width: 750px;
height: 250px;
background-image: url(../LL-Seiten-Pics/Header/MB-Header-1.jpg);
background-repeat: no-repeat;
}


#headerld {

width: 750px;
height: 250px;
background-image: url(../LL-Seiten-Pics/Header/LD-Header-1.jpg);
background-repeat: no-repeat;
}


#loomdeal {

width: 750px;
height: 250px;
background-image: url(../LL-Seiten-Pics/Header/LDEAL-Header-1.jpg);
background-repeat: no-repeat;
}



#headermm {

width: 750px;
height: 250px;
background-image: url(../LL-Seiten-Pics/Header/MM-Header-1.jpg);
background-repeat: no-repeat;
}


#headercs {

width: 750px;
height: 250px;
background-image: url(../LL-Seiten-Pics/Header/CS-Header-1.jpg);
background-repeat: no-repeat;
}





#headeragb {

width: 750px;
height: 250px;
background-image: url(../LL-Seiten-Pics/Header/LL-home-1.jpg);
background-repeat: no-repeat;
}

#headerlp {

width: 750px;
height: 250px;
background-image: url(../LL-Seiten-Pics/Header/LP-Header-1.jpg);
background-repeat: no-repeat;
}







/* horizontal main menu navigation - based on a method from Richard Rutter */


#mainNav {

padding:0px;
width:750px;
margin: 0 auto;
}





#mainNav ul, #picnav ul, #imp ul {
list-style: none;
margin: 0;
padding: 0;
}

#imp li {
  margin : -4px 0 0 0px;

}


/* grün * ohne block wären im FF die Bullets zu sehen
wichtig ist der z-index da sonst die menuepunkte beim ie
unter dem ersten absatz verschwinden keine  ahnung warum
*/

#mainNav li {
position:relative;
margin: 0;
padding: 0;
float: left;
display:block;
z-index: 200
}



#mainNav a {
color: #CCCCCC;
width: 114px;
height: 28px;
text-decoration: none;
margin: 0px 0px;
padding: 4px 0px 0px 10px;
border-right: 1px solid #FFF;
background-image: url(../UTI-Pics/menu6.gif);
display: block;
font-size: 80%;
line-height: 1.8em;
}


#picnav {

padding:0px;
width:21px;
float:right;
margin: 0px 10px 0 0;

}

#picnav li {
position:relative;
margin: 0 0 5px 0;
padding: 0;
display:block;
}

#picnav a {
color: #FFFFFF;
width: 21px;
height: auto;
text-decoration: none;
margin: 0px 0px 0px  0;
padding: 0px 0px 0px 0px;
display: block;
background-color: #CCCCCC
}





/* kein weisser rechter Rand beim Menunkt shop */
#mainNav a#shop  {
width: 115px;
border:none;

}




 /* Submenu leve11 * display: none; */
#mainNav ul ul {
position: absolute;
top: 32px;
left:-1px;
width: 140px;
z-index: 250;
display: none;
}


#mainNav ul ul a {
display:block;
width:210px;
height: 27px;
border-right: 1px solid #FFF;
border-left:  1px solid #FFF;

}


#mainNav ul ul a#subcurrent {
display:block;
width:210px;
height: 27px;
border-right: 1px solid #FFF;
border-left:  1px solid #FFF;
color: #FF0000;
}


#mainNav ul ul a.last {

border-bottom: 1px solid #FFF;
}

/* Das Div vor mainNav auf keinen Fall entfernen  geht sonst nicht im IE6*/
div#mainNav ul.level1 li.submenu:hover ul.level2 {
display:block;
z-index: 200;
}


div#mainNav a:hover, div#mainNav a:active {
background: #D7D493;
color: #FFFFFF;
background-image: url(../UTI-Pics/menu4.gif);
background-position: 0px 32px;
}

div#picnav a:hover, div#picnav a:active {
background: #CC0000;
}



#mainNav a.active:link, #mainNav a.active:visited {
position: relative;
background: #BBB;
color: #D7D493;
font-weight: bold;
}


/* Regeln für die Bildergalerie*/
/* Regeln für die Thumb pics landscape*/

#oneColLayout #primaryContent #galleria ul {
margin: 0;
padding: 0;
}


#oneColLayout #primaryContent #galleria li {
display:inline;
margin: 20px 0px 0px 0px;
padding: 0;
float: left;
border-top: 1px dotted;
border-top-color: #999999;
border-bottom: 1px dotted;
border-bottom-color: #999999;
}

#oneColLayout #primaryContent #galleria a {
display:block;
text-decoration: none;
width:auto;
}



 /* Hier die Hoverfarbe bei der Bildübersicht  */
#oneColLayout #primaryContent #galleria a:hover, #oneColLayout #primaryContent #galleria a:active {
background: #330033;
color: #000;
}

.TPL {
padding: 58px 25px 58px 25px;
display: block;
}

 /* Regeln für die Thumb pics portrait*/

.TPP {
padding: 24px 59px 24px 59px;
display: block;

}

  /* Ausrichten der grossen Bilder 700 x 465px landscape */

.MPL {
width: 700px;
margin-top: 140px;
margin-right: auto;
margin-bottom: 140px;
margin-left: auto;

}


/* Ausrichten der grossen Bilder 700 x 465px portrait*/

.MPP {
width: 465px;
margin-top: 25px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
}


/* Ausrichten der grossen Bilder 600 x 398px landscape */

.MPL600 {
width: 600px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;

}


/* Ausrichten der grossen Bilder 600 x 398px portrait*/

.MPP600 {
width: 398px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
}



/* Ausrichten der produktbilder 300 x 199px landscape */

.MPL300 {
width: 300px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;

}


/* Ausrichten der produktbilder 300 x 199px portrait*/

.MPP300 {
width: 199px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}











        /* Textklasse für Bildbeschreibung */
p.pic {

margin: 4px 0px 0px 0px;
padding: 0px;
color: #CCCCCC;
letter-spacing: 0.1em;
text-align: center;
font-weight: bold;
font-size: 0.7em;
}


        /* Textklasse für Bildbeschreibung */
p.pica {

margin: 20px 0px 10px 0px;
color: #999999;
letter-spacing: normal;
text-align: left;
font-weight: bold;
font-size: 0.7em;
line-height: normal
}

p.picaeins {

margin: 20px 0px 5px 0px;
color: #FF9900;
font-size: 0.8em;
}


/* zentrierte Ausrichtung der Slideshowe Länge anpassen!!!!*/
#slideshow {
width: 600px;
height: 400px;
margin: 20px auto;
}






/* Farbe des Navitextes current page */

body.home #mainNav a#home,
body.products #mainNav a#products,
body.products #mainNav a#WS,
body.products #mainNav a#LL,
body.products #mainNav a#WO,
body.products #mainNav a#MB,
body.products #mainNav a#LEDD,
body.products #mainNav a#MM,
body.products #mainNav a#LP,
body.products #mainNav a#CS,
body.gallery #mainNav a#gallery,
body.gallery #mainNav a#WS,
body.gallery #mainNav a#LL,
body.gallery #mainNav a#WO,
body.gallery #mainNav a#MB,
body.gallery #mainNav a#LEDD,
body.gallery #mainNav a#MM,
body.gallery #mainNav a#LP,
body.gallery #mainNav a#CS,
body.loomdeal #mainNav a#ld,
body.download #mainNav a#download,
body.shop #mainNav a#shop,
body.home #footer a#hm,
body.impressum #footer a#impressum,
body.agb #footer a#agb,
body.contact #footer a#kontakt {
color: #FF0000;
text-decoration: none;
}

/* mit dieser Regel wird ddie Hauptnavigation ausgeblendet */
body.showslides #mainNav {
display: none
}


/* Farbe des Navitextes current page over  */

body.home #mainNav a:hover#home,
body.products #mainNav a:hover#products,
body.gallery #mainNav a#gallery,
body.gallery #mainNav a:hover#gallery,
body.download #mainNav a:hover#download,
body.loomlight #mainNav a:hover#loomlight,
body.impressum #footer a:hover#impressum,
body.agb #footer a:hover#agb,


body.contact #mainNav a:hover#contact {
color: #FF0000;
}



  /* now the three main columns, named in order of importance and display when styles switched off */


#primaryContent {
float:left;
width:750px;
display:inline;
margin: 0px 0 0px 0px;

}

/* note here that specifying threeColLayout in the body will activate the following div instead of the default primaryContent */

#threeColLayout #primaryContent {
float:left;
width:270px;
margin: 0 0 20px 195px;
}

/* note here that specifying twoColLayout in the body will activate the following div instead of the default primaryContent */

#twoColLayout #primaryContent {
width:555px;
float:left;
margin: 0 0 20px 195px;
}

/* just incase twoColLayout is specified in body, and secondaryContent is left in, we turn it off - not ideal, but it works */

#twoColLayout #secondaryContent {
display: none;
}

#secondaryContent {
float:left;
width:270px;
margin: 0 0 20px 15px;
}

#sideContent {
float:left;
width:180px;
margin: 0 0 20px -750px;
}

/* just incase oneColLayout is specified in body, and these are left in, we turn them off - not ideal, but it works */

#oneColLayout #secondaryContent, #oneColLayout #sideContent {
display: none;
}


#oneColLayout #primaryContent img {
display: block
}






/* twoColContent - used to span two right-hand columns - ONLY LEAVE THIS IN IF I DISCUSS IT - box used only if no selector */

#twoColContent{
width:555px;
float:left;
margin: 0 0 20px 195px;
}

/* box is the shaded area that holds a rounded corner box or flat box, fitting the given width of the column it is in. Usually combined with another class to control inner elements, eg box default */

.box {
margin: 15px 0 0 0;
padding: 5px 0 5px 0;
background:url(UTI-Pics/diags.gif);
}


/* Peters Abätze bild und Tetxt - top margin auf null lassen
#
# hauptabsatz - in dieses div kommen absatz1 bzw. absatz2
# hier die vertikalen Abstände formatieren

*/

.hauptabsatz {
position:relative;
margin: 0px auto 20px auto;
padding: 10px 10px 10px 10px;
width: 690px;
color: #CCCCCC;
background-color: #000000;
}

.hauptabsatzparent {
margin: 10px auto 20px auto;
padding: 0px 0px 0px 0px;
width: 710px;
color: #CCCCCC;

}




.hauptabsatz ul  {
padding: 10px;
margin: 10px;
font-size: 0.8em;
list-style-type: disc
}


/* Peters Abätze
#
#
absatz1 - bild fliesst links - text fliesst rechts*/

.absatz1 {
float:left;
margin: 0px 0 3px 0px;
border-bottom: 1px dotted grey
}

.rechts {
float: right;
margin: 0 0px 0 0px;
}


.rechtsnews {
float: right;
margin: 0 0px 0 15px;
}


 /* absatz2 - bild fliesst rechts - text fliesst links*/

.absatz2 {
float:right;
margin: 0px 0px 3px 0px;
border-bottom: 1px dotted grey

}

p.links {
margin: 5px 0px 0 0px;
color: #66FFFF;
border: 1px solid red;

}

/* absatz3 - zwei boxen fliessen nebeneinander*/

.parentleft {
float:left;
margin: 0px 0px 0px 0px;
padding: 20px 20px 20px 20px;
width: 300px;
color: #CCCCCC;
background-color: #000000
}

.parentleft ul {
margin: 0px 0px 0px 0px;
font-size: 0.8em;
padding: 10px;
color: #FFFFFF;
line-height: 1.4em;
letter-spacing: 1px;
}





.parentleft p.describe {
margin: 5px 0px 0px 0px;
color:  #FF9900 ;



}


.parentright {
float:right;
margin: 0px 0px 0px 0px;
padding: 20px 20px 20px 20px;
width: 300px;
color: #CCCCCC;
background-color: #00CC00;
}


p.normal {
float:left;
margin: 0px 0px 0 5px;
width: 700px;
}

.centermargin {
margin: 15px auto 15px auto;

}



.bdtop {
background-image: url(../UTI-Pics/Top-border-1.gif);
background-repeat: no-repeat;
width: 710px;
height: 40px;
margin: 10px auto 0 auto;
background-color: transparent
}

.bdbot {
background-image: url(../UTI-Pics/Bottom-border-1.gif);
background-repeat: no-repeat;
width: 710px;
height: 20px;
margin: 0 auto;
}


/* cbSide controls non-rounded boxes in the thinner left column, known as sideContent */

.cbSide {
width:160px;
margin: 5px 0 0 10px;
padding: 10px 0 5px 0;
background: #FFF;
}

/* Styling of the boxes if there is no JavaScript support */
.cbb {
 margin: 0 10px 0 10px;
background: #FFF;
padding: 5px 0 5px 0;
line-height: 170%;
}
 /* Insert the custom corners and borders for browsers with sufficient JavaScript support */

.cb {
margin: 0.5em 0;
line-height: 170%;
    }

/* Rules for the top corners and border */
.bt {
    background:url(UTI-Pics/box.png) no-repeat 100% 0 !important;
    background:url(UTI-Pics/box.gif) no-repeat 100% 0;
    margin:0 0 0 18px;
    height:27px;
    }
.bt div {
    height:27px;
    width:18px;
    position:relative;
    left:-18px;
    background:url(UTI-Pics/box.png) no-repeat 0 0 !important;
    background:url(UTI-Pics/box.gif) no-repeat 0 0;
    }

/* Rules for the bottom corners and border */
.bb {
    background:url(UTI-Pics/box.png) no-repeat 100% 100% !important;
    background:url(UTI-Pics/box.gif) no-repeat 100% 100%;
    margin:0 0 0 12px;
    height:14px;
    }
.bb div {
    height:14px;
    width:12px;
    position:relative;
    left:-12px;
    background:url(UTI-Pics/box.png) no-repeat 0 100% !important;
    background:url(UTI-Pics/box.gif) no-repeat 0 100%;
    }

/* Insert the left border */
.i1 {
    padding: 0 0 0 12px;
    background:url(../UTI-Pics/borders.png) repeat-y 0 0 !important;
    background:url(../UTI-Pics/borders.gif) repeat-y 0 0;
    }
/* Insert the right border */
.i2 {
    padding: 0 12px 0 0;
    background:url(../UTI-Pics/borders.png) repeat-y 100% 0 !important;
    background:url(../UTI-Pics/borders.gif) repeat-y 100% 0;
    }


.i3 {
    background:#FFF;
    border: 1px solid #FFF;
    border-width:1px 0;
    padding:0 5px;
    }


.i4 {
margin: 10px 0px 10px 0px;
font-size: 0.8em;
padding: 2px 10px 2px 10px;
color: #000000;
line-height: 1.4em;
background-color: #FE7200;
}


/* CSS for the box ends here */

.clear {
padding: 0 0 0px 0;
clear:both;

}

#map {
width: 300px;
margin: 10px auto 0 auto;
}


#formlp {
width:500px;
margin: 10px auto 0 auto;

}

#footer {
clear:both;
width: 750px;
height: 100px;
padding: 0px;
background-image:url(../LL-Seiten-Pics/Footer/LL-Footer-2.jpg);
  }

#footer #ftnav {
position: relative;
width: 750px;
top:40px;
right: 20px;
}


#footer #ftnav ul {
list-style: none;
margin: 0px 0 0 0;
padding: 0px;


}

#footer #ftnav li {
padding: 0;
float: right;
margin : 0px 0px 0 10px;
}

#footer #ftnav a {
display: block;
padding: 5px 0 5px 0px;
margin: 0 0 0 0px;
width:100px;
height:20px;
font-size: 75%;
color: #CCCCCC;
text-align: right;
}