/* --- BASIC STYLES --- */
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

body {
background: url(http://www.allegrofabrics.com/images/graphics/confettibg.jpg) 0 0 repeat;
background-attachment: fixed;
font:12px/18px Lucida Grande, Lucida Sans Unicode, Verdana, Tahoma, sans-serif;
color:#6a6a6a;
text-align:center;
}

a {
text-decoration: none!important;
}

a:hover {
text-decoration:underline!important;
}

a.menu,a.menu:,a:active,a.menu:visited {
text-decoration: none;

}

#container {
width:950px;
text-align:left;
margin:0 auto;
margin-bottom: 20px;
}

p {
margin-bottom:15px;
}

/* --- TOP NAVIGATION --- */
#topnav {
width:950px;
overflow:hidden;
margin-top:5px;
margin-left: 0px;
padding: 10px 0px 5px 0px;
}

#topnav ul li a {
color:#323232;
border-left:1px solid #323232;
padding:0 15px;
}

#topnav ul li:first-child a {
border-left:none !important;
}

/* --- HEADER --- */
#header {
width:950px;
overflow:visible;
position:relative;
}

/* --- CHECKOUT --- */
#header #cart {
width:310px;
height:276px;
background:url(http://www.allegrofabrics.com/images/graphics/bg_logocartanniversary2012.png) 0 0 no-repeat;
position:absolute;
top: -30px;
left:0px;
z-index:1200;
text-align:center;
}

#header #cart p {
margin:50px 0 0;
}

#header #checkout {
width:200px;
margin:0px auto 0;
}

#header #checkout span.title {
color:#ffcccc;
font-size:30px;
font-weight:700;
float:left;
line-height:30px;
margin:2px 15px 0 0;
}

#header #checkout a {
float:left;
display:block;
color:#5a5a5a;
background:url(../graphics/bullet_black.png) 0 50% no-repeat;
padding:0 0 0 12px;
}

#header #logo{
width:293px;
height:235px;
background:none;
position:absolute;
top:100px;
left:50px;
z-index:1000;
text-align:center;
}

/* --- ICONS --- */
#Social {
    background: #fff;
    width: 54px;
    padding: 7px;
    border: 1px solid #999;
    position: fixed;
    top: 50%;
    right: 0.20%;
}

/* --- SLIDER ITEMS --- */
#header #featured {
width:950px;
height:125px;
position:relative;
}

#header #featured .item {
overflow:hidden;
position:absolute;
top:0;
left:0 !important;
width:950px;
height:125px;
border:0px solid #ccc;
padding:0px;
background: transparent;
}

#header #featured #item1 {
background-color:transparent;
}

#header #featured #item2 {
background-color:transparent;
}

#header #featured #item3 {
background-color:transparent;
}

#header #featured #item4 {
background-color:transparent;
}

#header #featured #item5 {
background-color:transparent;
;
}


#header #featured .item img {
float:left;
margin:0 15px 0 0;
}

#header #featured .item .description h4 {

}

#header #featured .item .description a.moreinfo {
background:url(../graphics/button_moreinfo.png) 0 0 no-repeat;
display:block;
float:left;
width:81px;
height:28px;
color:#333;
line-height:27px;
text-transform:uppercase;
font-size:10px;
margin:0 30px 0 0;
}

#header #featured .item .description a.next {
background:url(../graphics/button_next.png) 0 0 no-repeat;
display:block;
float:left;
width:81px;
height:28px;
text-align:center;
color:#fff;
line-height:27px;
text-transform:uppercase;
font-size:10px;
}


/* --- MAIN AND SUB NAVIGATION --- */
#header #mainnav {
height:40px;
width:948px;
background: url(http://www.allegrofabrics.com/images/graphics/menu_ribbon_bg.png) 0 0 repeat-x;
border-left:1px solid #7e7d7a;
border-right:1px solid #7e7d7a;
color:#fff;
}

#header #mainnav a:hover,#header #mainnav a.current {
text-decoration:none;
color:#eeebed;
}


ul.mainnav {
list-style:none;
float:right;
width:649px;
font-size:1em;
margin:0;
padding:0;
}

ul.mainnav li {
float:left;
position:relative;
border-right:1px solid #7e7d7a;
margin:0;
padding:0 15px;
color:#fff;
}

