/* --- Imports --- */

	@import url(../resources/fonts/stylesheet.css);

/* --- Reset --- */

	/** * Eric Meyer's Reset CSS v2.0 */
	
	html, body
	{
		height: 100%;
	}
	
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video 
	{
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font-family: 'robotoregular', sans-serif;
		vertical-align: baseline
	}
	
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section 
	{
		display: block;
	}
	
	body 
	{
		line-height: 1;
	}
	
	ol, ul 
	{
		list-style: none;
	}
	
	blockquote, q 
	{
		quotes: none;
	}
	
	blockquote:before, blockquote:after,q:before, q:after 
	{
		content: '';
		content: none;
	}
	
	table 
	{
		border-collapse: collapse;
		border-spacing: 0;
	}
	
	b, strong
	{
		font-family: 'robotobold', sans-serif;
	}
	
	i, em
	{
		font-family: 'robotoitalic', sans-serif;
	}
	
/* --- Basic Layout --- */

	body
	{
		background-color: #FFFFFF;
		margin-top: 70px;
		height: calc(100% - 70px);
	}
	
	header
	{
		position: fixed;
		z-index: 10000;
		height: 50px;
		width: calc(100% - 50px);
		margin-top: -70px;
		padding: 10px 25px;
		background-color: #f5f5f5;
	}
	
	.title
	{
		float: left;
		font-size: 0;
	}
	
	.logo
	{
		height: 55px;
		margin-top: -5px;
	}
	
	.menufile
	{
		float: right;
		height: 50px;
		width: 100px;
		background-size: 50px;
		background-repeat: no-repeat;
		background-position: 100% 50%;
		font-size: 1.95em;
		line-height: 50px;
		cursor: pointer;
	}
	
	.menusignin
	{
		float: right;
		height: 50px;
		width: 80px;
		background-image: url('../images/static/loginicon.png');
		background-size: 50px;
		background-repeat: no-repeat;
		background-position: 100% 50%;
		cursor: pointer;
	}

	.menuaccount, .menuupload
	{
		display: none;
		width: 260px;
		min-height: 180px;
		max-height: calc(100vh - 105px);
		padding: 14px;
		top:60px;
		right: 20px;
		position: absolute;
		z-index: 10006;
		margin-top: 20px;
		background-color: #ffffff;
		border: 1px solid #bdbdbd;
		-webkit-box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.22); 
		-moz-box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.22);	   	
		box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.22);
	}

	.menuupload
	{
		right: 125px;
	}
	
	.menuaccount:before, .menuupload:before
	{
		top: -16px;
		right: 14px;
		width:0;
		height:0;
		position: absolute;
		z-index: 10005;
		content:"";
		border-left: 16px solid transparent;
		border-right: 16px solid transparent;
		border-bottom: 16px solid #bdbdbd;
	}
	
	.menuaccount:after, .menuupload:after
	{
		top: -15px;
		right: 15px;
		width:0;
		height:0;
		position: absolute;
		z-index: 10005;
		content:"";
		border-left: 15px solid transparent;
		border-right: 15px solid transparent;
		border-bottom: 15px solid rgb(255, 255, 255);
	}
	
	.menuaccount .textbox, .menuupload .textbox
	{
		width: calc(100% - 20px);
	}

	.menuaccount button, .menuupload button
	{
		width: 100%;
	}

	.smalllink
	{
		font-size: 0.85em;
		color: #16ad12;
		text-decoration: none;
	}
	
	.menuaccount .smalllink:last-of-type
	{
		float: right;
	}
	
	.menuaccount .avatar
	{
		width: 85px;
		text-decoration: none;
		float: left;
	
		margin-right: 10px;
		padding: 14px 10px 14px 0;
		border-right: 1px solid #bdbdbd;
	}
	
	.menuaccount .menutext
	{
		text-decoration: none;
	}
	
	.menuaccount .menuusername
	{
		color: #16ad12;
		font-size: 1.10em;
		line-height: 35px;
		font-family: 'robotomedium';
	}
	
	.menuaccount .menulink
	{
		color: #16ad12;
		line-height: 25px;
	}
	
	.notification
	{
		position: fixed;
		padding: 15px 45px 15px 15px;
		margin: 0 auto 0 auto;
		top: 100px;
		left: 0;
		right: 0;
		z-index: 9990;
		background-color: #ffffff;
		background-image: url('/images/static/menubuttonopen.png');
		background-repeat: no-repeat;
		background-size: 16px;
		background-position: calc(100% - 15px) 15px;
		width: calc(100% - 85px);
		max-width: 960px;
		border: 1px solid #bdbdbd;
		-webkit-box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.22);
		-moz-box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.22);
		box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.22);
		cursor: pointer;
	}
	
	.error
	{
		background-color: rgba(229, 28, 35, 0.85);
		border: 1px solid rgba(176, 18, 10, 0.85);
		color: #ffffff;
	}
	
	.success
	{
		background-color: rgba(22, 173, 18, 0.85);
		border: 1px solid rgba(5, 111, 0, 0.85);
		color: #ffffff;
	}
	
	.container
	{
		max-width: 1080px;
		width: 100%;
		position: relative;
		padding: 25px 2%;
		margin: 0 auto;
	}
	
	.contenttitle
	{
		font-family: 'robotomedium', sans-serif;
		font-size: 2.5em;
		font-weight: 400;
	}
	
	.contenttitle:first-letter
	{
		color: #16ad12;
	}
	
	.textbox
	{
		border: none;
		width: 480px;
		padding: 2px 10px 2px 10px;
		border-bottom: 1px solid #bdbdbd;
		background-color: inherit;
		background-image: url('/images/static/borderedge.jpg'), url('/images/static/borderedge.jpg');  background-repeat: no-repeat;  background-position: 0% 100%, 100% 100%;
		font-family: inherit;
		font-size: 1em;
		line-height: 1.45em;
		box-sizing: content-box;
		-ms-box-sizing: content-box;
		-moz-box-sizing: content-box;
		-webkit-box-sizing: content-box;
	}
	
	.textbox:focus
	{
		border-bottom: 1.5px solid #16ad12;
		background-image: url('/images/static/borderedgefocus.jpg'), url('/images/static/borderedgefocus.jpg');
		background-repeat: no-repeat;
		background-position: 0% 100%, 100% 100%;
		outline: none;
	}

	button
	{
		width: 500px;
		height: 45px;
		position: relative;
		background: none;
		border: none;
		color: #ffffff;
		font-family: inherit;
		font-size: 1em;
		line-height: 45px;
	}

	button:focus
	{
		background-color: #0a8f08;
	}

	button:before
	{
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		background-color: #16ad12;
		-webkit-transition: background-color 0.5s; /* For Safari 3.1 to 6.0 */
		transition: background-color 0.5s;
	}

	button:hover:before
	{
		background-color: #0F760C;
	}

	button:after
	{
		content: "";
		width: 100%;
		height: 5px;
		position: absolute;
		z-index: -1;
		bottom: 0;
		left: 0;
		background-color: #159612;
		-webkit-transition: height 0.5s, top 0.5s; /* For Safari 3.1 to 6.0 */
		transition: height 0.5s, top 0.5s;
	}

	button:hover:after
	{
		bottom: 5px;
		height: 40px;
	}

	.gallerypicture
	{
		float: left;
		position: relative;
		height: 200px;
		width: 200px;
		margin: 8px;
		background-color: rgb(230,230,230);
	}

	.gallerypicture figcaption
	{
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 8px;
		color: #ffffff;
		background-color: rgba(0,0,0,0.5);
	}

	.gallerynav
	{
		clear: both;
		padding-top: 25px;
		text-align: center;
		font-size: 1.2em;
	}

	.gallerynav a
	{
		text-decoration: none;
		color: #16ad12;
	}/* --- Imports --- */

	@import url(../resources/fonts/stylesheet.css);

