﻿/*___________CSS RESET________________________________________*/
/* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) http://cssreset.com */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    display: block;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }
/*___________________EZ A CSS RESET VEGE__________________________*/

body {
	background-color: #979797;
	font-size: 16px;
	line-height: 20px;
	font-family: Calibri, sans-serif;
	color: #fff;
	padding: 0;
	margin: 0;
}
#wrapper {
	width: 1200px;
	margin: 0 auto 0 auto;
}

#sidebox {
	width: 260px;
	height: 1000px;
	float: left; /* igy mar ez is gorgetodik*/
	background-image: url("LINKS/mcs_motor_logo_kicsi_flatten2.png");
	background-color: #2e7e2b;
	background-position: center top;
	background-repeat: no-repeat;
}
#linkbox { /* ez ahhoz kell, hogy a logo kattinthato legyen*/
	position: absolute;
	width: 260px;
	height: 99px;
}
#sidebox h1 {
	font-size: 18px;
	text-transform: uppercase;
	padding: 115px 30px 5px 30px;
	display: inline-block;
	text-align: left;
	font-weight: normal;
}
#sidebox h2 {
	font-size: 18px;
	text-transform: uppercase;
	padding: 15px 30px 5px 30px;
	display: inline-block;
	text-align: left;
	font-weight: normal;
}
#sidebox p {
	text-align: left;
	padding: 15px 30px 15px 30px;
}
#sidebox p.news { /* soronként max. 27 karakter és max. 17 sor lehet az oldalsávban*/
	text-align: left;
	padding: 15px 30px 15px 30px;
	height: 350px;
	width: 200px;
}
#sidebox .line {
	width: 200px;
	text-align: center;
	border-bottom: 2px solid #ffffff;
	margin-left: auto;
	margin-right: auto;
}
	
 
/* Navigation Bar _________________________________________________*/
 
#menu {
    list-style:none; /*enelkul potty van a menuk elott*/
	background: #2e7e2b;
    border-bottom: 4px solid #fff;
    width:940px; /* a szelesseg es a padding egyutt szamit!-ez igy 940px-reset utan csak 900*/
	float: left;
	font-weight: bold;
}

#menu li {	/*ez a menupontok kinezete, elhelyezkedese*/
    float:left;
	display:block;
    text-align:center;
	text-transform: uppercase;
    position:relative;
    padding: 12px; /* ez felel a szoveg savon valo elhelyezkedeseert, meg kell egyezni a hoverrel! */
    margin-right:10px;	/* eltavolodnak egymastol a gombok */
	margin-left: 15px; /*ezt modositani kell a nyelvvalasztonal, hogy ne csusszanak szet*/
    margin-top:0px;	/*elmozditja lefele a szoveget, ertekmodositas erinti a dd-menut is */
}
 
#menu li:hover { /*folehuzott gomb kinezete*/
    padding: 12px; /*ha elter a LI-tol, elmozdul a szoveg */
    background: #b4b4b4;
}
#menu li:hover .dd_box {
    left:0;	/*enelkul nem nyilik le*/
    top:100%;	/* vagy autonak kell lennie, de akkor nem ervenyes a margin-top, vagy 100%-nak */
	margin-top: 0px; /* es akkor a margin-top 0px, de a linknek es a lenyilo doboznak, mindenkepp*/
	/* ossze kell ernie, kulonben lefele huzaskor - mivel megszunik a kapcsolat el is tunik a dd_box.*/
}

#menu li:hover .dd2_box {
    left:0;	/*enelkul nem nyilik le*/
    top:100%;	/* vagy autonak kell lennie, de akkor nem ervenyes a margin-top, vagy 100%-nak */
	margin-top: 0px; /* es akkor a margin-top 0px, de a linknek es a lenyilo doboznak, mindenkepp*/
	/* ossze kell ernie, kulonben lefele huzaskor - mivel megszunik a kapcsolat el is tunik a dd_box.*/
}
#menu li:hover .dd3_box {
    left:0;	/*enelkul nem nyilik le*/
    top:100%;	/* vagy autonak kell lennie, de akkor nem ervenyes a margin-top, vagy 100%-nak */
	margin-top: 0px; /* es akkor a margin-top 0px, de a linknek es a lenyilo doboznak, mindenkepp*/
	/* ossze kell ernie, kulonben lefele huzaskor - mivel megszunik a kapcsolat el is tunik a dd_box.*/
}


 
#menu li a { /*link beallitasa ez csak a link (li) szovege*/
    color: #fff; /*enelkul alapertelmezett szin,kek*/
    display:block; /* nem latok valtozast ha nincs*/
	text-decoration:none;
}
#menu li:hover a { /*folehuzas beallitasa - szoveg szine*/
    color:#fff;
}
#menu li:hover:after { /*3szog nyilacska*/
    content: "";	/* ha ezt a tartalmat a #menu li a:hover after-re teszem*/
    display: block;		/* akkor csak a szoveg fole huzva aktiv, de az almenukon is megjelenik*/
    border-left: 8px solid transparent;		/* igy a teljes blokk folott*/
	border-right: 8px solid transparent;
    border-bottom: 8px solid #ffffff;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -8px;
}

/* Drop Down 1 ______________________________________________*/

.dd_box { /* submenu hattere*/
	width: 560px;
    top: 100%; /*mennyire tolja el felulrol */
	margin-top: 4px; /* ez a feher vonal vastagsaga miatt kell*/
    float:left; /*nem latok valtozast modositva*/
    position:absolute;
    left:-999em; /* Hides the drop down */
    text-align:center;
    padding:20px 5px 5px 5px; /*a szelesseg es a padding egyutt szamit*/
    background:#b4b4b4;
	border-top: 4px solid #fff; /* ez azer szukseges, kulonben lenyitaskor nem latszik a menu also feher savja
	es a feher 3szog is log a levegoben*/
}

