@font-face {
    font-family: mydefaultfont;
    src: url(fonts/JosefinSans-Light.ttf);
}

*                           {margin: 0; padding: 0; }
html,body                   {height: 100%; font-family: mydefaultfont; font-size: 22px; color: #fff; line-height: 1.6; background-color: #767764; padding: 0; margin: 0; }
#wrap                       {min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -40px; }
#push                       {height: 40px;}

#gallery                    {position:relative;}

form,table                  {margin: 0; display: block;}
img                         {border: 0; margin: 0; display: block;}
p                           {margin: 0 0 10px 0;}
a                           {color: #e6dcc1; text-decoration: none;}
a:hover                     {text-decoration: underline;}
td                          {font-family: mydefaultfont; font-size: 14px; line-height: 1.5;}
xli                          {margin-left: 25px; }

h1                          {margin:0 0 10px 0; font-size: 44px; color: #fff; font-weight: normal; line-height: 1.2;}
h2                          {margin:0 0 10px 0; font-size: 36px; color: #fff; font-weight: normal; line-height: 1.2;}
h3                          {margin:0 0 10px 0; font-size: 30px; color: #fff; font-weight: normal; line-height: 1.2;}
h4                          {margin:0 0 10px 0; font-size: 20px; color: #fff; line-height: 1.2;}
h5                          {margin:0 0 10px 0; font-size: 11px; color: #fff;}
h6                          {margin:0 0 10px 0; font-size: 9px; color: #fff;}

#mainbody                   {width: 999px; padding-bottom: 60px; overflow: auto; margin: 0 auto 0 auto; z-index:1;}
#menu                       {width: 100%; height: 34px; position: relative; z-index:3; }
#menucontent				{width: 999px; margin: 0 auto 0 auto; position: relative; }
#header                     {width: 100%;  }
#main                       {width: 999px; padding: 20px 0 20px 0; overflow:hidden;}
#footer                     {width: 100%; position: relative; height: 20px; padding: 10px 0 10px 0; font-size: 14px; clear: both; background-color: #444; color: #fff; text-align: center;}
#footercontent				{width: 999px; margin: 0 auto 0 auto; }

#main td					{font-size: 18px; }
#main ul					{list-style: bullet; padding: 0 0 0 20px;}

.textcontainer	{margin: 20px 0; }

#left-col                   {float: left; width: 180px; margin: 0; }
#mid-col                    {float: left; width: 480px; margin: 0 15px 0 15px; padding: 0;}
#right-col                  {float: left; width: 260px; margin: 0; overflow: hidden;}

.bloem-back                 {position: relative; width: 999px; padding-bottom: 40px; overflow: visible; background-image: url(/images/bloem.gif); background-position: bottom right; background-repeat: no-repeat; }
.white-back                 {position: relative; width: 999px; padding: 0; overflow: visible; }
.col-1                      {float: left; width: 55px; overflow: visible;}
.col-2                      {float: left; width: 800px;}
.col-3                      {float: left; width: 944px;}

.box-back-header            {background-color:#7e66a5;font-size:13px;padding:2px 0 2px 10px;margin-bottom:1px;color:#ffffff;font-weight:bold;}
.box-back                   {background-color:#a99ac5;padding:0 0 2px 10px;margin-bottom:1px;}
.box-link                   {font-size: 11px; color: #fff;}
.box-link:hover             {text-decoration: underline;}

.news-main-link             {color: #9a9a9a; }
.news-main-link:hover       {text-decoration: underline; }
.news-small-link            {font-size: 11px; color: #9a9a9a;}
.news-small-link:hover      {text-decoration: underline; }

.menuposition               {position: absolute; top: 9px; right: 0; }
.menuitem                   {position: relative; float: left; margin: 0 5px 0 0; }
.ul-menu                    {position: relative; list-style: none;}
.ul-dropdownbox             {position: absolute; list-style: none; top: 24px; left: 0; z-index: 99; color: #fff; display: none; }
.li-dropdownitem            {width: 150px; padding: 1px 1px 1px 4px; margin: 0; overflow: hidden; z-index: 100; cursor: pointer; background-color: #000; filter: alpha(opacity=50); opacity: 0.5;}
.li-dropdownitem:hover      {filter: alpha(opacity=80); opacity: 0.8;}
.mainmenulink               {color: #555; font-size: 12px; font-weight: bold;}
.mmhover                    {color: #000; font-size: 12px; font-weight: bold; text-decoration: none; }
.mainmenulink:hover         {text-decoration: none; }
.mainmenulink_current       {color: #bbb; text-decoration: none; font-size: 12px; font-weight: bold; }
.mainmenulink_current:hover {text-decoration: none; }
.dropdownlink               {color: #fff; font-weight: normal; font-size: 12px; }
.dropdownlink:hover         {color: #fff;  }
.nomargin                   {margin:0;}

.tw-tweet                   {float:left;height:180px;margin-right:10px;}
.tw-tweetbox                {width:180px;height:100px;background-image:url(/images/tweetbox.gif);padding:10px;font-size:12px;overflow:hidden;margin-bottom:5px;}
.tw-imgbox                  {float:left;overflow:hidden;}
.tw-img                     {border:1px solid #cccccc;padding:2px;}
.tw-date                    {font-size:10px;}

.lu                         {float:left;width:8px;height:25px;background-image:url(/images/bu-left.png);}
.mu                         {float:left;height:24px;padding-top:1px;background-color:#fff;}
.ru                         {float:left;width:8px;height:25px;background-image:url(/images/bu-right.png);}

.textfield                  {height: 20px; width: 300px; border: 1px solid #9a9a9a; }
textarea                    {border: 1px solid #9a9a9a; width: 300px; height: 100px;}
.submitbutton               {font-weight:normal;padding:5px;background-color:#9a9a9a;color:#fff;border:0px solid black;}

.toplink                    {font-size: 10px; color: #888; font-weight: normal; text-decoration: none; }
.toplink:hover              {color: #000; text-decoration: none; }

div.clear                   {clear: left; height: 0; width: 0; margin: 0; padding: 0; line-height: 0; font-size: 1px;}

.sidecolumn     {float:left;width:110px;}
.smallcolumnhead{float:left;width:156px;padding:15px 0 15px 0;text-align:center;color:#fff;font-size:16px;font-weight:bold;}
.smallcolumn    {float:left;width:146px;padding:15px 0 15px 0;color:#fff;padding:5px;line-height:1.8;}
.homecol        {width:148px;font-size:11px;color:#fff;line-height:1.5;}

#leftcontent {float:left;width:175px;padding-right:10px;}
#midcontent {float:left;width:578px;border-left:solid 1px #000;border-right:solid 1px #000;padding:0 10px 0 10px;}
#leftmidcontent {float:left;width:774px;border-right:solid 1px #000;padding:0 10px 0 0; }
#rightcontent {float:left;width:175px;padding-left:10px;}
#fullcontent {float:left;width:1000px;padding:0 10px 0 0;}

.leftcol {float:left;width:250px;margin:0 0 5px 0;}
.rightcol {float:left;margin:0 0 5px 0;}
.regtext {width:250px;color:#006c8a;border:1px solid #006c8a;}
.regtextarea {width:250px;height:100px;font-family:verdana;color:#006c8a;border:1px solid #006c8a;}

.topmenulink {font-size:11px;color:#ffffff;font-weight:bold;text-decoration:none;}
.topmenulink:hover {color:#a2b4cd;text-decoration:none;}

.white-link {color: #fff;}
.white-link:hover {text-decoration: underline;}

.ulsit {list-style-position:inside;}
.licat {padding:0;font-weight:bold;list-style-type:none;}
.liart {padding-left:0px;list-style-type:none;}

.small {font-size:12px;color:#888;}

.formtext {}
.formarea {}


#logo {width:303px;}

@media screen and (min-width: 980px) /* Desktop */ {
	.sitewidth		{position: relative; display: block; width: 90%; margin: 0 auto 0 auto; border: 0px solid red; width:303px;height:150px;}
}

@media screen and (min-width: 1500px) /* XXL Desktop */ {
	.sitewidth		{position: relative; display: block; width: 1480px; margin: 0 auto 0 auto; border: 0px solid red; width:303px;height:150px;}
}

@media screen and (max-device-width: 979px) /* Tablet */ {
	.sitewidth		{position: relative; display: block; width: 800px; margin: 0 auto 0 auto; border: 0px solid red; }
	#mainmenu		{height: 70px; }
	.logo			{position:absolute;display: block; height:50px;float:left;z-index:11;width:303px;height:150px;}
}

@media screen and (max-device-width: 500px) {
	p				{margin: 15px 0; }
	#topmenu		{display: none; }
	#mainmenu		{display: none; }
	#footer			{display: none; }
	#bloemen		{display: none; }
	#smbuttons		{display: none; }
	.textcontainer	{margin: 25px; padding: 50px 0 0;}
	
}

@media screen and (max-device-width: 500px) and (orientation:landscape) /* Mobile */ {
	h1				{font-size: 6vw; }
	h2				{font-size: 5vw; }
	h3				{font-size: 4vw; }
	h4				{font-size: 4vw; }
	#main			{height: 80%; font-size: 3vw;}
	#main td		{font-size: 2.5vw;}
	#footer			{display: none; }	
	#smallfooter	{font-size: 12px; }
	#logo			{width: 50%; }
}

@media screen and (max-device-width: 500px) and (orientation:portrait) /* Mobile */ {
	h1				{font-size: 8vw; }
	h2				{font-size: 7vw; }
	h3				{font-size: 6vw; }
	h4				{font-size: 5.5vw; }
	#main			{width: 100%; font-size: 5vw;}
	#main td		{font-size: 4vw;}
	#footer			{display: none; }	
	#smallfooter	{font-size: 25px; }
	#logo			{width: 90%; }
}






#xwrap {min-height: 100%;}

#xmain {overflow:auto;
	padding-bottom: 150px;}  /* must be same height as the footer */

#fxooter {position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 150px;
	clear:both;} 

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}



/* IMPORTANT

You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.

<!--[if !IE 7]>
	<style type="text/css">
		#wrap {display:table;height:100%}
	</style>
<![endif]-->

*/