/* --- Reset --- */

	/** * Eric Meyer's Reset CSS v2.0 */
	
	html, body
	{
		height: 100%;
	}
	
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video 
	{
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font-family: 'robotoregular', sans-serif;
		vertical-align: baseline
	}
	
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section 
	{
		display: block;
	}
	
	body 
	{
		line-height: 1;
	}
	
	ol, ul 
	{
		list-style: none;
	}
	
	blockquote, q 
	{
		quotes: none;
	}
	
	blockquote:before, blockquote:after,q:before, q:after 
	{
		content: '';
		content: none;
	}
	
	table 
	{
		border-collapse: collapse;
		border-spacing: 0;
	}
	
	b, strong
	{
		font-family: 'robotobold', sans-serif;
	}
	
	i, em
	{
		font-family: 'robotoitalic', sans-serif;
	}
	
/* --- Basic Layout --- */

	body
	{
		background-color: #FFFFFF;
		margin-top: 70px;
		height: calc(100% - 70px);
	}
	
	header
	{
		position: fixed;
		z-index: 10000;
		height: 50px;
		width: calc(100% - 50px);
		margin-top: -70px;
		padding: 10px 25px;
		background-color: #f5f5f5;
	}
	
	.title
	{
		float: left;
		font-size: 0;
	}
	
	.logo
	{
		height: 55px;
		margin-top: -5px;
	}
	
	.menufile
	{
		float: right;
		height: 50px;
		width: 100px;
		background-size: 50px;
		background-repeat: no-repeat;
		background-position: 100% 50%;
		font-size: 1.95em;
		line-height: 50px;
		cursor: pointer;
	}
	
	.menusignin
	{
		float: right;
		height: 50px;
		width: 80px;
		background-image: url('../images/static/loginicon.png');
		background-size: 50px;
		background-repeat: no-repeat;
		background-position: 100% 50%;
		cursor: pointer;
	}

	.menuaccount, .menuupload
	{
		display: none;
		width: 260px;
		min-height: 180px;
		max-height: calc(100vh - 105px);
		padding: 14px;
		top:60px;
		right: 20px;
		position: absolute;
		z-index: 10006;
		margin-top: 20px;
		background-color: #ffffff;
		border: 1px solid #bdbdbd;
		-webkit-box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.22); 
		-moz-box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.22);	   	
		box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.22);
	}

	.menuupload
	{
		right: 125px;
	}
	
	.menuaccount:before, .menuupload:before
	{
		top: -16px;
		right: 14px;
		width:0;
		height:0;
		position: absolute;
		z-index: 10005;
		content:"";
		border-left: 16px solid transparent;
		border-right: 16px solid transparent;
		border-bottom: 16px solid #bdbdbd;
	}
	
	.menuaccount:after, .menuupload:after
	{
		top: -15px;
		right: 15px;
		width:0;
		height:0;
		position: absolute;
		z-index: 10005;
		content:"";
		border-left: 15px solid transparent;
		border-right: 15px solid transparent;
		border-bottom: 15px solid rgb(255, 255, 255);
	}
	
	.menuaccount .textbox, .menuupload .textbox
	{
		width: calc(100% - 20px);
	}

	.menuaccount button, .menuupload button
	{
		width: 100%;
	}

	.smalllink
	{
		font-size: 0.85em;
		color: #16ad12;
		text-decoration: none;
	}
	
	.menuaccount .smalllink:last-of-type
	{
		float: right;
	}
	
	.menuaccount .avatar
	{
		width: 85px;
		text-decoration: none;
		float: left;
	
		margin-right: 10px;
		padding: 14px 10px 14px 0;
		border-right: 1px solid #bdbdbd;
	}
	
	.menuaccount .menutext
	{
		text-decoration: none;
	}
	
	.menuaccount .menuusername
	{
		color: #16ad12;
		font-size: 1.10em;
		line-height: 35px;
		font-family: 'robotomedium';
	}
	
	.menuaccount .menulink
	{
		color: #16ad12;
		line-height: 25px;
	}
	
	.notification
	{
		position: fixed;
		padding: 15px 45px 15px 15px;
		margin: 0 auto 0 auto;
		top: 100px;
		left: 0;
		right: 0;
		z-index: 9990;
		background-color: #ffffff;
		background-image: url('/images/static/menubuttonopen.png');
		background-repeat: no-repeat;
		background-size: 16px;
		background-position: calc(100% - 15px) 15px;
		width: calc(100% - 85px);
		max-width: 960px;
		border: 1px solid #bdbdbd;
		-webkit-box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.22);
		-moz-box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.22);
		box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.22);
		cursor: pointer;
	}
	
	.error
	{
		background-color: rgba(229, 28, 35, 0.85);
		border: 1px solid rgba(176, 18, 10, 0.85);
		color: #ffffff;
	}
	
	.success
	{
		background-color: rgba(22, 173, 18, 0.85);
		border: 1px solid rgba(5, 111, 0, 0.85);
		color: #ffffff;
	}
	
	.container
	{
		max-width: 1080px;
		width: 96%;
		position: relative;
		padding: 25px 2%;
		margin: 0 auto;
	}
	
	.contenttitle
	{
		font-family: 'robotomedium', sans-serif;
		font-size: 2.5em;
		font-weight: 400;
	}
	
	.contenttitle:first-letter
	{
		color: #16ad12;
	}
	
	.textbox
	{
		border: none;
		width: 480px;
		max-width: calc(100% - 20px);
		padding: 2px 10px 2px 10px;
		border-bottom: 1px solid #bdbdbd;
		background-color: inherit;
		background-image: url('/images/static/borderedge.jpg'), url('/images/static/borderedge.jpg');  background-repeat: no-repeat;  background-position: 0% 100%, 100% 100%;
		font-family: inherit;
		font-size: 1em;
		line-height: 1.45em;
		box-sizing: content-box;
		-ms-box-sizing: content-box;
		-moz-box-sizing: content-box;
		-webkit-box-sizing: content-box;
	}
	
	.textbox:focus
	{
		border-bottom: 1.5px solid #16ad12;
		background-image: url('/images/static/borderedgefocus.jpg'), url('/images/static/borderedgefocus.jpg');
		background-repeat: no-repeat;
		background-position: 0% 100%, 100% 100%;
		outline: none;
	}

	button
	{
		width: 500px;
		max-width: 100%;
		height: 45px;
		position: relative;
		background: none;
		border: none;
		color: #ffffff;
		font-family: inherit;
		font-size: 1em;
		line-height: 45px;
	}

	button:focus
	{
		background-color: #0a8f08;
	}

	button:before
	{
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		background-color: #16ad12;
		-webkit-transition: background-color 0.5s; /* For Safari 3.1 to 6.0 */
		transition: background-color 0.5s;
	}

	button:hover:before
	{
		background-color: #0F760C;
	}

	button:after
	{
		content: "";
		width: 100%;
		height: 5px;
		position: absolute;
		z-index: -1;
		bottom: 0;
		left: 0;
		background-color: #159612;
		-webkit-transition: height 0.5s, top 0.5s; /* For Safari 3.1 to 6.0 */
		transition: height 0.5s, top 0.5s;
	}

	button:hover:after
	{
		bottom: 5px;
		height: 40px;
	}

	

	button.dislike, button.like
	{
		width: 49%;
	}

	button.dislike:focus
	{
		background-color: #0a8f08;
	}

	button.dislike:before
	{
		background-color: #DF1D1D;
	}

	button.dislike:hover:before
	{
		background-color: #8B1A1A;
	}

	button.dislike:after
	{
		background-color: #B51818;
	}

	.colorlink
	{
		color: #16ad12;
		text-decoration: none;
	}

	.gallerypicture
	{
		float: left;
		position: relative;
		height: 200px;
		width: 200px;
		margin: 8px;
		background-color: rgb(230,230,230);
	}

	.gallerypicture figcaption
	{
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 8px;
		color: #ffffff;
		background-color: rgba(0,0,0,0.5);
	}

	.gallerynav
	{
		clear: both;
		text-align: center;
		font-size: 1.2em;
	}

	.gallerynav a
	{
		text-decoration: none;
		color: #16ad12;
	}

	.picture
	{
		width: 100%;
		text-align: center;
		padding: 15px 0;
	}

	.picture img
	{
		max-width: 100%;
	}

	.details
	{
		float: left;
		width: 39%;
	}

	.comments
	{
		float: right;
		width: 60%;
	}

	.comments .textbox
	{
		width: calc(100% - 20px);
	}
	
	.comments button
	{
		width: 100%;
	}

	.comment p
	{
		margin: 10px 5px;
	}

	.login, .register
	{
		width: 49%;
	
		float: left;
		margin: 3px;
}