ul.mainnav li.last {
float:left;
position:relative;
border-right:0px solid #ddd;
margin:0;
padding:0 15px;
}

ul.mainnav li a {
color:#fff;
display:block;
text-decoration:none;
float:left;
padding:10px 5px;
}

ul.mainnav li span {
width:17px;
height:35px;
float:left;
background:url(../graphics/subnav_btn.gif) no-repeat center top;
}

ul.mainnav li span.subhover {
background-position:center bottombottom;
cursor:pointer;
}

/*--Hover effect for trigger--*/
ul.mainnav li ul.subnav {
list-style:none;
position:absolute;
left:0;
top:37px;
background: ;
display:none;
float:left;
width:170px;
border:1px solid #7e7d7a;
margin:0;
padding:0;
}

ul.mainnav li ul.subnav li {
border-top:1px solid #000;
border-bottom:1px solid #000;
background: url(http://www.allegrofabrics.com/images/graphics/menu_ribbon_bg.png) 0 0 repeat-x;
clear:both;
width:170px;
border-right:none;
margin:0;
padding:0;
}

html ul.mainnav li ul.subnav li a {
float:left;
width:145px;
background:#000;
padding-left:20px;
overflow: hidden;
}

html ul.mainnav li ul.subnav li a:hover {
background:none;
color:#000;
}

#wrapper {
width: 948px;
background: #fff;
overflow: hidden;
border-left: 1px solid #949090;
border-right: 1px solid #949090;
}

/* --- CONTENT --- */
#content {
width:948px;
border:1px solid #ccc;
border-top:0px;
background:none;
}

#content #main {
background:#transparent;
border-left:0;
width:580px;
float:left;
margin: 28px 28px 28px 28px;
}


/* --- CONTENT - HOMEPAGE --- */
#content #main #welcome {
overflow:hidden;
width:580px;
background: transparent;
margin:25px 2px 25px 0px;
padding:8px;
border: 2px dashed #ffcccc;
}

#content #main #welcome h3 {
font-size:18px;
color:#000;
background:none;
margin:0 0 22px;
padding:0;
}

#content #main #welcome img {
background-color:#fff;
border:0px solid #cfcfcf;
margin-left:20px;
padding:3px;
}

#content #main #items {
background:none;
border-left:0px solid #f7f7f7;
overflow: hidden;
width:580px;
float:left;
padding:10px;
} 

#content #main #items p {
margin-right: 10px;
}

#content #main #items ul
width:580px;
height:33px;
overflow: hidden;
background:url(../graphics/bg_prodnav.jpg) no-repeat;
margin:0 auto;
}

#content #main ul#items li {
line-height:33px;
float:left;
}

#content #main #items h3 {
font-size:18px;
color:#000;
background: none;
margin:0 0 22px;
padding:0;
}

#content #main ul#prodnav {
width:580px;
height:33px;
overflow:hidden;
background:url(../graphics/bg_prodnav.jpg) no-repeat;
margin:0 auto 20px;
}

#content #main ul#prodnav li {
line-height:33px;
float:left;
}

#content #main ul#prodnav li.latest a {
display:block;
width:254px;
height:33px;
color:#fafafa;
text-transform:uppercase;
padding:0 0 0 15px;
}

#content #main ul#prodnav li.best a {
display:block;
width:252px;
height:33px;
color:#333;
text-transform:uppercase;
padding:0 0 0 15px;
}

#content #main #products {
height:450px;
position:relative;
}

#content #main #products #latest,#content #main #products #best {
position:absolute;
top:0;
left:0 !important;
}

#content #main #latest .product,#content #main #best .product {
background:#fff;
width:224px;
float:left;
margin:0 28px 15px 0;
padding:20px 14px 15px;
}

#content #main #latest .even,#content #main #best .even {
margin-right:0;
}

#content #main #latest .product h4,#content #main #best .product h4 {
font-size:14px;
color:#000;
background:url(../graphics/bg_dotted.jpg) bottom no-repeat;
margin:0 0 10px;
padding:0 0 10px;
}

#content #main #latest .product p.price,#content #main #best .product p.price {
font-size:12px;
font-weight:700;
color:#868686;
}

