@font-face {
    font-family: 'staccato222eu';
    src: url('http://www.eyebookkeeping.co.uk/images/font/staccato222eu.eot');
    src: url('http://www.eyebookkeeping.co.uk/images/font/staccato222eu.eot?#iefix') format('embedded-opentype'),
         url('http://www.eyebookkeeping.co.uk/images/font/staccato222eu.woff') format('woff'),
         url('http://www.eyebookkeeping.co.uk/images/font/staccato222eu.ttf') format('truetype'),
         url('http://www.eyebookkeeping.co.uk/images/font/staccato222eu.svg#staccato222eu') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {
	margin:0;
	padding:0;
	font-family:Arial, Verdana, Tahoma, Helvetica, sans-serif;
	font-size:15px;	
	line-height:22px;
}

table {
	border-collapse:collapse;
}

img, a img {
	border:0;
}

form {
	margin:0;
	padding:0;
}

a, a:active, a:hover, a:visited {
	color:#366c16;
	text-decoration:none;
	font-weight: bold;
}

a:hover {
	text-decoration:underline;
}

h1, h2, h3 {
	font-family: 'Shadows Into Light Two', cursive;
	font-size: 22px;
	line-height: 28px;
	font-weight: bold;
}

h2 {
	font-size: 17px;
	line-height: 24px;
}


#mainContent {
color: #000000;
height: auto;
margin: 0 auto;
width: 900px;
}

#header {
width: 900px;
	float: left;
}

.content {
height: auto;
width: 100%;
clear:both;
	float: left;
padding-bottom: 10px;
}

#footer {
clear:both;
height: 200px;
text-align:center;
	clear:both;
}

#leftBox {
	width:450px;
	float: left;
}

#rightBox {
	width:450px;
	float: right;
}

.leftText {
padding: 10px 0px 0px 40px;
}

.rightText {
padding: 10px 40px 0px 0px;
}


.logoHeader {
	width:250px;
	float: left;
	margin-top:20px;
	margin-left:40px;
}

.logoHeader h1 {
	margin: 0;
	padding: 0;
}

.logoHeader h1 a {
	text-indent: -10000px;
	background: url(http://www.eyebookkeeping.co.uk/images/logo.png);
	width: 250px;
	height: 130px;
	display: block;
	margin: 0;
	padding: 0;
}

.telHeader {
	width:550px;
	float:right;
	margin-top:20px;
	margin-right:40px;
	font: 14px/21px Arial, sans-serif;
	color:#636363;
	text-align: right;
}
.telHeader p {
margin-bottom: 0px;
}

.line {
	align: center;
	width: 100%;
	clear:both;
}

.langMenu {
	float:right;
	width: 50px;
margin-right: 40px;
clear:both;
}
.langMenu ul {
	font: 22px/22px Arial, sans-serif;
	text-align: right;
	letter-spacing: 0;
	color:#636363;
	list-style-type:none;
	margin: 5px 0 0 0;
	padding: 0;
}

.langMenu li {
	display:inline;
	margin:0;
	padding: 0;
}

.ozdobna {
	font: 22px/22px 'staccato222eu', Arial, sans-serif;
	color:#366c16;
}


#mainMenu {
	float: right;
	width: 400px;
}
#nav{
	list-style:none;
	margin:0 0 10px 0;
	padding: 0;
	/* Clear floats */
	float:left;
	width:100%;
	/* Bring the nav above everything else--uncomment if needed.
	position:relative;
	z-index:5;
	*/
}
#nav li{
	float:left;
	margin:0;
	padding: 0;
	position:relative;
}
#nav a{
	font: 26px/26px 'staccato222eu', Arial, sans-serif;
	display:block;
	padding:5px 12px;
	color:#636363;
	text-decoration:none;
border-left: 2px solid #fff;
}
#nav a:hover{
	color:#f00;
}

#nav a.menuactive, #nav a.menuparent {
	color:#366c16;
}

/*--- DROPDOWN ---*/
#nav li.parent ul{
	background:#eee; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
	margin: 0;
	padding: 0;
	list-style:none;
	position:absolute;
	left:-9999px;
}
#nav ul li a {
	padding: 5px; /* Introducing a padding between the li and the a give the illusion spaced items */
	float:none;
font: 20px/28px 'staccato222eu', Arial, sans-serif;
}
#nav ul a{
	white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
	left:0; /* Bring back on-screen when needed */
}
#nav li.parent:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
background:#eee;
border-left: 2px solid #000;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */

}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
color: #f00;
}

label {
	display: block;
	float: left;
	width: 135px;
	
}

input, textarea, select {
	font-family:Arial, Verdana, Tahoma, Helvetica, sans-serif;
	font-size:15px;	
	line-height:22px;
}

.submit input{
	-moz-box-shadow:inset 0px 1px 0px 0px #d9fbbe;
	-webkit-box-shadow:inset 0px 1px 0px 0px #d9fbbe;
	box-shadow:inset 0px 1px 0px 0px #d9fbbe;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b8e356), color-stop(1, #366c16) );
	background:-moz-linear-gradient( center top, #b8e356 5%, #366c16 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b8e356', endColorstr='#366c16');
	background-color:#b8e356;
	-webkit-border-top-left-radius:14px;
	-moz-border-radius-topleft:14px;
	border-top-left-radius:14px;
	-webkit-border-top-right-radius:14px;
	-moz-border-radius-topright:14px;
	border-top-right-radius:14px;
	-webkit-border-bottom-right-radius:14px;
	-moz-border-radius-bottomright:14px;
	border-bottom-right-radius:14px;
	-webkit-border-bottom-left-radius:14px;
	-moz-border-radius-bottomleft:14px;
	border-bottom-left-radius:14px;
	text-indent:0px;
	border:1px solid #83c41a;
	display:inline-block;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	font-weight:bold;
	font-style:normal;
	height:30px;
	line-height:30px;
	width:90px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #86ae47;
padding: 0;
cursor: pointer;
}
.submit input:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #366c16), color-stop(1, #b8e356) );
	background:-moz-linear-gradient( center top, #366c16 5%, #b8e356 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#366c16', endColorstr='#b8e356');
	background-color:#366c16;
}.submit input:active {
	position:relative;
	top:1px;
}
/* Stylesheet: eyeb-css Modified On 2013-10-20 23:16:15 */