*
{
    margin: 0px;
    padding: 0px;
}

html
{
    margin: 0px;
    padding: 0px;
}

div 
{
    margin: 0px;
    padding: 0px;
}

p
{
    margin: 0px;
    padding: 0px;
}


body
{
     margin: 0px;
    padding: 0px;
    color: white;
    background-image: none;
    background-color: #5772DE; /*#818A98; */
    background-repeat:repeat-y;
    font-size:15px;
    
}




#outer
{
    position: relative;
    width: 1140px;
    height: 820px;
    margin-top:1%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2px;
    background-color: transparent;
    border: solid 0px blue;
}
#wrapperouter
{
    position: relative;
    width: 1140px;
    height: 790px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 10px;
    background-color: white;
    border: solid 0px red;
}

#footer 
{
    position: relative;
    width: 840px;
    height: 40px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 20px;
    background-color: #5975E4;
    border: solid 0px red;}


#wrapper
{
    position: relative;
    width: 1100px;
    height: 750px;
    margin-left: auto;
    margin-right: auto;
    top: 10px;
    margin-bottom: 0px;
    border:solid 0px red;
    background-color: #6280F6; /* #5677F8; */
}

#header2
{
    position: relative;
    top: 0px;
    left: 0px;
    height: 218px;
    width: 1100px;
    background-color: #959ffa; /*#6280F6; #5677F8; */
    margin-bottom: 0px;
    border:solid 0px white;
}

#header
{
    position: relative;
    top: 30px;
    left: 30px;
    height: 158px;
    width: 1049px;
    background-color: #959ffa; /*#6280F6; #5677F8; */
    margin-bottom: 0px;
}



#logo
{
    width: 117px;
    background-color: transparent;
    height: 156px;
    position: relative;
    top: 1px;
    left: 2px;
    float: left;
    display: inline;
    border-top: solid 1px white;
    border-left: solid 1px white;
    border-bottom: solid 1px white;
}

#headerinner
{
    height: 158px;
    width: 962px;
    border-bottom: 1px solid white;
    float: left;
    display: inline;
    position: relative;
    margin-left: -40px;
}
#headerinnerinner
{
    background-color: transparent;
    height: 155px;
    width: 548px;
    position: relative;
    top: 1px;
    left: 10px;
    float: left;
    display: inline;
}
#headerinnerinner .hiip1
{
    position: relative;
    top: 0px;
    left: 32px; /*48*/
    width: 230px;
    padding-left: 15px;
    padding-top: 2px;
    font-size: 30px;
    font-weight: bold;
    color: White;
    border-left: solid 1px white;
    border-bottom: solid 1px white;
}


#headerinnerinner .hiip2
{
    position: relative;
    top: 70px;
    left:39px;
    font-size: 20px;
    font-weight: bold;
    color: White;
    z-index:90; margin-left:-45px;
}

#headerinnerinner .hiip2 span {color:#2C323C}

#headerinnerinner .hiip3
{
    position: relative;
    top: 5px;
    left: 100px;
    font-size: 18px;
    font-weight: bold;
    color: #2C323C;
}



#headerinnerinner2
{
    width: 270px;
    background-color: transparent;
    height: 125px;
    padding-left: 10px;
    position: relative;
    border: solid 1px white;
    top: 1px;
    left: 131px;
    float: left;
    display: inline;
    color: White;
    font-size: 17px;
    font-weight: bold;
}


.nav a{color:white}
.nav a:hover{color:white}

.sqrc
{
    width: 37px;
    height: 37px;
    margin: 1px;
    float: left;
    display: inline;
    background-color: transparent;
    color: #2C323C;
}
.sqr
{
    width: 37px;
    height: 37px;
    margin: 1px;
    float: left;
    display: inline;
    background-color: white; /*Red ;*/
}
.sqry
{
    width: 37px;
    height: 37px;
    margin: 1px;
    float: left;
    display: inline;
    background-color: transparent; /*white #FFFF00;*/
}
p
{
    margin: 0px;
    padding: 0px;
}
a
{
    color: white; /* #1F2D68; #20242C;*/
    text-decoration: none;
    font-weight: bold;
}
a:hover
{
    color: #1F2D68;
    text-decoration: none;
    font-weight: bold;
}

#left
{
    color: #EAE9E9;
}
#right
{
    color: #EAE9E9;
}

#rightc
{
    position: relative;
    top: 0px;
    float: left;
    display: inline;
    margin-left: 0px;
    width: 680px;
    height: 472px;
    border: solid 0px #050505;
    color: #20242C;
}