#content #main #latest .product .more,#content #main #best .product .more {
display:block;
float:left;
width:84px;
height:28px;
background:url(../graphics/bg_moreinfo.jpg) top no-repeat;
text-indent:-9999px;
margin:0 15px 0 0;
}

#content #main #latest .product .add,#content #main #best .product .add {
display:block;
float:left;
width:84px;
height:28px;
background:url(../graphics/bg_addtocart.jpg) 0 0 no-repeat;
text-indent:-9999px;
}

#content #main #designer {
width:486px;
height:218px;
overflow:hidden;
background:url(../graphics/bg_designers.jpg) no-repeat;
padding:45px 28px 0;
}

#content #main #designer h3 {
background:none;
text-indent:-9999px;
height:24px;
margin:0 0 22px;
}

#content #main #designer p {
color:#505e86;
width:300px;
margin:0 0 15px 25px;
}

#content #main #designer p a.moreinfo {
display:block;
float:right;
width:84px;
height:28px;
background:url(../graphics/bg_moreinfo_df.png) 0 0 no-repeat;
text-indent:-9999px;
margin:0 15px 0 0;
}

/* --- CONTENT - SINGLE PRODUCT --- */
#content #main h3 {
background:url(../graphics/bg_prodnav.png) 0 0 no-repeat;
height:32px;
line-height:34px;
color:#fff;
margin:15px 0 22px;
padding:0 0 0 20px;
}

#content #main h3 span {
text-transform:uppercase;
}

#content #main h3 em {
text-transform:none;
}

#content #main #product {
width:536px;
background:#fafafa url(../graphics/bg_product_big.png) 0 0 no-repeat;
overflow:hidden;
margin:0 0 30px;
}

#content #main #product h4 {
color:#000;
font-weight:400;
font-size:14px;
background:url(../graphics/bg_dotted.jpg) 0 100% repeat-x;
margin:10px;
padding:10px 3px;
}

#content #main strong {
color:#3e3e3f;
}

#content #main #product #order {
background-color:#fff;
border-top:1px solid #e5e5e5;
border-bottom:1px solid #e5e5e5;
overflow:hidden;
margin:20px 10px;
}

#content #main #product #order a {
display:block;
width:156px;
height:47px;
line-height:50px;
font-size:14px;
text-align:center;
background:url(../graphics/bg_orderlink.png) 0 0 no-repeat;
margin:10px 15px;
}

#content #main #product #order a span {
color:#ffc1e0;
}

#content #main #product #order a.price {
font-size:24px;
font-weight:600;
float:left;
color:#fff;
}

#content #main #product #order a.add {
float:right;
color:#fff;
}

#content #main #product #matching {
overflow:hidden;
}

#content #main #product #matching h3 {
background-image:url(../graphics/bg_matching.png);
text-transform:uppercase;
}

#content #main #product #matching .match {
width:230px;
float:left;
margin:0 18px 15px;
padding:0;
}

#content #main #product #matching .match p {
margin:0;
}

#content #main #product #matching .match p.price {
font-size:14px;
font-weight:600;
color:#868686;
margin-top:5px;
}
/* --- CONTENT - PRODUCTEN PAGE --- */
#content #main #products-list ul li {
background:#fafafa url(../graphics/bg_product_big.png) 0 0 no-repeat;
overflow:hidden;
margin:0 0 15px;
padding:15px 10px 10px;
}

#content #main #products-list ul li h4 {
color:#000;
font-weight:400;
font-size:14px;
background:url(../graphics/bg_dotted.jpg) 0 100% repeat-x;
margin:0 0 10px;
padding:10px 3px;
}

#content #main #products-list ul li p.price {
font-size:18px;
font-weight:800;
color:#868686;
margin-top:5px;
float:left;
}

#content #main #products-list ul li a.more {
background:url(../graphics/button_moreinfo.png) 0 0 no-repeat;
display:block;
width:81px;
height:28px;
text-align:center;
color:#333;
line-height:30px;
text-transform:uppercase;
font-size:10px;
float:right;
margin:0 15px 0 0;
}

#content #main #products-list ul li a.add {
display:block;
width:84px;
height:28px;
background:url(../graphics/bg_addtocart.jpg) 0 0 no-repeat;
text-indent:-9999px;
float:right;
margin:1px 0 0;
}

