/* // (c) 2012 v-lines.nl */
/* // (v) 4.02 20120803 */

/*
#f6f6f6 donkerwit; body en maincontainer achtergrond
#ffffff wit; content achtergrond
#ffffff wit; rechterbalk achtergrond; was d9d0d9 pale purple
#3d3d3d donkergrijs; tekstkleur
#000000 zwart; links
#fd0000 rood; tekst hover
#f6f6f6 donkerwit; loginbalk achtergrond
#330033 paars; logobalk achtergrond
#5a5a5a grijs; navbalk achtergrond
#ffffff wit; navbalk tekstkleur
#fafafa grijs; border om container
#909090 zilvergrijs; loginbalk tekstkleur, slogan
#e7e7e7 grijs; content, rechterbalk, grid en footer border
#333333 donkergrijs; rechtermenu tekst

#333333 donkergrijs; h1 t/m h4
#5a5a5a grijs; h5 in de footer
#fd0000 rood; h6 in de rechterbalk, banner achtergrond
#fd0000 rood; tekst-, login- en navbalk hover
#fd0000 rood; class prijs, icon tekst

#ff0000 signaalrood; class verwij
#009900 felgroen; class zichtbaar
#919191 grijs; class nav en verbor
#919191 grijs; input border, button border, shiptable, itemdetails en checkout borders
#010101 bijna zwart; input tekst
#330033 paars; button tekst
#d3d3d3 heel lichtgrijs; button achtergrond, zoekveld, hr, pic/avatar class
*/

*                       {margin: 0; padding: 0;}
html, body              {height: 100%}
html                    {overflow-y: scroll;}

