{"id":"213","title":"Green Segoe Flyout Menu","structure":"basic","depth":"3","active":"1","terms":["vertical","flyout","css3"],"thumbnail":"213\/thumbnail\/css_menu_thumb.png","images":["gradient.png"],"css":"@main_color: [[main_color:#4b8e23]];\n@menu_background_color: [[menu_background_color:#F0EFEA]];\n@menu_border_color: [[menu_border_color:#AAAAAA]];\n@menu_text_color: [[menu_text_color:#000]];\n\n.linear-gradient (@top-color, @bottom-color) {\n\tbackground: @top-color; \n\tbackground:-moz-linear-gradient(@top-color 0%, @bottom-color 100%); \n\tbackground:-webkit-gradient(linear, left top, left bottom, color-stop(0%,@top-color), color-stop(100%,@bottom-color)); \n\tbackground:-webkit-linear-gradient(@top-color 0%,@bottom-color 100%);  \n\tbackground:linear-gradient(@top-color 0%,@bottom-color 100%); \n}\n\n#menu_class# {\n  padding: 0;\n  margin: 0;\n  border: 0; }\n\n#menu_class# ul, #menu_class# li {\n  list-style: none;\n  margin: 0;\n  padding: 0; }\n\n#menu_class# ul {\n  position: relative;\n  z-index: 597;\n  float: left; }\n\n#menu_class# ul li {\n  float: left;\n  min-height: 1px;\n  line-height: 1.5em;\n  vertical-align: middle; }\n\n#menu_class# ul li.hover,\n#menu_class# ul li:hover {\n  position: relative;\n  z-index: 599;\n  cursor: default; }\n\n#menu_class# ul ul {\n  visibility: hidden;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 598;\n  width: 100%; }\n\n#menu_class# ul ul li {\n  float: none; }\n\n#menu_class# ul ul, #menu_class# ul ul ul {\n  top: -1px;\n  left: 99%; }\n\n#menu_class# ul li:hover > ul {\n  visibility: visible; }\n\n#menu_class# ul li {\n  float: none; }\n\n#menu_class# a {\n  display: block; }\n\n\/* Custom CSS Styles *\/\n#menu_class# {\n  font-family: \"Segoe UI\", Arial, sans-serif;\n  font-size: 11px; }\n\n#menu_class#:after, #menu_class# ul:after {\n    content: '';\n    display: block;\n    clear: both; }\n\n#menu_class# ul {\n    background: [[menu_background_color:#F0EFEA]];\n    border: 1px solid @menu_border_color;\n    padding: 4px;\n    width: [[menu_width:200px]]; }\n\n#menu_class# ul li {\n      color: @menu_text_color;\n      position: relative; \n}\n\n\n#menu_class# ul li.hover, \n#menu_class# ul li:hover {\n.linear-gradient (lighten(@main_color,10%), @main_color);\ncolor: #FFF; }\n\n\n#menu_class# ul li.hover > a, \n#menu_class# ul li:hover > a {\n          color: #FFF;\n          border: 1px solid @main_color; }\n\n#menu_class# ul ul {width: [[sub_menu_width:150px]];}\n\n#menu_class# a {\n    border: 1px solid transparent;\n    padding: 3px 10px; }\n    \n#menu_class# a:link, #menu_class# a:visited {\n      color: @menu_text_color;\n      text-decoration: none; }\n\n#menu_class# a:hover {\n.linear-gradient (lighten(@main_color,10%), @main_color);\ncolor: #FFF; }\n\n#menu_class# a:active {\n      color: #ffa500; \n}\n#menu_class# .has-sub:hover > a:after, \n#menu_class# .has-sub.hover > a:after {border-color: transparent transparent transparent #FFF; }\n\n#menu_class# .has-sub > a:after {\n    content: '';\n    width: 0px;\n    height: 0px;\n    border-style: solid;\n    border-width: 4px 0 4px 4px;\n    border-color: transparent transparent transparent #808080;\n    position: absolute;\n    top: 50%;\n    right: 5%;\n    margin-top: -4px;\n    -webkit-transform: rotate(360deg); }\n","jquery":""}