/*
Stylesheet for discsport.se
av Per Jonson


/* ----------------------------------------------------------------------------------------------------------
Main layout
------------------------------------------------------------------------------------------------------------*/

/* bestämmer container bredd för sidan overridear bootstraps default */
@media (min-width: 1270px) {
    .container{
        max-width: 1270px;
				width: auto;
    }
}

#footer	{
	width: 100%;
	margin: 20px 0 0;
	padding: 15px;
 	border-top: 2px solid #DCDCDC;
	background-color: #F5F5F5;
}

.topbar-wrapper {
	margin: 40px auto;
	width: 100%;
}

/* topbad */
.topbar {
  overflow: hidden;
  position: fixed; /* Set the topbar to fixed position */
	z-index: 100;
  top: 0; /* Position the topbar at the top of the page */
  width: 100%; /* Full width */
	height: 25px;
	background-color: #333;
	margin: 0 auto;
	padding: 1px 0 0;
	text-align: center;
}

div#superkassan {
	width:770px;
	margin:0 auto;
	margin-top: 20px;
	background-color: #fff;
	text-align:left;
	font-family: Helvetica, sans-serif;
}

div#superkassan_phone {
	margin:0 auto;
	margin-top: 20px;
	text-align:left;
	font-family: Helvetica, sans-serif;
}


/* -----------------------------------------------------------------------
BODY / DIV mm
-------------------------------------------------------------------------*/

body.desktop {
	background: url(/grafik/patterns/grunge_wall.png) repeat 0 0;
}

div,p,th,td,h1,h2,h3,h4,h5,h6 {
	font-family: 'Open Sans', sans-serif;
		color: #696969;
	font-size: 14px;
	line-height: 22px;
}

p.paragraphPhone {
	display: block;
}

p.paragraphDesk {
	display: inline;
	margin-left: 5px;
}


/* http://devgrow.com/simple-php-honey-pot/ */
.robotic { display: none; }

.rounded-corners {
  -webkit-border-radius: 0; /* tidigare 6px */
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
}

.box-shadow {
	-moz-box-shadow: 5px 5px 6px #CCC;
	-webkit-box-shadow: 5px 5px 6px #CCC;
	box-shadow: 5px 5px 6px #CCC;
}



img { border: 0; }
.clear { clear:both; }
p { margin-bottom: 12px; }
/* f�r att ta bort border f�r radio-knappar */


img.liquidScale {
width: 100%;
height: auto;
}

/* Block level inputs */
.input-block-level {
  display: block;
  width: 100%;
  min-height: 28px;        /* Make inputs at least the height of their button counterpart */
  box-sizing(border-box); /* Makes inputs behave like true block-level elements */
}


/* --------------------------------------------------------------------
HEEDINGS OCH TEXTFORMATERING
---------------------------------------------------------------------*/
H1, H2, H3, H4 { font-family: 'Exo', sans-serif; font-weight: 500; padding: 0; margin: 0; } /* font-family: Tahoma, Helvetica, sans-serif; */


h1 { margin: 40px 0 25px; font-size: 30px; font-weight: 700; line-height: 30px;  } /* 5F9EA0 */
/* h1 { margin: 25px 0 15px; font-size: 28px; line-height: 28px; font-style: italic; color: #FFA500;  } */
H2 { margin: 25px 0 10px; font-size: 20px; line-height: 20px; }

H3 { margin: 20px 0 20px; font-size: 14px; line-height: 18px;   }


#top_menu li { margin: 0; padding: 0;  }


