@charset 'utf-8';

@import url(reset.css);
@import url(defaults.css);

/*
-----------------------------------------------
Author:   	Christian Hamann 
Version:  	2 Maerz 2009
URL:		younite-nrw.de

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

body {
	font: 12px/18px Arial, Helvetica, "Lucida Grande", sans-serif;
	color: #333333;
	background: url(/media/gfx/bg-blatt.jpg) repeat-y;
	}

p { 
	margin-bottom: 18px;
	} 
	
h2, .news-list-inhalt h4  {
	font-size: 13px;
	font-weight: bold;
	margin-bottom: 12px;
	color: #FF0000;
	}

h3, .news-list-subheader {
	font-size: 13px;
	font-weight: bold;
	padding: 9px 0 18px 0;
	}
	
h4, h5 {
	font-size: 13px;
	font-weight: bold;
	padding: 18px 0 9px 0;
	}

h6 {
	padding-top: 50px;
	color: #FFFFFF;
	}

h6 span {
	background-color:#FF0000; 
	padding: 1px 2px 1px 2px;
	}
			
blockquote { 
	font-weight: bold;
	font-size: 13px;
	}

.caps {
	letter-spacing: 0.1em;
	text-transform: uppercase;
	}

.clear {
	position: relative;
	clear: both;;
	}
	
	
/** hidden - versteckte Elemente
------------------------------------------------- */
.skip a {
    position: absolute;
    overflow: hidden;
    left: -2000px;
    width: 1px;
    height: 1px;
	}

.skip a:active,
.skip a:focus {
    position: absolute;
    z-index: 1000;
    overflow: visible;
    width: auto;
    height: auto;
    font-weight: bold;
    top: 2px;
    left: 0px;
    padding: 3px;
    color: #000;
    font-size: 110%;
	}

						
/** Links 
------------------------------------------------- */
a {
	text-decoration: none;
	color: #FF0000;
	}

a:link 		{color: #FF0000; text-decoration: none;}
a:visited 	{color: #FF0000; text-decoration: none;}
a:hover 	{color: #000000; text-decoration: underline;}
a:active 	{color: #FF0000; text-decoration: none;}


/* Definition der Links mit Pfeil*/

.bodytext a:link,
.bodytext a:active,
.bodytext a:visited,
.news-list-morelink a:link,
.news-list-morelink a:active,
.news-list-morelink a:visited {
	text-decoration: none;
	padding: 0px 0px 9px 12px;
	background: url(../gfx/link.gif) 0px 3px no-repeat;
	color: #FF0000;
	}	

/* oder so
.bodytext a:before {
  content: "\2192\00A0";
	}
*/
	
.bodytext a:hover,
.news-list-morelink a:hover {
	text-decoration: underline;
	}
	
/** Klapper
------------------------------------------------- */
h3 a, 
.news-list-inhalt h4 a {
	text-decoration: none;
	color: #333333;
	}

h3.cursorpointer:hover {
	color: #FF0000;
	background:  url(/media/gfx/tab-460-hover.gif) no-repeat scroll 0px 0px;
	}

h3.cursorpointer { 
	width: 440px;
	background:  url(/media/gfx/tab-460.gif) no-repeat scroll 0px 0px;
	margin-bottom: 10px; 
	padding-left: 20px; 
	height: 30px;
	}

.csc-textpic-text {
	width: 460px;
	}


/** IGM Logo
------------------------------------------------- */
#igmetall {
	position: absolute;
	top: 0;
	left: 50px;
	height: 160px;
	width: 160px;
	}

#igmetall blockquote {
	display: none;
	}

#igmetall a {
	display: block;
	width: 68px;
	height: 75px;
	text-indent: 200px;
	white-space: nowrap;
	overflow: hidden;
	background: url(/media/gfx/igm-logo.gif) 0 0 no-repeat;
	}

/** younite! Logo
------------------------------------------------- */
#yn-logo { 
	position: absolute;
	top: 158px;
	left: 20px;
	}
					
#yn-logo a {
	display: block;
	width: 114px;
	height: 38px;
	text-indent: 200px;
	white-space: nowrap;
	overflow: hidden;
	background: url(/media/gfx/yn-logo.gif) no-repeat;
	}


/** Themen Navigation oben
------------------------------------------------- */
div#navigation {
	list-style: none;
	display: inline;
	overflow: hidden;
	
	position: absolute;
	top: 0px;
	left: 160px;
	height: 160px;
	width: 800px;
	}

