/*

	CSS for TokoNina.nl
	By Ivana Setiawan
	
*/




/*SETUP*/

*								{ margin:0; padding: 0;}
.clear							{ clear: both;}
html, body, #page-wrap 			{ height: 100%; }


body							{ 
								  background: url(images/bg-s.jpg)  #010101 repeat; 
								  font-size: 80.5%;
								  font-family: "Helvetica Neue", Helvetica, sans-serif;
								  color:#ffffff; text-align:justify;
								}	 
							



#page-wrap						{ width: 960px;margin: 0 auto; height: auto; min-height: 100%;padding-bottom: 50px;}
 
#background-index				{ background:url(images/change.jpg)  no-repeat top center;}





/*print*/
.print {visibility:visible;} 




/*TYPOGRAPHY*/

/* Headings
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #111; }

h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 2.5em; margin-bottom: 0.85em; color:#FFFFFF;margin-top: 0.85em;  }
h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
h6 { font-size: 1em; font-weight: bold; }

h1 img, h2 img, h3 img, 
h4 img, h5 img, h6 img {
  margin: 0;
}


/* Text elements
-------------------------------------------------------------- */

p           { padding: 5px 0;
			line-height: 1.5em; }

p img.left  { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; }

a:focus, 
a:hover     { color: #ffffff ; font-weight:bold;}
a           { color: #ffffff ; text-decoration: underline; font-size:100%; font-weight:bold;}

blockquote  { margin: 1.5em; color: #666; font-style: italic; }
strong      { font-weight: bold; }
em,dfn      { font-style: italic; }
dfn         { font-weight: bold; }
sup, sub    { line-height: 0; }

abbr, 
acronym     { border-bottom: 1px dotted #666; }
address     { margin: 0 0 1.5em; font-style: italic; }
del         { color:#666; }

pre 				{ margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }

.content p { margin:5px;
    padding:5px;
    font-family: Helvetica, sans-serif; 
    font-size: 110%;
    color: black; }



/* Mozilla based browsers */
::-moz-selection {
       background-color: #FFA;
       color: #000;
}

/* Works in Safari */
::selection {
       background-color: #FFA;
       color: #000;
}




*|*:-moz-any-link img, img[usemap], object[usemap] {
border:none;
}





/*CONTENT*/

div#top-logo 			{
							background:url(images/top-logo.png) left no-repeat; 
						 	width: 215px; height:50px; float:left; margin: 10px 0 10px 140px;
							text-indent:-9999px;
						 }


div#intro				{background: url(images/intro.png) no-repeat; 
						 width:700px; height:110px; margin: 0 auto; 
						 margin-top:40px; margin-bottom: 60px;}


div#searchform			{margin-top:-20px; float:right;}






/*NAVIGATIONS*/

ul#nav 					{height:238px; width:960px; list-style:none; left:50%;}
		
	ul#nav li 			{margin-left: 20px;}
		
			ul#nav li a {text-indent: -9999px; display: block; height:238px; float: left; margin:0 25px 0px 25px;}	
			
							ul#nav li a.afhaal {background: url(images/afhaal1.jpg) no-repeat bottom center;width: 253px;}
							ul#nav li a.catering {background: url(images/catering.jpg) no-repeat bottom center;width: 253px;}
							ul#nav li a.winkel {background: url(images/winkel.jpg) no-repeat bottom center;width: 253px;}			
							
								ul#nav li a.afhaal:hover, ul#nav li a.afhaal:active,
								ul#nav li a.catering:hover, ul#nav li a.catering:active,
								ul#nav li a.winkel:hover, ul#nav li a.winkel:active
								{
								background-position:top center;
								}
							
			
				
ul#extra				{height:80px; width:960px; list-style:none; left:50%; margin-top:70px; }
		
	ul#extra li 		{margin-left: 20px;}
		
		ul#extra li a 	{text-indent: -9999px; display: block; height:80px; float: left; margin:0 25px 25px 25px;}	
			
							ul#extra li a.overtokonina-index 	{background: url(images/overtokonina-index.png) no-repeat bottom center;
														width:253px;}
							ul#extra li a.extra-index 	{background: url(images/extra-index.png) no-repeat bottom center;width
														: 253px;}
							ul#extra li a.contact-index {background: url(images/contact-index.png) no-repeat bottom center;
														width: 253px;}
						
			
								ul#extra li a.overtokonina-index:hover, ul#extra li a.overtokonina-index:active,
								ul#extra li a.extra-index:hover, ul#extra li a.extra-index:active,
								ul#extra li a.contact-index:hover, ul#extra li a.contact-index:active
										{
										background-position:top center;
										}
			
			
			
			
