@import url("mdb_nwg.css");
@import url("lightbox/css/lightbox.css");

/* Information before you start
*
*  Most of these values are loaded from the sites CSS, so if you have h2 in the site css this module will take those values etc.
*  This CSS is to change the values on widths, margins and paddings that might be different on every site.
*
*
*/

/*
    Box for both product listing and single product
    This is where all the products will be presented, this box can depend on the site width
    But as it is width: auto you are only suposed to change the margin and the padding.

    !!!!IMPORTANT: Do not add any new values to this box!!!!!!!
*/
#maincontent {
    float: left;
    margin: 10px 0px 0px 0px;
    padding: 0px 10px 0px 10px;
    width: 620px;
}

/**************************************************** Product list, step 2 **************************************************/

/*
    Box for productlistning
    This is the box where all the products are listed, should be equal to #singeproduct or have a very small difference

    Here you can change the color of the text that is .artnumber = Topleft | The titel link .prod a = Bottom big title

*/
#prodlist .artnumber
{
    color: #666666;
}
#prodlist .prod a
{
    color: #666666;
}
/**************************************************** Single product, step 3 **************************************************/
/*
    Box for a singe product, should be equal to #prodlist or have a very small difference
    This box containts of two boxes that sepperate the image and the content
    The image is loaded in div.image that is on the left side and the text in div.content
*/
#singleproduct div.image {
    width:320px;
}
#singleproduct div.content {
    width:300px;
}
/* First page that is now created manually in product_template */



/**************************************************** Gender menu **************************************************/
/* Title, the one that says "Choose your color" */
#scroll div.scrolltop div.genderselect div.text {color: #ffffff;}
/* Unactive link, (Men,Women etc.) */
#scroll div.scrolltop .genderselect a {color: #ffffff;}
/* Active link, (Men,Women etc.) - Should be the same color on both */
#scroll div.scrolltop .active a {color: #ffffff;}
#scroll div.genderselect .active {color: #ffffff;}



/***************************************************** MENU *********************************************************/
/* The menu is a bit special, it is dependent on how many layers there are in a brand.
   Please try not to add any new values because the menu is ver sensetive.

    The html looks like this for a brand:

    This means the that the left column will be created with 2 brands or 2 layers:
    The menu is dynamic, so it will look for the first level, in typo3 you can set if you are going to use the brand as
    the first level, if you don't use it it will mean the first layer in a brand.
    So let's say you are going to have 2 brands Clique and Craft, if the first level is set to 1, it will be
    <a class=lilvl1>Craft</a>
    <a class=lilvl1>Clique</a>
    Now if we just have one brand, let's say Clique it will be like this:
    <a class=lilvl1>Shirts</a>
    <a class=lilvl1>T-shirts</a>

    And this is how you will see it.
    #leftcol (
        <ul main> //This is set in the javascript css and is not changeable so DO NOT add a UL for #leftcol
            <li class=brad_act><a class=lilvl1>The LINK</a></li>
            <li class=brad_act><a class=lilvl1>The LINK</a></li>
        <ul>
    )

    Now when we click on one of the links the list will open:

    #leftcol (
        <ul main> //This is set in the javascript css and is not changeable so DO NOT add a UL for #leftcol
            <li>
                <a class=a_active lilvl1>The LINK</a>               // This mean that we have clicked on a link and now it is active
                <ul>
                    <li class=lilvl2 section><a>LINK</a></li>       // This is the link that we have clicked on, it will either load lilvl3 or will show some products
                </ul>                                                  depending on how many layers that brand has.
            </li>
        <ul>
    )

    * Same steps for lilvl3, rememeber it all depends on what type of site it will be
    * !IMPORTANT!!!! Remember that a link can't be active before you click the last layer!!!
*/

/* Grunden */
#leftcol
{
    float:left;
    height:auto !important;
    min-height:410px;
    height: 410px;
    padding-bottom:15px;
    width:200px;
    background: #000000 no-repeat;
}
#submenu_mdb .brand_act
{
    border-bottom: 1px dashed #666666;
}
/***** Nivå1 *****/
#submenu_mdb li
{
    list-style: none;
}
#submenu_mdb .lilvl1
{
    display: block;
	width: auto;
	background: none;
	text-decoration: none;
    font-size: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding: 9px 0px 10px 20px;
    outline: 0;
    color: #000000;
}
#submenu_mdb .a_active
{
    background: transparent url(img/submenu_a.jpg) left top no-repeat; color: #FFFFFF;
}
#submenu_mdb .lilvl1:hover
{
    background: transparent url(img/submenu_a.jpg) left top no-repeat; color: #FFFFFF;
}
/***** Nivå 2 *****/

#submenu_mdb .lilvl2
{
    display: block;
	width: auto;
	height: auto;
	background: none;
	text-decoration: none;
	padding: 7px 3px 4px 10px;
	outline: 0;
    clear: both;
}
#submenu_mdb .lilvl2 a
{
    font-size: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #ffffff;
}
/* Ifall det finns tre nivår så gäller det att den här har motsatsen till .a_active */
#submenu_mdb .lvl2_act
{
    background: none;
}
/***** Nivå 3 *****/

#submenu_mdb .lilvl3
{
    display: block;
	width: auto;
	height: auto;
	background: none;
	text-decoration: none;
	padding: 7px 0px 4px 10px;
	outline: 0;
    color: #ffffff;
    clear: both;
}
/* För att visa vilken länk som är aktiv i nivå3 */
#submenu_mdb .section_act a
{

text-decoration: none;
}
/* För att ta bort stylen för de andra länkarna i nivå 3 -> Motsatsen till .section_act a */
#submenu_mdb .section a
{
    text-decoration: none;
}
#submenu_mdb .section a:hover
{
color: #999999;
    text-decoration: underline;
}
/***************************************** MENU ENDS ************************************************/