/* This stylesheet is for www.happiness-co.nl
	 Author: Stefan Vermaas
	 Scripter: Stefan Vermaas
	 Designer: Stefan Vermaas
 */

/* Main Pages      Main Pages     Main Pages     Main Pages */
body				 	{background-color: #f5f5dc; font-family: Verdana; font-size: 12px; color: #000000; line-height: 18px;
                                         text-align: left; margin: 0px; padding: 0px;}

#container                              {margin: 0px auto; width: 1024px;}

/***************************************************************/
/***************************** Header **************************/
/***************************************************************/
#header                                 {float: left; width: 1024px; height: 105px;}
#menu                                   {float: left; background-color: #f58818; background-image: url('../img/menu_bg.jpg'); background-position: center top;
                                         background-repeat: no-repeat; width: 545px; height: 87px; margin-top: 30px; margin-left: 30px;}
#menu ul                                {list-style: none; margin-top: 25px; background-color: #f58818;}
#menu ul li                             {float: left;}
li.home a                               {display: block; width: 60px; height: 27px; color: #ffffff; text-decoration: none; font-size: 13px;
                                         margin-right: 5px; padding-top: 8px; padding-left: 10px;}
li.home a:hover                         {background-image: url('../img/home.jpg'); background-position: top left; background-repeat: no-repeat; }

li.wiezijnwij a                         {display: block; width: 100px; height: 30px; color: #ffffff; text-decoration: none; font-size: 13px;
                                         margin-right: 5px; padding-top: 8px; padding-left: 5px;}
li.wiezijnwij a:hover                   {background-image: url('../img/wiezijnwij.jpg'); background-position: top left; background-repeat: no-repeat;}

li.productie a                          {display: block; width: 150px; height: 30px; color: #ffffff; text-decoration: none; font-size: 13px;
                                         margin-right: 5px; padding-top: 8px; padding-left: 5px;}
li.productie a:hover                    {background-image: url('../img/productie.jpg'); background-position: top left; background-repeat: no-repeat;}

li.partners a                           {display: block; width: 70px; height: 30px; color: #ffffff; text-decoration: none; font-size: 13px;
                                         margin-right: 5px; padding-top: 8px; padding-left: 5px;}
li.partners a:hover                     {background-image: url('../img/partners.jpg'); background-position: top left; background-repeat: no-repeat;}

li.contact a                            {display: block; width: 70px; height: 30px; color: #ffffff; text-decoration: none; font-size: 13px;
                                         padding-top: 8px; padding-left: 3px;}
li.contact a:hover                      {background-image: url('../img/contact.jpg'); background-position: top left; background-repeat: no-repeat;}

/* Logo */
#logo                                   {float: left; width: 333px; height: 105px; margin-left: 25px;}
/**************************************************************/

/* Onder menu */
#stappenplan                            {margin: 0px auto; width: 1000px;}
#producten                              {float: left; width: 994px; height: 30px; background-image: url('../img/productenbalk.jpg');
                                         background-position: center top; background-repeat: no-repeat;}
#aankondiging                           {float: left; width: 100px; height: 30px;}
/***************************************************************/

/* Producten menu */
#productenmenu                          {float: left; height: 30px;}

#productenmenu ul                       {list-style-type:none; padding:0; margin:0;}
#productenmenu li                       {float:left; position:relative;}
#productenmenu a, #productenmenu :visited {display:block; font-size:10px; line-height: 30px; color:#fff; text-decoration:none; margin: 0px 20px 0px 10px; text-align:left;}
#productenmenu ul li ul li              {background-color: #7da646; width: 125px; line-height: 20px; height: 20px; margin: 0px; padding: 0px 0px 5px 0px; }
#productenmenu ul li ul li:hover        {background-color: #558338;}
#productenmenu ul li:hover              {background-image: url('../img/menuhover.jpg'); background-position: center center; background-repeat: repeat-x; }
#productenmenu ul ul                    {visibility:hidden; position:absolute; width:100px; height:0; }
#productenmenu ul li:hover ul,
#productenmenu ul a:hover ul            {visibility:visible;}

/****************************************************************/

/* Route */
#route                                  {float: left; width: 990px; height: 26px; background-image: url('../img/routebalk.jpg'); background-position: center top;
                                         background-repeat: no-repeat; background-color: #ffffff;}
#locatie                                {float: left; margin: 0px; margin-top: 2px; margin-left: 25px; color: #ffffff; font-size: 13px;}
#looproute                              {float: left; margin: 0px; margin-top: 2px; margin-left: 20px; color: #ffffff; font-size: 12px; text-decoration: none;}
#looproute a                            {text-decoration: none; color: #ffffff;}
#looproute a:hover                      {text-decoration: underline;}
/****************************************************************/