#themen li {
	width: 160px;
	list-style: none;
	display: inline;
	}

#themen a {
	float: left;
	padding: 160px 0 0 0;
	overflow: hidden;
	height: 0px !important; 
	height /**/:160px; /* for IE5/Win only */
	}
	
#themen a:hover,
#themen a:active, 
#themen a.selected  {
	background-position: 0 -160px;
	}

/* Headlines der Themen */

#nav-ausbildungsplaetze a {
	width: 160px;
	background: url(/media/gfx/themen/ausbildungsplaetze.gif) top left no-repeat;
	}
#nav-ausbildungsqualitaet a {
	width: 160px;
	background: url(/media/gfx/themen/ausbildungsqualitaet.gif) top left no-repeat;
	}
#nav-lohnundgehalt a {
	width: 160px;
	background: url(/media/gfx/themen/lohn+gehalt.gif) top left no-repeat;
	}
#nav-uebernahme a {
	width: 160px;
	background: url(/media/gfx/themen/uebernahme.gif) top left no-repeat;
	}
#nav-berufsperspektiven a {
	width: 160px;
	background: url(/media/gfx/themen/berufsperspektiven.gif) top left no-repeat;
	}


/** Sub-Navigation 
------------------------------------------------- */
#sub-navigation { 
	position: absolute;
	top: 220px;
	left: 0px;
	width: 160px;
	background-color: #e4e2d5; /* helles Grau*/
	}

#sub-nav {
    padding-top: 5px;
    margin-left: 13px;
	list-style: none inside;
	line-height: 30px;
	}

#sub-nav ul { 
	margin-left: 5px; 
	line-height: 20px;
	}

#sub-nav li { 
	font-weight: bold; 
	}

#sub-nav ul li { 
	border: 0; 
	font-weight: normal;
	}

#sub-nav a {
	text-decoration: none;
	}

#sub-nav a:link 	{color: #4b5a5b;} /* blaues Grau*/
#sub-nav a:visited 	{color: #4b5a5b;}
#sub-nav a:hover 	{color: #000000;} 
#sub-nav a:active 	{color: #FF0000;}


#sub-nav ul li.cur2 a:link, #sub-nav ul li.cur3 a:link,
#sub-nav ul li.cur2 a:visited, #sub-nav ul li.cur3 a:visited,
#sub-nav ul li.cur2 a:hover, #sub-nav ul li.cur3 a:hover,
#sub-nav ul li.cur2 a:active, #sub-nav ul li.cur3 a:active {
	color: #FF0000;
	}

#sub-nav ul li.akt2 a:link, #sub-nav ul li.akt a:link,
#sub-nav ul li.akt2 a:visited , #sub-nav ul li.akt a:visited ,
#sub-nav ul li.akt2 a:hover , #sub-nav ul li.akt a:hover ,
#sub-nav ul li.akt2 a:active , #sub-nav ul li.akt a:active  {
	font-weight: bold;
	color: #000000;
	}


/** Suche
------------------------------------------------- */
#suchform {
	padding-top:10px;
	border-top: 1px solid #FFF;
	}

#suchfeld {
	width: 100px;
	margin-left: 3px;
	
	background: white url(/media/gfx/verlauf.gif) top left repeat-x;
	border: 1px solid;
	border-color: #bdbdbd #dedede #ECE9DD #C8C8C8;
	
	font: 12px/16px "Courier New", Courier, mono; 
	padding: 5px 7px 5px 7px;
	color: #59C1E8;
	}

#suchesubmitbutton {
	background: transparent url(/media/gfx/suche.gif) no-repeat scroll 0 0;
	border: 0 none;
	height: 18px;
	width: 18px;
	margin-left: 3px;
	}

	

/** Header Image
------------------------------------------------- */
#container div.titelbild img {
	float: right;
	}


/** Content Bereich
------------------------------------------------- */
#container { 
	position: absolute;
	top: 160px;
	left: 160px;
	width: 800px;
	border-top: 1px solid #E4E2D5;
	background: url(/media/gfx/bg-gray.gif) repeat-y scroll 480px 0;
	}

#content {
	margin-left: 10px;
	}

#content .bodytext, #content dl, #content .csc-searchResult, #content h4 { 
	width: 450px;
	}

#content ul, #content ol {
	width: 420px;
	}

#content h2 {
	margin-top: 18px;
	margin-bottom: 32px;
	}	
	
