SASS

*{
margin: 0;
padding: 0;
}
/* variables */
$white: white;
$main-color:  #B35EF3;
$main-body-color: #9215F2;
$border: 1px solid black;
/*mixin*/
@mixin all-border($size:14px)
{
border: $border;
border-radius: $size;
}
@mixin clearfix{
zoom:1;
&:after{
display:block;
content:"";
height:0;
clear:both;} }
@mixin linear-gradient($from, $to,$repeat:no-repeat) {
    background-image: -webkit-linear-gradient(top, $from, $to);
    background-image: -moz-linear-gradient(top, $from, $to);
    background-image: -ms-linear-gradient(top, $from, $to);
    background-image: -o-linear-gradient(top, $from, $to);
    background-image: linear-gradient(to bottom, $from, $to);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$from}', endColorstr='#{$to}',GradientType=0 );
    background-repeat:$repeat;
}
/* elements */
body
{
  & li a{text-decoration: none;}
  width: 1450px;
  height: 800px;
  background-color: $main-body-color;
  &>header{@include linear-gradient(#D492FE,#8F1AEF);}
  article{@include all-border;
        width: 1000px;
        margin-left: 18px;
        margin-top: 15px;
        padding:20px;
        color:$white;
        font-size: 0.9em;
         & p{font-size: 0.8em;}
         & footer p{text-align: right;
                    font-size: 0.8em; }
        & time{font-family: consolas;}
        & a{color:#D4A3F8} }
}
aside{

  float: right;
  color: $white;
  margin-right: 50px;
  font-size: 0.78em;
  & li ul li{list-style-image: url('images/li-dot.png');
           margin-left:30px;}
  & h2{font-size: 1em}
  & li{list-style: none;}
  &>ul>li{@include all-border(5px);
        margin-top: 30px;
        padding: 20px;
        width:260px;}
}
section
{
width: 1000px;
float: left;
}
form
{
    margin-top: 20px;
    margin-right: 100px;
    color: $white;
    & input{
    width:120px;
    height: 18px;
    margin-top: 10px;
    background:$main-color;
    @include all-border;}
    & button{background:$main-color;
            padding:5px;
            width: 70px;
            margin-top: 10px;
    @include all-border(10px);}
    & label{font-size: 0.8em;}
}
footer{
clear: both;
font-weight: bold;
color: $white;
text-align: center;
& p{padding-top: 40px;}
}
nav
{
  @include clearfix;
  @include all-border;
  margin-left: 30px;
  width: 1080px;
  height: 45px;
  color: $white;
  margin-top: 30px;
  margin-bottom: 20px;
  & a{color: $white;
     font-size: 1.1em;}
  & li{padding: 10px;}
  & ul{margin-left: 10px;}
}
/* id */
#reg-form-container
{
float: right;
}
#logo-container
{
float: left;
margin-left:10px;
margin-top: 20px;
img{width:310px}
}
#header-container
{
@include clearfix;
}
#main-nav-list>li
{
    list-style: none;
    float: left;
}
#main-nav-list ul
{
display:none;
}