/* 

	style.css

	

	CSS Navigation Menu

	

	v1.6

	

	Created by eucalyptuss

	Copyright 2012 Mikolaj Dobrucki. All rights reserved.

*/



/*

   ===============================

   ======= GENERAL STYLING =======

   =============================== 

*/



.navigation { /* navigation bar */

 position: relative;

 width: 960px;

 height: 53px;

 margin: 0px;

 padding: 0;

/* shadows and highlights */

 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;  

 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;  

 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;

}



.navigation, .navigation .box, .navigation .link {

 -webkit-border-radius: 4px;  

 -moz-border-radius: 4px;  

 border-radius: 4px;

}


.navigation > li2 { /* text positioning */

 float: right;

 display: block;

 text-align: center;

 padding: 10px 20px 10px 20px;

}



.navigation > li2:hover {

 padding: 10px 20px 10px 20px;

/* highlights for hover state */

 -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) inset;  

 -moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) inset;  

 box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) inset;

}










.navigation > li { /* text positioning */

 float: right;

 display: block;

 text-align: center;

 padding: 19px 40px 20px 40px;

}



.navigation > li:hover {

 padding: 19px 39px 20px 39px;

/* highlights for hover state */

 -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) inset;  

 -moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) inset;  

 box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) inset;

}



.navigation > li:first-child {

 -webkit-border-radius: 4px 0 0 4px;  

 -moz-border-radius: 4px 0 0 4px;  

 border-radius: 4px 0 0 4px;

}



.navigation > li:first-child:hover {

 padding: 19px 39px 20px 40px;

 border-left: 0;

}



.navigation > li:last-child {

 -webkit-border-radius: 0 4px 4px 0;  

 -moz-border-radius: 0 4px 4px 0;  

 border-radius: 0 4px 4px 0;

}



.navigation > li:last-child:hover {

 padding: 19px 40px 20px 39px;

 border-right: 0;

}



.navigation li a { /* link styling */

 font: bold 14px/14px arial, helvetica, sans-serif;

 display: block;

 text-decoration: none;

}



.navigation li > div { /* dropdown */

 text-align: left;

 display: none;

 position: absolute;

 padding: 18px 0px;

 margin: 0;

 left: -1px;

 top: 51px;

 width: 960px;

 min-height: 15px;

/* border radius */

 -webkit-border-radius: 0 0 4px 4px;  

 -moz-border-radius:0 0 4px 4px;  

 border-radius: 0 0 4px 4px;

}



.navigation h2, .navigation h3 {

 text-align: left;

 margin: 0 0 10px 0;

 padding: 5px 0;

}



.navigation h2 {

 font: bold 21px/1em arial, helvetica, sans-serif;

}



.navigation h3 {

 font: bold 16px/1em arial, helvetica, sans-serif;

}



.navigation p {

 line-height:18px;

 margin: 0 0 10px 0;

}



.navigation input[type="image"] {

 background:#0099CC;

 padding: 1px;
 height:26px;
float:right;
position:absolute;
margin-top:-28px;
margin-left:72px;
 border: 0px solid #656565;

 -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);

 -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); 

 box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);

}



.navigation .left {

 float: left;

 margin: 0 6px 6px 0;

}



.navigation  .right{

 float: right;

 margin: 0 0 6px 6px;

}



.navigation .search {

 padding: 13px 30px 11px 14px;

}



.navigation input[type="text"] {

 height: 18px;

 width: 180px;

 margin: 0;

 padding: 4px;

 display: block;  

 border: 1px solid #ccc;

/* border radius */

 -webkit-border-radius: 4px;  

 -moz-border-radius: 4px;  

 border-radius: 4px;
 color:#0099CC;
 

}



.navigation li ul {

 list-style:none;

 padding: 0;

 margin:0 0 12px 0;

}



.navigation li ul li, .navigation li ul li:hover, .navigation li ul li:active {

 font: normal 12px/24px arial, helvetica, sans-serif;

 position:relative;

 padding:0;

 margin:0;

 float:none;

 text-align:left;

 background:none;

 border:none;

}



.navigation li ul li a { /* link styling */

 font: bold 12px/24px arial, helvetica, sans-serif;

}



