.resets, html, body, h1, h2, h3, h4, h5, h6, p, div, ul, li, dl, dt, dd {margin:0px; padding:0px;}
html, body {height:100%; width:100%; margin:0px; padding:0px;}
body {background:#EEEEEE; overflow:auto; height:auto; position:relative;}

.White	{color:#FFFFFF; }
.Black	{color:#000000; }
.Red	{color:#FF3333;}
.Blue	{color:#3399FF;}
.Green	{color:#CCFF00;}
.Grey	{color:#666666; }
.LightGrey	{color:#AAAAAA; }

h1 {font-size:3em; color:#434343; font-weight:bold; margin:0px; letter-spacing:-2px;}
  h1 span {color:#8AB533;}
h2 {font-size:2em; color:#999999; font-weight:100; width:95%; margin-top:-7px; letter-spacing:-1px; text-shadow:0px 1px 1px rgba(255,255,255,0.9);}
  h2 span {color:#EEE; padding:3px 4px; font-size:60%; letter-spacing:0px;
    box-shadow:inset 0px 0px 6px rgba(0,0,0,0.3); text-shadow:0px -1px 1px rgba(0,0,0,0.3); border-radius:2px;}
    h2 span.Assets {background-color:#8AB533;}
    h2 span.VisualDesign {background-color:#9966FF;}
    h2 span.Web {background-color:#EEBB33;}
h3 {font-size:1.5em; color:#FFFFFF; margin:0px; border-bottom:solid 1px #669900; background-color:#99CC66;}

a:link	{font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 12px; color: #888888; text-decoration: none; }
a:visited	{font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 12px; color: #DDDDDD; text-decoration: none; }
a:hover	{font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 12px; color: #00BBBB; text-decoration: none; }
a	{font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 12px; color: #669900; text-decoration: none; }

/* --- Mobile first --- */
#Masthead {padding:70px 7% 0px 7%;}
#MainGrid {padding:70px 7% 70px 7%; overflow:auto; font-family:Helvetica,Arial,Verdana,sans-serif; font-size:0.9em; color:#999999;}
  #MainGrid dl {margin:0px 0px 4% 0px; background:#FFFFFF; width:86%;}
    #MainGrid dl dd {line-height:43px; border-top:solid 2px #F9F9F9;}
      #MainGrid dl dd.Best:after {content:"best of"; background-color:#DDD; color:#FFF; padding:0px 3px; border-radius:3px; margin-left:3px;}
      #MainGrid dl dt em {margin-bottom:1em;}



    /* --- Tablet second --- */
    @media only screen and (min-width: 600px) {
      #MainGrid dl {float:left; margin:0px 4% 4% 0px; background:#FFFFFF; width:37%; height:auto; overflow:visible;}
        #MainGrid dl dd {float:left; width:27%; height:60px; margin:3% 6% 0px 0px; padding:0.73em 0px 1em 0px; line-height:1.23em; border-top:solid 2px #EEEEEE; overflow-x:hidden;}
          }

    /* --- Desktop (reasonable size) --- */
    @media only screen and (min-width: 980px) {
        #MainGrid dl {float:left; margin:0px 4% 4% 0px; background:#FFFFFF; width:24%; height:100px; overflow-y:scroll;}
          #MainGrid dl dd {float:none; width:100%; height:auto; margin:0px; padding:0px; line-height:1.3em; border-top:none;}
            #MainGrid dl dd a {border-bottom:none; padding-bottom:0px;}

            /* On desktop versions, hide the unpleasant overflow until hover */
            #MainGrid dl dd:nth-child(6):after {content:" ...";}
            #MainGrid dl dd:nth-child(n+7) {display:none;}
            #MainGrid dl:hover dd:nth-child(n+7) {display:block;}
            }

    /* --- Desktop (large-screens) last and most demanding: both bandwidth and space --- */
    @media only screen and (min-width: 1300px) {
        #MainGrid dl {float:left; margin:0px 3% 3% 0px; background:#FFFFFF; width:18%; height:100px; overflow-y:scroll;}
        }

    /* --- FullscreenLargeDesktop (superlarge-screens) for the princesses: probably apple fuckwits --- */
    @media only screen and (min-width: 2000px) {
        #MainGrid dl {float:left; margin:0px 2% 2% 0px; background:#FFFFFF; width:15%; height:100px; overflow-y:scroll;}
        }


    /* NScard look */
    dl {background: #FFFFFF; padding:17px 20px 25px 20px; margin-bottom:50px; min-height:80px;
        border-left:solid 4px #F3F3F3;
        -moz-box-shadow: 0px 2px 5px rgba(0,0,0,0.15);
        -webkit-box-shadow: 0px 2px 5px rgba(0,0,0,0.15);
        box-shadow: 0px 2px 5px rgba(0,0,0,0.15);
        }
        dl.Assets {border-left:solid 4px #8AB533;}
        dl.VisualDesign {border-left:solid 4px #9966FF;}
        dl.Web {border-left:solid 4px #EEBB33;}
        dl:hover {cursor:pointer;
          -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
          -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
          box-shadow: 0px 0px 3px rgba(0,0,0,0.23);
          }

        dl dt {font-size:1.3em; font-weight:bold; margin:0px 0px 7px 0px; color:#434343;}
          dl dt em {display:block; font-family:Georgia,serif; font-size:0.9em; font-weight:normal; font-style:italic; color:#CCC;}

        dl dd {margin-left:0px; color:#999999;}
            dl dd.Done {text-decoration:line-through; color:#EEEEEE;}
                dl dd.Done:hover {text-decoration:none; color:#999999;}

        /* customising scrolbar */
        dl::-webkit-scrollbar {width:4px; height:0px;}
          dl::-webkit-scrollbar-thumb {-webkit-border-radius:0px; border-radius:0px; background:#FFF;}
            dl:hover::-webkit-scrollbar-thumb {background:#EEE;}
            dl::-webkit-scrollbar-track {background-color:#FFFFFF; -webkit-border-radius:0px; border-radius:0px;}

footer {position:absolute; bottom:0px; right:0px; padding:5px 10px 0px 0px; opacity:0.3; text-align:right;}