@charset "utf-8";
/**
 * stylesheet
 *
 * @author		michael.tucek
 * @package		campus05
 * @subpackage	frontend
 * @copyright	Gieler EDV - www.online-survey.at
 * @version		$WCREV$
 * $LastChangedDate: 2006-05-23 18:49:44 +0200 (Di, 23 Mai 2006) $
 * $LastChangedRevision: 61 $
 * $LastChangedBy: michael.tucek $
 */
@media all {
	body,
	html {
		height: 100%;
		margin: 0;
		padding: 0;
	}
	
	body {
		font: 13px/1.231 arial,helvetica,clean,sans-serif;
		color: #333333;
		
		background-image: url('../images/frontend/body_bg.png');
		background-position: top left;
		background-repeat: repeat;
	}
	
	/**
	 * @section page
	 */
	#page {
		/* position relative rausgenommen, macht probleme im IE7 beim gallery-overlay */
		/*position: relative;*/
		min-height: 100%;
		height: auto;
	}
	#pageInner {
		
	}
	
	/**
	 * @section header
	 */
	#pageHead {
		height: 200px;
		
		background-image: url('../images/frontend/header_bg.png');
		background-position: top center;
		background-repeat: repeat-x;
	}
	#pageHeadInner {
		height: 200px;
		
		background-image: url('../images/frontend/headerInner_bg.png');
		background-position: top center;
		background-repeat: no-repeat;
	}
	#menu {
		position: relative;
		width: 73.8461em;
		height: 200px;
		margin-left: auto;
		margin-right: auto;
		background-image: url('../images/frontend/menu_bg_de.png');
		background-position: top center;
		background-repeat: no-repeat;
	}
	.en #menu {
		background-image: url('../images/frontend/menu_bg_en.png');
	}
	
	#menu ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	#menu li {
		height: 21px;
		margin: 0;
		margin-bottom: 2px;
		padding: 0;
		padding-top: 2px;
	}
	#menu a, #menu span {
		float: left;
		padding-left: 2px;
		padding-right: 2px;
		font-size: 161.6%;
		line-height: 1em;
		font-weight: normal;
		text-transform: uppercase;
	}
	#menu a:hover {
		border: none;
	}
	#mHome a.active,
	#mCourses a.active {
		color: #c60000;
		padding-left: 17px;
		background-color: #ffffff;
		background-image: url('../images/frontend/active_red.png');
		background-position: 5px center;
		background-repeat: no-repeat;
		font-weight: bold;
	}
	#mInstitutes a.active {
		color: #ffffff;
		background-color: #c60000;
		padding-left: 17px;
		background-image: url('../images/frontend/active_white.png');
		background-position: 5px center;
		background-repeat: no-repeat;
		font-weight: bold;
	}
	#mainmenu {
		position: absolute;
		top: 53px;
	}
	#mHome ul {
		position: absolute;
		top: 23px;
		left: 330px;
		width: 620px;
	}
	#mHome li {
		float: left;
		margin-right: 20px;
	}
	#mHome a {
		color: #ffffff;
	}
	#mHome ul a, #menu span {
		font-size: 100%;
		padding-top: 4px;
		padding-bottom: 4px;
		text-transform: none;
	}
	#mInstitutes ul {
		position: absolute;
		top: 47px;
		left: 330px;
		width: 620px;
	}
	#mInstitutes li {
		float: left;
		margin-right: 20px;
	}
	#mInstitutes ul a {
		font-size: 100%;
		padding-top: 4px;
		padding-bottom: 4px;
		text-transform: none;
	}
	
	#mCourses ul {
		position: absolute;
		top: 73px;
		left: 330px;
		width: 620px;
	}
	#mCourses li {
		float: left;
		margin-right: 20px;
	}
	#mCourses ul a {
		font-size: 100%;
		padding-top: 4px;
		padding-bottom: 4px;
		text-transform: none;
	}
	#mCourses a {
		color: #ffffff;
	}
	#languageSelection {
		position: absolute;
		top: 30px;
	}
	#languageSelection a {
		font-size: 85%;
		letter-spacing: 0;
		color: #333333;
	}
	
	#claim, #claim2 {
		position: absolute;
		font-size: 197%;
		font-weight: bold;
		font-style: italic;
		color: #c60000;
	}
	#claim {
		top: 10px;
		left: 170px;
	}
	#claim2 {
		top: 40px;
		left: 320px;
	}
	
	/**
	 * @section body
	 */
	#pageBody {
		width: 73.8461em;
		margin-left: auto;
		margin-right: auto;
		padding-bottom: 140px;
	}
	#pageBodyInner {
		position: relative;
	}
	
	#mainColumn {
		margin-right: 270px;
	}
	#mainColumnInner {
		
	}
	
	#badge {
		position: absolute;
		top: 3px;
		right: -13px;
		z-index: 100;
	}
	#rightColumn {
		float: right;
		width: 250px;
		border: 3px solid #f2f2f2;
		background-color: #ffffff;
	}
	#rightColumnInner {
		padding: 15px;
		padding-top: 0;
	}
	
	/**
	 * @section footer
	 */
	#pageFoot {
		height: 120px;
		margin-top: -120px;
		background-image: url('../images/frontend/footer_bg.png');
		background-position: top center;
		background-repeat: repeat-x;
	}
	
	#pageFootInner {
		height: 120px;
		background-image: url('../images/frontend/footerInner_bg.png');
		background-position: top center;
		background-repeat: no-repeat;
	}
	#corporateMenu {
		position: relative;
		width: 73.8461em;
		height: 120px;
		margin-left: auto;
		margin-right: auto;
		background-image: url('../images/frontend/corporateMenu_bg.png');
		background-position: top center;
		background-repeat: no-repeat;
	}
	#corporateMenu p {
		position: absolute;
		top: 60px;
		
		margin-top: 0 !important;
		margin-bottom: 0!important;
		
		font-family: arial,helvetica,clean,sans-serif;
		font-size: 87%;
		letter-spacing: 0;
		color: #ffffff;
	}
	#corporateMenu ul {
		position: absolute;
		top: 33px;
		right: 0;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	#corporateMenu li {
		height: 21px;
		margin: 0;
		margin-bottom: 2px;
		padding: 0;
		padding-top: 2px;
	}
	#corporateMenu a {
		color: #ffffff;
	}
	#corporateMenu a:hover {
		border: none;
	}
	#corporateMenu ul a {
		font-size: 174%;
		line-height: 1em;
		font-weight: normal;
		text-transform: uppercase;
	}
	
	.block {
		border: 3px solid #f2f2f2;
		background-color: #ffffff;
	}
	.blockInner {
		padding: 20px;
	}
	
	#filterSettings {
		background-color: #ffffff;
		padding: 20px;
		padding-bottom: 10px;
		margin-bottom: 20px;
		border: 3px solid #c60000;
	}
	#filterSettings h2 {
		margin: 0;
		margin-bottom: 10px;
	}
	#filterSettings .label {
		width: 20%;
	}
	
	#courseLegend {
		background-color: #ffffff;
		padding: 20px;
		padding-bottom: 10px;
		margin-bottom: 20px;
		border: 3px solid #c60000;
	}
	#courseLegend h2 {
		margin: 0;
		margin-bottom: 10px;
	}
	#courseLegend .label {
		width: 20%;
	}
	
	/**
	 * @section typo
	 */
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-weight: normal;
	}
	h1 img {
		height: 40px;
		padding: 5px;
		border: 1px solid #cccccc;
		background-color: #fafafa;
		margin-right: 10px;
		vertical-align: middle;
	}
	h2 {
		margin-top: 1.5em;
		margin-bottom: 0.5em;
	}
	h3 {
		margin-top: 1.0em;
		margin-bottom: 0;
		font-weight: bold;
	}
	p {
		margin-top: 0.2em;
		margin-bottom: 0.8em;
		line-height: 1.6em;
	}
	a {
		color: #c60000;
		text-decoration: none;
		font-weight: bold;
	}
	a:hover {
		text-decoration: underline;
		/*border-bottom: 3px solid #c60000;*/
	}
	a img,
	a:hover img {
		border: 0;
	}
	
	blockquote {
		background-image: url(../images/frontend/q-open.png);
		background-repeat: no-repeat;
		background-position: left top;
		padding-left: 30px;
		font-size: 174%;
	}
	blockquote span {
		background-image: url(../images/frontend/q-close.png);
		background-repeat: no-repeat;
		background-position: right bottom;
		display: block;
		padding-right: 10px;
	}
	li {
		margin-bottom: 1em;
		line-height: 1.6em;
	}
	dt {
		font-style: italic;
		font-weight: bold;
	}
	dd {
		margin-left: 1em;
		margin-bottom: 1em;
		line-height: 1.6em;
	}
	
	/**
	 * @section course details
	 */
	#courseLinks {
		overflow: hidden;
		margin-bottom: 20px;
	}
	#courseLinks div {
		float: left;
		margin-right: 10px;
		padding: 5px 5px;
		background-image: url(../images/frontend/tab_inactive.png);
		background-repeat: repeat-x;
		background-position: top left;
	}
	#courseLinks a {
		display: inline-block;
		padding-left: 15px;
		color: #ffffff;
		background-image: url(../images/frontend/arrow.png);
		background-repeat: no-repeat;
		background-position: center left;
	}
	#courseLinks a:hover {
		border: none;
	}
	
	/**
	 * @section teaser
	 */
	#teaser {
		width: 690px;
		overflow: hidden;
		margin-bottom: 20px;
	}
	#teaserInner {
		
	}
	
	#billboard {
		background-color: #ffffff;
		border: 3px solid #f2f2f2;
	}
	#billboardInner {
		
	}
	/* container for slides */
	#slides {
		
	}
	
	/* single slide */
	.slide {
		width: 634px;	
		height: 300px;
	}
	.slideInner {
		position: relative;
		height: 230px;
		padding: 30px;
		padding-top: 20px;
		
	}
	#slide01 {
		/*
		background-image: url('../images/frontend/slides_bg_01.png');
		background-position: top left;
		background-repeat: no-repeat;
		*/
	}
	
	.slideHead {
		position: relative;
	}
	.slide h1 {
		margin: 0;
		line-height: 1em;
		font-size: 197%;
	}
	.slideHead h2 {
		font-size: 174%;
		line-height: 1em;
		margin: 0;
	}
	.slideHead .date {
		margin: 0;
		margin-top: 5px;
		color: #666666;
	}
	.slideHead .details {
		position: absolute;
		top: 0;
		right: 0;
		margin: 0;
		text-align: right;
	}
	.slideHead .details span {
		display: inline-block;
		height: 20px;
		padding: 2px 4px 0 4px;
		margin-left: 4px;
		margin-top: -4px;
		background-color: #e2e2e2;
	}
	.slideHead .details img {
		vertical-align: bottom;
	}
	
	.slideBody img {
		width: 230px;
		height: 173px;
		float: left;
		margin-right: 20px;
	}
	
	.slideFoot {
		position: absolute;
		bottom: 0;
		right: 30px;
		width: 600px;
		height: 35px;
		text-align: right;
	}
	.slideFoot .organisationName {
		font-weight: bold;
		margin: 0;
	}
	.slideFoot .organisationCourses {
		margin: 0;
		margin-bottom: 5px;
	}
	.slideFoot img {
		float: right;
		height: 40px;
		margin-left: 10px;
	}
	
	/* tabs (those little circles below slides) */
	.slidetabs {
		display: none;
		text-align: center;
	}
	
	/* single tab */
	.slidetabs a {
		width: 8px;
		height: 8px;
		margin: 3px;
		display: inline-block;
		font-size: 1px;
		background: url(../images/frontend/navigator.png) 0 0 no-repeat;	
	}
	
	/* mouseover state */
	.slidetabs a:hover {
		background-position:0 -8px;   
		border: 0;   
	}
	
	/* active state (current page state) */
	.slidetabs a.current {
		background-position:0 -16px;     
	} 	
	
	/* prev and next buttons */
	.forward, .backward {
		display: none;
		float: left;
		width: 25px;	
		height: 300px;
		cursor: pointer;
		font-size: 1px;
		text-indent: -9999em;
		background-color: #333333;
		background: url(../images/frontend/billboard_backward.png) 0 center no-repeat;	
	}
	.forward {
		float: right;
		background: url(../images/frontend/billboard_forward.png) 0 center no-repeat;	
	}
	
	/* next */
	.forward 			{}
	.forward:hover 		{background: url(../images/frontend/billboard_forward_hover.png) 0 center no-repeat;}
	.forward:active 	{} 
	
	/* prev */
	.backward:hover  	{background: url(../images/frontend/billboard_backward_hover.png) 0 center no-repeat;}
	.backward:active  	{}
	
	/**
	 * @section course tabs
	 */
	#courses {
		
	}
	/* root element for tabs  */
	ul.tabs { 
		list-style: none; 
		margin: 0; 
		padding: 0;	
		height: 40px;
	}
	
	/* single tab */
	ul.tabs li { 
		float:left;	 
		margin: 0;
		margin-right: 5px;
		padding: 0;
		list-style-image: none; 
	}
	
	/* link inside the tab. uses a background image */
	ul.tabs a { 
		display: block;
		position: relative;
		top: 10px;
		height: 30px;
		margin: 0;
		padding: 0 10px;
		line-height: 30px;
		text-align: center;	
		text-decoration: none;
		color: #ffffff;
		background: url(../images/frontend/tab_inactive.png) 0 0 repeat-x;
	}
	
	ul.tabs a:active,
	ul.tabs a:focus {
		outline: none;		
	}
	
	/* when mouse enters the tab move the background image */
	ul.tabs a:hover {
		background: url(../images/frontend/tab_hover.png) 0 0 repeat-x;
	}
	
	/* active tab uses a class name "current". its highlight is also done by moving the background image. */
	ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
		position: relative;
		top: 0;	
		height: 40px;
		line-height: 40px;
		font-weight: bold;
		cursor: default;
		border: 3px solid #f2f2f2;
		border-bottom: 0;
		color: #333333;
		background: url(../images/frontend/tab_active.png) 0 0 repeat-x;
	}
	
	.panes {
		border: 3px solid #f2f2f2;
	}
	/* initially all panes are hidden */ 
	.pane {
		background-color: #ffffff;
		padding: 20px;
	}
	
	/**
	 * @section organisations
	 */
	#organisations {
		
	}
	#organisations h3 {
		margin: 0.1em 0;
		font-size: 100%;
		font-weight: bold;
		letter-spacing: -0.02em;
	}
	#organisations p {
		position: absolute;
		bottom: 5px;
		left: 5px;
		margin: 0;
	}
	.courseCount {
		display: inline-block;
		padding: 2px 4px;
		font-weight: bold;
		background-color: #c60000;
		color: #ffffff;	
	}
	/* root element for scrollable */
	.vertical {  
		
		/* required settings */
		position: relative;
	
		/* vertical scrollers have typically larger height than width */
		width: 220px;
	}
	
	/* root element for scrollable items */
	#organisations .items {	
		
	}
	
	/* single scrollable item */
	#organisations .item {
		position: relative;
		height: 225px;
		background-color: #eeeeee;
		margin-bottom: 10px;
		padding: 5px;
	}
	.courses {
		height: 650px;
	}
	.courses .item {
		height: 190px !important;
	}
	.courses .item p {
		text-align: right;
		font-size: 93%;
	}
	.courses .item p a {
		font-weight: normal;
	}
	
	/* elements inside single item */
	#organisations .item img {
		width: 210px;
		height: 157px;
	}
	
	/* the action buttons above the scrollable */
	#actions {
		width: 220px;
		margin-bottom: 10px;
		overflow: hidden;
	}
	
	#actions a {
		cursor: pointer;
		display: inline-block;
		padding: 2px 4px;
		background-color: #c60000;
		color: #ffffff;	
	}
	#actions a:hover {
		border: 0;
	}
	
	.disabled {
		visibility: hidden;		
	}
	
	.prev {
		float: left;
	}
	.next {
		float: right;
	}
	
	/**
	 * @section tables
	 */
	#courselist,
	#organisationlist {
		width: 100%;
		border-collapse: collapse;
	}
	th {
		text-align: left;
		vertical-align: bottom;
		padding: 0.5em;
		font-size: 93%;
	}
	td {
		padding: 0.25em 0 0.25em 0.75em;
	}
	td.logo {
		width: 20%;
		padding-left: 0;
	}
	td.logo img {
		width: 120px;
	}
	td.courselink {
		width: 20%;
		padding-right: 0;
		text-align: right;
	}
	.city {
		display: block;
		font-weight: bold;
		padding-bottom: 5px;
	}
	#courselist .item td,
	#organisationlist .item td {
		border-top: 1px solid #999999;
		padding: 0.5em 0.5em;
		vertical-align: top;
	}
	.odd td {
		
	}
	.even td {
		
	}
	#courselist .courseName,
	#organisationlist .courseName {
		display: block;
	}
	#courselist .organisationName,
	#organisationlist .organisationName {
		display: block;
		font-size: 93%;
		line-height: 2em;
	}
	#courselist .organisationName a {
		font-weight: normal;
		color: #333333;
	}
	.lectures,
	.price,
	.startdate,
	.enddate {
		text-align: right;
	}
	.audience,
	.groupsize {
		text-align: center;
	}
	
	/**
	 * @section image overlay
	 */
	/* the overlayed element */
	.apple_overlay {
		
		/* initially overlay is hidden */
		display:none;
		
		/* growing background image */
		background-image:url(../img/overlay/white.png);
		
		/* 
			width after the growing animation finishes
			height is automatically calculated
		*/
		width:640px;		
		
		/* some padding to layout nested elements nicely  */
		padding:35px;
	
		/* a little styling */	
		font-size:11px;
	}
	
	/* default close button positioned on upper right corner */
	.apple_overlay .close {
		background-image:url(../img/overlay/close.png);
		position:absolute; right:5px; top:5px;
		cursor:pointer;
		height:35px;
		width:35px;
	}
	div.apple_overlay.black {
		background-image:url(http://static.flowplayer.org/tools/img/overlay/transparent.png);		
		color:#fff;
	}
	
	div.apple_overlay h2 {
		margin:10px 0 -9px 0;
		font-weight:bold;
		font-size:14px;
	}
	
	div.black h2 {
		color:#fff;
	}
	
	#triggers {
		margin-top:10px;
		text-align:center;
	}
	
	#triggers img {
		background-color:#fff;
		padding:2px;
		border:1px solid #ccc;
		margin:2px 5px;
		cursor:pointer;
		-moz-border-radius:4px;
		-webkit-border-radius:4px;
	}
	
	/**
	 * @section gallery
	 */
	#gallery {
		width: 954px;
		overflow: hidden;
		margin-top: 20px;
		margin-bottom: 20px;
		background-color: #fafafa;
		border: 3px solid #ffffff;	
	}
	
	/* define background image for the expose mask */
	#mask {
		background:#123 url(../images/frontend/mask_gradient_1800.png) no-repeat;
		background-position:50% -200px;
	}
	
	/* general settings for both scrollables */
	#gallery .items {	
		
	}
	
	/* prev and next buttons */
	#gallery .navi {
		display: none;
		float: left;
		width: 25px;	
		height: 200px;
		cursor: pointer;
		font-size: 1px;
		text-indent: -9999em;
		background-color: #333333;
		background: url(../images/frontend/billboard_backward.png) 0 center no-repeat;	
	}
	#gallery .next {
		float: right;
		background: url(../images/frontend/billboard_forward.png) 0 center no-repeat;	
	}
	
	/* next */
	#gallery .next 			{}
	#gallery .next:hover 	{background: url(../images/frontend/billboard_forward_hover.png) 0 center no-repeat;}
	#gallery .next:active 	{} 
	
	/* prev */
	#gallery .prev:hover  	{background: url(../images/frontend/billboard_backward_hover.png) 0 center no-repeat;}
	#gallery .prev:active  	{}
	
	#gallery .navi.disabled {
		visibility:hidden;		
	}
	
	
	/* the thumbnail scrollable */
	#gallery #thumbnails {
		display: none;
		position:relative;
		overflow:hidden;	 	
		width: 904px;	
		height:200px;
		margin: 0 auto;
		padding-top: 20px;
	}
	
	#gallery #thumbnails .items div {
		padding:5px;
		float:left;		
	}
	
	#gallery #thumbnails img {
		cursor: pointer;
	}
	
	/* overlay styling */
	#gallery #box {
		
	}
	
	/* 
		image is contained on the overlay background image. 
		the closing button is thus just a transparent container. 
	*/
	#gallery #box .close {
		position:absolute;
		left:8px;
		top:8px;
		cursor:pointer;
		height:35px;
		width:35px;
		text-decoration:none;
	}
	
	/* overlay scrollable */
	#gallery #images {	
		
	}
	
	/* single image */
	#gallery #images .items .item {
		float:left;
		width:400px;
		height:500px;
		margin-left:30px;
	}
	
	/* the tooltip */
	#gallery #images .items .info {
		float:none;
		color:#666666;
		font-size:13px;
	}
	
	#gallery #images .items .info h3 {
		color:#000000;
	}
		
	
	/* override button style on the overlay */
	#gallery #box .navi {
		position:absolute;
		top:25px;
		left: 60px;
	}
	
	/* next/prev buttons */
	#gallery #box .navi {
		background-image:url(../images/frontend/hori_large.png);
		width:30px;
		height:30px;
		float:left;
		background-position: 0 0;
	}
	
	#gallery #box .navi:hover  		{ background-position:-30px 0; }
	#gallery #box .navi:active  	{ background-position:-60px 0; }
	#gallery #box .next 			{ background-position: 0 -30px; clear:right; }
	#gallery #box .next:hover 		{ background-position:-30px -30px; }
	#gallery #box .next:active 		{ background-position:-60px -30px; }
		
	#gallery #box .next {
		left:510px;
	}
	
	/**
	 * @section forms
	 */
	fieldset {
		margin-bottom: 20px;
		padding-top: 10px;
		border: 1px solid #dddddd;
		background-color: #ffffff;
	}
	legend {
		font-size: 138.5%;
	}
	.field {
		margin-bottom: 0.5em;
		padding-bottom: 0.25em;
		border-bottom: 1px solid #dddddd;
	}
	fieldset .field {
		border: none;
	}
	label,
	.label {
		display: inline-block;
		width: 30%;
		padding-right: 0.5em;
		font-weight: bold;
		text-align: right;
		vertical-align: top;
	}
	.checkboxGroup label {
		width: auto;
		text-align: left;
	}
	.fieldInfo,
	.fieldError {
		display: inline-block;
		width: 0.5%;
		padding-right: 0.5em;
		font-weight: bold;
		text-align: right;
		vertical-align: top;
		cursor: pointer;
	}
	.fieldInfo {
		color: #0062c6;
	}
	.fieldError {
		color: #c60000;
	}
	.fieldInfo abbr,
	.fieldError abbr {
		border: 0;
		font-size: 153.9%;
		line-height: 1.0em;
	}
	.value {
		display: inline-block;
		width: 65%;
		color: #000000;
		letter-spacing: 0.05em;
	}
	.error label {
		color: #c60000;
	}
	.error input {
		border: 3px solid #c60000;
	}
	
	.infoMessage {
		background-color: #ffffff;
		padding: 20px;
		margin-bottom: 20px;
		border: 3px solid #0062c6;
		font-size: 138.5%;
		font-weight: bold;
		line-height: 1em;
	}
	.errorMessage {
		background-color: #ffffff;
		padding: 20px;
		margin-bottom: 20px;
		border: 3px solid #c60000;
		font-size: 138.5%;
		font-weight: bold;
		line-height: 1em;
	}
	
	.cancelButton {
		vertical-align: center;
		padding-left: 2px;
		padding-right: 5px;
	}
	
	/**
	 * @section subcolumns
	 */
	.subcolumns {display: table; width: 100%; table-layout: fixed;}
	
	.c20l, .c25l, .c33l, .c40l, .c38l, .c50l, .c60l, .c62l, .c66l, .c75l, .c80l {float: left;}
	.c20r, .c25r, .c33r, .c40r, .c38r, .c50r, .c60r, .c66r, .c62r, .c75r, .c80r {float: right; margin-left: -5px;}
	
	.c20l, .c20r {width: 20%;}
	.c40l, .c40r {width: 40%;}
	.c60l, .c60r {width: 60%;}
	.c80l, .c80r {width: 80%;}
	.c25l, .c25r {width: 25%;}
	.c33l, .c33r {width: 33.333%;}
	.c50l, .c50r {width: 50%;}
	.c66l, .c66r {width: 66.666%;}
	.c75l, .c75r {width: 75%;}
	.c38l, .c38r {width: 38.2%;}
	.c62l, .c62r {width: 61.8%;}
	
	.subc  {padding: 0 5px;}
	.subcl {padding: 0 10px 0 0;}
	.subcr {padding: 0 0 0 10px;}
}

@media screen {
	
}

@media print {
	
}