.navigation li:hover div {

 display: block;

}



.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { /* columns for 12 column grid system */

 display: inline;

 float: left;

 position: relative;

 margin-left: 10px;

 margin-right: 10px;

}



.grid_1{width:60px}  .grid_2{width:140px}  .grid_3{width:220px} .grid_4{width:300px}  .grid_5{width:380px}  .grid_6{width:460px;} .grid_7{width:540px}  .grid_8{width:620px}  .grid_9{width:900px} .grid_10{width:780px}  .grid_11{width:860px} .grid_12{width:920px}



/*

   ===============================

   ===== DROPDOWN STYLING   ======

   =============================== 

*/



.navigation .light, .navigation .dark {

 font: normal 12px/15px arial, helvetica, sans-serif;

 text-decoration: none;

/* border radius */

 -webkit-border-radius: 0 0 4px 4px;  

 -moz-border-radius:0 0 4px 4px;  

 border-radius: 0 0 4px 4px;

}



.navigation .light .box, .navigation .dark .box { padding: 10px; }



.navigation .dark .link, .navigation .light .link { padding: 5px 10px; margin-top: 4px; }



.navigation .light {

/* text */

 color: #333;

 text-shadow: 0 1px 0 #fff;

/* backgorund */

 background: -webkit-gradient(linear, left top, left bottom, from(#bababa), color-stop(.1, #e4e4e4), to(#f2f2f2));

 background: -webkit-linear-gradient(top, #bababa, #e4e4e4 10%, #f2f2f2);

 background: -moz-linear-gradient(top, #bababa, #e4e4e4 10%, #f2f2f2);

 background: -o-linear-gradient(top, #bababa, #e4e4e4 10%, #f2f2f2);

 background: -ms-linear-gradient(top, #bababa, #e4e4e4 10%, #f2f2f2);

 background-color: #ccc;

/* shadows and highlights */

 -webkit-box-shadow: 0 1px -1px rgba(255, 255, 255, 1) inset;  

 -moz-box-shadow: 0 -1px 1px rgba(255, 255, 255, 1) inset;  

 box-shadow: 0 1px -1px rgba(255, 255, 255, 0.8) inset;

/* border */

 border-left: 1px solid #bbb;

 border-right: 1px solid #bbb;

 border-bottom: 1px solid #bbb;

}



.navigation .light a { color: #333; text-shadow: 0 1px 0 #fff; }



.navigation .light h2, .navigation .light h3 { border-bottom: 1px solid #000; }



.navigation .light .box {

/* text */

 color: #fbfbfb;

 text-shadow: 0 1px 0 #000;

/* backgorund */

 background: -webkit-gradient(linear, left top, left bottom, from(#5c5c5c), to(#838383));

 background: -webkit-linear-gradient(top, #5c5c5c, #838383);

 background: -moz-linear-gradient(top, #5c5c5c, #838383);

 background: -o-linear-gradient(top, #5c5c5c, #838383);

 background: -ms-linear-gradient(top, #5c5c5c, #838383);

 background-color: #ccc;

/* shadows and highlights */

 -webkit-box-shadow: 0 -1px 1px rgba(255, 255, 255, 0.5) inset;  

 -moz-box-shadow: 0 -1px 1px rgba(255, 255, 255, 0.5) inset;  

 box-shadow: 0 1px -1px rgba(255, 255, 255, 0.4) inset;

/* border */

 border: 1px solid #000;

}



.navigation .light .link { background-color: #fbfbfb; border: 1px solid #bbb; }



.navigation .dark {

/* text */

 color: #fbfbfb;

 text-shadow: 0 1px 0 #000;

/* backgorund */

 background: -webkit-gradient(linear, left top, left bottom, from(#2b2b2b), color-stop(.1, #5c5c5c), to(#838383));

 background: -webkit-linear-gradient(top, #2b2b2b, #5c5c5c 10%, #838383);

 background: -moz-linear-gradient(top, #2b2b2b, #5c5c5c 10%, #838383);

 background: -o-linear-gradient(top, #2b2b2b, #5c5c5c 10%, #838383);

 background: -ms-linear-gradient(top, #2b2b2b, #5c5c5c 10%, #838383);

 background-color: #ccc;

/* shadows and highlights */

 -webkit-box-shadow: 0 -1px 1px rgba(255, 255, 255, 0.5) inset;  

 -moz-box-shadow: 0 -1px 1px rgba(255, 255, 255, 0.5) inset;  

 box-shadow: 0 1px -1px rgba(255, 255, 255, 0.4) inset;

/* border */

 border-left: 1px solid #000;

 border-right: 1px solid #000;

 border-bottom: 1px solid #000;

}



.navigation .dark a { color: #fbfbfb; text-shadow: 0 1px 0 #000; }



.navigation .dark h2, .navigation .dark h3 { border-bottom: 1px solid #fbfbfb; }



.navigation .dark .box {

/* text */

 color: #333;

 text-shadow: 0 1px 0 #fff;

/* backgorund */

 background: -webkit-gradient(linear, left top, left bottom, from(#e4e4e4), to(#f2f2f2));

 background: -webkit-linear-gradient(top, #e4e4e4, #f2f2f2);

 background: -moz-linear-gradient(top, #e4e4e4, #f2f2f2);

 background: -o-linear-gradient(top, #e4e4e4, #f2f2f2);

 background: -ms-linear-gradient(top, #e4e4e4, #f2f2f2);

 background-color: #ccc;

/* shadows and highlights */

 -webkit-box-shadow: 0 1px -1px rgba(255, 255, 255, 1) inset;  

 -moz-box-shadow: 0 -1px 1px rgba(255, 255, 255, 1) inset;  

 box-shadow: 0 1px -1px rgba(255, 255, 255, 0.8) inset;

/* border */

 border: 1px solid #bbb;

}



.navigation .dark .link { background-color: #444; border: 1px solid #000; }



/*

   ===============================

   ========== RED STYLE ==========

   =============================== 

*/



.red  {

/* backgorund */

 background: -webkit-gradient(linear, left top, left bottom, from(#ff9782), to(#d83c22));

 background: -moz-linear-gradient(top, #ff9782, #d83c22);

 background: -o-linear-gradient(top, #ff9782, #d83c22);

 background: -ms-linear-gradient(top, #ff9782, #d83c22);

 background: -webkit-linear-gradient(top, #ff9782, #d83c22);

 background-color: #d83c22;

/* border */

 border: 1px solid #c93f27;

}



.red  li a { /* link styling */

 color: #fbfbfb;

 text-shadow: 0 1px 0 #c93f27;

}



.red li:hover  {

/* backgorund */

 background: -webkit-gradient(linear, left top, left bottom, from(#ffbdb0), to(#ee6048));

 background: -moz-linear-gradient(top, #ffbdb0, #ee6048);

 background: -o-linear-gradient(top, #ffbdb0, #ee6048);

 background: -ms-linear-gradient(top, #ffbdb0, #ee6048);

 background: -webkit-linear-gradient(top, #ffbdb0, #ee6048);

 background-color: #ee6048;

/* border */

 border-left: 1px solid #c93f27;

 border-right: 1px solid #c93f27;

}



.red li:active   {

/* backgorund */

 background: -webkit-gradient(linear, left top, left bottom, from(#e75138), to(#ff7053));

 background: -moz-linear-gradient(top, #e75138, #ff7053);

 background: -o-linear-gradient(top, #e75138, #ff7053);

 background: -ms-linear-gradient(top, #e75138, #ff7053);

 background: -webkit-linear-gradient(top, #e75138, #ff7053);

 background-color: #ff9782;

}



.red li > div {

 border-top: 1px solid #c93f27;

}



/*

   ===============================

   ======== ORANGE STYLE =========

   =============================== 

*/



.orange  {

/* backgorund */

 background: -webkit-gradient(linear, left top, left bottom, from(#fe9f3a), to(#f65b17));

 background: -moz-linear-gradient(top, #fe9f3a, #f65b17);

 background: -o-linear-gradient(top, #fe9f3a, #f65b17);

 background: -ms-linear-gradient(top, #fe9f3a, #f65b17);

 background: -webkit-linear-gradient(top, #fe9f3a, #f65b17);

/* border */

 border: 1px solid #db4706;

}



.orange  li a { /* link styling */

 color: #fbfbfb;

 text-shadow: 0 1px 0 #db4706;

}



.orange li:hover  {

/* backgorund */

 background: -webkit-gradient(linear, left top, left bottom, from(#ffce79), to(#f47638));

 background: -moz-linear-gradient(top, #ffce79, #f47638);

 background: -o-linear-gradient(top, #ffce79, #f47638);

 background: -ms-linear-gradient(top, #ffce79, #f47638);

 background: -webkit-linear-gradient(top, #ffce79, #f47638);

 background-color: #f47638;

/* border */

 border-left: 1px solid #db4706;

 border-right: 1px solid #db4706;

}



.orange li:active   {

/* backgorund */

 background: -webkit-gradient(linear, left top, left bottom, from(#f47638), to(#fe9f3a));

 background: -moz-linear-gradient(top, #f47638, #fe9f3a);

 background: -o-linear-gradient(top, #f47638, #fe9f3a);

 background: -ms-linear-gradient(top, #f47638, #fe9f3a);

 background: -webkit-linear-gradient(top, #f47638, #fe9f3a);

 background-color: #fe9f3a;

}



.orange li > div {

 border-top: 1px solid #db4706;

}



/*

   ===============================

   ======== YELLOW STYLE =========

   =============================== 

*/



.yellow  {

/* backgorund */

 background: -webkit-gradient(linear, left top, left bottom, from(#ffe468), to(#ffa41c));

 background: -moz-linear-gradient(top, #ffe468, #ffa41c);

 background: -o-linear-gradient(top, #ffe468, #ffa41c);

 background: -ms-linear-gradient(top, #ffe468, #ffa41c);

 background: -webkit-linear-gradient(top, #ffe468, #ffa41c);

 background-color: #ffa41c;

/* border */

 border: 1px solid #ff9600;

}



.yellow  li a { /* link styling */

 color: #333;

 text-shadow: 0 1px 0 #fff;

}



.yellow li:hover  {

/* backgorund */

 background: -webkit-gradient(linear, left top, left bottom, from(#fff584), to(#ffbd20));

 background: -moz-linear-gradient(top, #fff584, #ffbd20);

 background: -o-linear-gradient(top, #fff584, #ffbd20);

 background: -ms-linear-gradient(top, #fff584, #ffbd20);

 background: -webkit-linear-gradient(top, #fff584, #ffbd20);

 background-color: #ffbd20;

/* border */

 border-left: 1px solid #ff9600;

 border-right: 1px solid #ff9600;

}



.yellow li:active   {

/* backgorund */

 background: -webkit-gradient(linear, left top, left bottom, from(#ffb71c), to(#ffe468));

 background: -moz-linear-gradient(top, #ffb71c, #ffe468);

 background: -o-linear-gradient(top, #ffb71c, #ffe468);

 background: -ms-linear-gradient(top, #ffb71c, #ffe468);

 background: -webkit-linear-gradient(top, #ffb71c, #ffe468);

 background-color: #ffe468;

}



.yellow li > div {

 border-top: 1px solid #ff9600;

}



/*

   ===============================

   ========= GREEN STYLE =========

   =============================== 

*/



.green  {

/* backgorund */

 background: -webkit-gradient(linear, left top, left bottom, from(#c9f33c), to(#8ac70c));

 background: -moz-linear-gradient(top, #c9f33c, #8ac70c);

 background: -o-linear-gradient(top, #c9f33c, #8ac70c);

 background: -ms-linear-gradient(top, #c9f33c, #8ac70c);

 background: -webkit-linear-gradient(top, #c9f33c, #8ac70c);

 background-color: #8ac70c;

/* border */

 border: 1px solid #7ab205;

}



.green  li a { /* link styling */

 color: #333;

 text-shadow: 0 1px 0 #fff;

}



.green li:hover  {

/* backgorund */

 background: -webkit-gradient(linear, left top, left bottom, from(#dbfa97), to(#9ad819));

 background: -moz-linear-gradient(top, #dbfa97, #9ad819);

 background: -o-linear-gradient(top, #dbfa97, #9ad819);

 background: -ms-linear-gradient(top, #dbfa97, #9ad819);

 background: -webkit-linear-gradient(top, #dbfa97, #9ad819);

 background-color: #9ad819;

/* border */

 border-left: 1px solid #7ab205;

 border-right: 1px solid #7ab205;

}



.green li:active   {

/* backgorund */

 background: -webkit-gradient(linear, left top, left bottom, from(#99d41e), to(#bbe52c));

 background: -moz-linear-gradient(top, #99d41e, #bbe52c);

 background: -o-linear-gradient(top, #99d41e, #bbe52c);

 background: -ms-linear-gradient(top, #99d41e, #bbe52c);

 background: -webkit-linear-gradient(top, #99d41e, #bbe52c);

 background-color: #c9f33c;

}



.green li > div {

 border-top: 1px solid #7ab205;

}



/*

   ===============================

   ========= BLUE STYLE ==========

   =============================== 

*/



.blue  {

/* backgorund */

 background: -webkit-gradient(linear, left top, left bottom, from(#87deff), to(#40a9fd));

 background: -moz-linear-gradient(top, #87deff, #40a9fd);

 background: -o-linear-gradient(top, #87deff, #40a9fd);

 background: -ms-linear-gradient(top, #87deff, #40a9fd);

 background: -webkit-linear-gradient(top, #87deff, #40a9fd);

 background-color: #40a9fd;

/* border */

 border: 1px solid #008af5;

}



.blue  li a { /* link styling */

 color: #fbfbfb;

 text-shadow: 0 1px 0 #008af5;

}



.blue li:hover  {

/* backgorund */

 background: -webkit-gradient(linear, left top, left bottom, from(#b1eaff), to(#68bcff));

 background: -moz-linear-gradient(top, #b1eaff, #68bcff);

 background: -o-linear-gradient(top, #b1eaff, #68bcff);

 background: -ms-linear-gradient(top, #b1eaff, #68bcff);

 background: -webkit-linear-gradient(top, #b1eaff, #68bcff);

 background-color: #68bcff;

/* border */

 border-left: 1px solid #008af5;

 border-right: 1px solid #008af5;

}



.blue li:active   {

/* backgorund */

 background: -webkit-gradient(linear, left top, left bottom, from(#68bcff), to(#87deff));

 background: -moz-linear-gradient(top, #68bcff, #87deff);

 background: -o-linear-gradient(top, #68bcff, #87deff);

 background: -ms-linear-gradient(top, #68bcff, #87deff);

 background: -webkit-linear-gradient(top, #68bcff, #87deff);

 background-color: #87deff;

}



.blue li > div {

 border-top: 1px solid #008af5;

}



/*

   ===============================

   ======== PURPLE STYLE =========

   =============================== 

*/



.purple  {

/* backgorund */

 background: -webkit-gradient(linear, left top, left bottom, from(#cba7f5), to(#9b45f4));

 background: -moz-linear-gradient(top, #cba7f5, #9b45f4);

 background: -o-linear-gradient(top, #cba7f5, #9b45f4);

 background: -ms-linear-gradient(top, #cba7f5, #9b45f4);

 background: -webkit-linear-gradient(top, #cba7f5, #9b45f4);

 background-color: #9b45f4;

/* border */

 border: 1px solid #6a14c3;

}



.purple  li a { /* link styling */

 color: #fbfbfb;

 text-shadow: 0 1px 0 #6a14c3;

}



.purple li:hover  {

/* backgorund */

 background: -webkit-gradient(linear, left top, left bottom, from(#dcbefe), to(#a75ff2));

 background: -moz-linear-gradient(top, #dcbefe, #a75ff2);

 background: -o-linear-gradient(top, #dcbefe, #a75ff2);

 background: -ms-linear-gradient(top, #dcbefe, #a75ff2);

 background: -webkit-linear-gradient(top, #dcbefe, #a75ff2);

 background-color: #a75ff2;

/* border */

 border-left: 1px solid #6a14c3;

 border-right: 1px solid #6a14c3;

}



.purple li:active   {

/* backgorund */

 background: -webkit-gradient(linear, left top, left bottom, from(#b97afc), to(#cba7f5));

 background: -moz-linear-gradient(top, #b97afc, #cba7f5);

 background: -o-linear-gradient(top, #b97afc, #cba7f5);

 background: -ms-linear-gradient(top, #b97afc, #cba7f5);

 background: -webkit-linear-gradient(top, #b97afc, #cba7f5);

 background-color: #cba7f5;

}



.purple li > div {

 border-top: 1px solid #6a14c3;

}





/*

   ===============================

   ========= GREY STYLE ==========

   =============================== 

*/



.grey  {

/* background */

 background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#c6c6c6));

 background: -webkit-linear-gradient(top, #fbfbfb, #c6c6c6);

 background: -moz-linear-gradient(top, #fbfbfb, #c6c6c6);

 background: -o-linear-gradient(top, #fbfbfb, #c6c6c6);

 background: -ms-linear-gradient(top, #fbfbfb, #c6c6c6);

 background-color: #ccc;

/* border */

 border: 1px solid #bbb;

}



.grey  li a { /* link styling */

 color: #333;

 text-shadow: 0 1px 0 #fff;

}



.grey li:hover  {

/* background */

 background: -webkit-gradient(linear, left top, left bottom, from(#fdfdfd), to(#d5d5d5));

 background: -webkit-linear-gradient(top, #fdfdfd, #d5d5d5);

 background: -moz-linear-gradient(top, #fdfdfd, #d5d5d5);

 background: -o-linear-gradient(top, #fdfdfd, #d5d5d5);

 background: -ms-linear-gradient(top, #fdfdfd, #d5d5d5);

 background-color: #ddd;

/* border */

 border-left: 1px solid #bbb;

 border-right: 1px solid #bbb;

}



.grey li:active   {

/* background */

 background: -webkit-gradient(linear, left top, left bottom, from(#d5d5d5), to(#fafafa));

 background: -webkit-linear-gradient(top, #d5d5d5, #fafafa);

 background: -moz-linear-gradient(top, #d5d5d5, #fafafa);

 background: -o-linear-gradient(top, #d5d5d5, #fafafa);

 background: -ms-linear-gradient(top, #d5d5d5, #fafafa);

 background-color: #fbfbfb;

}



.grey li > div {

 border-top: 1px solid #bbb;

}



/*

   ===============================

   ========= BLACK STYLE =========

   =============================== 

*/



.black  {

/* background */

 background: -webkit-gradient(linear, left top, left bottom, from(#818181), to(#242424));

 background: -moz-linear-gradient(top, #818181, #242424);

 background: -o-linear-gradient(top, #818181, #242424);

 background: -ms-linear-gradient(top, #818181, #242424);

 background: -webkit-linear-gradient(top, #818181, #242424);

 background-color: #222;

/* border */

 border: 1px solid #000;

}



.black  li a { /* link styling */

 color: #fbfbfb;

 text-shadow: 0 1px 0 #000;

}



.black li:hover  {

/* background */

 background: -webkit-gradient(linear, left top, left bottom, from(#a2a2a2), to(#3d3d3d));

 background: -moz-linear-gradient(top, #a2a2a2, #3d3d3d);

 background: -o-linear-gradient(top, #a2a2a2, #3d3d3d);

 background: -ms-linear-gradient(top, #a2a2a2, #3d3d3d);

 background: -webkit-linear-gradient(top, #a2a2a2, #3d3d3d);

 background-color: #555;

/* border */

 border-left: 1px solid #000;

 border-right: 1px solid #000;

}



.black li:active   {

/* background */

 background: -webkit-gradient(linear, left top, left bottom, from(#3d3d3d), to(#818181));

 background: -moz-linear-gradient(top, #3d3d3d, #818181);

 background: -o-linear-gradient(top, #3d3d3d, #818181);

 background: -ms-linear-gradient(top, #3d3d3d, #818181);

 background: -webkit-linear-gradient(top, #3d3d3d, #818181);

 background-color: #777;

}



.black li > div {

 border-top: 1px solid #000;

}