.bildtext { font: italic 11px Verdana, Arial, Helvetica, sans-serif; margin-top: 10px; }
.required { color: #C00; font-weight: normal; }
.errormsg, .greenmsg, .noticemsg { padding: 7px; margin: 5px 0 5px; }
.errormsg { color: #F00; border: 2px solid #F00;}
.greenmsg { color: #390; border: 2px solid #390;}
.noticemsg { color: #369; font-weight: bold; }
.price,
.pris { color: #DC143C; }
.submit { margin-top: 10px; }
.small { font-size: 12px; line-height:18px; }
.smallColor { font-size: 11px; line-height: 14px; color: #900 }
.noticeCol { color: #00C;  }
.alertCol { color: #F00;  }
.big-art { font-size: 14px; }
h2.highlight { color: #DC143C; }

h3.shop_item {
	margin: 5px 0 0;
	padding: 0;
	font-size: 16px;
	line-height: 16px;
	font-family: Helvetica Narrow, sans-serif;
}

h3.shop_item_phone {
	margin: 5px 0 0;
	padding: 0;
	font-size: 13px;
	line-height: 13px;
	font-family: Helvetica Narrow, sans-serif;
}


/* --------------------------------------------------------------------
LÄNKAR / LINKS
---------------------------------------------------------------------*/
a:link,
a:visited {
	color:#4682B4;
	font-weight: bold;
	text-decoration:none;
}

a.two:link,
a.two:visited {
	color:#333;
	font-weight: bold;
	text-decoration:none;
}

a.big:link,
a.big:visited {
	font-size: 18px; line-height: 18px;
}


a:focus, a.two:focus {
	color:#580801;
	}

a:hover:hover, a.two:hover {
	color:#0000FF;
	text-decoration:underline;
	}

a.incognito:link { font-weight: normal; color: #333; text-decoration:none;}       /* unvisited link */
a.incognito:visited { font-weight: normal; color: #333;  text-decoration:none;}   /* visited links */
a.incognito:active { font-weight: normal; color: lime; font-weight: bolder; }    /* active links */
a.incognito:hover {font-weight: normal; color: blue; text-decoration:underline;}
.subMenuFile a { font-size: 14px; font-weight: normal; }       /* unvisited link */
#discbox a:link, #discbox a:visited { font-weight: bold; text-decoration: none; color:#333;  }
#discbox a:hover { color: #00F; text-decoration: underline; }
a.imglink:link,
a.imglink:visited {border:0;}
a.imglink:hover {background:transparent;}
a.flag:link, a.flag:visited { border:0; margin: 0; padding: 0; }
a.bigsize { font-size: 16px; }


/* --------------------------------------------------------------------
STARS REVIEWS
---------------------------------------------------------------------*/
canvas.star {
    float: left;
    z-index: 1;
}
.stars {
    visibility: hidden;
    display: inline-block;
    position: relative;
    z-index: 0;
}
.stars-selected {
    position: absolute;
    max-width: 100%;
    height: 100%;
    z-index: -1;
}

/* https://stackoverflow.com/questions/16224636/twitter-bootstrap-collapse-change-display-of-toggle-button */
[data-toggle="collapse"].collapsed .if-not-collapsed {
  display: none;
}
[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
  display: none;
}

.star-rating {
    direction: rtl;
    display: inline-block;
    padding: 0;
}

.star-rating input[type=radio] {
    display: none;
}

.star-rating label {
    display: inline;
    color: #ccc;
    font-size: 18px;
    padding: 0;
    cursor: pointer;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input[type=radio]:checked ~ label {
    color: #FFE10A; /* f2b600 */
}


/* --------------------------------------------------------------------
FORMULÄR
---------------------------------------------------------------------*/
input, select, textarea {
	width: 200px;
}

select {
	width: 215px;
}

input.ort, #ort { width: 131px; margin-left: 2px; }
input.postnr, #postnr { width: 50px; }


input.bbcode-button { width: 60px; }


input.btnSubmit, input.btnReset {
	width: auto;
	padding: 5px;
	text-align: center;
	color: #369;
	background: #F5F5F5;
	border: 2px solid #369;
	font-size: 14px;
	font-weight: bold;
}


input.btnReset {
	border: 2px solid #999;
	color: #369;

}

input.btnSubmit:hover, input.btnReset:hover {
	color: #CCC;
	background: #00F;
	border: 2px solid #CCC;
}

input.hidden { display: inline; border: 0; }

.required { color: #C00; font-weight: normal; }

/* --------------------------------------------------------------------
TABELLER
---------------------------------------------------------------------*/
table { margin: 5px 0 10px; border-collapse:collapse; border-spacing:0; }
caption { margin: 0 0 5px; color: #000; font-weight: bold; font-size: 14px; }

th { text-align:left; }

th.right { text-align: right; }


table.borderless tr td, .table.borderless tr th {
	 border-width: 0;
}

table.neutral, table.clean, table.nospace {
	padding: 0; margin: 0; border: 0; border-width: 0;
 }

table.neutral th, table.neutral td, table.clean th, table.clean td, table.nospace th, table.nospace td {
padding: 0; vertical-align: top;

}

table.classic {
	border:1px solid #DCDCDC;
	border-width:1px 0;
}
table.classic th {
	border:1px solid #999;
	border-width:1px 0;
	background-color: #F5F5F5;
	vertical-align: top;

}
table.classic td {
	border:1px solid #DCDCDC;
	border-width:1px 0;
	vertical-align: top;
}

table.flight_data {
	border:1px solid #666;
	border-width:1px;
}
table.flight_data th {
	border:1px solid #666;
	border-width:1px 1px;
	background-color: #F5F5F5;
}
table.flight_data td {
	border:1px solid #666;
	border-width:1px 1px;
	padding: 2px 3px;
}


table.chartitems { /* cart_view.php, purchase_confirmation.php */
	;
}
table.chartitems th {
	padding: 4px 0;
	text-transform: none;
	border: 2px solid #666;
	border-width: 0 0 2px;
	color: #000;
	background-color: #FFF;
}

table.chartitems td {
	vertical-align: middle;
	padding: 4px 0;
	border:1px dotted #CCC;
	border-width:1px 0;
}

table td.subTotal {
	border: 1px solid #666;
	border-width: 1px 0 0;
}
table td.grandTotal {
	border: 1px solid #666;
	border-width: 1px 0 0;
}

table.orderspec {
	width: 600px;
	border:1px solid #999;
	border-width:1px 0 0;
	padding: 3px 0;
	}
table.orderspec th {
	border:1px solid #000;
	border-width:1px 0;
	padding: 3px 3px;
	background-color: #F5F5F5;
}
table.orderspec td {
	border:1px solid #DCDCDC;
	border-width:1px 0;
	padding: 3px 3px;
}

table.brands {
	margin: 0;
	border: 0;
	vertical-align: middle;
	text-align: center;
}

table.brands td {
	padding: 0 3px;
}

/* -----------------------------------------------------------------------
PREVIEW OCH SCREENSHOT FR�N http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
-------------------------------------------------------------------------*/
#tooltip{
	position:absolute;
	z-index: 3;
	border:10px solid #DCDCDC;
	background:#FFF;
	padding:10px;
	display:none;
	color:#333;
	}

#preview{
	position:absolute;
	z-index: 3;
	border:10px solid #DCDCDC;
	background:#FFF;
	padding:10px;
	display:none;
	color:#333;
	}

#screenshot{
	position:absolute;
	z-index: 3;
	border:10px solid #DCDCDC;
	background:#FFF;
	padding:10px;
	display:none;
	color:#333;
	}

/* -----------------------------------------------------------------------
/* Layout helpers  FR�N NETONET
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }

.ui-state-disabled { cursor: default !important; }

.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ui-widget-overlay { background: #aaaaaa/*{bgColorOverlay}*/ none/*{bgImgUrlOverlay}*/ 0/*{bgOverlayXPos}*/ 0/*{bgOverlayYPos}*/ repeat-x/*{bgOverlayRepeat}*/; opacity: .3;filter:Alpha(Opacity=30)/*{opacityOverlay}*/; }
.ui-widget-shadow { margin: -4px/*{offsetTopShadow}*/ 0 0 -4px/*{offsetLeftShadow}*/; padding: 4px/*{thicknessShadow}*/; background: #aaaaaa/*{bgColorShadow}*/ none/*{bgImgUrlShadow}*/ 0/*{bgShadowXPos}*/ 0/*{bgShadowYPos}*/ repeat-x/*{bgShadowRepeat}*/; opacity: .35;filter:Alpha(Opacity=35)/*{opacityShadow}*/; -moz-border-radius: 4px/*{cornerRadiusShadow}*/; -webkit-border-radius: 4px/*{cornerRadiusShadow}*/; }

.ui-icon-close { background-image: url('../../Content/images/close.gif'); }
.ui-icon-closethick { background: url('../../Content/images/layerClose.gif') no-repeat scroll top center; height: 16px; width: 16px; }
.ui-icon-closethick:hover { background: url('../../Content/images/layerClose.gif') no-repeat scroll bottom center; }
.ui-icon-closethickOnly { background: url('../../Content/images/layerCloseOnly.gif') no-repeat scroll top center; height: 16px; width: 16px; cursor:pointer;}
.ui-icon-closethickOnly:hover { background: url('../../Content/images/layerCloseOnly.gif') no-repeat scroll bottom center; }


.uparrowdiv, .downarrowdiv, .leftarrowdiv, .rightarrowdiv{
min-width:60px;
min-height:25px; /*Default 40px: min height of DIV should be set to at least 2x the width of the arrow*/
background: black;
color:white;
padding:10px 5px 2px;
position:relative;
word-wrap:break-word;
-moz-border-radius:5px; /*add some nice CSS3 round corners*/
-webkit-border-radius:5px;
border-radius:5px;
margin-bottom:2em;
}

.uparrowdiv:after{ /*arrow added to uparrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:-20px; /*should be set to -border-width x 2 */
left:30px;
width:0;
height:0;
border-color: transparent transparent black transparent; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;

}

.downarrowdiv:after{ /*arrow added to downarrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:100%; /*should be set to 100% */
left:30px;
width:0;
height:0;
border-color: black transparent transparent transparent; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;
}

.leftarrowdiv:after{ /*arrow added to leftarrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:10px;
left:-20px; /*should be set to -border-width x 2 */
width:0;
height:0;
border-color: transparent black transparent transparent; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;
}

.rightarrowdiv:after{ /*arrow added to rightarrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:10px;
left:100%; /*should be set to 100% */
width:0;
height:0;
border-color: transparent transparent transparent black; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;
}


/* --------------------------------------------------------------------
HEEDINGS OCH TEXTFORMATERING
---------------------------------------------------------------------*/

 .pagination ul{
	list-style-type: none;
	text-align: right;
 }
 .pagination ul li{
      list-style-image: none;
      display:inline;
      padding-left: 7px;
	  vertical-align: sub;
 }


/* --------------------------------------------------------------------
KASSAN
---------------------------------------------------------------------*/
#kassan { border:1px dashed #666; background-color:#F5F5F5; margin: 0 0 20px; padding: 5px 30px 10px }
#kassan_phone { padding: 0 10px 0; }

#kassan .etttvatre { float:right; }

#kassan h1,
#kassan_phone h1 { font-size: 30px; color: #369; }

#kassan div.next h2,
#kassan_phone div.next h2 { margin: 0; padding: 0;  }


#kassan .next h2 { font-size: 24px }
#kassan_phone .next h2 { font-size: 20px }

#kassan .next  { margin: 20px 0 0; padding: 40px 0 0; text-align:right; border-top: 1px solid #999; }
#kassan_phone .next { margin: 30px 0 0; padding: 40px 0 0; text-align:right; border-top: 1px solid #999; }

#kassan .next, #kassan .next a { color: #369; font-weight: bold; }
#kassan_phone .next, #kassan_phone .next a { color: #369; font-weight: bold; }


#stegett form p { margin: 3px; }

/* --------------------------------------------------------------------
ORDER-PRINT
---------------------------------------------------------------------*/
#content { margin-left: 10px; font-family: Arial, Helvetica, sans-serif;
font-size: 0.85em; line-height: 1.40em; }
#order_print table { border-collapse: collapse; border-spacing: 0; border: 1px solid #666; border-width: 1px; }
#order_print th, #order_print td  { font-size: 10px; border: 1px solid #666; border-width: 1px;  }