body                    {background: #f6f6f6; color: #3d3d3d; font-family: verdana,helvetica,arial; font-size: 8pt; margin: 0;}

a:link                  {color: #000000; text-decoration: underline;}
a:visited               {color: #000000; text-decoration: underline;}
a:active                {color: #000000; text-decoration: underline;}
a:hover                 {color: #fd0000; text-decoration: underline;}

table                   {border: none; border-collapse: collapse;}   

/* pagina header */
h1, .h1                 {color: #333333; font-family: helvetica,arial; font-size: 18pt; font-weight: bold; margin-bottom: 2px; padding: 5px 0 10px 0;}
h1 a:link               {color: #333333; text-decoration: none;}
h1 a:visited            {color: #333333; text-decoration: none;}
h1 a:active             {color: #333333; text-decoration: none;}
h1 a:hover              {color: #fd0000; text-decoration: none;}
/* tussentitel */
h2                      {color: #333333; font-family: helvetica,arial; font-size: 18pt; font-weight: bold; margin-bottom: -10px; padding: 5px 0 15px 0;}
h2 a:link               {color: #333333; text-decoration: none;}
h2 a:visited            {color: #333333; text-decoration: none;}
h2 a:active             {color: #333333; text-decoration: none;}
h2 a:hover              {color: #fd0000; text-decoration: none;}
/* lijstweergaves */
h3                      {color: #333333; font-family: helvetica,arial; font-size: 11pt; font-weight: bold; margin-bottom: 2px; padding: 0px 0 0px 0;}
h3 a:link               {color: #333333; text-decoration: none;}
h3 a:visited            {color: #333333; text-decoration: none;}
h3 a:active             {color: #333333; text-decoration: none;}
h3 a:hover              {color: #fd0000; text-decoration: none;}
/* in blog en links */
h4                      {color: #333333; font-family: helvetica,arial; font-size: 12pt; font-weight: bold; margin-bottom: 2px; padding: 5px 0 10px 0;}
/* footer */
h5                      {color: #5a5a5a; font-family: verdana,helvetica,arial; font-size: 8pt; font-weight: bold; margin-bottom: 2px; padding: 5px 0 10px 0;}
/* rechterkolom */
h6, .h6                 {color: #fd0000; font-family: helvetica, arial; font-size: 18px; font-weight: bold; margin-bottom: 2px; padding: 5px 0 10px 0;}

div,td,p,ol,ul,li       {color: #3d3d3d; font-family: verdana,helvetica,arial; font-size: 8pt;}

p                       {margin: 5px 0 15px 0; line-height: 18px;}

ul                      {list-style:none; margin:0; padding:0;}

/* STANDAARD CLASSES */
.brood                  {color: #3d3d3d; font-family: verdana,helvetica,arial; font-size: 8pt;}

.nav                    {color: #919191; font-family: verdana,helvetica,arial; font-size: 8pt; font-weight: Normal;}
.nav a:link             {color: #919191; text-decoration: none;}
.nav a:visited          {color: #919191; text-decoration: none;}
.nav a:active           {color: #919191; text-decoration: none;}
.nav a:hover            {color: #919191; text-decoration: underline;}

.zichtb                 {color: #009900; font-family: verdana,helvetica,arial; font-size: 8pt; font-weight: Normal;}
.zichtb a:link          {color: #009900; text-decoration: underline;}
.zichtb a:visited       {color: #009900; text-decoration: underline;}
.zichtb a:active        {color: #009900; text-decoration: underline;}
.zichtb a:hover         {color: #009900; text-decoration: underline;}

.verbor                 {color: #919191; font-family: verdana,helvetica,arial; font-size: 8pt; font-weight: Normal;}
.verbor a:link          {color: #919191; text-decoration: underline;}
.verbor a:visited       {color: #919191; text-decoration: underline;}
.verbor a:active        {color: #919191; text-decoration: underline;}
.verbor a:hover         {color: #919191; text-decoration: underline;}

.verwij                 {color: #ff0000; font-family: verdana,helvetica,arial; font-size: 8pt; font-weight: Normal;}
.verwij a:link          {color: #ff0000; text-decoration: underline;}
.verwij a:visited       {color: #ff0000; text-decoration: underline;}
.verwij a:active        {color: #ff0000; text-decoration: underline;}
.verwij a:hover         {color: #ff0000; text-decoration: underline;}

.prijs                  {color: #fd0000; font-family: helvetica,arial; font-size: 11pt; font-weight: bold;}
.prijs a:link           {color: #fd0000; text-decoration: none;}
.prijs a:visited        {color: #fd0000; text-decoration: none;}
.prijs a:active         {color: #fd0000; text-decoration: none;}
.prijs a:hover          {color: #fd0000; text-decoration: underline;}

input                   {padding: 2px; border: 1px solid #919191; color: #010101; font-family: verdana,helvetica,arial; font-size: 8pt;}
textarea                {padding: 2px; border: 1px solid #919191; color: #010101; font-family: verdana,helvetica,arial; font-size: 8pt;}
select                  {padding: 2px; border: 1px solid #919191; color: #010101; font-family: verdana,helvetica,arial; font-size: 8pt;}

.radiobutt              {border: 0px; color: #330033;}
.okbutt                 {border: 1px solid #919191; background: #d3d3d3; color: #330033; font-family: verdana,helvetica,arial; font-size: 8pt; font-weight: Normal; padding: 2px;}

/* hidden anti-spam textveld */
.leeg                   {display: none;}

.clear                  {clear: both;}

/* hr: <div class="hr"><hr /></div> */
.hr hr                  {display: none;}
.hr                     {height: 1px; margin: 1px 0px 1px 0px; border-bottom: 1px solid #d3d3d3;}

/* plaatjes uit de database: marge rechts en onder */
.gridpic                {margin: 0;}
.listpic                {margin: 0;}
.itempic                {margin: 0 20px 10px 0;}
.nopic                  {margin: 0 10px 10px 0;}

/* positionering, menu's etc. - max-width: 1360px; */
#maincontainer          {width: 96%; max-width: 1360px; margin: 0 auto; background: #f6f6f6; border: 0px;}
/* daarin 3 containers: header, contentcontainer en footercontainer */

/* HEADER CONTAINER */
#header                 {margin: 0; padding: 0;}
#printlogo              {display: none;}

/* loginbalk */
#loginbalk              {width: 100%; height: 22px; margin: 0; padding:0; background: #f6f6f6; border-bottom: 0px;}
#loginmenu              {float: right; margin: 2px 30px 0 0;}
#loginmenu li           {display: inline-block; zoom: 1; *display: inline; padding: 0 1px 0 1px; color: #909090; font-family: verdana,helvetica,arial; font-size: 8pt; font-weight: bold;}
#loginmenu li a         {display: block; height: 20px; padding: 2px 20px 0 20px; color: #909090; text-decoration: none;}
#loginmenu li a:hover   {color: #fd0000;}

/* logobalk */
#logobalk               {height: 210px; margin: 0; padding: 0; background: #330033;}

/* logo */
#logo-clearspot         {float: left; width: 215px; margin: 40px 0 0 30px;}
#logo-shinybeast        {float: left; width: 232px; margin: 25px 0 0 25px;}

/* icons */
#icons                  {float: right; width: 520px; margin: 0 0 15px 100px; padding: 24px 24px 4px 4px; border: 0; background: #330033;}
.icon                   {display: inline-block; zoom: 1; *display: inline; width: 100px; margin: 0px; padding: 0px; text-align: center;}
.icon a                 {display: block; color: #fd0000; font-size: 8pt; font-weight: bold; text-decoration: none;}
.icon img               {margin-bottom: 3px; padding: 5px;}


#searchcontainer        {float: left; margin: 0 100px 10px 0; padding: 0; background: #330033;}
/* daarin zowel slogan als searchbox */

/* slogan */
#slogan                 {margin: 0 0 10px 2px; background: #330033;}
.slogan                 {color: #909090; font-family: helvetica,arial; font-size: 18pt; font-weight: bold;}

/* searchbox */
#searchbox                                {width: 420px; margin: 0; padding: 0; background: #330033;}
#searchform                               {margin: 0; padding: 0; font-size: 18px;}
#searchform div                           {margin: 0; padding: 0; color: #000000;}
#searchform .searchFieldDefault           {width: 320px; padding: 5px; color:#dcdcdc; font-size: 18px;}
#searchform .searchFieldActive            {width: 320px; padding: 5px; color:#5a5a5a; font-size: 18px;}
#searchform .searchButton                 {width: 73px; padding: 4px; color:#5a5a5a; font-size: 18px;}
#advanced                                 {position: relative; z-index: 30; width: 330px; color:#a0a0a0; font-size:10px; text-align: right;}
#suggestions                              {position: relative; z-index: 20; width: 330px; display: none;}

/* searchresults */
#searchresults                            {position: absolute; z-index: 10; width: 330px; background: #a0a0a0; border: 1px solid #919191; font-size: 10px; line-height: 14px;}
#searchresults a                          {display: block; clear: left; height: 16px; padding: 2px; background: #e4e4e4; text-decoration: none;}
#searchresults a:hover                    {background: #b7b7b7; color: #ffffff;}
#searchresults a img                      {float: left; padding: 5px 10px;}
#searchresults a span.searchheading       {display: block; padding-top: 5px; color: #191919; font-weight: bold;}
#searchresults a:hover span.searchheading {color: #ffffff;}
#searchresults a span                     {color: #555555;}
#searchresults a:hover span               {color: #f1f1f1;}
#searchresults span.category              {display: block; margin: 5px; color: #ffffff; font-size: 11px;}
#searchresults span.seperator             {float: right; margin-right: 5px; padding-right: 15px;}
#searchresults span.seperator a           {display: block; height: auto; margin: 5px; background: transparent; color: #ffffff;}


/* topmenu, identiek aan bottommenu */
#topbalk                {margin: 0; padding: 0; background: #5a5a5a; border-top: 0px; border-bottom: 0px;}
#topmenu li             {display: inline-block; zoom: 1; *display: inline; margin: 0; padding: 0; background: #5a5a5a; color: #ffffff; font-family: helvetica,arial; font-size: 14pt; font-weight: Normal;}
#topmenu li a           {display: block; padding: 6px 18px 6px 22px; background: #5a5a5a; color: #ffffff; text-decoration: none;}
#topmenu li a:hover     {color: #fd0000;}


/* CONTENT CONTAINER */
#contentcontainer       {clear: both; margin: 12px 0 12px 0; padding: 0px;}
/* bevat 2 kolommen: rechterbalk en content */

/* RECHTERBALK: menu, banners, newsletters, social media */
#rechterbalk                  {float: right; width: 300px; margin: 0; padding: 0;}

#categoriemenu                {width: 298px; margin: 0 0 12px 0; padding: 0; background: #ffffff; border: 1px solid #e7e7e7;}
#categoriemenu ul             {width: 290px; margin: 4px; padding: 0; background: #ffffff;}
#categoriemenu li             {margin: 0px 0 2px 0; padding: 0; background: #ffffff; color: #333333; font-family: verdana,helvetica,arial; font-size: 8pt; font-weight: bold;}
#categoriemenu li a           {display: block; padding: 7px 9px 7px 9px; color: #333333; border: 1px solid #909090; text-decoration: none;}
#categoriemenu li a:hover     {background: #ffffff; color: #fd0000; border: 1px solid #909090;}

#headspinbanner         {width: 298px; height: 91px; margin: 0 0 12px 0; background: #ffffff; border: 1px solid #e7e7e7;}
#headspinbanner img     {float: left; padding-right: 12px;}
#headspinbanner a       {display: block; padding: 6px; text-decoration: none;}

#spotlightbanner        {width: 298px; height: 108px; margin: 0 0 12px 0; background: #fd0000 url(../images/spotlight_banner.gif) top left no-repeat; border: 1px solid #e7e7e7;}
#spotlightbanner img    {float: right; padding-right: 12px;}
#spotlightbanner a      {display: block; width: 240px; padding: 10px 0 60px 20px; text-decoration: none; line-height: 20px; color: #ffffff; font-family: verdana,helvetica,arial; font-size: 8pt; font-weight: bold;}

#newsletters            {width: 298px; margin: 0 0 12px 0; background: #ffffff; border: 1px solid #e7e7e7;}
#newsletters h6         {margin-bottom: 3px; padding: 6px 0 0 6px;}
#newsletters p          {display: block; padding: 0 0 6px 12px; font-family: 'Courier New',helvetica,arial; letter-spacing: 0.4em; line-height: 2.0em;}
#newsletters a          {text-decoration: none;}

#followicons            {width: 298px; height: 150px; margin: 0 0 12px 0; padding: 0; background: #ffffff; border: 1px solid #e7e7e7;}
.followpad              {display: block; margin: 6px 6px 6px 6px;}
.followicon             {display: inline-block; *display: inline; width: 60px; margin-left: 12px; vertical-align: top;}
.followicon2            {display: inline-block; *display: inline; width: 50px; vertical-align: top;}

#shinybeastbanner        {width: 298px; height: 145px; margin: 0 0 12px 0; background: #ffffff; border: 1px solid #e7e7e7;}
#shinybeastbanner img    {float: left; padding-right: 12px;}
#shinybeastbanner a      {display: block; padding: 6px; text-decoration: none;}


/* CONTENT */
#content, #content-wide {min-height: 1512px; margin: 0 314px 0 0; padding: 10px; background: #ffffff; border: 1px solid #e7e7e7;}
#content ul             {display: block; list-style: square; margin: 5px 0 15px 0; line-height: 15px;}
#content ol             {display: block; list-style: decimal;}
#content li             {margin-left: 25px;}
#content p              {margin: 5px 0 15px 0; line-height: 18px;}

.intro                  {display: block; padding-right: 80px;}

/* table homepage */
div.gridcontainer       {margin: 0; padding: 0;}
div.gridcell            {float: left; width: 180px; height: 270px; margin: 0px 20px 20px 0; border: 1px solid #e7e7e7;}
div.gridcell a          {text-decoration: none;}
.gridimg                {margin: 0; padding: 0;}
.gridtext               {padding: 2px 3px 0 3px; display: block;}

.gridrecordartist       {font-weight: bold;}
.gridrecordtitle        {font-weight: normal; font-style: italic;}
.gridrecorddetails      {font-weight: normal; font-size: 7px; color: #919191;}

/* catalog list */

/* sort and qty  */
#listnavtop             {width: 100%;}
#listqty                {float: left;}
#qtyform                {float: right; margin: -4px 3px 2px 3px;}

/* item - max-width: 960px; */
/* zet min-hoogte van itemtxt om related content naar beneden te duwen */
#itemcontainer          {margin: 0; padding: 0;}
#item                   {width: 100%;}
#itemthumb              {float: left;}
#itemdetails            {float: right; width: 220px; margin: 0 20px 20px 30px; padding: 10px; border: 1px solid #919191;}
#itemdetails form       {margin-bottom: 12px;}
#itemtext               {min-height: 420px; margin: 0 0 40px 0; padding: 0 0 0 200px;}
#itemfooter             {width: 100%;}

/* checkout */
#checkoutcontainer      {width: 100%; max-width: 900px; margin: 0; padding: 0;}
#checkoutdetails        {float: left; width: 400px; margin-bottom: 20px; padding: 10px 20px 20px 20px; border: 1px solid #919191;}
#checkoutplaceorder     {float: right; width: 320px; padding: 10px 20px 20px 20px; border: 1px solid #919191;}

/* forms */
.formtable              {margin: 0; padding: 0;}
.formtable td           {padding: 3px;}

.listtable              {width: 100%; margin: 0; padding: 0;}
.listtable td           {padding: 3px;}

.shiptable              {width: 100%; margin: 0; padding: 0;}
.shiptable td           {padding: 3px; border: 1px solid #919191;}

/* willekeurige tabel, niet 100% */
.anytable               {margin: 0; padding: 0;}
.anytable td            {padding: 3px;}

#pagenav                {width: 100%;}

#contentfooter          {width: 100%; margin: 70px 0 70px 0;}


/* FOOTER CONTAINER */
#footercontainer        {clear: both; margin: 0; padding: 0;}
/* daarin menubalk herhalen en footer */

/* flinke margin-rechts, weghalen voor volle breedte */
#bottombalk             {margin: 0 314px 0 0; padding: 0; background: #5a5a5a; border-top: 0px; border-bottom: 0px;}
#bottommenu li          {display: inline-block; zoom: 1; *display: inline; margin: 0; padding: 0; background: #5a5a5a; color: #ffffff; font-family: helvetica,arial; font-size: 14pt; font-weight: Normal;}
#bottommenu li a        {display: block; padding: 6px 20px 6px 20px; color: #ffffff; text-decoration: none;}
#bottommenu li a:hover  {color: #fd0000;}

/*  FOOTER */
#footerblocks           {clear: both; margin: 12px 0 12px 0;}

#footerblock-right      {float: right; width: 300px; height: 360px; background: #f6f6f6; border: 1px solid #f6f6f6;} /* leeg blok in de achtergrondkleur */
#footerblock-left       {height: 360px; margin: 0 314px 0 0; background: #ffffff; border-top: 1px solid #e7e7e7; border-right: 1px solid #e7e7e7; border-bottom: 1px solid #e7e7e7;}
.footerblock            {display: inline-block; zoom: 1; *display: inline; width: 32%; height: 360px; vertical-align: top; background: #ffffff; border-left: 1px solid #e7e7e7;}

.footerpad              {display: block; margin: 20px 6px 6px 24px; color: #919191;}

/* verticale ul menu's */
.footermenu             {margin: 0; padding: 0;}
.footermenu li a        {display: block; background: #ffffff; width: 150px; margin: 0 0 3px 0; padding: 5px; color: #5a5a5a; font-weight: bold; text-decoration: none;}
.footermenu li a:hover  {background: #5a5a5a; color: #ffffff;}

/* drie logootjes */
#minilogos              {float: left; margin: 20px 0 0 0; padding: 0; border: 1px solid #ffffff;}
.minilogo               {display: inline-block; zoom: 1; *display: inline; width: 48px; text-align: center; margin: 0; padding: 0 3px 0 0; background: #ffffff; border: 1px solid #ffffff;}

.paypalicon             {margin: 15px 0 0 15px;}

#webdev                 {margin: 0 360px 40px 0; padding: 0; text-align: right;}
#webdev a               {text-decoration: none; color: #919191; font-family: arial; font-size: 8px; font-weight: bold; letter-spacing: 0.1em;}

#cookiebalk             {height: 20px; margin: 0 314px 0 0; padding-top: 6px; background: #ffff00; border: 1px solid #e7e7e7; text-align: center;}
#cookiebalk a           {color: #000000; font-family: arial; font-size: 8pt; font-weight: bold; letter-spacing: 0.1em;}