@charset "utf-8";

.box
{
margin: 0px 6px 36px 6px;
border-image-outset: 0px 6px 24px 6px;
border-image-slice:  32 32 32 32;
border-image-repeat: stretch repeat;
border-image-width:  32px 8px 24px 8px;
position: relative;
min-height: 64px;
clip-path: margin-box polygon(evenodd,
    0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 34px 100%, 0 calc(100% - 32px), 0 0,
    8px calc(100% - 36px), calc(100% - 8px) calc(100% - 36px), calc(100% - 8px) calc(100% - 20px), 26px calc(100% - 20px), 8px calc(100% - 36px)
);
}
.box.guide
{
clip-path: margin-box polygon(evenodd, 0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 34px 100%, 0 calc(100% - 32px), 0 0);
}
.box>.inner
{
margin: 8px 10px 0px 10px;
}
.box>h2:first-child
{
margin: 0px 0px 0px 0px;
padding: 6px 10px 6px 10px;
text-shadow: 0px 2px 4px #222;
}
.box>*:not(h2):first-child
{
padding-top: 36px;
margin-top: 0px;
}
.box>h2:empty:first-child
{
padding-top: 28px;
margin-top: 0px;
}
.box>.inner>h3
{
margin: 8px 0px 4px 0px;
}
.box>.inner p
{
margin: 0px 0px 8px 0px;
padding: 0px;
}
.box>.inner>p:last-child
{
margin-bottom: 0px;
}

.tab
{
display: inline-block;
height: 32px;
margin-right: -32px;
margin-bottom: 12px;
border-bottom: 4px solid #666;
}
.tab:hover
{
border-bottom: 4px solid #FF0;
}
.tab:first-of-type
{
margin-left: 4px;
}
.tab.active
{
border-bottom: 4px solid #FFF;
}
.tab::after
{
content: "";
display: inline-block;
vertical-align: middle;
height: 0px;
width: 0px;
border-top: 16px solid transparent;
border-right: 16px solid transparent;
}
.tab>.name
{
    display: inline-block;
    vertical-align: middle;
    padding: 8px 4px 8px 32px;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0px 2px 2px #222;
}
.tab:first-of-type>.name
{
    padding-left: 8px;
}
.tab a:visited
{
color: #6AF;
}

