@font-face {
    font-family: 'HollaRegular';
    src: url('../fonts/HollaScript-webfont.eot');
    src: url('../fonts/HollaScript-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/HollaScript-webfont.woff') format('woff'),
         url('../fonts/HollaScript-webfont.ttf') format('truetype'),
         url('../fonts/HollaScript-webfont.svg#HollaRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.rounded (@radius: 5px) {
    -moz-border-radius: @radius;           /* firefox */
    -webkit-border-radius: @radius;        /* safari/chrome */
    border-radius: @radius;                /* ie9, future proofing for whatever browser that support this arrtibute */
}

.round10 { .rounded(10px) }
.round5 { .rounded(5px) }
.round2 { .rounded(2px) }

#left {
   background: url(../img/party-bg.gif);
   width: 50%;
   position: absolute;
   left: 0px;
   min-height: 100%;
}
#right {
   background: url(../img/stars.gif);
   width: 50%;
   position: absolute;
   right: 0px;
   min-height: 100%;
}

#wrapper {position:relative;padding:20px 0;float:left;}
#header {height:124px;width:960px;background: url(../img/header_bg_blue.png);}
#logo{ width:454px;height:178px;background:url(../img/logo.png);margin:0 auto;margin-top:-180px;cursor:pointer}

/* Home Page */
#left-content {padding:20px;border:1px solid #ccc;background:#F8F8F8;margin-top:10px;width:420px;float:left;}
#right-content {padding:20px;border:1px solid #333;background:#000000;margin-top:10px;width:420px;float:right;}

#main {
	color:black; min-height:400px;float:left;width:960px;.rounded(10px);
	ul {
    list-style: none;list-style-type: none;
    li {
      float:left;padding:5px;width:190px;margin:10px 0 15px 0;display:block;text-align:center; font-size:26px;position:relative;height:191px;cursor:pointer;line-height:24px;
      a.titulo {
        text-decoration: none;
        display:block;
        .rounded(5px);
        height:52px;
        padding:3px;
        //font-family: 'HollaRegular';
        font-weight:bold;
        font-size: 16px;
      }
      img {.rounded(5px);width:190px;height:130px;}
    }
  }
  #left-content {
    ul li {
      border: 1px solid #EAEAEA;
      //&:hover {border: 5px solid #eb9006;background-color:black;}
      a {background-color:#eaeaea;color:#c71585;}
      &:hover {border:1px solid #CCCCCC;}
    }
  }
  #right-content {
    ul li {
      border: 1px solid #222222;
      /*&:hover {
          border: 5px solid #333333;color:white;
          background-color: #333333;
      }*/
      a {background-color:#222222;color:#F8F8F8;}
      &:hover {border:1px solid #444444;}
    }
  }
}

/*Make sure your page contains a valid doctype at the top*/
#simplegallery1{ //CSS for Simple Gallery Example 1
position: relative; /*keep this intact*/
visibility: hidden; /*keep this intact*/
border: 10px solid darkred;
}
#simplegallery1 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined)
text-align: left;
padding: 2px 5px;
}



#top-festas, #top-festas-destaques, #top-magia, #top-magia-destaques {text-align:center;line-height:30px;color:white;margin-bottom:10px;font-size:16px;font-weight:bold}
#top-festas {background:#c71585;cursor:pointer}
#top-festas:hover {background:#fe57a1;}
#top-magia  {background:#333;cursor:pointer}
#top-magia:hover  {background:#999999;}
#top-festas-destaques {background: green;margin-top:20px;margin-bottom:5px}
#top-magia-destaques {background: orange;margin-top:20px;margin-bottom:5px}