#content #main #products-list #pagination ul {
height:31px;
width:536px;
background:url(../graphics/bg_pagination.png) 0 0 no-repeat;
overflow:hidden;
margin:0 0 20px;
}

#content #main #products-list #pagination ul li {
background:none;
float:left;
line-height:32px;
margin:0;
padding:0;
}

#content #main #products-list #pagination ul li a {
display:block;
width:36px;
text-align:center;
color:#fff;
font-size:12px;
border-right:1px solid #111;
}

#content #main #products-list #pagination ul li a.one {
border-left:none;
}

#content #main #products-list #pagination ul li a:hover {
color:#333;
text-decoration:none;
background:url(../graphics/bg_pagination_hover.jpg) 100% 0 no-repeat;
border-right:1px solid #000;
}

#content #main #products-list #pagination ul li a.one:hover {
background-position:0 0;
}

/* --- SIDEBAR --- */
#content #sidebar {
background: none;
border-right:0px solid #ccc;
border-bottom: 0px solid #ccc;
width:299px;
float:left;
margin-top: 60px;
}

#content #sidebar #search {
width:275px;
margin:15px 0 20px;
padding:0 50px;
}

#content #sidebar #search #searchform label {
display:none;
}

#content #sidebar #search #searchform #searchfield {
width:268px;
font-size:12px;
color:#a0a0a0;
margin:0 0 5px;
padding:7px 0 7px 5px;
}

#content #sidebar #search #searchform #submit {
margin-top: 0;
float:right;
border:none;
width:81px;
height:28px;
background:url(../graphics/bg_submit.jpg) no-repeat;
color:#fafafa;
text-transform:uppercase;
cursor:pointer;
}

#content #sidebar #categories h3 {
background: #f2f9f9;
height:45px;
line-height:45px;
text-align:center;
font-size:14px;
color:#000;
border: 1px dashed #000;
}

#content #sidebar #categories ul#cat {
margin:15px 0;
padding:0 40px 0 25px;
}

#content #sidebar #categories ul#cat li {
height:20px;
line-height:20px;
background:url(../graphics/bg_dotted.jpg) bottom repeat-x;
padding:2px 0;
}

#content #sidebar #categories ul#cat li a {
display:block;
color:#666;
background:url(../graphics/bullet_grey.png) 0 50% no-repeat;
margin:0 0 0 4px;
padding:0 0 0 16px;
}

#content #sidebar #categories ul#cat li a:hover,#content #sidebar #categories ul#cat li.current a {
color:#000;
text-decoration:none;
background:url(../graphics/bullet_black.png) 0 50% no-repeat;
}

#content #sidebar #didyouknow {
width:255px;
min-height:274px;
background: url(../graphics/footerbg.png) repeat;
border: 1px solid #ccc;
overflow:hidden;
color:#ccc;
margin:30px auto;
}

#content #sidebar #didyouknow h3 {
background:none;
color: #000;
font-size: 16px;
font-family: verdana, lucida grande;
margin:15px auto;
text-align: center;
}

#content #sidebar #didyouknow img {
margin-left: 26px;
padding:10px;
}

#content #sidebar #didyouknow p {
padding:0 10px;
}

#content #sidebar #didyouknow p.two {
width:95px;
padding:0 0 0 25px;
}

#content #sidebar #didyouknow p .button {
display:block;
width:79px;
height:27px;
line-height:28px;
color:#333;
text-align:center;
background:url(../graphics/button_blue.jpg) no-repeat;
margin:0 0 0 15px;
padding: 20px 0 0 0;
}

#content #sidebar #payments {
width:200px;
margin:20px auto;
}

#content #sidebar #payments img {
margin:0 4px 5px 0;
}

/* --- FOOTER --- */
#footer {
background: url(../graphics/footerbg.png) repeat;
overflow:hidden;
width:948px;
padding:20px 0;
border: 1px solid #949090;
margin: 0 auto;
}

#footer div h5 {
font-weight:700;
font-size:12px;
color:#000;
margin:0 0 7px;
padding-bottom: 3px;
border-bottom: 2px dashed #cccc33;
}

#footer div ul li a {
color:#5e5e5e;
}

