body {
    background-color: #6b4c7f;
font-family: "Arial";
}
html{
  position:relative; 
  min-height: 100%;
}
html,body{
  margin:0;
  padding:0;
}


#maincontent {
padding-top: 90px;
padding-bottom: 0px;
border-top: solid 1px #ffffff;
border-left: solid 1px #ffffff;
border-top-left-radius: 15px;
}


#maincontent img{
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
}

#maincontent a {
color: #ffffff;
}
#maincontent a:hover {
color: #e681c5;
}

#logo {
height: 100px; 
background: # url();
width: 100%;
}

#logo img {
float:left; 
height: 70px; 
width: auto;
border:0px;
margin-left: 20px;
}

#social {
position: absolute;
height: 30px; 
width: 120px;
vertical-align: bottom;
margin-bottom: 0px;
margin-left: 10px;
margin-top: 130px;
//border:solid 1px #ffffff;
//border-radius: 8px 0px 8px 0;
}

#social img {
float:left;
height: 20px; 
width: auto;
margin: 5px;
border:0px;
}


#otherlinks {
float:right;
height: 60px; 
width: 150px;
}

#otherlinks img {
float:right; 
height: 40px; 
border:0px;
}




#downloads{
//position: relative;
display: block;
//height: 100%;
margin-left: 30px;
margin-right: 30px;
margin-top: 100px;
margin-bottom: 190px;
padding: 10px;
z-index: 1;
font-family: "Arial";
font-size: 13px;
color: #dddddd;
padding-top: 10px;
//padding-bottom: 220px;
border-top: solid 1px #ffffff;
border-left: solid 1px #ffffff;
border-top-left-radius: 15px;
}

.downlood {
display: block;
width:150px;
height: 180px;
float: left;
border: solid 1px #fff;
border-radius: 15px;
margin: 10px;
text-align:center;
}

.downlood img {
width:80px;
height: auto;
margin: 10px;
}

.downlood a {
color: #ffffff;
text-decoration: none;
}

.downlood a:hover {
color: #e681c5;
}


#ident {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 90px;
padding: 0px 0px 0px 0px;
//box-shadow: 0px 2px 9px #000000;
font-family: "Arial";
font-size: 13px;
color: #b4b2c4;
font-weight: bold;
z-index: 4;

   background-repeat: repeat-x;
   background-size: 100%;
   background-color: #;
}


#menu-icon {
    display: none;
	width: 60px;
	height: 50px;
	background: #4C8FEC url(images/menuicon.png); 
	background-size: 100%;

}

a:hover#menu-icon {

	background-color: #fff;
	border-radius: 4px 4px 0 0;

}

ul {

	list-style: none;

}

li {

	display: inline-block;
	float: left;
	padding: 10px;
	margin-top: -20px;

}

.current {

	color: #c8bde5;

}

section {

	margin: 80px auto 40px;
	max-width: 980px;
	position: relative;
	padding: 20px

}


#intro{
display:none;
    border-bottom: solid 6px; #000000; 
    width: 100%; 
    height: 180px; 
    margin-top: 90px; 
    background-image: url('images/ladybug-purple-wide.jpg'); 
    background-repeat: 
    repeat; background-size: 100%;"
}

#introhome{
display: none;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-left: solid 1px #ffffff;
    width: 100%; 
    height: 180px; 
    margin-top: -30px; 
    margin-bottom: -100px;
    margin-left: 25px;
    margin-right: 25px;
    background-image: url('images/squaredog-banner.png'); 
    background-repeat: repeat; 
    background-size: 100%;
}

#introhomebar{
    border-bottom: solid 0px; #ffffff; 
    width: 100%; 
    height: 20px; 
    position: relative;
    bottom: 0px;
    left: 0px;
    right: 0px;
    top: 155px;
    margin-top: 140px; 
    background: #000000; 
    opacity: 0.3;
    font-family: "Arial";
font-size: 1.1em;
color: #ffffff;
text-align: center;
padding-top: 5px;
}

#introhomebar a{
color: #ffffff;
text-decoration: none;
}

#introhomebar a:hover{
color: #f9e606;
text-decoration: none;
}

.indexdiv{
    width: 100%;
    margin-right: 25px;
    height: 120px; 
    margin-top: 20px;
    padding: 15px 0px 0px 0px;
}

.indexdiv h2{
text-align: left;
font-size: 1.4em;
font-weight: normal;
margin-top: -10px;
padding: 5px;
}