/***************************************************************/
/***************************** Einde Header  *******************/
/***************************************************************/

/***************************************************************/
/***************************** Content *************************/
/***************************************************************/
#content                                {margin: 0px auto; width: 1000px;}

/* Bovenstuk */
#bovenstuk                              {float: left; width: 990px; background-color: #ffffff;}
#tekst                                  {float: left; margin: 10px; width: 530px;}
#tekst_sub                              {float: left; margin: 10px; width: 990px;}
#banner                                 {float: left; margin: 10px; width: 400px;}
#holder                                 {float: left; margin: 5px; width: 400px; height: 200px; border: 3px solid #9dca5d;}
/***************************************************************/

/* Onderstuk */
#onderstuk                               {float: left; width: 990px; background-color: #ffffff; padding-bottom: 30px;}

/* Roulette */
#roulette                                {float: left; width: 560px; height: 250px;}
#roulettekopje                           {float: left; width: 560px; height: 20px; margin-top: 15px;}
.rouletteholder                          {float: left; width: 560px; height: 200px; margin: 10px;}
.slideshow                               {float: left; width: 220px; margin-left: 25px;}
.roulettebox                             {float: left; width: 216; height: 220px; background-image: url('../img/aanbieding.jpg'); background-position: center top;
                                          background-repeat: no-repeat;}
.rouletteimage                           {width: 210px; height: 165px; margin-left: 8px; margin-top: 5px;}
.roulettetekst                           {width: 210px; height: 30px; margin-top: 5px; color: #ffffff; font-size: 15px; text-indent: 15px;}
/***************************************************************/

/* Zoekveld */
#zoekveld                                {float: left; width: 400px; height: 226px; margin: 10px; margin-top: 35px; background-image: url('../img/zoekveld_bg.jpg');
                                          background-position: center top; background-repeat: no-repeat;}
#zoekkopje                               {float: left; width: 400px; height: 20px; margin-top: 15px; margin-left: 10px;}
#zoekscheiding                           {float: left; width: 400px; height: 10px; margin-top: 7px; margin-left: 10px;}
#zoekform                                {float: left; width: 400px;}

/***************************************************************/

/* Content (Sub pagina's) */

#sub_box                                  {float: left; width: 990px; background-color: #ffffff; padding-bottom: 30px;  min-height: 400px;}
#producten_box                            {float: left; width: 750px; background-color: #ffffff; padding-bottom: 30px;  height: 680px;}
#banner_box                               {float: left; width: 240px; background-color: #ffffff; padding-bottom: 30px;  height: 680px;}
.img_box                                  {margin-top: 40px;}
#linkercontent                            {float: left; width: 500px; margin-left: 15px; padding-bottom: 30px;}
#rechtercontent                           {float: left; width: 450px; padding-bottom: 30px;}
#overall                                  {float: left; margin: 10px;}

/***************************************************************/

/* Linker content */
#linker_kopje                             {float: left; width: 350px;}
#linker_tekst                             {float: left; width: 500px;}
/***************************************************************/

/* Rechter content (bestel) */
#bestel                                   {float: left; width: 450px; background-image: url('../img/bestel_achtergrond.jpg'); background-position: center top;
                                           background-repeat: no-repeat; margin-top: 15px; height: 656px;}
#bestel_kopje                             {float: left; margin-top: 10px; margin-left: 25px;}
#bestel_kopje h2                          {color: #59863a; font-size: 23px; text-indent: 10px; margin: 0px; margin-top: 5px; padding: 0px; padding-bottom: 10px;}
#bestel_scheiding                         {float: left; margin-top: 5px; margin-left: 35px;}
#bestel_form                              {float: left; width: 400px; margin-left: 25px; color: #59863a;}

#product_toevoeging                       {float: left;}
#product_toevoeging ul                    {list-style: circle;}
#product_toevoeging li                    {font-size: 8pt; line-height: 9pt;}