.nav {background: #6495ed;line-height:32px;height:36px;margin-top:-10px;padding-left:20px}
.nav ul {list-style: none;list-style-type: none;}
.nav ul li {display:block;float:left;margin-right:20px}
.nav ul li a {text-decoration:none;font-weight:bold;color:white;margin-top:2px;display:block;float:left}
.nav ul li a:hover {color:black}
.bottom {margin-top:10px}

#sidebar {width:220px;float:left;margin-right:20px}
#sidebar .menu {float:left;padding:10px;margin-bottom:10px}
#sidebar .menu ul {list-style: none;list-style-type: none;}
#sidebar .menu ul li {display:block;padding:0;margin: 0 0 5px;height:auto;width:195px;text-align: left;font-size:12px;line-height:20px;border-bottom: 1px solid #ff8c00}
#sidebar .menu ul li ul li{border-bottom: none;padding-left:20px;color:#333;font-weight: normal}
#sidebar .menu ul li a {text-decoration:none;font-weight:bold;color:black;font-weight: normal;font-family:arial;height:auto}
#sidebar .menu ul li a:hover {color:white}
#sidebar .menu li.active a {color:white}
#sidebar .menu li.active ul li a {color:#333333}
#sidebar .menu li.active ul li a:hover {color:white}

#main h2 {margin-top:0}

#breadcrumbs{
    margin-top:-10px;margin-bottom:10px;font-size:11px;
}
#content {float:left;width:675px}
#content h2 {margin:0;padding-bottom:10px;color:black}
.product-thumb {position:relative;width:140px;height:225px;float:left;border: 1px solid #ddd;margin-right:20px;margin-bottom:20px;background: white;padding: 5px;text-align:center;color:black;cursor:pointer;.rounded(5px)}
.product-big {width:380px;height:380px;float:left;border: 1px solid #ddd;margin-right:20px;margin-bottom:20px;background: white;padding: 10px;text-align:center;color:black;cursor:pointer;overflow:hidden;display: table-cell; vertical-align: middle;line-height:380px;}
.product-big img {display:block;margin:0 auto;}
.product:hover {border: 1px solid #c71585}
.last {margin-right:0}



.category-thumb {width:200px;height:210px;float:left;border: 1px solid #ddd;margin-right:20px;margin-bottom:20px;background: white;padding: 5px;text-align:center;color:black;cursor:pointer;.rounded(5px)}
.category-thumb:hover {border: 1px solid #c71585}

a {text-decoration: none;}

#artigo-atributos {
    background: #DDDDDD;
    padding: 10px 10px 0;
    border:1px solid #FFFFFF;
    .rounded(5px);
    margin-bottom:15px;
    overflow:hidden;
}

#full {width:100%;padding:20px;}

#pagination {
    float:right;
    a,span {
        cursor:pointer;
        background-color: transparent;
        background-image: -moz-linear-gradient(center top , #F5F5F5, #F1F1F1);
        border: 1px solid rgba(0, 0, 0, 0.1);
        color: #444444;
        display: inline-block;
        position: relative;
        .rounded(2px);
        font-size: 16px;
        //font-weight: bold;
        height: 27px;
        line-height: 27px;
        margin:0;
        min-width: 34px;
        outline: 0 none;
        //padding: 0 8px 0 8px;
        text-align: center;
        text-transform: uppercase;
        &:hover{
            color: #333333;
            border:1px solid #c6c6c6;
            background-image: -moz-linear-gradient(center top , #F8F8F8, #F1F1F1);
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        }
    }
    span, span:hover {
        cursor:normal;
        background-color: #D14836;
        background-image: -moz-linear-gradient(center top , #DD4B39, #D14836);
        color: #FFFFFF;
        margin-left:3px;
    }
}

#login {
    float:left;
    width: 300px;
    height:220px;
    background-color: #EDEDED;
    padding:20px;
    h3 {margin:0;}
    label {width:90px;display:block;float:left;line-height:26px;}
    input {height:20px;line-height:20px;padding:5px;.rounded(5px);border:1px solid #DDDDDD;display:block;float:left;width:180px}
    input { box-sizing: content-box; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; }
    input.button {height:30px;line-height:20px;width:auto;float:right;background-color:ORANGE}
    table td {vertical-align:top;}
}
#login-registo {
    float:left;
    width: 480px;
    height:200px;
    padding:20px 40px;
}

#form-registo, #enderecos, #form-perfil {
    label {width:90px;display:block;float:left;line-height:20px;}
    input {line-height:20px;padding:5px;.rounded(5px);border:none;display:block;float:left;width:200px;background-color:#FFFFFF;border:1px solid #DDDDDD}
    input[type=checkbox],input[type=radio] {width:auto;float:none;display:inline-block}
    input.button {width:auto;background-color:orange;border:none}
    input.large {width:300px}
    input.small {width:100px}
    table td {vertical-align:top;}
}

span.error {display:block;color:#0088DD;font-size:11px;float:left}
p.error {
    display:none;border:2px solid #000000;background:red;color:#FFFFFF;padding:5px;.rounded(5px);font-weight:bold;
    a {color:yellow;font-weight:bold}
}
p.mensagem {
    border:2px solid #000000;background:orange;color:#FFFFFF;padding:5px;.rounded(5px);display:none;
    a {color:#FFFFFF;font-weight:bold}
}

#callus {
    background: #c71585;width:200px;padding: 10px;margin-bottom:10px;color:white;text-align:center;float:left;
    a {color:yellow}
}
#cheque-prenda {display:none;height:80px;background: green;width:200px;padding: 10px;margin-bottom:10px;color:white;text-align:center;float:left}
#facebook {width:200px;margin-bottom:10px;text-align:center;float:left}
#newsletter {display:none;height:60px;background: red;width:200px;padding: 10px;margin-bottom:10px;color:white;float:left;line-height:20px}
#sidebar .parceiros {width:200px;margin-bottom:10px;text-align:center;float:left}
#infos {background: green;width:200px;padding: 10px;margin-bottom:10px;color:white;float:left;line-height:20px;font-weight:bold;text-align:center}
#ctt {background: url(../img/ctt.png);width:220px;height:105px;margin-bottom:10px;color:white;float:left;line-height:16px;font-weight:bold;text-align:center;font-size:12px}

#table-checkout {
    width: 100%;
    border: 1px solid #CCCCCC;
    thead {background-color:orange}
    tfoot {background-color:green;color:white}
    tr.dark {background-color: #DDDDDD}
    tr.light {background-color: #EEEEEE}
    td {border:1px solid #ccc}
    img {margin-right:5px;padding:2px;border:1px solid #ccc;background-color:#FFFFFF}
    input{ text-align:right; padding:5px 10px}
}

#checkout-continuar { float:left; }
#checkout-fechar { float:right; }
#checkout-concluir { display:none; margin:20px auto; }
.big-button {
    margin:20px 0;
    width:410px;
    height:40px;
    text-align:center;
    font-size:20px;
    line-height:40px;
    .rounded(5px);
    background:#FFFFFF;
    border:5px solid orange;
    color: #000000;
    &:hover {
        background:orange;
    }
}

div.user-folder {
    background-color: pink;
    padding:5px;
    margin-bottom:10px;
    h3 {margin:0}
    cursor:pointer;
    .rounded(5px);
}
#historico {
    margin-bottom:20px;
    table {
        width:100%;
        th {font-weight:bold; color:blue}
        tr {text-align:center;}
        td,th { border: 1px solid #ccc;padding:5px 0}
        tr.open {
            display:none;background-color:#FFFFFF;
            th {color:green;background-color:#EEEEEE}
        }
        table {
            border:none;
            background-color: #FFFFFF;
            td {padding:5px;border:none}
        }
    }
}
tr.pwdchange {display:none;}

#promocao {
    font-size: 20px;
    text-align:center;
    background-color: orange;
    font-weight: bold;
    padding:10px;
    margin-top: 15px;
    .rounded(5px);
    span {color:yellow}
}

#portes {
    width:880px;
    border:1px solid #CCC;
    td {text-align:center;border:1px solid #CCC;height:30px;}

}