/* ================================================================ 
MENU TRYOUT
=================================================================== */
/* common styling */

.menu 			{font-family: "Helvetica Neue",Helvetica, sans-serif; 
				width:960px; height:100%; position:relative; font-size:20px; z-index:100; list-style:none; margin-left:30px;}

.menu ul li a,.menu ul li a:visited {

				display:block; padding:3px;min-width:130px; max-width:auto; height:18px; text-align:left; color:#ad1010; border:0px solid #fff; 
				background: transparent; line-height:20px; font-size:15px; overflow: hidden; text-decoration:none;font-family:
				"Helvetica Neue", Helvetica, sans-serif;

}


.menu ul 		{padding:0; list-style: none; margin-bottom:2px; margin-top:5px;}
.menu ul li 	{float:left; position:relative;}
.menu ul li ul 	{display: none;}


/* specific to non IE browsers */

.menu ul li:hover a 					{color:#FFFFFF; background:transparent; }/*HOME - main nav*/
.menu ul li:hover ul 					{display:block; position:absolute; top:18px; left:0; width:auto;}/*WHOLE MAIN NAV*/
.menu ul li:hover ul li a.hide 			{background:transparent; color:#FFFFFF;}/*MAIN NAV - hide*/
.menu ul li:hover ul li:hover a.hide 	{background:#535353; color:#FFFFFF;}/*BOX backg for sub nav*/
.menu ul li:hover ul li ul 				{display: none;}/*HOME - main nav*/
.menu ul li:hover ul li a 				{display:block; background:transparent; color:#ad1010; padding:3px;}/*BOX backg for 	
										 sub nav*/
.menu ul li:hover ul li a:hover 		{background: transparent; color:#ffffff; width: auto scroll;}/*HOME - main nav*/
.menu ul li:hover ul li:hover ul 		{display:block; position:absolute; left:105px; top:10px;}/*HOME - main nav*/
.menu ul li:hover ul li:hover ul.left 	{left:-105px;}/*HOME - main nav*/
	
				
				
				


			
			
/*HEADER - NAV-s*/

ul#nav-s 					{height:25px; width:960px; list-style:none; }
		
		ul#nav-s li 		{margin-left: 70px;}
		
			ul#nav-s li a 	{text-indent: -9999px; display: block; height:25px; float: left; margin:10px 20px 10px 20px;}	
			
				ul#nav-s li a.home 			{background: url(images/home.png) no-repeat bottom center;width: 60px;}
				ul#nav-s li a.afhaal 		{background: url(images/afhaal.png) no-repeat bottom center;width: 60px;}
				ul#nav-s li a.catering 		{background: url(images/catering.png) no-repeat bottom center;width: 70px;}
				ul#nav-s li a.winkel 		{background: url(images/winkel.png) no-repeat bottom center;width: 70px;}
				ul#nav-s li a.over 			{background: url(images/otn.png) no-repeat bottom center;width: 130px;}
				ul#nav-s li a.extra 		{background: url(images/extra.png) no-repeat bottom center;width: 55px;}			
				ul#nav-s li a.recepten 		{background: url(images/recepten.png) no-repeat bottom center;width: 75px;}
				ul#nav-s li a.woordenlijst 	{background: url(images/woordenlijst.png) no-repeat bottom center;width: 110px;}
				ul#nav-s li a.links 		{background: url(images/links.png) no-repeat bottom center;width: 50px;}
				ul#nav-s li a.contact 		{background: url(images/contact.png) no-repeat bottom center;width: 65px;}
				
					ul#nav-s li a.home:hover, ul#nav-s li a.home:active,
					ul#nav-s li a.afhaal:hover, ul#nav-s li a.afhaal:active,
					ul#nav-s li a.catering:hover, ul#nav-s li a.catering:active,
					ul#nav-s li a.winkel:hover, ul#nav-s li a.winkel:active,
					ul#nav-s li a.over:hover, ul#nav-s li a.over:active,
					ul#nav-s li a.extra:hover, ul#nav-s li a.extra:active,
					ul#nav-s li a.recepten:hover, ul#nav-s li a.recepten:active,
					ul#nav-s li a.woordenlijst:hover, ul#nav-s li a.woordenlijst:active,
					ul#nav-s li a.links:hover, ul#nav-s li a.links:active,
					ul#nav-s li a.contact:hover, ul#nav-s li a.contact:active
					
											{
											background-position:top center;
											}
											

					

					
					
	

div#content-left{
					width: 700px; background: url(images/bg-box.png); color:#ffffff; margin: 40px 0 20px 0; font: Verdana, 
					Arial, Helvetica, sans-serif 10px; float:left; padding:10px; -moz-border-radius:10px; 
					-webkit-border-radius: 10px; border-radius:10px; margin-bottom:40px;
					
				}





/*SIDEBAR-SINGLE*/
ul#sidebar				{width: 220px;float: right; margin-top: 20px; list-style:none;color: #FFFFFF; font: 	
						Verdana, Arial, Helvetica, sans-serif 14px;}

ul#sidebar li 			{margin-top:30px;}

ul#twitter				{margin: 30px 0 0 0;list-style:none;}

ul#twitter li a			{text-indent: -9999px; display: block; height:70px; float: left;}

	ul#twitter li a.twitterbird		{background: url(images/spriteme1.png);width: 220px;background-position: -10px -80px}
			
				
						ul#twitter li a.twitterbird:hover, ul#twitter li a.twitterbird:active
	
								{
								background-position:-10px -10px;
								}

div#content-twitter {width:220px; height:auto; margin-top:65px; text-align:left;}

div#follow {margin-top:10px; width:220px; text-align:right; font: "Helvetica Neue",Helvetica, sans-serif; }


div#agenda					{height:40px; width:220px; list-style:none; left:50%; margin-top:20px;}
	div#agenda a			{text-indent:-9999px; display: block; height:40px; float:left;}
		
		div#agenda a.agenda		{ background:url(images/spriteme1.png); width:220px; background-position:-10px -250px}
			
			div#agenda a.agenda:hover, div#agenda a.agenda:active
			
					{
					background-position: -10px -210px;
					}			




div#mailinglist					{height:80px; width:220px; list-style:none; left:50%; margin-top:20px;}
		
			div#mailinglist a 	{text-indent: -9999px; display: block; height:80px; float: left;}


				div#mailinglist  a.mailinglist {background: url(images/spriteme1.png);width: 220px; background-position:-10px -390px}
				
						div#mailinglist  a.mailinglist:hover, div#mailinglist a.mailinglist:active
	
								{
								background-position:-10px -310px;
								}


a.line {background: url(images/spriteme1.png); background-position:-10px -170px;width:220px; text-indent:-9999px; display:block; height:20px; float:left; margin:10px 0 10px 0;}


ul#openingstijden 		{margin-top:50px; }
ul#agenda				{margin-top:20px; margin-bottom:5px ;text-align:left;}

div#bezoek				{margin-top:50px; }




	
					
					
/*FOOTER*/


	
 #footer {
		background:url(images/footer.jpg) repeat-x center bottom;
		text-decoration:none;
        text-align: left;
		position: relative;
		margin-top: -50px; /* negative value of footer height */
		height: 65px;
		clear:both;
		} 
			
	#footer li {float: left; margin-top:35px; margin-left:10px; list-style:none;}		
			
div#isdesign	{height:20px; width:200px; list-style:none; float:right; margin-top:35px;}

			div#isdesign a {text-indent: -9999px; display: block; height:20px; float: right;}


				div#isdesign  a.isdesign {background: url(images/isdesign.png) no-repeat center;width: 200px;}