#rightc h1
{
    margin: 0px;
    padding-left: 10px;
    padding-right:10px;
    position: relative;
    top: 0px;
    font-size:32px;
    font-weight: bold;
    text-align: center;
    color: #DAE6FA;
    border: solid 0px #050505;
}


#rightc p
{
    /*color:#20242C;*/
    margin-top: 3px;
    margin-bottom: 3px;
    padding: 0px;
}

.sqr1
{
    background-image: url(../rays-images/sqr1.png);
    background-repeat: no-repeat;
}
.sqr2
{
    background-image: url(../rays-images/sqr2.png);
    background-repeat: no-repeat;
}
.sqr3
{
    background-image: url(../rays-images/sqr3.png);
    background-repeat: no-repeat;
}
.sqr4
{
    background-image: url(../rays-images/sqr4.png);
    background-repeat: no-repeat;
}
.sqr5
{
    background-image: url(../rays-images/sqr5.png);
    background-repeat: no-repeat;
}
.sqr6
{
    background-image: url(../rays-images/sqr6.png);
    background-repeat: no-repeat;
}
.sqr7
{
    background-image: url(../rays-images/sqr7.png);
    background-repeat: no-repeat;
}
.sqr8
{
    background-image: url(../rays-images/sqr8.png);
    background-repeat: no-repeat;
}
.sqr9
{
    background-image: url(../rays-images/sqr9.png);
    background-repeat: no-repeat;
}
.sqr10
{
    background-image: url(../rays-images/sqr10.png);
    background-repeat: no-repeat;
}
.sqr11
{
    background-image: url(../rays-images/sqr11.png);
    background-repeat: no-repeat;
}


#menu
{
    width: 100%;
    position: relative;
    margin-top:0px;
    top: 0px;
    height: 40px;
    background-color: #5F6B7E;
    border: solid 0px white;
}

#menu p
{
    position: relative;
    top: 8px;
    margin-left: 10px;
    width: 200px;
    border: solid 0px white;
    font-weight: bold;
    font-size: 17px;
}

#menu ul
{
    margin-left: 220px;
    margin-right: 0px;
    margin-top:0px;
    height: 30px;
    width: 670px;
    padding: 0px;
    border: solid 0px white;
}
#menu li
{
    float: left;
    display: block;
    background-color: transparent;
    height: 32px;
    margin-top: 0px;
    margin-left:0px;
    padding-top: 0px;
    list-style: none;
    color: White;
    font-weight: bolder;
    font-size: 16px;
    text-align: center;
}
#menu li span
{
    float: left;
    display: block;
    border: solid 0px red;
    margin: 0px;
    line-height: 32px;
}

#menu li span a
{
    padding-right: 3px;
}


#menu a
{
    text-decoration: none;
    font-weight: bold;
    background-color: transparent; /*#5F6B7E*/
    color: #1F2D68; /*#29397A;*/
    text-align: center;
    line-height: 32px;
    padding-left: 11px;
}
#menu a:hover
{
    text-decoration: none;
    font-weight: bold;
    color: white;
    background-color: #29397A;
    text-align: center;
    line-height: 32px;
    padding-left: 11px;
}

#menu li .nol {margin-left:8px; margin-right:5px}

#leftc
{
    position: relative;
    top: 0px;
    float: left;
    display: inline;
    width: 400px;
    height: 492px;
    border: solid 0px #050505;
    margin-left: 0px;
    padding-left:10px;
    padding-right:10px;
    color: #20242C;
    background-color:#b0aeae;
    overflow:hidden;
}


.leftcp
{
    color: white;
    font-weight: bold;
    font-size: 17px;
}
.h4c {font-size:16px; margin-top: 3px; margin-bottom:0px;}

#l12
{
    position: relative;
    left: 0px;
    top: 5px;
    background-color: transparent;
    margin: 0px;
    font-size: 26px;
    font-weight: bold;
}
#l12 span
{   display:inline;
    margin-left: -3px;
    font-size: 20px;
}
.flt
{
    float: left;
    display: inline;
}
.pos
{
    position: relative;
}
.clr
{
    width: 2px;
    height: 1px;
    clear: both;
}
.clrd
{
    height: 1px;
    width: 600px;
    clear: both;
}
.clrall
{
    clear: both;
}

.tg
{
    clear: both;
    padding-top: 10px;
}
.aln
{
    text-align: center;
}


.alnl
{
    text-align: left;}