#footer #siteinfo {
width:116px;
float:left;
padding:0 35px 30px;
}

#footer #improve {
width:120px;
float:left;
padding:0 30px 30px;
}

#footer #newsletter {
width:245px;
float:left;
padding:0 35px 30px;
}

#footer #newsletter form#news #email {
width:170px;
color:#5e5e5e;
float:left;
margin:0 5px 10px 0;
padding:5px 2px;
}

#footer #newsletter form#news #subscribe {
margin-top: 0;
width:58px;
height:26px;
border:none;
background:url(../graphics/bg_submitsm.jpg) 0 0 no-repeat;
font-size:10px;
text-transform:uppercase;
color:#fff;
line-height:22px;
text-align:center;
cursor:pointer;
float:left;
}

#footer #contact {
width:159px;
float:left;
padding:0 35px 30px 25px;
}



#copy {
width:880px;
height:30px;
line-height:30px;
overflow: visible;
clear:both;
margin: 20px 0;
padding: 0px 35px;
}

#topnav ul,#footer #copy p.design {
float:right;
}

#topnav ul li,#footer #copy p.copy {
float:left;
}

#header #featured .item .description,#header #featured #item3 .description {
float:right;
width:200px;
margin:35px 20px 0 0;
}

#header #featured .item .description a:hover,#content #main ul#prodnav li a:hover,#content #main #products-list ul li a.more:hover {
text-decoration:none;
}

#content #main #latest .product img,#content #main #best .product img,#content #main #product #matching .match img,#content #main #products-list ul li img {
float:left;
margin:0 10px 10px 0;
}

#content #main #latest .product p.price span,#content #main #best .product p.price span,#content #main #product #matching .match p.price span,#content #main #products-list ul li p.price span,#footer div ul li a.vcard,#footer div span {
color:#000;
}

#content #main #product img,#content #main #product p {
margin:10px;
}

/* Contact error messages */

p#success{
	width:510px;
	height:40px;
	float:left;
	border:1px solid #b0e28b;
	background:#e2f9d1;
	color:#337129;
	padding:22px 10px 0 10px;
	margin-bottom:10px;
}
p#bademail{
	width:510px;
	height:40px;
	float:left;
	border:1px solid #fe9090;
	background:#feb1b1;
	color:#820101;
	padding:22px 10px 0 10px;
	margin-bottom:10px;
}
p#badserver{
	width:510px;
	height:40px;
	float:left;
	border:1px solid #111;
	background:#333;
	color:#fff;
	padding:22px 10px 0 10px;
	margin-bottom:10px;
}

img.ico{
	margin:2px 10px 0 0px;
	float:left;
}

/* Contact Form Styling */

input, textarea {
	margin-top: 0px;
}

#nameinput {
	width: 300px;
	padding: 8px;
	background: #f7f7f7;
	border: 1px solid #eee;
}

#nameinput:hover {
	background: #fff;
	border: 1px solid #ddd;
}

#nameinput:focus {
	background: #fff;
	border: 1px solid #ddd;
}

#emailinput {	
	width: 300px;
	padding: 8px;
	background: #f7f7f7;
	border: 1px solid #eee;
}

#emailinput:hover {
	background: #fff;
	border: 1px solid #ddd;
}

#emailinput:focus {
	background: #fff;
	border: 1px solid #ddd;
}

#commentinput {
	width: 450px;
	padding: 8px;
	background: #f7f7f7;
	border: 1px solid #eee;
}

#commentinput:hover {
	background: #fff;
	border: 1px solid #ddd;
}

#commentinput:focus {
	background: #fff;
	border: 1px solid #ddd;
}

#submitinput{
	width: 150px;
	height: 50px;
	background:#333 !important;
	float:left;
	font-weight:bold;
	font-size: 18px;
	color: #fff;
	cursor:pointer;
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
	border-top: none;
	border-left: none;
}