.box.pink
{
border-image-source: linear-gradient(to bottom, hsl(330,50%,33%) 0px, hsl(330,50%,44%) 2px, hsl(330,50%,52%) 4px,hsl(330,50%,88%) 8px, hsl(330,50%,72%) 12px,hsl(330,50%,53%) 16px, hsl(330,50%,40%) 20px, hsl(330,50%,32%) 32px, hsl(330,50%,32%) 96px);
}
.box.guide.pink
{
background-color: #7A2850;
}
.box.pink>h2:first-child
{
background: linear-gradient(to bottom, hsl(330,50%,33%) 0px, hsl(330,50%,44%) 2px, hsl(330,50%,52%) 4px,hsl(330,50%,88%) 8px, hsl(330,50%,72%) 12px,hsl(330,50%,53%) 16px, hsl(330,50%,40%) 20px, hsl(330,50%,32%) 32px, hsl(330,50%,32%) 96px);
}
.pink.tab::after
{
border-bottom: 16px solid #7A2850;
border-left: 16px solid #7A2850;
}
.tab.pink
{
position: relative;
z-index: 12
}
.tab.pink .name
{
background-color: #7A2850;}
.box.red
{
border-image-source: linear-gradient(to bottom, hsl(8,82%,33%) 0px, hsl(8,82%,44%) 2px, hsl(8,82%,52%) 4px,hsl(8,82%,88%) 8px, hsl(8,82%,72%) 12px,hsl(8,82%,53%) 16px, hsl(8,82%,40%) 20px, hsl(8,82%,32%) 32px, hsl(8,82%,32%) 96px);
}
.box.guide.red
{
background-color: #94200E;
}
.box.red>h2:first-child
{
background: linear-gradient(to bottom, hsl(8,82%,33%) 0px, hsl(8,82%,44%) 2px, hsl(8,82%,52%) 4px,hsl(8,82%,88%) 8px, hsl(8,82%,72%) 12px,hsl(8,82%,53%) 16px, hsl(8,82%,40%) 20px, hsl(8,82%,32%) 32px, hsl(8,82%,32%) 96px);
}
.red.tab::after
{
border-bottom: 16px solid #94200E;
border-left: 16px solid #94200E;
}
.tab.red
{
position: relative;
z-index: 11
}
.tab.red .name
{
background-color: #94200E;}
.box.orange
{
border-image-source: linear-gradient(to bottom, hsl(32,90%,33%) 0px, hsl(32,90%,44%) 2px, hsl(32,90%,52%) 4px,hsl(32,90%,88%) 8px, hsl(32,90%,72%) 12px,hsl(32,90%,53%) 16px, hsl(32,90%,40%) 20px, hsl(32,90%,32%) 32px, hsl(32,90%,32%) 96px);
}
.box.guide.orange
{
background-color: #A05A09;
}
.box.orange>h2:first-child
{
background: linear-gradient(to bottom, hsl(32,90%,33%) 0px, hsl(32,90%,44%) 2px, hsl(32,90%,52%) 4px,hsl(32,90%,88%) 8px, hsl(32,90%,72%) 12px,hsl(32,90%,53%) 16px, hsl(32,90%,40%) 20px, hsl(32,90%,32%) 32px, hsl(32,90%,32%) 96px);
}
.orange.tab::after
{
border-bottom: 16px solid #A05A09;
border-left: 16px solid #A05A09;
}
.tab.orange
{
position: relative;
z-index: 10
}
.tab.orange .name
{
background-color: #A05A09;}
.box.yellow
{
border-image-source: linear-gradient(to bottom, hsl(52,80%,33%) 0px, hsl(52,80%,44%) 2px, hsl(52,80%,52%) 4px,hsl(52,80%,88%) 8px, hsl(52,80%,72%) 12px,hsl(52,80%,53%) 16px, hsl(52,80%,40%) 20px, hsl(52,80%,32%) 32px, hsl(52,80%,32%) 96px);
}
.box.guide.yellow
{
background-color: #928110;
}
.box.yellow>h2:first-child
{
background: linear-gradient(to bottom, hsl(52,80%,33%) 0px, hsl(52,80%,44%) 2px, hsl(52,80%,52%) 4px,hsl(52,80%,88%) 8px, hsl(52,80%,72%) 12px,hsl(52,80%,53%) 16px, hsl(52,80%,40%) 20px, hsl(52,80%,32%) 32px, hsl(52,80%,32%) 96px);
}
.yellow.tab::after
{
border-bottom: 16px solid #928110;
border-left: 16px solid #928110;
}
.tab.yellow
{
position: relative;
z-index: 9
}
.tab.yellow .name
{
background-color: #928110;}
.box.lime
{
border-image-source: linear-gradient(to bottom, hsl(75,76%,33%) 0px, hsl(75,76%,44%) 2px, hsl(75,76%,52%) 4px,hsl(75,76%,88%) 8px, hsl(75,76%,72%) 12px,hsl(75,76%,53%) 16px, hsl(75,76%,40%) 20px, hsl(75,76%,32%) 32px, hsl(75,76%,32%) 96px);
}
.box.guide.lime
{
background-color: #708F13;
}
.box.lime>h2:first-child
{
background: linear-gradient(to bottom, hsl(75,76%,33%) 0px, hsl(75,76%,44%) 2px, hsl(75,76%,52%) 4px,hsl(75,76%,88%) 8px, hsl(75,76%,72%) 12px,hsl(75,76%,53%) 16px, hsl(75,76%,40%) 20px, hsl(75,76%,32%) 32px, hsl(75,76%,32%) 96px);
}
.lime.tab::after
{
border-bottom: 16px solid #708F13;
border-left: 16px solid #708F13;
}
.tab.lime
{
position: relative;
z-index: 8
}
.tab.lime .name
{
background-color: #708F13;}
.box.green
{
border-image-source: linear-gradient(to bottom, hsl(108,58%,33%) 0px, hsl(108,58%,44%) 2px, hsl(108,58%,52%) 4px,hsl(108,58%,88%) 8px, hsl(108,58%,72%) 12px,hsl(108,58%,53%) 16px, hsl(108,58%,40%) 20px, hsl(108,58%,32%) 32px, hsl(108,58%,32%) 96px);
}
.box.guide.green
{
background-color: #358122;
}
.box.green>h2:first-child
{
background: linear-gradient(to bottom, hsl(108,58%,33%) 0px, hsl(108,58%,44%) 2px, hsl(108,58%,52%) 4px,hsl(108,58%,88%) 8px, hsl(108,58%,72%) 12px,hsl(108,58%,53%) 16px, hsl(108,58%,40%) 20px, hsl(108,58%,32%) 32px, hsl(108,58%,32%) 96px);
}
.green.tab::after
{
border-bottom: 16px solid #358122;
border-left: 16px solid #358122;
}
.tab.green
{
position: relative;
z-index: 7
}
.tab.green .name
{
background-color: #358122;}
.box.teal
{
border-image-source: linear-gradient(to bottom, hsl(182,80%,33%) 0px, hsl(182,80%,44%) 2px, hsl(182,80%,52%) 4px,hsl(182,80%,88%) 8px, hsl(182,80%,72%) 12px,hsl(182,80%,53%) 16px, hsl(182,80%,40%) 20px, hsl(182,80%,32%) 32px, hsl(182,80%,32%) 96px);
}
.box.guide.teal
{
background-color: #008D92;
}
.box.teal>h2:first-child
{
background: linear-gradient(to bottom, hsl(182,80%,33%) 0px, hsl(182,80%,44%) 2px, hsl(182,80%,52%) 4px,hsl(182,80%,88%) 8px, hsl(182,80%,72%) 12px,hsl(182,80%,53%) 16px, hsl(182,80%,40%) 20px, hsl(182,80%,32%) 32px, hsl(182,80%,32%) 96px);
}
.teal.tab::after
{
border-bottom: 16px solid #008D92;
border-left: 16px solid #008D92;
}
.tab.teal
{
position: relative;
z-index: 6
}
.tab.teal .name
{
background-color: #008D92;}
.box.blue
{
border-image-source: linear-gradient(to bottom, hsl(210,78%,33%) 0px, hsl(210,78%,44%) 2px, hsl(210,78%,52%) 4px,hsl(210,78%,88%) 8px, hsl(210,78%,72%) 12px,hsl(210,78%,53%) 16px, hsl(210,78%,40%) 20px, hsl(210,78%,32%) 32px, hsl(210,78%,32%) 96px);
}
.box.guide.blue
{
background-color: #125292;
}
.box.blue>h2:first-child
{
background: linear-gradient(to bottom, hsl(210,78%,33%) 0px, hsl(210,78%,44%) 2px, hsl(210,78%,52%) 4px,hsl(210,78%,88%) 8px, hsl(210,78%,72%) 12px,hsl(210,78%,53%) 16px, hsl(210,78%,40%) 20px, hsl(210,78%,32%) 32px, hsl(210,78%,32%) 96px);
}
.blue.tab::after
{
border-bottom: 16px solid #125292;
border-left: 16px solid #125292;
}
.tab.blue
{
position: relative;
z-index: 5
}
.tab.blue .name
{
background-color: #125292;}
.box.mauve
{
border-image-source: linear-gradient(to bottom, hsl(252,35%,33%) 0px, hsl(252,35%,44%) 2px, hsl(252,35%,52%) 4px,hsl(252,35%,88%) 8px, hsl(252,35%,72%) 12px,hsl(252,35%,53%) 16px, hsl(252,35%,40%) 20px, hsl(252,35%,32%) 32px, hsl(252,35%,32%) 96px);
}
.box.guide.mauve
{
background-color: #423770;
}
.box.mauve>h2:first-child
{
background: linear-gradient(to bottom, hsl(252,35%,33%) 0px, hsl(252,35%,44%) 2px, hsl(252,35%,52%) 4px,hsl(252,35%,88%) 8px, hsl(252,35%,72%) 12px,hsl(252,35%,53%) 16px, hsl(252,35%,40%) 20px, hsl(252,35%,32%) 32px, hsl(252,35%,32%) 96px);
}
.mauve.tab::after
{
border-bottom: 16px solid #423770;
border-left: 16px solid #423770;
}
.tab.mauve
{
position: relative;
z-index: 4
}
.tab.mauve .name
{
background-color: #423770;}
.box.purple
{
border-image-source: linear-gradient(to bottom, hsl(265,84%,33%) 0px, hsl(265,84%,44%) 2px, hsl(265,84%,52%) 4px,hsl(265,84%,88%) 8px, hsl(265,84%,72%) 12px,hsl(265,84%,53%) 16px, hsl(265,84%,40%) 20px, hsl(265,84%,32%) 32px, hsl(265,84%,32%) 96px);
}
.box.guide.purple
{
background-color: #460D96;
}
.box.purple>h2:first-child
{
background: linear-gradient(to bottom, hsl(265,84%,33%) 0px, hsl(265,84%,44%) 2px, hsl(265,84%,52%) 4px,hsl(265,84%,88%) 8px, hsl(265,84%,72%) 12px,hsl(265,84%,53%) 16px, hsl(265,84%,40%) 20px, hsl(265,84%,32%) 32px, hsl(265,84%,32%) 96px);
}
.purple.tab::after
{
border-bottom: 16px solid #460D96;
border-left: 16px solid #460D96;
}
.tab.purple
{
position: relative;
z-index: 3
}
.tab.purple .name
{
background-color: #460D96;}
.box.violet
{
border-image-source: linear-gradient(to bottom, hsl(255,82%,33%) 0px, hsl(255,82%,44%) 2px, hsl(255,82%,52%) 4px,hsl(255,82%,88%) 8px, hsl(255,82%,72%) 12px,hsl(255,82%,53%) 16px, hsl(255,82%,40%) 20px, hsl(255,82%,32%) 32px, hsl(255,82%,32%) 96px);
}
.box.guide.violet
{
background-color: #300E94;
}
.box.violet>h2:first-child
{
background: linear-gradient(to bottom, hsl(255,82%,33%) 0px, hsl(255,82%,44%) 2px, hsl(255,82%,52%) 4px,hsl(255,82%,88%) 8px, hsl(255,82%,72%) 12px,hsl(255,82%,53%) 16px, hsl(255,82%,40%) 20px, hsl(255,82%,32%) 32px, hsl(255,82%,32%) 96px);
}
.violet.tab::after
{
border-bottom: 16px solid #300E94;
border-left: 16px solid #300E94;
}
.tab.violet
{
position: relative;
z-index: 2
}
.tab.violet .name
{
background-color: #300E94;}
.box.grey
{
border-image-source: linear-gradient(to bottom, hsl(0,0%,33%) 0px, hsl(0,0%,44%) 2px, hsl(0,0%,52%) 4px,hsl(0,0%,88%) 8px, hsl(0,0%,72%) 12px,hsl(0,0%,53%) 16px, hsl(0,0%,40%) 20px, hsl(0,0%,32%) 32px, hsl(0,0%,32%) 96px);
}
.box.guide.grey
{
background-color: #525252;
}
.box.grey>h2:first-child
{
background: linear-gradient(to bottom, hsl(0,0%,33%) 0px, hsl(0,0%,44%) 2px, hsl(0,0%,52%) 4px,hsl(0,0%,88%) 8px, hsl(0,0%,72%) 12px,hsl(0,0%,53%) 16px, hsl(0,0%,40%) 20px, hsl(0,0%,32%) 32px, hsl(0,0%,32%) 96px);
}
.grey.tab::after
{
border-bottom: 16px solid #525252;
border-left: 16px solid #525252;
}
.tab.grey
{
position: relative;
z-index: 1
}
.tab.grey .name
{
background-color: #525252;}

.box.black
{
border-image-source: linear-gradient(to bottom, hsl(0,0%,0%) 0px, hsl(0,0%,10%) 2px, hsl(0,0%,20%) 4px,hsl(0,0%,55%) 8px, hsl(0,0%,40%) 12px,hsl(0,0%,20%) 16px, hsl(0,0%,5%) 20px, hsl(0,0%,0%) 32px, hsl(0,0%,0%) 96px);
}
.box.guide.black
{
background-color: #000;
}
.box.black>h2:first-child
{
background: linear-gradient(to bottom, hsl(0,0%,0%) 0px, hsl(0,0%,10%) 2px, hsl(0,0%,20%) 4px,hsl(0,0%,55%) 8px, hsl(0,0%,40%) 12px,hsl(0,0%,20%) 16px, hsl(0,0%,5%) 20px, hsl(0,0%,0%) 32px, hsl(0,0%,0%) 96px);
}

.guide_box
{
display: inline-block;
width: 640px;
margin-left: 8px;
vertical-align: top;
position: relative;
overflow: hidden;
}
.guide_box h1
{
margin-top: 0px;
margin-left: 200px;
}
.guide_box .box
{
width:628px;
}
.guide_box .box .inner
{
height: 236px;
}
.guide_box .inner>*:not(h2) a
{
color: #CC0;
}
.guide_box .inner>*:not(h2) a:hover
{
color: #FF0;
}
.guide_box>div>div.inner>div
{
}
.guide_box>div.box>div.inner>div>p:first-of-type
{
padding-top: 0px;
}

.column250 .box
{
width: 238px;
overflow: hidden;
}
.column376 .box
{
width: 364px;
overflow: hidden;
}
.column640 .box
{
width: 628px;
overflow: hidden;
}
.column1024 .box
{
width: 1012px;
overflow: hidden;
}

.column250{
width: 250px;
display: inline-block;
vertical-align: top;
border:none;
margin-right: 8px}
.column376{
width: 376px;
display: inline-block;
vertical-align: top;
border:none;
}
	@media (max-width: 1107px)
    {
        .column376, .column376>.box
        {
	    	width: 640px;
        }
    }
.column640{
width: 640px;
display: inline-block;
vertical-align: top;
border:none;
margin-right: 16px}
	@media (max-width: 799px)
    {
    	.column640        {
	    	margin-right: 0px;
        }
    }
.column1024{
width: 1024px;
display: inline-block;
vertical-align: top;
border:none;
}

.column_flex
{
	width: 1024px;
    display: inline-block;
    vertical-align: top;
    border: none;
}
@media (max-width: 1107px)
{
	.column_flex
    {
		width:756px;
    }
}
@media (max-width: 799px)
{
	.column_flex
    {
		width:640px;
    }
}

.bag_top, .bag_top_mini
{
clip-path: margin-box polygon(evenodd, 0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%, 0 0);
}
.bag_bottom
{
clip-path: margin-box polygon(evenodd, 0 0, 100% 0, 100% 100%, 36px 100%, 0 calc(100% - 36px), 0 0);
}

.bag_mini
{
margin-right: 14px;
}
.bag_body_mini
{
clip-path: margin-box polygon(evenodd, 0 0, 100% 0, 100% 100%, 20px 100%, 0 calc(100% - 22px), 0 0);
}

.bag_top
{
width: 376px;
height: 71px;
background-image: url(gfx/bag_top.jpg);
background-repeat: no-repeat;
margin: 0px;
}
.bag_top h2
{
display: none;
}
.bag_top .inner
{
margin-right: 100px;
padding-top: 24px;
}
.bag_top .bag_controls
{
margin: 10px 0px 0px 0px;
}
.bag_middle
{
width: 376px;
margin: 0px;
}
.bag_middle .inner
{
margin-top: 0px;
margin-bottom: 0px;
}

.bag_middle li
{
list-style: none;
}
.bag_middle li img
{
vertical-align: middle;
padding: 4px;
}
.bag_middle li a
{
color: #FFF;
}
.bag_middle li a:hover
{
color: #FF0;
}
.bag_bottom
{
width: 376px;
height: 12px;
margin-top: 0px;
margin-bottom: 0px;
}

.bag_mini
{
float: right;
position: relative;
width: 376px;
margin-top: 4px;
margin-left: 16px;
border: none;
}
.bag_top_mini
{
width: 376px;
height: 32px;
background-color: #3D67B2;
background-image: url(gfx/bag_top_mini.png);
background-position: top;
background-repeat: no-repeat;
padding: 0px;
}
.bag_top_mini h2
{
display:none;
}
.bag_top_mini .inner
{
margin: 0px 16px 0px 180px;
}
.bag_top_mini .inner img
{
padding: 0px;
margin: 4px 0px 4px 0px;
}

.bag_body_mini
{
position: absolute;
width: 376px;
opacity: 0.75;
display: none;
}

.bag_middle_mini
{
background-color: #3D67B2;
margin: 0px;
padding: 0px 0px 0px 0px;
}
.bag_middle_mini .inner
{
margin: 0px 16px 0px 8px;
}
.bag_bottom_mini
{
width: 376px;
height: 12px;
margin: 0px;
background-image: url(gfx/bag_bottom.png);
background-position: bottom;
background-repeat: no-repeat;
}

.bag_mini:hover .bag_body_mini
{
display: block;
z-index: 200;
}
.bag_middle_mini li
{
list-style:none;
}
.bag_middle_mini li img
{
vertical-align: middle;
padding: 4px;
}
.bag_middle_mini li a
{
color: #FFF;
opacity: 1;
}
.bag_middle_mini li a:hover
{
color:#FF0;
}