/* Av Roger Säfström (rosf1600). HT16 DT093G Datateknik GR (B), Webbutveckling II - Moment 5 - Projekt /*


/*----General design-----*/
body {
	font-family: "trebuchet MS", Geneva, arial;
	font-size: 1em;
	line-height: 150%;
}

html {
 	background-image: url("../img/background.jpg"); 
 }


/*Headings*/
h1, h2, h3 {
	font-family: "Arial Black", Gadget, sans-serif;
}


/*mainmenu*/
header nav ul {
	margin-bottom: 0.5em; 
	margin-top: 10px;
	list-style: none;
	padding: 5px;
	background-color: #615f5f;
	border-radius: 5px;
	float: left;
	width: 100%;
}

header nav li {
	display: inline;
	padding: 5px;
}

header nav li a {
	font-size: 1.2em;
	margin-left: 10px;
}

li a:visited {
	color: #FAFAFA;
	} 


li a:link {
	color: #FAFAFA;
}

li a:hover { 
	text-decoration: underline;
	color: #cdee13; transition: 0.4s;
}

#socialmedia {
	float: right;
}

#socialmedia a {
	padding-right: 7px;
}



/*settings for links*/
a { 
	text-decoration: none;
}

a:hover { 
	text-decoration: underline;
}

a:link {
	color: #cdee13;
}

a:visited {
	color: #cdee13;
}

/*name of the poster in guestbook*/
.postname a:link {
	color: #13669D;
}




 /*footer*/
footer {
	text-align: center;
	background-color: #615f5f;
	border-radius: 10px;
	padding: 3px;
	clear: both;
	color: white;
	margin-top: 25px;
}


/*The width of the page*/
#pagewidth {
	/* background-color: rgba(235, 232, 232, 0.9); */
	background-color: rgba(250, 250, 250, 0.9);
	width: 99%;
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
	padding: 1%;
	border-radius: 10px;
}


/*Logotype*/
#logo {
	float: left;
}






/*----Design for startpage-----*/

/*Slider pictures*/
.mySlides {
	width: 100%;
	height: 350px;
	border: 2px solid;
}


/*Imagecontainer with 3 small images*/
.container {
		width: 100%;
		max-width: 960px;
		margin: 0 auto;
		margin-top: 30px;
	}

/*Each picture gets 33% of the total space(100%) */
.centerImage {
		width: 33%;
		float: left;
		text-align: center;
	}

/*Center the imagetext, and choose widht of the text*/
.imageText {
		width: 75%;
		margin: 0 auto;
		margin-bottom: 20px;
	}

/*Size of images and space between images*/
.centerImage img { 
		max-width: 100%; 
		width: 70%;
		border: 1px solid;
	}

/*Headings under the 3 images*/
.piclinks {
	color: black;
}





/*----Design for page papegojmat-----*/

/*Article about parrotfood*/
#food-article {
	float: left;
}

/*The word "Giftigt" in food-article*/
#poison {
	color: red;
}


/*Image of broccoli*/
#broccoli-div {
	float: right;
	width: 25%;
	margin: 15px;
	font-size: 80%;
	text-align: center;
}

#broccoli-image {
	width: 100%;
	border: 1px solid black;
}





/*----Design for contact page-----*/

/*Contact page - Article about us*/
#contact-article {
	width: 70%;
	float: right;
	background-color: #615f5f;
	border-radius: 10px;
	color: white;
}

/* Pic on contactpage */
#contactpic {
	width: 100%;
	height: 300px;
	border: 1px solid black;

}


/*Contactform*/
#contactform {
	background-color: #615f5f;
	padding: 15px 30px 5px 30px;
	border-radius: 10px;
	color: white;
}

/*Color of errortext and confirmation-text*/
.errorColor1 {
	color: #F99F9F;
}

.errorColor2 {
	color: #CD1313;;
}

.greenText {
	color: #31B404;
}




/*----Design for somhusdjur page-----*/
#parrot-article {
	float: left;
	clear: both;
}

/*Image of biting parrot*/
#bite-div {
	float: right;
    width: 35%;
    margin: 5px;
    font-size: 80%;
    text-align: center;
}

#bird-bite {
	border: 1px solid black;
}




/*----Design for butik and varukorg pages-----*/
/*Buttons*/
td .buyButton {
	border-radius: 12px;
	color: #ffffff;
	font-size: 15px;
	background: #31bd46;
	padding: 10px 15px 10px 15px;
	text-decoration: none;
}

td .buyButton:hover {
	background: #0c9e33;
}


td .removeButton {
	border-radius: 12px;
	color: #ffffff;
	font-size: 15px;
	background: #D22B4A;
	padding: 5px 12px 5px 12px;
	text-decoration: none;
}

td .removeButton:hover {
	background: #F76672;
	text-decoration: none;
}

.button {
	float: right;
	border-radius: 12px;
	color: #ffffff;
	font-size: 15px;
	background: #39769e;
	padding: 10px 15px 10px 15px;
	text-decoration: none;
	margin-bottom: 20px;
}

.button:hover {
	background: #145099;
	text-decoration: none;
}

.buttonLeft {
	border-radius: 12px;
	color: #ffffff;
	font-size: 16px;
	background: #39769e;
	padding: 6px 12px 6px 12px;
	text-decoration: none;
	margin: 6px 0px 8px 0px;
}

.buttonLeft:hover {
	background: #145099;
	text-decoration: none;
}

#payButton {
	float: right;
	border-radius: 12px;
	color: #ffffff;
	font-size: 15px;
	background: #26A633;
	padding: 10px 15px 10px 15px;
	text-decoration: none;
}


.shopheading {
	margin-top: 210px;
	margin-bottom: 0px;
	text-align: center;
}


table {
	width: 100%;
}


thead {
    background-color: #39769e;
    color: white;
}

/*Even/odd sripes in tables*/
tr:nth-child(even) {background-color: #F7F5F5}


td {
	padding: 5px;
}


#webshop {
	clear: both;
	margin: 0px 10px 20px 10px;
}


#shoppingcart {
	margin: 150px 10px 40px 10px;
}

.productimg {
	width: 60px;
	height: 80px;
}

#sumDiv {
	font-size: 1.2em;
	color: green;
	text-align: center;
}


#ordersNumber {
	float: right;
	margin-bottom: 7px;
	color: #088A29;
	font-size: 1.2em;
}



/*----Design for guestbook-----*/
#guestbook {
	float: left;
	width: 100%;
}

.posts {
	background-color: #FFFFFF;
	border-radius: 12px;
	padding: 0px 10px 0px 10px;
}

#guestbookHeader {
	margin:  25px 0px 5px 0px;
}