#content .bodytext {}

#content .content-item {}

#content .csc-textpic-img  {
	position: relative;
	float:right;
	width: 320px;
	top: -50px;
	}
				
#content ol {
	list-style: decimal outside; 
	padding-left: 30px;
	}
	
#content ul {
	list-style-position: outside; 
	list-style-image: url(/media/gfx/bullet.gif); 
	padding-left: 30px;
	}

#content ol, ul {margin-bottom: 18px;}


/* nach oben Link*/
.toplink {
	width: 460px;
	text-align: right;
	}

.toplink a {
	color: #FF0000;
	text-decoration: none;
	font-size: 9px;
	}

.toplink a:hover { text-decoration: underline;}
 

/** Sitemap
------------------------------------------------- */

.csc-sitemap ul li a:link,
.csc-sitemap ul li a:visited,
.csc-sitemap ul li a:hover,
.csc-sitemap ul li a:active {
	text-decoration: none;
	}
	
.csc-sitemap ul li a ul li,
.csc-sitemap ul li a ul {
	list-style: none inside;
	}


/** News 
------------------------------------------------- */
.news-list-item {
	border-top: 1px solid #E4E2D5;
	padding-top: 10px;
	}

.news-list-inhalt {
	background: transparent url(/media/gfx/x.gif) repeat-y scroll 0 0;
	}

.news-list-date, .news-list-img p {
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: 9px;
	line-height: 12px;
	}

.news-list-item .news-list-img {
	float:right;
	width: 320px;
	margin-top: -10px;
        }

.news-list-item .news-list-img p {
	padding: 5px;
	}

.news-single-imgcaption {
	width: 320px;
	}




/** Kontakt-Formular
------------------------------------------------- */
fieldset { 
	width: 400px;
	margin: 18px 0 18px 0;
	}	
	
form {}
		
label.formular {
	font-size: 11px;
	line-height: 13px;
	cursor: pointer;
	}
 	
input, textarea, select {
	border: 1px solid #CECFCE;	
	}

#content select     {
	margin-bottom: 18px;
	border: 1px solid #BDBEBD;
	padding: 4px 2px;
	}
	
.txt {
	background:  url(/media/gfx/verlauf.gif) top left repeat-x;
	border: 1px solid;
	border-color: #bdbdbd #dedede #ECE9DD #C8C8C8;
	
	font: 12px/16px "Courier New", Courier, mono; 
	padding: 5px 7px 5px 7px;
	}

input:focus,
textarea:focus,
select:focus {
	border: 1px solid black;
	}

textarea {
	width: 400px;
	height: 200px;
	}
   	
input.formular-button {
	font-size: 11px;
	background-color: #CECFCE;
	width: auto;
	padding: 3px;
	font-weight: bold;
	}	
   	
p.formular-feedback {
	font-weight: bold;
	}
   	
p.formular-error span{
	background-color: #FFFF99;
	padding: 3px;
	}
   
li.formular-error{
	color: #FF0000;
	}
	

/** Tabellen
------------------------------------------------- */
table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 450px;
	margin: 18px 0 18px 0;
	font-size: 11px;
	line-height: 13px;
	}
table.csc-loginform
table th, table td {
	border: 0;
	text-align: left;
	vertical-align: top;
	padding: 1px 12px 11px 3px;
	}
		
table th { 
	font-weight: bold;
	}

table td { 
	border-top: 1px solid #CECFCE;
	border-bottom: 1px solid #CECFCE;
	}

table.csc-loginform, 
td.csc-form-labelcell, 
td.csc-form-fieldcell, 
td.csc-form-commentcell {
	border: 0;
	}

td.csc-form-labelcell {	text-align: right;}
	
legend {
	font-size: 13px;
	font-weight: bold;
	padding: 9px 0 18px 0;
	}




/** Footer
------------------------------------------------- */
#footer { 
	background-color: #B0DCF1;
	margin-top: 48px;
	height: 320px;
	padding: 10px;
	}
	
#footer p {
	font: 11px/14px Arial, Helvetica, "Lucida Grande", sans-serif; 
	color: #4B5A5B;
	}

#footer a:link 		{color: #4B5A5B; text-decoration: none;}
#footer a:visited 	{color: #4B5A5B; text-decoration: none;}
#footer a:hover 	{color: #FF0000; text-decoration: underline;}
#footer a:active 	{color: #FF0000; text-decoration: none;}