@charset "utf-8";
/* CSS Document */

/* Colours
RGB for menu is 87 40 120 = #287587
RGB on hover s 189 26 141 = #BD1A8D
Background is 228 228 228 = #E4E4E4
*/

#parallelogram {
width: 160px;
height: 150px;
/* background: #8734f7; */
background:#287587;
/*-webkit-transform: skew(160deg);
-moz-transform: skew(160deg);
-o-transform: skew(160deg);
transform: skew(160deg);
*/
}

#square {
   width: 140px; 
   height: 140px; 
   background: blue; 
}

#circle { 
   width: 140px;
   height: 140px;
   background: blue; 
   -moz-border-radius: 70px; 
   -webkit-border-radius: 70px; 
   border-radius: 70px;
}

#oval {
   width: 200px; 
   height: 100px; 
   background: blue; 
   -moz-border-radius: 100px / 50px; 
   -webkit-border-radius: 100px / 50px; 
   border-radius: 100px / 50px;
}

#up-triangle {
   width: 0; 
   height: 0; 
   border-bottom: 120px solid blue; 
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
}

#down-triangle { 
   width: 0; 
   height: 0;
   border-top: 120px solid blue;
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
}

#left-triangle {
   width: 0;
   height: 0;
   border-right: 100px solid blue;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
}

#right-triangle {
   width: 0;
   height: 0;
   border-left: 100px solid blue;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
}

#triangle-topleft { 
   width: 0; 
   height: 0; 
   border-top: 100px solid blue; 
   border-right: 100px solid transparent; 
}

#triangle-topright { 
   width: 0; 
   height: 0; 
   border-top: 100px solid blue; 
   border-left: 100px solid transparent; 
}

#triangle-bottomleft { 
   width: 0; 
   height: 0; 
   border-bottom: 100px solid blue; 
   border-right: 100px solid transparent; 
}

#triangle-bottomright { 
   width: 0; 
   height: 0; 
   border-bottom: 100px solid blue; 
   border-left: 100px solid transparent; 
}

#trapezium {
   height: 0; 
   width: 80px;
   border-bottom: 80px solid blue;
   border-left: 40px solid transparent;
   border-right: 40px solid transparent;
}

#diamond {
   width: 80px; 
   height: 80px; 
   background: blue;
   margin: 3px 0 0 30px;
   /* Rotate */
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   /* Rotate Origin */
   -webkit-transform-origin: 0 100%;
   -moz-transform-origin: 0 100%;
   -ms-transform-origin: 0 100%;
   -o-transform-origin: 0 100%;
   transform-origin: 0 100%;
}

#rectangle {
   width: 140px; 
   height: 80px;
   background: blue;
}

#six-point-star {
   position: absolute;
   width: 0; 
   height: 0; 
   border-left: 50px solid transparent; 
   border-right: 50px solid transparent; 
   border-bottom: 80px solid blue;
}
#six-point-star:after {
   content:"";
   position: absolute;
   width: 0; 
   height: 0; 
   border-left: 50px solid transparent; 
   border-right: 50px solid transparent; 
   border-top: 80px solid blue;
   margin: 30px 0 0 -50px;
}


#abpimenu {
   width: 140px; 
   height: 40px; 
   background: blue; 
}
#abpimenu:before {
   content:"";
   position: absolute;
   width: 0;
   height: 0;
   border-top: 0px solid transparent;
   border-right: 40px solid blue;
   border-bottom: 40px solid transparent;
   margin: 0px 0 0 -88px;
}


#speech-bubble {
   width: 120px; 
   height: 80px; 
   background: blue;
   position: absolute;
   -moz-border-radius: 10px; 
   -webkit-border-radius: 10px; 
   border-radius: 10px;
}
#speech-bubble:before {
   content:"";
   position: absolute;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid blue;
   border-bottom: 13px solid transparent;
   margin: 13px 0 0 -25px;
}

#octagon {
   width: 100px; 
   height: 100px; 
   background: blue;
   position:relative;
}
#octagon:before {
   height: 0;
   width: 40px;
   content:"";
   position: absolute; 
   border-bottom: 30px solid blue;
   border-left: 30px solid white; 
   border-right: 30px solid white; 
}
#octagon:after {
   height: 0;
   width: 40px;
   content:"";
   position: absolute; 
   border-top: 30px solid blue; 
   border-left: 30px solid white;  
   border-right: 30px solid white; 
   margin: 70px 0 0 0;
}

.trapezoid {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 100px;
  height: 0;
  border: 50px solid rgba(0,0,0,0);
  border-top: 0 solid;
  border-bottom: 100px solid #1abc9c;
  font: normal 100%/normal Arial, Helvetica, sans-serif;
  color: rgba(0,0,0,1);
  -o-text-overflow: clip;
  text-overflow: clip;
}


/* This is supposed to be a lined page of paper */

#gradient-pattern {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 320px;
  height: 320px;
  border: none;
  font: normal 100%/normal Arial, Helvetica, sans-serif;
  color: rgba(255,255,255,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: -webkit-linear-gradient(0deg, rgba(0,0,0,0) 79px, rgb(171,206,212) 79px, rgb(171,206,212) 81px, rgba(0,0,0,0) 81px), -webkit-linear-gradient(90deg, rgb(238,238,238) 0.1em, rgba(0,0,0,0) 0.1em), rgb(255, 255, 255);
  background: -moz-linear-gradient(90deg, rgba(0,0,0,0) 79px, rgb(171,206,212) 79px, rgb(171,206,212) 81px, rgba(0,0,0,0) 81px), -moz-linear-gradient(0deg, rgb(238,238,238) 0.1em, rgba(0,0,0,0) 0.1em), rgb(255, 255, 255);
  background: linear-gradient(90deg, rgba(0,0,0,0) 79px, rgb(171,206,212) 79px, rgb(171,206,212) 81px, rgba(0,0,0,0) 81px), linear-gradient(0deg, rgb(238,238,238) 0.1em, rgba(0,0,0,0) 0.1em), rgb(255, 255, 255);
  background-position: auto auto;
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: 100% 1.2em;
  background-size: 100% 1.2em;
}

#grad1 {

    height: 100px;
    background: purple; /* For browsers that do not support gradients */    
    background: -webkit-linear-gradient(left top, purple, white); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, purple, white); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, purple, white); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, purple, white); /* Standard syntax (must be last) */
}