.indexdiv p{
font-weight: normal;
font-size: 0.9em;
text-align: left;
}

.indexdiv a{
font-weight: normal;
font-size: 0.9em;
text-align: left;
text-decoration: none;
}

.indexdiv:hover {
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
   //background: #361a61; 
   //opacity: 0.5;
   background-image: url("images/thisone.png");
   background-repeat: no-repeat; 
   background-position: top right;
   background-size: 137px 70px; 
}

nav {
    position: relative;
    bottom: 6px;
    left: 0px;
    right: 0;
    height:20px;
    margin-top: -15px;
    width: 100%;
padding: 0px 0px 0px 0px;
font-family: "Arial";
font-size: 13px;
color: #ffffff;
text-align: left;
z-index: 0;
//border-top: solid 0px #444;
//border-bottom: solid 0px #444;
//background-image: url("");


}

nav a{
display: block;
height: 20px;
width: 100%;
color: #ffffff;
font-weight: normal;
text-decoration: none;

}
nav a:hover{
color: #b4b2c4;
text-decoration: underline;
}
nav a:active{
color: #7a644d;
font-weight: normal;
text-decoration: underline;

}


footer {
 position: absolute;
 display: block;
    left: 0;
    bottom: 0;
    height: 180px;
    width: 100%;
    padding-top: 10px;
    overflow: hidden;
//box-shadow: 0px -2px 9px #000000;
font-family: "Arial";
font-size: 10px;
color: #aaaaaa;
font-weight: normal;
text-align: left;
z-index: 5;
   //background-image: url("images/cowprintgrey.jpg");
   //background-repeat: repeat-x;
   //background-color: #000000;
}


#footer a {
color: #ffffff;
text-decoration:none;
}
#footer a:hover {
color: #e681c5;
}

#footer-left {
position: absolute; 
bottom: 0;
left: 0;
text-align:left;
width: 30%;
margin-left:26px; 
margin-bottom: 5px; 
margin-top: 0px;"
}

#footer-right {
position: absolute; 
bottom: 0;
right: 0;
text-align:right;
width: 70%;
margin-right:0px; 
margin-bottom: 5px; 
margin-top: 0px;

}
#footer-left img {
height: 90px;
width: auto;
margin-bottom: 90px;

}

#maincontent {
position: relative;
min-height: 300px;
margin-left: 30px;
margin-right: 30px;
margin-top: 100px;
margin-bottom: 180px;
padding: 10px;
z-index: 1;
font-family: "Arial";
font-size: 13px;
color: #dddddd;
}

#maincontent img{
float: left; 
height: 140px; 
width: auto; 
margin-right: 10px; 
margin-top: 0px;
}


.indexdiv img {
    width: 50%;
    height: auto;
 
}

#bookcontent {
position: relative;
min-height: 300px;
margin-left: 30px;
margin-right: 30px;
margin-top: 100px;
margin-bottom: 50px;
padding: 10px;
z-index: 1;
font-family: "Arial";
font-size: 13px;
color: #dddddd;
}


.book{
float: left; 
height: 210px; 
width: auto; 
margin-right: 0px; 
margin-top: 10px;
margin-bottom: 25px;
background-image: url('images/bookshelf.jpg'); 
background-repeat: no-repeat; 
background-position: bottom;
background-size: 300px 20px; 
}

.book img{
float: left; 
height: 180px; 
width: auto; 
margin-right: 15px; 
margin-left: 15px;
margin-top: 10px;
margin-bottom: 25px;
}


body h2 {
 border-bottom: solid 0px #f9f9f9;
font-size: 1.1em;
font-weight:bold;

}
body h3 {
 border-bottom: solid 1px #f9f9f9;
font-size: 1.1em;
font-weight:bold;

}
//bees//

#instructions div{
    display:none; 
    width:100%; 
    background-image: url('images/black-transmed.png'); 
    padding: 5px;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
    z-index: 0;
}

#probie {
    z-index: 1;
}


#showbutton a:hover {
     border-bottom: solid 10px #ffffff;
}

.fronticons {
    position: relative;
    float: left;
    width: 140px;
    margin: 10px;
    padding: 5px;
    font-family: "Arial";
    font-size: 13px;
    color: #ffffff;
    text-align: center;
    z-index: 0;
    //background-image: url("images/black-transmed.png");
    //box-shadow: 0px 2px 9px #000000;
    border: solid 1px #fff;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;

}