/*PARAGRAPHS
-------------------------------------------------------- */
.generic p{
	font-size:1.2em;
	line-height:1.5em;
	margin-bottom:1.5em;
}
/* Styles an introductory paragraph, similar to newspapers. Assign this class to the first paragraph in an article */
p.intro:first-line{
	font-variant:small-caps;
}
/* Styles a drop cap on each paragraph with this class */
p.drop:first-letter{
	float:left;
	font-size:3em;
	margin-top:-0.05em;
	margin-right:0.1em;
	margin-bottom:-0.5em;
}
/*HEADINGS
-------------------------------------------------------- */
h1{
	color:#000;
	font-size:3em;
	margin-bottom:0.6em;
	font-style:italic;
	line-height:1.2em;
}
h2{
	color:#000;
	font-size:2em;
	margin-bottom:0.9em;
	line-height:0.9em;
}
h3{
	color:#000;
	font-size:1.5em;
	margin-bottom:1.2em;
	line-height:1.2em;
	font-variant:small-caps;
}
h4{
	color:#000;
	font-size:1.2em;
	margin-bottom:1.5em;
	line-height:1.5em;
	font-variant:small-caps;
}
h5{
	color:#000;
	font-size:1em;
	margin-bottom:1.8em;
	line-height:1.8em;
	font-variant:small-caps;
}
h6{
	color:#000;
	font-size:1em;
	margin-bottom:1.8em;
	line-height:1.8em;
}
/*LINKS
-------------------------------------------------------- */
p a{
	color:#000;
}
p a:hover{
	text-decoration:none;
}
h1 a{
	color:#000;
}
h1 a:hover{
	text-decoration:none;
}
li a{
	color:#000;
}
li a:hover{
	text-decoration:none;
}
/*ALL THE TRIMMINGS
-------------------------------------------------------- */
blockquote p{
	font-size:1.2em!important;
	line-height:1.5em!important;
	margin-bottom:1.5em!important;
	font-style:italic;
	font-weight:bold;
}
blockquote p cite{
	font-style:normal;
}
.generic strong{
	font-variant:small-caps;
}
.generic em{
	font-style:italic;
	font-weight:inherit;
}
.amp{ /* Give those ampersands a right sexy look */
	font-family:Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif;
	font-style:italic;
	font-weight:normal;
	line-height:inherit;
}
abbr{
	border-bottom:1px dotted #666;
	border-color:inherit;
	cursor:help;
}
.clear{
	clear:both;
}
.right-float{ /* Float any item to the right */
	float:right;
	margin-left:2em;
	margin-right:0;
}
.left-float{ /* Float any item to the left */
	float:left;
	margin-right:2em;
	margin-left:0;
}
.code{ /* Styling for and code type items */
	font-family:Courier, "Courier New", monospace;
	background:#ddd;
	font-size:1em;
}
/*-------------------------------------------+
|                                            |
|               IMAGE STYLES                 |
|                                            |
+-------------------------------------------*/
img{
	font-size:1em;
}
img.left-img{ /* Float any image to the LEFT and give it some margin */
	font-size:1em;
	float:left;
	padding:4px;
	border:1px solid #ccc;
	margin-bottom:1.8em;
	margin-right:2em;
	margin-top:0.3em;
}
img.right-img{ /* Float any image to the RIGHT and give it some margin */
	font-size:1em;
	float:right;
	padding:4px;
	border:1px solid #ccc;
	margin-bottom:1.8em;
	margin-left:2em;
	margin-top:0.3em;
}
/*CONTACT FORM STYLES
-------------------------------------------------------- */
#contact-form{
}
#contact-form label{
	width:10em;
	float:left;
	margin-top:0.6em;
}
#name, #form-email, #url, #location{
	width:42.7em;
	height:20px;
	padding:3px;
	padding-top:5px;
	border:2px solid #666;
	margin-bottom:18px;
	background:#fff !important;
}
#comments{
	width:43.8em;
	height:10em;
	padding:3px;
	border:2px solid #666;
	margin-bottom:18px;
	overflow:auto;
	background:#fff !important;
}
#name:active, #form-email:active, #url:active, #location:active, #comments:active, #submit:active, #name:focus, #form-email:focus, #url:focus, #location:focus, #comments:focus, #submit:focus{
	border:2px solid #000;
}
#submit{
	clear:both;
	padding:5px;
	border:2px solid #666;
	background:#fff !important;
	cursor:pointer;
	margin-left:9em;
}
#reset{
	clear:both;
	padding:3px;
	border:none;
	background:#f00 !important;
	cursor:pointer;
	float:right;
	color:#fff;
	margin-top:-28px;
}