postit-surround { width: 120px; height: 110px; position: relative; display: inline-block; margin: 0px 5px; } .postit { width: 120px; height: 110px; background-color: #888888; position: relative; margin: 20px auto; display: inline-block; margin: 20px 5px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-box-shadow: -3px -3px 5px 0px rgba(90, 90, 90, 0.6); -moz-box-shadow: -3px -3px 5px 0px rgba(90, 90, 90, 0.6); box-shadow: -3px -3px 5px 0px rgba(90, 90, 90, 0.6); } .pin { position: absolute; width: 20px; height: auto; top: 3px; left: 3px; } .pin > img { width: 15px; height: 15px; } .corner-peel { width: 120px; height: 110px; position: absolute; bottom: -1px; right: -1px; } .corner-peel > img { width: 30px; height: 30px; position: absolute; bottom: 0; right: 0; } .postit:hover { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .postit-title { text-align: center; font-family: Arial, Helvetica, sans-serif; padding-top: 30px; font-size: 20px; vertical-align: middle; color: #ffffff; } .nav-title-text { font-size: 20px; vertical-align: middle; color: #ffffff; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: normal; } .dropdown-text { color: #ffffff; font-family: arial, helvetica, sans-serif; font-size: 14px; line-height: 16px; text-align: left; margin: 0px; font-weight: normal; } div.navigation-dropdown { position: absolute; top: 80px; left: -5px; } div.navigation-dropdown > ul { padding: 0px; margin: 0px; position: absolute; top: 20px; width: 120px; left: 15px; z-index: 80; } div.navigation-dropdown > ul > li { padding: 10px 10px 20px 10px; list-style-type: none; background-color: #fbe73d; margin-top: -15px; margin-bottom: 5px; border: 1px solid #eeeeee; -webkit-transform: rotate(0deg); transform-origin: 0% 0%; background-image: url(assets/drawing-pin.png); background-repeat: no-repeat; background-size: 10px 10px; background-position: top left; -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -webkit-transition: -webkit-transform 0.3s ease-out; -moz-transition: -moz-transform 0.3s ease-out; -o-transition: -o-transform 0.3s ease-out; -ms-transition: -ms-transform 0.3s ease-out; transition: transform 0.3s ease-out; cursor: pointer; -webkit-box-shadow: 3px 2px 5px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 3px 2px 5px 0px rgba(50, 50, 50, 0.75); box-shadow: 3px 2px 5px 0px rgba(50, 50, 50, 0.75); color: #ffffff; font-family: arial, helvetica, sans-serif; } .dropdown-anim { -webkit-transform: rotate(15deg) !important; transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -webkit-transition: -webkit-transform 0.2s ease-out; -moz-transition: -moz-transform 0.2s ease-out; -o-transition: -o-transform 0.2s ease-out; -ms-transition: -ms-transform 0.2s ease-out; transition: transform 0.2s ease-out; } div.navigation-dropdown> ul> li:hover { -webkit-transform: rotate(0deg) !important; transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -webkit-transition: -webkit-transform 0.2s ease-out; -moz-transition: -moz-transform 0.2s ease-out; -o-transition: -o-transform 0.2s ease-out; -ms-transition: -ms-transform 0.2s ease-out; transition: transform 0.2s ease-out; }