#foto_holder                              {float: left; width: 500px; padding-bottom: 15px;}
#foto_groot                               {float: left; width: 300px; border: 4px solid #59863a;}
.foto_klein                               {float: left; width: 125px; border: 2px solid #ccc; margin: 5px; margin-left: 10px;}
/***************************************************************/

/* Content (producten overzicht) */
.overzicht_vak                            {float: left; width: 200px; height: 200px; margin-left: 30px; margin-top: 15px; background-color: #f5f5dc; }
.overzicht_foto                           {float: left; width: 180px; height: 100px; margin: 10px;}
.overzicht_tekst                          {float: left; width: 200px; height: 100px; margin: 15px;}
.overzicht_vak a                          {float: left; width: 200px; color: #f48719; font-size: 14px; text-decoration: none;}
.overzicht_vak a:hover                    {text-decoration: underline;}
#overzicht_menu                           {float: left; width: 750px; height: 20px; margin: 10px;}
#overzicht_vorige                         {float: left;}
#overzicht_volgende                       {float: right; margin-right: 25px;}
#overzicht_menu a                         {color: #f48719; text-decoration: none; font-size: 13px;}
#overzicht_menu a:hover                   {text-decoration: underline;}
/***************************************************************/

/* Content productie techniek */
.techniek                                 {float: left; width: 990px; height: 200px;}
.techniek_foto                            {float: left; width: 160px; margin: 10px;}
.techniek_tekst                           {float: left; max-width: 750px; margin: 10px; font-size: 8pt;}

/* Partners */
#partner                                  {min-height: 600px; float: left; width: 990px; background-color: #ffffff; padding-bottom: 30px;}
.partner_blok                             {float: left; width: 230px; margin: 10px;}
.partner_kop                              {float: left; margin: 5px; width: 230px;}
.partner_foto                             {float: left; margin: 5px; width: 200px; height: 200px;}

/* Admin */
#admin                                    {float: left; width: 990px; margin: 10px; margin-left: 50px;}
.admin_blok                               {float: left; width: 250px; margin: 10px; min-height: 100px;}

/* Wie zijn wij */
#wiezijnwij_tekst                         {float: left; width: 550px; margin: 10px;}
#wiezijnwij_foto                          {float: left; width: 350px; margin: 10px;}

/***************************************************************/
/***************************** Einde content *******************/
/***************************************************************/

/***************************************************************/
/***************************** Footer **************************/
/***************************************************************/

/* Footer */
#footer                                  {margin: 0px auto; width: 1000px;}
#footertekst                             {float: left; color: #f1811e; font-size: 12px; width: 400px; margin-left: 600px;}
#footertekst a                           {color: #f1811e; font-size: 12px; text-decoration: none;}
#footertekst a:hover                     {text-decoration: underline;}
/***************************************************************/

/***************************************************************/
/**************************** Einde Footer *********************/
/***************************************************************/

/* Overige styles */
img                                     {border: 0px;}
h1                                      {color: #ffffff; font-size: 15px; text-indent: 10px; margin: 0px; margin-top: 5px; padding: 0px;}
h2                                      {color: #59863a; font-size: 18px; margin: 0px; margin-top: 5px; padding: 0px; padding-bottom: 10px;}
h3                                      {color: #59863a; font-size: 16px; line-height: 20px; margin: 0px; padding: 0px;}
fieldset                                {border: 0px;}

.input                                   {float: left; width: 222px; height: 33px; background-image: url('../img/zoekveldinput.jpg'); background-position: center top;
                                          background-repeat: no-repeat; color: #7ea547; font-size: 15px; border: 0px; padding-left: 5px; background-color: #202020;
                                          margin-left: 5px; line-height: 30px; text-indent: 10px;}
.select                                  {float: left; width: 221px; height: 32px; background-image: url('../img/zoekveldinput.jpg'); background-position: center top;
                                          background-repeat: no-repeat; color: #7ea547; font-size: 15px; border: 0px; background-color: #2f2f2f;
                                          margin-left: 10px; line-height: 30px; padding: 5px; padding-top: 7px;}
.submit                                  {float: left; width: 170px; height: 34px; background-image: url('../img/submit.jpg'); background-position: center top;
                                          background-repeat: no-repeat; color: #ffffff; border: 0px; background-color: #202020; margin-left: -5px;}
.textarea                                {float: left; width: 320px; height: 136px; background-image: url('../img/textarea.jpg'); background-position: center top;
                                          background-repeat: no-repeat; border: 0px; padding-left: 10px; padding-top: 15px; background-color: #202020; margin-left: 10px;
                                          color: #7ea547; margin-top: -5px; margin-right: -15px; overflow: scroll-y;}
.file                                    {float: left; margin-left: 12px;}
a                                        {color: #f58818; text-decoration: none;}
a:hover                                  {text-decoration: underline;}
ul                                       {list-style: none;}
.groen                                   {color: #59863a; font-weight: bold;}
.radio                                   {float: left; width: 210px; color: #59863a; margin-left: 15px;}
.radio_tekst                             {width: 100px; float: left;}
#letop                                   {float: left; width: 450px; color: #f58818; font-size: 10pt;}
.oranje                                  {color: #f48719; font-weight: bold;}