/****************************************
************ J NORDSTRÖM 2010 *************
****************************************/
 
@import url("reset.css");

/*********************************************************************** FONT, RUBRIK m.m ********************************************************************************************/

html { width: 100%; height: 100%;}

body  { font: normal 12px/20px /*"Century Gothic",*/ Arial, Helvetica; margin: 0 auto; color: #333; background: #fff url(../img/bg.jpg) repeat-x }


h1 { font-size: 20px; padding: 0 0 5px 0; color: #333; font-family: "Century Gothic", Arial, Helvetica; }
h2 { font-size: 16px; padding: 0 0 5px 0; color: #333; line-height: 26px; font-family: "Century Gothic", Arial, Helvetica; }
h3 { font-size: 16px; padding: 0 0 10px 0; color: #333; font-family: "Century Gothic", Arial, Helvetica; }
h4 { font-size: 14px; padding: 0 0 5px 0; color: #333; font-family: "Century Gothic", Arial, Helvetica; }
h5, h6 { font-size: 12px; font-weight: bold; color: #333; font-family: "Century Gothic", Arial, Helvetica;}

h1 a, h2 a, h3 a, h4 a { text-decoration: none; } 
h1, h2, h3, h4, h5, h6 { font-weight: normal; font-family: "Century Gothic", Arial, Helvetica; } 

p { padding: 0 0 20px 0; }
p.link { color: #333 } 
p.link a { text-decoration: none} 

.left { float: left }
.right { float: right }

img.left { margin-right: 10px; }
img.right { margin-left: 10px; }

#container .mr0 { margin-right: 0 }
#container .pr0 { padding-right: 0 }

a { color: #333; text-decoration: none }
a:hover { text-decoration: underline }

.link_arrow { padding-left: 20px; background: url(../img/bg_link_arrow.png) left center no-repeat; text-decoration: none }
/*.link_arrow:hover { background-image: url(../img/bg_link_arrow.png); text-decoration: underline }*/

.bold { font-weight: bold }

input { line-height: 12px; border: solid 1px #ddd; color: #333; padding: 3px; font-size: 12px }
input[type=text], input[type=password] { background: #fff url(../img/bg_input.png) repeat-x left bottom; }
input.button { background: #e7e7e7; width: 100px; text-align: center; height: 23px; line-height: 14px; cursor: pointer }
input.button:hover { background: #ddd; }

/************************ Clearfix ****************************/

.clearfix:after { display: block; clear: both; height: 0; visibility: hidden; content: "."; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1px; }
.clearfix { display: block; }

/************************************************************************ CONTAINER *************************************************************************************************/

#container { width: 980px; margin: 0 auto; }

/************************************************************************ TOPPEN ****************************************************************************************************/

#top { width: 950px; height: 58px; padding: 20px 10px 10px 20px; }
#top a.home, #top a.home:hover { float: left; border: none  }
#top ul { float: right; font-size: 11px; margin-top: 45px; margin-right: -70px; line-height: 17px; text-transform: uppercase; text-align: right }
#top ul li { display: inline; padding: 0 10px; /*border-right: solid 1px #333;*/ }
#top ul li a { text-decoration: none }

#top ul li a:hover { color: #666 }
#top ul li a.active { font-weight: bold }
#top ul li.first, #top ul li.end { border: none }
#top ul li.first { float: left}

/************************************************************************ FOOTER ****************************************************************************************************/

#footer { float: left; font-size: 11px; line-height: 16px; width: 980px; padding: 10px 0 0 0 }
#footer a { text-decoration: none; color: #333 }
#footer a:hover { color: #333 }
#footer .link_arrow { padding-left: 12px; background-position: left 2px }

/************************ Kontaktinfo ****************************/

#footer ul { width: 980px; color: #666 }
#footer ul li { float: left; width: 300px; padding: 10px; margin: 0 10px 10px 0; border-top: solid 1px #eee;}
#footer ul li p { padding: 0}
#footer ul li.end { border-right: none; margin-right: 0; background: url(../img/bg_betalkort.png) 180px center no-repeat }
#footer h5 { font-size: 11px;  }

/************************ Copy ***********************************/

#footer ul.copy { font-size: 10px; padding: 10px 0; float: right; text-align: center; color: #ccc }
#footer ul.copy li { float: none; display: inline; width: auto; border: none; border-right: solid 1px #ccc; margin: 0; padding: 0 10px }
#footer ul.copy li.end { border-right: none; background: none; }
#footer ul.copy a { color: #ccc }
#footer ul.copy a:hover { text-decoration: underline }

/************************************************************************ CONTENT ****************************************************************************************************/

#content { padding: 40px; min-height: 520px; _height: 520px; border: solid 1px #eee; background-color: #fff }

#content.image { background: #fff url(../img/bg_bildbank_stor.jpg) 340px center no-repeat; min-height: 898px }
#content.about { padding-right: 440px; background: #fff url(../img/bg_bildbank_stor.jpg) 340px center no-repeat; min-height: 898px }
#content.about h2 { padding-bottom: 40px; }
#content h1 { padding-bottom: 20px; position: relative }
 
/*#content.shop { padding: 40px 20px }*/


 /************************************************************************ Webshop ************************************************************************************************/

/* kundvagn */
#cart { float: right; width: 330px; padding: 0 10px 0 10px; margin: 27px -10px 0 0; line-height: 40px; border: solid 1px #eee; border-bottom: none; background: #fafafa; text-align: right; font-size: 11px }
#cart p { float: left; padding: 0; width: 280px; font-family: Georgia, "Times New Roman", Times, serif; text-align: center }
#cart a { margin-right: 20px; text-decoration: underline }
#cart a:hover { text-decoration: none }
#cart a.checkout { padding-right: 20px; background: url(../img/bg_link_arrow.png) right center no-repeat; color: #990000 }
#cart img { float: right; }

/* vänstermeny */
#left_menu { float: left; width: 140px; line-height: 30px; }
#left_menu li { border-bottom: solid 1px #ddd }
#left_menu .brand { padding: 20px 0; line-height: 18px; font-size: 11px; border: none }
#left_menu .brand select { font-size: 11px; border: solid 1px #ddd; padding: 2px; width: 140px }
#left_menu .terms, #left_menu .contact { background: url(../img/icon_doc.png) left 7px no-repeat; padding-left: 20px }
#left_menu li.end { border: none; line-height: normal;  padding-top: 20px }
#left_menu li.end p { padding-top: 5px; color: #999; font-size: 11px }
#left_menu a.active { font-weight: bold }

/* högerkolumn */
#col_right { float: right; width: 718px; padding-left: 40px; }

/* topplatta */
#top_img { margin: 0 0 20px; position: relative; /*border: solid 1px #ddd */}
#top_img img { display: block; width: 100% }
#top_img div { position: absolute; top: 20px; right: 0; width: 340px; padding: 20px; font-size: 14px }

/* produktlista */
#product_list { float: left; width: 725px; text-align: center; }
#product_list li { float: left; margin: 0 20px 20px 0; height: 250px; width: 160px; position: relative }
#product_list li.header { width: 540px; height: auto; text-align: left; margin: 0}
#product_list li h3 { font-size:  12px; line-height: 18px; height: 36px; }
#product_list li p { color: #990000; font-family: Georgia, "Times New Roman", Times, serif; font-size: 18px; font-style: italic; line-height: 18px; float: left; width: 80px }
#product_list li p.price { width: 68px }
#product_list li img { border-bottom: solid 1px #ddd; }

/* knappar */
#product_list li input.button, #product li input.button, #kassaContainer input.button { width: 80px; padding: 2px 5px; height: 23px; border: none; line-height: 14px; overflow: visible }
a.button, a.button_order { background: url(../img/bg_buy.png) no-repeat; width: 70px; padding: 2px 5px; height: 23px; text-align: center; border: none; overflow: visible; text-decoration: none }

#product_list li input.button { background: url(../img/bg_buy_small.png) no-repeat; width: 50px; }
#product_list li input.button:hover { background: url(../img/bg_buy_small_hover.png) no-repeat; }
#product_list li input.button { float: right; }

#product li input.button, #kassaContainer input.button { background: url(../img/bg_buy.png) no-repeat; }
#product li input.button:hover, #kassaContainer input.button:hover, a.button:hover { background: url(../img/bg_buy_hover.png) no-repeat; }
a.button_order { background: url(../img/bg_order.png) no-repeat; color: #fff }
a.button_order:hover { background: url(../img/bg_order_hover.png) no-repeat; }


/* fullpost */
#product_nav { width: 100%; line-height: 30px; margin-bottom: 40px; color: #999; border-bottom: solid 1px #ddd; text-align: right }
#product_nav a { margin: 0 0 0 5px; }
#product_nav span { float: left;  font-family: "Century Gothic", Arial, Helvetica; font-size: 16px; color: #333 }

#product { }
#product li { float: left; }
#product li.img { padding-right: 20px }
#product p { width: 320px; }
#product p.price { color: #990000; font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; font-style: italic; line-height: 18px; }


 /************************************************************************ Startsida ************************************************************************************************/

#media { width: 978px; height: 498px; border: solid 1px #eee; margin-bottom: 10px; position: relative; overflow: hidden; background: #fff; }
#media.brands {  }

#media div h2 { font-size: 28px; color: #fff; line-height: 58px; margin-bottom: 30px; font-weight: normal; font-family: "Century Gothic", Arial, Helvetica; }
#media .start .start h1 { font-size: 40px; padding-bottom: 30px; /*color: #72312e;*/ line-height: 60px; font-weight: normal; font-family: "Century Gothic", Arial, Helvetica; }

#media h2 span { font-size: 16px; font-style:italic }

#media_content { width: 978px; height: 498px; }

#media_content div, #media_content div img { display: block; width: 978px; height: 498px }
#media_content div p {font-size: 14px; line-height: 28px }
#media_content div .logo { position: absolute; bottom: -125px; left: 0; width: auto; height: auto }
#media_content div div { position: absolute; width: 520px; height: 300px; left: 40px; top: 70px }
#media_content div.start div { width: 420px; }

#media_content p.more_info { position: absolute; bottom: -60px; left: 0; z-index: 20; font-size: 12px; line-height: 24px }
#media_content p.more_info a { padding-right: 20px; padding-left: 15px; background: url(../img/brand_link.gif) left center no-repeat; text-decoration: none }
#media_content p.more_info a:hover { text-decoration: underline }

/* media nav*/
#nav { position: relative; z-index: 20; height: 60px; bottom: -173px; left: 50%; width: 80px; margin-left: -40px }
#nav a { font-size: 12px; text-decoration: none; text-align: center; background: #fff; margin-right: 5px; height: 8px; width: 8px; line-height: 10px; float: left; border: solid 1px #ddd; overflow: hidden; text-indent: -3000px  }
#nav a.activeSlide { background: #ddd; }

#remote { position: absolute; bottom: 18px; right: 20px; z-index: 1000; display: none; text-transform: uppercase; font-weight: bold }
#remote li { float: left }
#remote a { color: #dbdbdb }
#remote a:hover { color: #999 }
#prev, #next, #back { float: left; height: 13px; width: 13px; padding: 2px; text-decoration: none; }
#prev { background: url(../img/prev.png) left center no-repeat; }
/*#prev:hover { background-image: url(../img/prev_hover.png); }*/
#next { background: url(../img/next.png) right center no-repeat; }
/*#next:hover { background-image: url(../img/next_hover.png); }*/
#close { position: absolute; right: 10px; top: 10px; color: #fff; z-index: 30; font-size: 10px; font-weight: bold }

/* 3 spalt */
.col_3 { float: left; width: 278px; height: 133px; padding: 15px 20px; margin: 0 10px 10px 0; background: #fff; border: solid 1px #eee; }
.col_3.left { background: #fff url(../img/bg_bildbank.jpg) center right no-repeat; }
.col_3.right { margin-right: 0; background: #fff url(../img/bg_webshop.jpg) 150px center no-repeat; }
.col_3 p { font-size: 12px; }
.col_3.left p { padding: 0}
.col_3 .button { float: right }
.col_3 p.right { width: 100px; line-height: normal }

ul#news h6 { font-family: Arial, Helvetica; font-weight: bold}
ul#news li { padding-bottom: 20px }
ul#news p { padding-bottom: 0; width: auto }
ul#news span { color: #990000; font-weight: normal; border-right: solid 1px #ddd; padding-right: 5px; margin-right: 5px }

/************************************************************************ Infosida ************************************************************************************************/

#info_wrapper { background-color: #f8f8f8; border: solid 1px #ddd; }

 /************************************************************************ Varumärken ************************************************************************************************/

#brands { margin-bottom: -10px }
#brands li { float: left; width: 133px; height: 157px; padding: 10px; margin: 0 10px 10px 0; background: #fff; border: solid 1px #eee; }
#brands li.right { margin-right: 0; }

#brands li img { display: block; margin: 0 auto; height: 70px; background-color: #eee }
#brands li p { margin-top: 10px; padding: 10px 5px 0; border-top: solid 1px #eee; font-size: 12px }
#brands li a { display: block }
#brands li a img {  }

/************************************************************************ Bildbank ************************************************************************************************/

.form { width: 360px; }
.login { width: 340px; background: #f0f0f0; padding: 15px; margin-bottom: 10px }
.form li { float: left; width: 160px; line-height: 16px; padding: 0 10px 5px 0; }
.form li.wide { width: 326px }
.form li input[type=text], .form li input[type=password] { width: 152px }
.form li input.button { width: 100px; margin-top: 10px }
.form li span { color: #990000; }
.form h4 { font-size: 12px; padding-top: 10px }

/************************************************************************ Nyheter och startsida ************************************************************************************************/
#content ul#news { float: right; width: 320px; }
#content ul#news li { padding: 10px 0; border-bottom: solid 1px #ddd }
#content ul#news li h1, #content ul#news li h2 { padding: 0; font-size: 16px; width: auto}

#content ul#news span { color: #990000; font-weight: normal;  border-right: solid 1px #ddd; padding-right: 5px; margin-right: 10px; float: left; width: 65px }

#content .news_wrapper { width: 500px; border-bottom: solid 1px #ddd; padding: 10px 0 20px; margin-bottom: 10px }
#content .news_wrapper h2 { padding-bottom: 0; font-family: "Century Gothic", Arial, Helvetica; font-size: 24px; font-weight: normal }
#content .news_wrapper p.date { color: #bbb; font-weight: bold; }
#content .news_wrapper:last-child { border: none; padding-bottom: 0 }