@import url("normalize.css");

/*index page styling */


#greybackground {
background: url(images/deskbackground.jpg) no-repeat;
width: 100%;
margin: 0px;
}

#indexContainer {
width: 100%;
height: auto;
display: block;
clear: both;
overflow: hidden;
}

#logo {
background: url(images/logo.png) no-repeat;
width: 656px;
height: 228px;
position: absolute;
top: 150px;
left: 200px;
}

/*sliding navigation bar styling */

#slider {
position:fixed;
top: 0px;
left: 50%;
margin-left: -350px;
height: 45px;
width: 760px;
margin-top: -45px;
z-index: 50;
background: url(images/sliderbackground.png) no-repeat;
}

#slider ul {
margin-top: 8px;
}

#slider ul li {
list-style-type: none;
margin-top: 0px;
margin-left: 0px;
padding: 0px 40px;
text-decoration: none;
font-size: 22px;
font-family: "Franklin Gothic Medium", calibri, sans-serif;
float: left;
}

#slider ul li a:hover {
color: white;
}

#slider ul li:last-child {
border: none;
}

#slider ul li a {
text-decoration: none;
color: #2B2E43 ;
}

.littlelogo {
background: url(images/littlelogo.png);
width: 277px;
height: 84px;
margin-top: -22px;
}

/*main menu bar styling */

#menubar {
width: 650px;
height: auto;
position: absolute;
top: 450px;
left: 265px;
}

#menubar ul {
list-style-type: none;
padding: 0px;
}

#menubar ul li {
margin: 10px;
}

#profilebutton {
background: url(images/profilebutton.png) no-repeat;
width: 600px;
height: 58px;
}

#profilebutton:hover {
background: url(images/profilebuttonhover.png) no-repeat;
width: 600px;
height: 58px;
}

#designsbutton {
background: url(images/designsbutton.png) no-repeat;
width: 600px;
height: 58px;
}

#designsbutton:hover {
background: url(images/designsbuttonhover.png) no-repeat;
width: 600px;
height: 58px;
}

#contactbutton {
background: url(images/contactbutton.png) no-repeat;
width: 600px;
height: 58px;
}

#contactbutton:hover {
background: url(images/contactbuttonhover.png) no-repeat;
width: 600px;
height: 58px;
}

/*main div styling and position */

#block-1 { 
width: 100%;
height: 970px;
position: absolute;
top: 1100px;
}

#profilediv {
background: url(images/profile.jpg) no-repeat;
width: 100%;
height: 970px;
}

#profileinfo {
background: url(images/profileinfo.png);
width: 870px;
height: 642px;
margin: auto;
position: relative;
top: 150px;
}

#block-2 { 
background: url(images/designs.jpg) no-repeat;
width: 100%;
height: 970px;
position: absolute;
top: 2070px;
}


#designsdivcontainer {
width: 100%;
height: 500px;
position: absolute;
top: 300px;
overflow: scroll;
overflow-y:hidden;
}

#designsdiv {
width: 2000px;
height: 450px;

}

.dalmare {
background: url(images/designspage/dalmare.png) no-repeat;
width: 381px;
height: 327px;
margin-left: 150px;
margin-right: 150px;
float: left;
}

.paulmahoneyart {
background: url(images/designspage/paulmahoneyart.png);
width: 463px;
height: 261px;
margin-top: 40px;
margin-right: 150px;
float: left;
}


#mydesigns {
background: url(images/designspage/mydesigns.png);
width: 189px;
height: 37px;
position: absolute;
left: 100px;
top: 100px;
}

#block-3 {
background: url(images/contactbackground.png) no-repeat center; 
width: 100%;
height: 970px;
position: absolute;
top: 3040px;
}

#contact {
background: url(images/contactpage/contact.jpg) no-repeat;
width: 550px;
height: 50px;
position: absolute;
top: 280px;
left: 50%;
margin-left: -275px;
background-size: contain;
}

#contactphone {
background: url(images/contactpage/phone.jpg) no-repeat;
width: 550px;
height: 120px;
position: absolute;
top: 370px;
left: 50%;
margin-left: -275px;
background-size: contain;
}

#contactemail {
background: url(images/contactpage/email.jpg) no-repeat;
width: 550px;
height: 120px;
position: absolute;
top: 490px;
left: 50%;
margin-left: -275px;
background-size: contain;
}

#back-to-top {
background: url(images/backtothetop.png) no-repeat;
width: 90px;
height: 90px;
position: fixed;
right: 10px;
bottom: 10px; 
z-index: 40;
}

.clear { clear: both; }

#footer {
width: 100%;
height: 50px;
background: #2B2E43;
position: absolute;
top: 3980px;
}


#drawing_board {
    width: 640px;
    height: 480px;
    border: 1px solid #000000;
}

#footer {
width: 100%;
height: 50px;
margin: auto;
background: rgba(25,25,25);
font-family: franklin, calibri, sans-serif;

}

#footerinfo {
width: 400px;
height: 22px;
color: white;
position: relative;
top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);

}

#footerinfo a {
text-decoration: none;
}