@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 {
    display:inline;
    float:left;
    margin: 0;
    padding:0px 0px 0px 10px;
    width: 600px;
}

/**************************************************** 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:#002F60;
}
#prodlist .prod a
{
    color:#002F60;
}
/**************************************************** 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:300px;
}
#singleproduct div.content {
     float:right;
     width:280px;
}
/* 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: #002F60;}
/* Unactive link, (Men,Women etc.) */
#scroll div.scrolltop .genderselect a {color: #002F60;}
/* Active link, (Men,Women etc.) - Should be the same color on both */
#scroll div.scrolltop .active a {background-color:#B5E1F6;}
#scroll div.genderselect .active {background-color:#B5E1F6;}



/***************************************************** 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 {
    display:inline;
    float:left;
    margin:0;
    padding:0;
    width:290px;
}
#submenu_mdb .brand_act
{
    border: 0;
}
/***** Nivå1 *****/
#submenu_mdb li
{
    list-style: none;
}
#submenu_mdb .lilvl1
{
    display: block;
	width: auto;
	color:#002F60;
    font-family:Geneva,Arial,Helvetica,sans-serif;
    font-size:10px;
    text-decoration:none;
    text-transform:uppercase;
    padding: 5px 0px 5px 0px;
}
#submenu_mdb .a_active
{
    background-color:#B5E1F6;
}
#submenu_mdb .lilvl1:hover
{
    background-color:#B5E1F6;
}
/***** Nivå 2 *****/

#submenu_mdb .lilvl2
{
    display: block;
	width: auto;
	height: auto;
	background: none;
	text-decoration: none; 
	padding: 2px 0px 2px 30px;
	outline: 0;
    clear: both;
}
#submenu_mdb .lilvl2 a
{
    color:#002F60;
    font-family:Geneva,Arial,Helvetica,sans-serif;
    font-size:10px;
}
/* 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;
	color:#002F60;
    font-family:Geneva,Arial,Helvetica,sans-serif;
    font-size:10px;
	padding: 2px 0px 2px 30px;
    outline: 0;
    clear: both;
}
/* För att visa vilken länk som är aktiv i nivå3 */
#submenu_mdb .section_act a
{
    text-decoration: underline;
}
/* 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
{
    text-decoration: underline;
}
/***************************************** MENU ENDS ************************************************/