.fronticons a {
 color: #fff;
 text-decoration: none;
}
.fronticons a:hover {
 color: #fff;
 text-decoration: none;
}

.fronticons span {
  display: none;
}

.fronticons:hover {
background-image: url("images/black-transmed.png");
//box-shadow: 0px 2px 9px #000000;
}

.fronticons:hover span{
  display: block;
  color: #999;
}


/*MEDIA QUERY*/
/*foons*/
@media only screen and (max-device-width: 600px) {
/*foons*/
	header {

		position: absolute;

	}
	
	#logo {
    height: 120px; 
    background: # url();
    width: 100%;
}

/*foons*/
	#menu-icon {

		display:inline-block;
	width: 90px;
	height: 72px;
	background: url(images/menuicon.png); 
	background-size: 100%;
		float: right;
		margin-top: -100px;
		margin-right: 20px;

	}
/*foons*/	
		#intro{
    height: 170px; 
}
/*foons*/	
		nav { 

		//border: 0px;
//background-image: none;
//box-shadow: 0px 8px 9px #000000;
	}

/*foons*/
	nav ul, nav:active ul { 

		display: none;
		position: absolute;
		padding: 20px;
		background: #5c3e6a;
		border: 1px solid #ffffff;
		border-top-left-radius: 15px;
        border-bottom-right-radius: 15px;
		right: 20px;
		top: -40px;
		width: 30%;

	}
/*foons*/
	nav li {
        font-size: 2.5em;
		text-align: center;
		width: 100%;
		padding: 10px 0;
		margin: 0;

	}
	    nav li:hover{

		background: #996aaf;
		border-top-left-radius: 15px;
        border-bottom-right-radius: 15px;

	}

/*foons*/
	nav:hover ul {

		display: block;

	}
/*foons*/	
	#maincontent {
padding-top: 150px;
padding-bottom: 30px;
font-size: 1em;

}
/*foons*/
#portfolioh3 {
font-size: 2em;

}
/*foons*/
#maincontent img{
float: left;
width: 210px;
height: auto;
margin-right: 10px;
margin-top: 5px;
}
/*foons*/
#footer {
font-size: 22px;
}
#logo {
height: 170px;
}
#logo img {
height: 130px; 
border:0px;
}
/*foons*/
#otherlinks {
margin-right: 50px;
}
/*foons*/
footer {
   //height: 70px;
    //width: 100%;
    //overflow: hidden;
//box-shadow: 0px -2px 9px #000000;
//font-family: "Arial";
font-size: 1.5em;
//color: #aaaaaa;
//font-weight: normal;
//text-align: left;
z-index: 5;
   //background-image: url("images/cowprintgrey.jpg");
   //background-repeat: repeat-x;
   //background-color: #000000;
}
/*foons*/
#showbutton {
font-size: 1.5em;

}
.indexdiv {
font-size: 1.8em;
height: 200px;
}
#introhome{
    margin-bottom: -150px; 
}

}
/*compooper*/
@media only screen and (max-width: 770px) {

#menu-icon {
    display: hidden;
	width: 30px;
	height: 25px;
	background: url(images/menuicon.png); 
	background-size: 100%;

}
/*compooper*/
	header {

		position: absolute;

	}
/*compooper*/
	#menu-icon {

		display:inline-block;
		float: right;
		margin-top: -50px;
		margin-right: 20px;

	}
/*compooper*/	
		#intro{
    height: 170px; 
}
	
	
/*compooper*/	
		nav { 
		border: 0px;
        background-image: none;
        //box-shadow: 0px 8px 9px #000000;
	}
    
/*compooper*/
	nav ul, nav:active ul { 

		display: none;
		position: absolute;
		padding: 0px;
		background: #5c3e6a;
		border: 1px solid #fff;
		border-top-left-radius: 15px;
        border-bottom-right-radius: 15px;
		right: 20px;
		top: -40px;
		width: 30%;

	}
/*compooper*/
	nav li {
        font-size: 1em;
		text-align: center;
		width: 100%;
		padding: 10px 0;
		margin: 0;

	}
/*compooper*/	
	    nav li:hover{

		background: #996aaf;
		border-top-left-radius: 15px;
        border-bottom-right-radius: 15px;

	}

	nav:hover ul {

		display: block;

	}
/*compooper*/	
	.indexdiv {
font-size: 1em;
}

#otherlinks {
margin-right: 50px;
}

}