#mhay
{   position:relative;
    top:-7px;
    padding-right: 10px;
    width: 135px; /* 160px;*/
    height: 143px; /* 169px; */
    border:0px;
}

#rightc .boxes
{
    position:relative;
    float: left;
    display: inline;
    width: 160px;
    border: solid 1px white;
    margin-left: 10px;
    text-align: center;
    margin-top:0px;
    margin-bottom:0px;
}

.mr7 {margin-left:7px;}
.mr15{margin-left:15px;}
.mr5{margin-left:5px;}

#leftc .pimg
{
    position: relative;
    float: left;
    display: inline;
    height: 230px;
    width: 95%;
}
.imgmr
{
    border: solid 3px white;
    margin-right: 11px;
    margin-bottom: 15px;
}


.imgmr:hover
{
    border: solid 3px Gray;
    margin-right: 11px;
    margin-bottom: 15px;
}
.point:hover {color:white;
              cursor: pointer}

.point2 {color:white;
               cursor: pointer}

.point2:hover {color:red;
              cursor: pointer}


.point7 {color:white;
               cursor: pointer}



.point7:hover {color:black;
              cursor: pointer}

.point8 {color:#FF0000;
               cursor: pointer}
.head
{
    font-weight: bold;
}

.hdblk
{
    font-weight: bold;
    color:#2a2929;
    font-size:14px;
}

.hdblk2
{
    font-weight: bold;
    color:#2a2929;
}

/* storyboard hidden divs */

#blurb
{
    position: relative;
    top: 0px;
    float: left;
    display: inline;
    margin-left: 0px;
    width: 568px;
    height: 360px;
    border: solid 0px #050505;
    visibility: visible;
}

#blurb h1
{
    font-weight: bold;
    text-align: center;
}

#sarah
{
    position: absolute;
    top: 0px;
    left: 0px;
    float: left;
    display: inline;
    margin-left: 10px;
    width: 570px;
    height: 360px;
    border: solid 0px #050505;
    visibility: hidden;
    overflow: scroll;
}
#sarah p
{
    width: 700px;
    height: 500px;
    background-image: url(  '../rays-images/sarahspage-700.jpg' );
    background-repeat: no-repeat;
}
#coggin
{
    position: absolute;
    top: 0px;
    left: 0px;
    float: left;
    display: inline;
    margin-left: 10px;
    width: 570px;
    height: 360px;
    border: solid 0px #050505;
    visibility: hidden;
    overflow: scroll;
}
#coggin p
{
    width: 700px;
    height: 519px;
    background-image: url(  '../rays-images/coggins-700.jpg' );
    background-repeat: no-repeat;
}

#organic
{
    position: absolute;
    top: 0px;
    left: 0px;
    float: left;
    display: inline;
    margin-left: 10px;
    width: 570px;
    height: 360px;
    border: solid 0px #050505;
    visibility: hidden;
    overflow: scroll;
}
#organic p
{
    width: 700px;
    height: 609px;
    background-image: url(  '../rays-images/organics-700.jpg' );
    background-repeat: no-repeat;
}

#viking
{
    position: absolute;
    top: 0px;
    left: 0px;
    float: left;
    display: inline;
    margin-left: 10px;
    width: 570px;
    height: 360px;
    border: solid 0px #050505;
    visibility: hidden;
    overflow: scroll;
}
#viking p
{
    width: 700px;
    height: 697px;
    background-image: url(  '../rays-images/viking-700.jpg' );
    background-repeat: no-repeat;
}

#bloom
{
    position: absolute;
    top: 0px;
    left: 0px;
    float: left;
    display: inline;
    margin-left: 10px;
    width: 570px;
    height: 360px;
    border: solid 0px #050505;
    visibility: hidden;
    overflow: scroll;
}
#bloom p
{
    width: 700px;
    height: 623px;
    background-image: url(  '../rays-images/inbloom-700.jpg' );
    background-repeat: no-repeat;
}

#ecs
{
    position: absolute;
    top: 0px;
    left: 0px;
    float: left;
    display: inline;
    margin-left: 10px;
    width: 570px;
    height: 360px;
    border: solid 0px #050505;
    visibility: hidden;
    overflow: scroll;
}
#ecs p
{
    width: 700px;
    height: 499px;
    background-image: url(  '../rays-images/ecs-700.jpg' );
    background-repeat: no-repeat;
}

/* end of storyboard hidden divs */

/* colour changes */

.standard
{
    text-decoration: none;
    font-weight: bold;
}

.standardu
{
    text-decoration: underline;
    font-weight: bold;
}

