@import url('demo.css'); /* GLOBALS */ *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; color: #745a5d; color: #745a5d; } span {} #logo{ 	margin: 2px; 	float: center; 	width: 315; 	height: 220; 	background: url(../images/logo.png) no-repeat center; 	display: block; 	border-radius: 5px; 	} 	 ::selection { background: #b3664a; } ::-moz-selection { background: transparent; } .wrapper-demo { margin: 60px 0 0 0; *zoom: 1; font-weight: 400; } .wrapper-demo:after { clear: both; content: ""; display: table; } /* DEMO 2 */ .wrapper-dropdown-2 { /* Size and position */ position: relative; /* Enable absolute positionning for children and pseudo elements */ width: 200px; margin: 0 auto; padding: 4px 15px; border-radius: 40px 20px 40px 0px; top:-50px; /* Styles */ background: #e0d4d4; border-left: 5px solid #745a5d; cursor: pointer; outline: none; } .wrapper-dropdown-2:after { content: ""; width: 0; height: 0; position: absolute; right: 16px; top: 50%; margin-top: -3px; border-width: 6px 6px 0 6px; border-style: solid; border-color: #745a5d transparent; } .wrapper-dropdown-2 .dropdown { /* Size & position */ position: absolute; top: 100%; left: -5px; right: 0px; /* Styles */ background: white; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; list-style: none; /* Hiding */ opacity: 0; pointer-events: none; } .wrapper-dropdown-2 .dropdown li a { display: block; text-decoration: none; color: #745a5d; border-left: 5px solid; padding: 3px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .wrapper-dropdown-2 .dropdown li:nth-child(1) a { border-right-color: #00ACED; } .wrapper-dropdown-2 .dropdown li:nth-child(2) a { border-right-color: #4183C4; } .wrapper-dropdown-2 .dropdown li:nth-child(3) a { border-right-color: #3B5998; } .wrapper-dropdown-2 .dropdown li i { margin-right: 5px; color: inherit; vertical-align: middle; } /* Hover state */ .wrapper-dropdown-2 .dropdown li:hover a { color: grey; } /* Active state */ .wrapper-dropdown-2.active:after { border-width: 0 6px 6px 6px; } .wrapper-dropdown-2.active .dropdown { opacity: 1; pointer-events: auto; } /* No CSS3 support */ .no-opacity .wrapper-dropdown-2 .dropdown, .no-pointerevents .wrapper-dropdown-2 .dropdown { display: none; opacity: 1; /* If opacity support but no pointer-events support */ pointer-events: auto; /* If pointer-events support but no pointer-events support */ } .no-opacity .wrapper-dropdown-2.active .dropdown, .no-pointerevents .wrapper-dropdown-2.active .dropdown { display: block; } /* DEMO 3 */ .wrapper-dropdown-3 { /* Size and position */ position: relative; width: 200px; margin: 0 auto; padding: 10px; /* Styles */ background: #fff; border-radius: 7px; border: 1px solid rgba(0,0,0,0.15); box-shadow: 0 1px 1px rgba(50,50,50,0.1); cursor: pointer; outline: none; /* Font settings */ font-weight: bold; color: #8AA8BD; } .wrapper-dropdown-3:after { content: ""; width: 0; height: 0; position: absolute; right: 15px; top: 50%; margin-top: -3px; border-width: 6px 6px 0 6px; border-style: solid; border-color: #8aa8bd transparent; } .wrapper-dropdown-3 .dropdown { /* Size & position */ position: absolute; top: 140%; left: 0; right: 0; /* Styles */ background: white; border-radius: inherit; border: 1px solid rgba(0,0,0,0.17); box-shadow: 0 0 5px rgba(0,0,0,0.1); font-weight: normal; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -ms-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; list-style: none; /* Hiding */ opacity: 0; pointer-events: none; } .wrapper-dropdown-3 .dropdown:after { content: ""; width: 0; height: 0; position: absolute; bottom: 100%; right: 15px; border-width: 0 6px 6px 6px; border-style: solid; border-color: #fff transparent; } .wrapper-dropdown-3 .dropdown:before { content: ""; border-left:8px solid 0.1); border-right:8px solid 0; border-top:0 solid rgba(0; border-bottom:8px solid 0; width: 0; height: 0; position: absolute; bottom: 100%; right: 13px; } .wrapper-dropdown-3 .dropdown li a { display: block; padding: 10px; text-decoration: none; color: #b2654a; border-bottom: 1px solid #e6e8ea; box-shadow: inset 0 1px 0 rgba(255,255,255,1); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .wrapper-dropdown-3 .dropdown li i { float: right; color: inherit; } .wrapper-dropdown-3 .dropdown li:first-of-type a { border-radius: 7px 7px 0 0; } .wrapper-dropdown-3 .dropdown li:last-of-type a { border: none; border-radius: 0 0 7px 7px; } /* Hover state */ .wrapper-dropdown-3 .dropdown li:hover a { background: #f3f8f8; } /* Active state */ .wrapper-dropdown-3.active .dropdown { opacity: 1; pointer-events: auto; } /* No CSS3 support */ .no-opacity .wrapper-dropdown-3 .dropdown, .no-pointerevents .wrapper-dropdown-3 .dropdown { display: none; opacity: 1; /* If opacity support but no pointer-events support */ pointer-events: auto; /* If pointer-events support but no pointer-events support */ } .no-opacity .wrapper-dropdown-3.active .dropdown, .no-pointerevents .wrapper-dropdown-3.active .dropdown { display: block; } /* No CSS3 support */ .no-opacity wrapper-dropdown-4 .dropdown, .no-pointerevents .wrapper-dropdown-4 .dropdown { display: none; opacity: 1; /* If opacity support but no pointer-events support */ pointer-events: auto; /* If pointer-events support but no pointer-events support */ } .no-opacity .wrapper-dropdown-4.active .dropdown, .no-pointerevents .wrapper-dropdown-4.active .dropdown { display: block; } /* No CSS3 support: none */