/* Drop Down 2 ______________________________________________*/

.dd2_box { /* submenu hattere*/
	width: 460px;
    top: 100%; /*mennyire tolja el felulrol */
	margin-top: 4px; /* ez a feher vonal vastagsaga miatt kell*/
    float:left; /*nem latok valtozast modositva*/
    position:absolute;
    left:-999em; /* Hides the drop down */
    text-align:center;
    padding:20px 5px 5px 5px; /*a szelesseg es a padding egyutt szamit*/
    background:#b4b4b4;
	border-top: 4px solid #fff; /* ez azer szukseges, kulonben lenyitaskor nem latszik a menu also feher savja
	es a feher 3szog is log a levegoben*/
}
 
/* Drop Down 3 ______________________________________________*/

.dd3_box { /* submenu hattere*/
	width: 300px;
    top: 100%; /*mennyire tolja el felulrol */
	margin-top: 4px; /* ez a feher vonal vastagsaga miatt kell*/
    float:left; /*nem latok valtozast modositva*/
    position:absolute;
    left:-999em; /* Hides the drop down */
    text-align:center;
    padding:20px 5px 5px 5px; /*a szelesseg es a padding egyutt szamit*/
    background:#b4b4b4;
	border-top: 4px solid #fff; /* ez azer szukseges, kulonben lenyitaskor nem latszik a menu also feher savja
	es a feher 3szog is log a levegoben*/
}


/* _______________ SUBMENU ________________ */
.submenu {
	width: 130px;
    display:inline;
    float: left; /* left kell, hogy egymas melle keruljenek*/
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
}
.submenu img {
	border: 3px solid #b4b4b4; /* ez csak azert kell, hogy ne ugraljon felulhuzsaskor */
}
.submenu img:hover {
	border: 3px solid #fff;
}

/* DropDown tartalom stilusa ___________________________ */
 
#menu ul li {
    text-align:center; /* ez igazitja kozepre a szoveget*/
}
 
#menu li:hover div a { /* ez a lenyilo menu linkje*/
	font-size: 13px; /* almenuk betumerete */
	line-height: 17px;
    color:#4b4b4b;
}
#menu li:hover div a:hover {
    color:#fff;
}
 
/* Nyelvvalaszto ____________________________________*/
 
#menu .lang {
    float:right;
	background-color: #4b4b4b; /*a jobb link hatterszine*/
    margin-right:0px;
	margin-left:0px;
}

/* ____________________ MAIN _____________________________*/

#mainbox {
	width: 940px;
	height: 952px;
	background-color: #4b4b4b;
	float: left;
	overflow: hidden;
	font-weight: normal;
	padding: 0;
}
#mainbox h1 {
	font-size: 24px;
	width: 925px;
	height: 27px;
	padding: 15px 30px 5px 30px;
	display: inline-block;
	background-color: #878787;
	text-align: left;
	font-weight: normal;
	border-bottom: 4px solid #fff;
}
#mainbox h2 {
	font-size: 18px;
	padding: 15px 30px 15px 30px;
}
#mainbox .col1 {
	width: 470px;
    display:inline;
    float: left;
	padding: 15px 0px 0px 0px;
}
#mainbox .col2 {
	width: 310px;
    display:inline;
    float: left;
	padding: 15px 0px 0px 0px;
}
#mainbox .col3 {
	width: 370px;
    display:inline;
    float: left;
	padding: 15px 0px 0px 0px;
}
#mainbox .col4 {
	width: 570px;
    display:inline;
    float: left;
	padding: 15px 0px 0px 0px;
}
#mainbox .col5 {
	width: 280px;
    display:inline;
    float: left;
	padding: 15px 0px 0px 0px;
}
#mainbox p {
	font-size: 15px;
	text-align: left;
	padding: 0px 30px 0px 30px;
}
#mainbox .italic {
	font-style: italic;
}
#mainbox .bold {
	font-weight: bold;
}
#mainbox ul {
	font-size: 15px;
	padding: 0px 60px 0px 60px;
	list-style: disc;
}
#mainbox .p2 {
	font-size: 14px;
	line-height: 18px;
	padding: 0px 30px 0px 30px;
}
#mainbox .p2 ul {
	padding: 0px 30px 0px 30px;
	list-style: disc;
}
#mainbox  img {
	border: 1px solid #fff;
}
#mainbox .img {
	border: none;
	padding-top: 10px;
}
#mainbox .img img {
	border: 1px solid #fff;
}

/*___________________ FOOT _________________________*/

#footline {
	/*margin-left: auto;
	margin-right: auto;*/
	width: 1160px;
	height: 30px;
	border-top: 3px solid #ffffff;
	background-color:#b4b4b4;
	color:#cb0000;
	padding: 5px 20px 0 20px;
	clear: both;
}
#footline p {
	display:inline; /*ez adja, hogy egy sorban legyen a teljes szoveg*/
	text-align: left;
}
#footline .left {
	text-align: left;
	font-weight: normal;
}
/* foot linkek definiálása */
.ft {
	float: right;
}
.ft a,
.ft a:link,
.ft a:visited {
	font-weight: bold;
	text-decoration: none;
	color: #c30f19;
	padding: 0;
	margin: 0;
}
.ft a:hover {
color: #ffffff; 
}
/* szovegbeli linkek definialasa */
a.tl,
a.tl:link,
a.tl:visited {
	color: #3795c3;
	text-decoration: none;
}
a.tl:hover {
	color: #3795c3;
	font-weight: bold;
}