/******************************Body******************************/
body{
background-size: cover;
background-attachment: scroll;
background-repeat: no-repeat;
font-family: sans-serif;
font-weight: 300;
color: #000000;
z-index: 0;
}

body.body1{
background-image: url("https://upload.wikimedia.org/wikipedia/commons/2/21/Annamalai_University_-_CSE_Department.JPG");
}
/*
body.body2{
background-image: url("tokyocity.jpg");
}

body.body3{
background-image: url("shanghaicity.jpg");
}

body.body4{
background-image: url("goldengate.jpg");
}
*/
/******************************Headings, captions, lists, and buttons******************************/
/*makes sure there is no horizontal scroll*/
body, html{ 
margin: 0;
}

h1, h3, h4{
font-weight: 400;
}

ul{
list-style-type: circle;
}

p#backgroundcaptions{
width: 290px;
height: 12px;;
top: 95%;
left: 0px;
padding-left: 10px;
padding-bottom: 10px;
font-size: 12px;
color: #FFFFFF;
position: absolute;
z-index: 2;
/*background-color: orange;*/
}

div#banner{
width: 100%;
height: 210px;
color: yellow;
font-size: 80px;
font-weight: 600;
text-align: center;
position: absolute;
top: 30%;
z-index: 2;
/*background-color: orange;*/
}

a.buttons{
text-decoration: none;
}

div.buttons{
height: 60px;
width: 220px;
color: #000000;
line-height: 100%;
border: 3px solid #000000;
position: absolute;
text-align: center;
transition-duration: 0.4s;
z-index: 5;
}

div.buttons:hover{
background-color: #000000;
color: #FFFFFF;
}
/******************************Page Lines******************************/
div#pageline{
width: 50%;
height: 5px;
top: 205px;
left: 0px;
right: 0px;
bottom: 0px;
margin-left: auto;
margin-right: auto;
position: absolute;
z-index: 2;
background-color: #FFFF00;
}

div.firstline{
width: 100%;
height: 1px;
top: 40px;
position: relative;
z-index: 3;
background-color: #d9d9d9;
}

div.secondline{
width: 100%;
height: 1px;
top: 80px;
position: relative;
z-index: 3;
background-color: #d9d9d9;
}

div.thirdline{
width: 100%;
height: 1px;
top: 120px;
position: relative;
z-index: 3;
background-color: #d9d9d9;
}

div.secondtolastline{
width: 100%;
height: 1px;
bottom: 260px;
position: absolute;
z-index: 3;
background-color: #d9d9d9;
}

div.lastline{
width: 100%;
height: 1px;
bottom: 45px;
position: absolute;
z-index: 3;
background-color: #d9d9d9;
}

/******************************Navigation******************************/
div#navbar{
width: %;
height: 45px;
top: 0px;
left: 0px;
background-color: #000000;
position: fixed;
z-index: 3;
}

div#navtabs{
width: 590px;
height: 45px;
z-index: 4;
top: 0px;
left: 0px;
position: fixed;
}

div#navtabstyle{
width: 140px;
height: 45px;
top: 0px;
font-weight: 600;
text-align: center;
font-size: 14px;
color: yellow;
position: absolute;
z-index: 5;
}

a#tabs{
text-decoration: none;
}

div.startpage{
left: 0px;
}

div.aboutmepage{
left: 150px;
}

div.designskillspage{
left: 300px;
}

div.portfoliopage{
left: 450px;
}

div.tabunderlinecontainer{
width: 140px;
height: 45px;
top: 0px;
left: 0px;
position: absolute;
opacity: 0;
transition-duration: 0.4s;
z-index: 5;
}

div.tabunderline{
width: 100px;
height: 3px;
top: 42px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 5;
background-color: yellow;
}

div#navsocialmedia{
color: #000000;
width: 240px;
opacity: 0.8;
height: 500px;
z-index: 4;
top: 0px;
right: 0px;
position: fixed;
}





img.arrow{
width: 30px;
height: 30px;
top: 75%;
bottom: 0px;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
position: absolute;
border: 3px solid yellow;
border-radius: 100%;
background-color: yellow;
transition-duration: 0.4s;
z-index: 2;
}

img.arrow:hover{
width: 33px;
height: 33px;
}



/******************************Alternate Navigation******************************/
div#altnav{
height: 175px;
width: 100%;
font-size: 14px;
line-height: 140%;
bottom: 65px;
position: absolute;
z-index: 3;
/*background-color: green;*/
}

div#altnavtabs{
height: 175px;
width: 660px;
top: 0px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 4;
/*background-color: blue;*/
}

div#altstartpage{
height: 110px;
width: 70px;
left: 0px;
top: 0px;
position: absolute;
z-index: 5;
/*background-color: purple;*/
}

div#altaboutmepage{
height: 110px;
width: 110px;
left: 120px;
top: 0px;
position: absolute;
z-index: 5;
/*background-color: purple;*/
}

div#altdesignskillspage{
height: 110px;
width: 210px;
left: 280px;
top: 0px;
position: absolute;
z-index: 5;
/*background-color: purple;*/
}

div#altportfoliopage{
height: 110px;
width: 120px;
right: 0px;
top: 0px;
position: absolute;
z-index: 5;
/*background-color: purple;*/
}

ul.altnavlist{
list-style-type: none;
padding: 0;
}

li.altnavheading{
font-weight: 400;
color: #000000;
}

li.altnavsubheading{
color: #666666;
}

li.altnavheading:hover{
text-decoration: underline;
}

li.altnavsubheading:hover{
text-decoration: underline;
color: #000000;
}

a#tabs{
text-decoration: none;
}

div#altnavsocialmedia{
width: 240px;
height: 45px;
bottom: 0px;
left: 210px;
position: absolute;
z-index: 4;
/*background-color: blue;*/
}



/******************************Start Page******************************/
div#textbox1{
width: 100%;
height: 260px;
top: 100%;
position: absolute;
font-size: 20px;
background-color: #FFFFFF;
z-index: 2;
}



/******************************copyright******************************/
div#copyright{
height: 45px;
width: 100%;
bottom: 0px;
font-size: 14px;
text-align: center;
line-height: 100%;
position: absolute;
z-index: 3;
/*background-color: green;*/
}