.redit
{
    color: red; /* #1F2D68; #20242C;*/
}
.redit:hover
{
    color: red;
}

/* ...... colour choices ... */

#access
{
    position: relative;
    left:20px;
    top: 5px;
    width: 566px;
    height: 280px;
    border: solid 0px blue;
}

#actions
{
    clear: both;
    border: solid 2px white;
    background-color: gray;
    width: 537px;
    height: 90px;
    
    visibility: visible;
}

#actions p {margin-top:0px; margin-bottom:0px;padding-bottom:0px;}

#colour
{
    border: solid 2px white;
    background-color: white;
    float: left;
    display: inline;
    width: 150px;
    height: 102px;
    visibility: visible;
}
#colour2
{
    border: solid 2px white;
    background-color: white;
    float: left;
    display: inline;
    width: 150px;
    height: 102px;
    visibility: visible;
}
#colour3
{
    border: solid 2px white;
    background-color: white;
    float: left;
    display: inline;
    width: 150px;
    height: 102px;
    visibility: visible;
}



#colour4
{
    border: solid 2px white;
    background-color: white;
    float: left;
    display: inline;
    width: 75px;
    height: 102px;
    visibility: visible;
}

#colour p
{
    margin: 0px;
    padding: 0px;
}
#colour2 p
{
    margin: 0px;
    padding: 0px;
}
#colour3 p
{
    margin: 0px;
    padding: 0px;
}

#colour4 p
{
    margin: 0px;
    padding: 0px;
}

.colb
{
    border: solid 0px gray;
    background-color: #FFFFFF;
    width: 25px;
    height: 25px;
    float: left;
    display: inline;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding: 0px;
}

.colb:hover {cursor:pointer;}

.rw
{
    padding: 0;
    margin: 0px;
    height: 25px;
}

#fim 
{
    position: absolute;
    top: 0px;
    left: 0px;
    float: left;
    display: inline;
    margin-left: 10px;
    width: 500px;
    height: 2px;
    border: solid 0px #050505;
    visibility: hidden;
 
    
    }
    
  #fimp
{
    width: 568px;
    height: 1px;
    background-image: url(  '../rays-images/fonts.jpg' );
    background-repeat: no-repeat;
}


  #fimp1
{
    width: 568px;
    height: 1px;
    background-image: url(  '../rays-images/multi-500.jpg' );
    background-repeat: no-repeat;
}

  #fimp2
{
    width: 568px;
    height: 1px;
    background-image: url(  '../rays-images/reflect1-500.jpg' );
    background-repeat: no-repeat;
}


  #fimp3
{
    width: 568px;
    height: 1px;
    background-image: url(  '../rays-images/reflect5-500.jpg' );
    background-repeat: no-repeat;
}


  #fimp4
{
    width: 568px;
    height: 1px;
    background-image: url(  '../rays-images/reflect3b.jpg' );
    background-repeat: no-repeat;
}

  #fimp5
{
    width: 568px;
    height: 1px;
    background-image: url(  '../rays-images/weird-500.jpg' );
    background-repeat: no-repeat;
}
  #fimp6
{
    width: 568px;
    height: 1px;
    background-image: url(  '../rays-images/reflect6-500.jpg' );
    background-repeat: no-repeat;
}

/*   design ideas section */

#innerleftc
{
    position: relative;
    top: 0px;
    float: left;
    display: inline;
    width: 290px;
    height: 385px;
    border: solid 0px #050505;
    margin-left: 0px;
    padding-left:5px;
    padding-right:5px;
    color: #20242C;
    background-color:#b0aeae;
    overflow:hidden;
}

#innerleftsites, #innerleftimage, #innerlefthead, #innerleftjava
{
   
    position: relative;
    top: 0px;
    float: left;
    display: inline;
    width:0px;
    height:0px;
    border: solid 0px #050505;
    margin-left: 0px;
    padding-left:5px;
    padding-right:5px;
    color: #20242C;
    background-color:#b0aeae;
    visibility:hidden;
    overflow:hidden;
    
  /*  width: 290px;
    height: 365px;*/
    
}


#sites, #images, #headings, #javasc 
{
    position: absolute;
    top: 0px;
    margin-left: 0px;
    width: 0px;
    height: 0px;
    border: solid 0px #050505;
    display:none;
    visibility:hidden;
    visibility: collapse;
  
   
}

#sites h1, #images h1, #headings h1, #javasc h1
{
    font-weight: bold;
    text-align: center;
}