html {
    height: 100%;
    margin: 0;
	padding: 0;
	overflow: hidden;
}

body {
    height: 100%;
    width: 100%;
	margin: 0;
	padding: 0;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0c0f14+0,101326+37,0f1723+80,080a14+100 */
	background: #0c0f14; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #0c0f14 0%, #101326 37%, #0f1723 80%, #080a14 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #0c0f14 0%,#101326 37%,#0f1723 80%,#080a14 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #0c0f14 0%,#101326 37%,#0f1723 80%,#080a14 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c0f14', endColorstr='#080a14',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    background-size: cover;
    overflow: hidden;
    font-family: 'Alegreya Sans', sans-serif;
}

#wrapper
{
	width: 100%;
	height: 100%;
    min-height: 100%;
    margin: 0;
	padding: 0;
    position: relative;
}

main
{
	width: 80%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
	text-align: center;
	display: block;
	position: relative;
}

/************************************************
 Feedback and info displays
*/
#title
{
	width: 100%;
	font-size: 2em;
	color: #fff;
}

#missStmt
{
    color: #fff;
    font-weight: bolder;
    font-style: italic;
    display: none;
}

#feedback{
	color: #fff;
	font-size: 24px;
	margin: 10px 0;
}
/*
 End feedback info displays
*********************************************************/

/************************************************************
 Animation and rendering elements
*/
#dgcanvas
{
	width: 48%;
	height: 48%;
	background-color: transparent;
    border-radius: 8px;
}
/*
 End animation and rendering elements
**************************************************************/

/************************************************
 Button and link element selectors 
 */
a{
    color: #fff;
    text-decoration: none;
    display: block;
}

    a:hover {
        color: red;
		cursor: pointer;
		font-weight: bold;
    }

button:hover{
	background-color: rgb(85, 169, 92);
    box-shadow: 4px 4px 10px 4px #000;
}

input[type="button"]:hover, input[type="submit"]:hover{
	background-color: rgb(85, 169, 92);
    box-shadow: 4px 4px 10px 4px #000;
}

input[type="button"], input[type="submit"], input[type="file"]{
	width: 30%;
	display: block;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 5px;
	border: 2px solid #fff;
	border-radius: 4px;
	vertical-align: middle;
	background-color: #027a01;
	color: #fff;
	font-weight: bolder;
	overflow: hidden;
}

input[type="file"]{
	background-color: rgb(20, 59, 122);
	width: 50%;
}

input[type="file"]:hover{
	background-color: rgb(70, 116, 191);
    box-shadow: 4px 4px 10px 4px #000;
}
/*
 END Button and link element selectors 
 ****************************************************/

/****************************************************
 Navigation and menus
 */
/* Top navbar for desktop */
#topNav{
	width: 80%;
	height: 64px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 20px;
}

	#topNav ul {
		width: 100%;
		height: 100%;
		list-style-type: none;
		padding: 0;
	}
	
	#topNav li {
		height: 100%;
		display: block;
		padding: 0;
		float: left;
	}

    .topNavItem{
		width: 64px;
		height: 64px;
		display: inline-block;
		color: white;
		padding: 0;
		margin: 0;
		text-decoration: none;
		text-align: center;
		overflow: hidden;
		border-radius: 8px;
		border: 2px solid transparent;
		cursor: pointer;
	}

	.topNavItem:hover {
		background-color: #111;
		border-color: #fff;
	}

	.topNavItem img {
		max-width: 100%;
		max-height: 100%;
		vertical-align: baseline;
		overflow: hidden;
	}

/* Top navbar for mobile */
#mobileTopNav{
	width: 100%;
	height: 80px;
	display: none;
}

#menu{
	width: 100%;
	height: 230px;
	top: 0;
	display: none;
	background-color: transparent;
	margin-bottom: 10px;
	border-bottom: black solid 2px;
}

	#menu ul {
		width: 100%;
		height: 100%;
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
	
	#menu li {
		width: 100%;
		display: block;
		margin: 0;
		padding: 0;
		float: left;
		overflow: hidden;
	}

    #menu li a {
		width: 100%;
		display: inline-block;
		color: white;
		text-align: center;
		margin: 0;
		padding: 10px;
		text-decoration: none;
		overflow: hidden;
		border-top: 1px solid #fff;
	}

    #menu a:hover {
        background-color: #111;
    }

    #menu img {
        max-width: 100%;
        max-height: 100%;
		vertical-align: middle;
		margin: 0 4px;
    }
/* Toggle button for mobile nav */
#toggleMenuBtn {
	z-index: 1;
	float: right;
	width: 32px;
	height: 32px;
	margin: 24px;
	display: none;
	overflow: hidden;
	background: transparent url("../img/menuToggle.png") center center no-repeat;
	background-size: 100%;
	outline: none;
	border-width: 0;
}

#toggleMenuBtn:hover{
	background-color: #111;
}


/* Sub menu for expanding drop downs */
#subMenu{
	width: 100%;
	height: 60px;
	display: none;
	background-color: transparent;
	border-bottom: black solid 2px;
	line-height: 16px;
}
	
	#subMenu li, #subMenu a{
		height: 32px;
	}

/* Dropdowns for anchor tags */
.dropdownContent{
	min-width: 180px;
	max-width: 360px;
	display: none;
	background-color: #fff;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	position: absolute;
	z-index: 1;
}

	.dropDownItem{
		width: 100%;
		color: #000;
		font-weight: bold;
		margin: 0;
		padding: 10px 0;
		text-align: center;
	}
	
	.dropDownItem:last-child{
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
	}

	.dropDownItem:hover{
		background-color: #000;
	}

	.dropdown:hover .dropdownContent{
		display: block;
	}
		
.standAloneAnchor{
	width: 200px;
	margin: 10px auto;
	color: #fff;
    text-decoration: none;
    display: block;
	border: 2px solid #fff;
	border-radius: 4px;
}

    .standAloneAnchor:hover {
        color: red;
		background-color: #fff;
		cursor: pointer;
    }
	
.anchorList{
	display: inline-block;
	width: 40%;
	margin: 10px auto;
	color: #fff;
    text-decoration: none;
    display: block;
}

.listAnchor{
	display: inline-block;
	width: 48%;
	margin: 10px auto;
	color: #fff;
    text-decoration: none;
	border: 2px solid #fff;
	border-radius: 4px;
}

	.listAnchor:hover {
        color: red;
		background-color: #fff;
		cursor: pointer;
    }
/*
 End Navigation and menus
 ************************************************/

/************************************************
 Images and Viewers (Slide Show, etc) 
 */ 
/* Hidden field to store album id for dynamic page content */
#albumIdField{
	display: none;
}
 
 /* Image panel for slide show */
#slidePanel{
	position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    overflow-y: auto;
	overflow-x: hidden;
	background-color: #000;
	display: none;
	z-index: 1;
}

#slideFeedback{
	display: none;
	color: #fff;
	width: 80%;
	margin: 10px auto;
	text-align: center;
}

.imgSlides{
	width: 100%;
	margin: 32px auto;
	display: block;
}

.imageCaptions{
	width: 80%; 
	margin: 0 auto; 
	position: relative; 
	text-align: center; 
	background-color: transparent; 
	font-size: 18px; 
	color: white; 
	border: none;
}

.commentsBox{
	width: 80%; 
	height: auto; 
	margin: 10px auto;
	color: #fff;
}

.commentContainer{
	width: 80%;
	margin: 10px auto;
	display: inline-block;
	border: 2px solid #424447;
	border-radius: 8px;
	color: #000;
	background-color: #fff;
	font-size: 18px;
	font-weight: bolder;
}

.commentUsers{
	text-align: left;
	display: inline-block;
	margin: 4px;
	color: DarkBlue;
}

.commentUsers.colLeftPanel{
	width: 96px;
}

.commentUsers:hover{
	color: red;
}

.commentUsers img{
	display: inline-block;
	width: 64px;
	height: 64px;
	margin: 4px;
}

.commentDates{
	display: inline-block;
	margin: 4px;
}

.imageComments.colCenterPanel{
	width: 70%;
	display: block;
}

.commentText{
	display: block;
	width: 80%; 
	margin: 10px auto; 
	font-size: 18px;
	font-weight: bolder;
	background-color: transparent; 
	border: none;
	text-align: left;
}

.commentForm{
	display: block;
	width: 80%; 
	color: #fff;
	margin: 10px auto; 
	font-size: 18px;
	font-weight: bolder;
}

.commentForm label{
	width: 90%;
	text-align: center;
	margin: 10px auto;
	display: block; 
}

.commentForm textarea{
	width: 60%;
	color: #fff;
	background-color: transparent;
	display: block; 
	margin: 10px auto;
	border: 1px solid #fff;
	border-radius: 8px;
	resize: vertical;
}

.commentForm button{
	display: block; 
	width: 100px;
	margin: 4px auto;
}

#imgPanel{
	width: 100%;
	text-align: left;
	position: relative;
	margin: 10px auto;
}

.profileImgs{
	max-width: 80%;
	position: relative; 
	margin-left: auto; 
	margin-right: auto; 
	margin-top: 5px; 
	margin-bottom: 5px; 
	border: 2px solid #fff; 
	border-radius: 8px;
	display: block;
    vertical-align: middle;
}

.prevImgs{
	position: relative; 
	margin: 10px; 
	border: 2px solid #000; 
	border-radius: 8px;
	cursor: pointer;
}

.prevImgs:hover{
	border-color: red;
	box-shadow: 4px 4px 10px 4px #000;
}

/* Next & previous buttons for slideshow */
#prev, #next {
	  cursor: pointer;
	  position: absolute;
	  top: 200px;
	  width: 64px;
	  height: 64px;
	  line-height: 64px;
	  margin: 10px;
	  padding: 16px;
	  color: white;
	  font-weight: bold;
	  font-size: 32px;
	  transition: 0.6s ease;
	  border: 2px solid transparent;
	  border-radius: 8px;
	  z-index: 2;
}

/* Position the next button to the right */
#next {
	right: 1%;
}

/* Position the prev button to the left */
#prev {
	left: 1%;
}

/* On hover, add a black background color with a little bit see-through */
#prev:hover, #next:hover {
	color: red;
	border-color: #fff;
}

#closeSlide{
	color: #fff;
	background-color: red;
	border-radius: 4px;
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
}

#closeSlide:hover{
	color: red;
	background-color: #fff;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* Image uploader */
#imgUploadForm{
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	display: inline-block;
	vertical-align: middle;
}	
	
	#imgUploadForm input[type="submit"], #imgUploadResetBtn{
		max-width: 200px;
		min-width: 120px;
		height: 32px;
	}

	#imgUploadForm input[type="submit"]:hover, #imgUploadResetBtn:hover{
		background-color: rgb(85, 169, 92);
		box-shadow: 4px 4px 10px 4px #000;
		cursor: pointer;
	}

	#imgUploadForm p{
		color: #fff;
	}

	#albumFields select, #albumFields input{
		margin: 5px auto;
		border-radius: 2px;
	}
	
	#createAlbum{
		display: none;
	}
	
	#createAlbumBtn{
		width: auto;
	}
	
	#newAlbum{
		display: none;
	}
	
#albumViewer{
	border: 2px solid #fff;
	border-radius: 8px;
}	
	
#myAlbums{
	width: 90%;
	margin: 0 auto;
	display: block;
}	

#albumIdField{
	display: none;
}
	
.albumAnchors{
	width: 98%;
	color: #000b1e;
	font-size: 14px;
	font-weight: bolder;
	background-color: #ddeaff;
	display: inline-block;
	border: 2px solid #000;
	border-radius: 8px;
	margin: 10px auto ;
	vertical-align: middle;
}

.albumThumbnails{
	display: inline-block;
	float: left;
}

.albumInfo{
	width: 60%;
	display: block;
	vertical-align: middle;
	float: left;
	text-align: left;
	margin: 4px;
}

.albumName{
	width: 100%;
	color: DarkBlue;
	font-size: 18px;
	display: inline-block;
	margin: 10px;
}

.albumDesc{
	width: 100%;
	display: block;
	word-wrap: break-word;
	vertical-align: middle;
}

.albumDate{
	width: 20%;
	height: 100%;
	float: right;
	display: inline-block;
	line-height: 56px;
	vertical-align: middle;
}

#imgUploaderContainer{
	position: relative;
	width: 100%;
	height: 128px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
	border: 4px dashed #fff;
	border-radius: 14px;
}

#imgUploaderContainer:hover{
	background-color: #77d87c;
}

#imgQueue{
	display: none;
}

#imgUploadBtnPanel{
	width: 100%;
	height: 180px;
	margin: 5px auto;
}

#imgUploadBtnPanel input{
	margin: 5px;
    display: inline-block;
}

#imgPreviewArea{
	display: inline-block;
	position: relative;
	width: 100%;
	height: 100%;
}
/* 
 End Images and Viewers (Slide show), etc 
 ************************************************/

/***********************************************
 Family Circle Login and Create Family Circle Profile Forms  
*/
.formButtons{
	width: 120px;
	display: inline-block;
	margin: 10px;
	padding: 5px;
	border: 2px solid #fff;
	border-radius: 4px;
	vertical-align: middle;
	background-color: #027a01;
	color: #fff;
	font-weight: bolder;
	overflow: hidden;
}

.formButtonPanel{
	height: 80px;
	width: 80%;
	margin: 0 auto;
	display: inline-block;
}

#famLogin, #createProfileForm, #editProfileForm{
	width: 80%;
	min-width: 265px;
	margin-left: auto;
	margin-right: auto;
	display: block;
	font-size: 1em;
}

#famLogin input[type="text"], input[type="password"], #createProfileForm input[type="text"], #editProfileForm input[type="text"]{
	height: 32px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 10px;
	margin-top: 10px;
	padding: 0 0 0 5px;
	border-radius: 4px;
}

#famLogin img, #createProfileForm img, #editProfileForm img{
	vertical-align: middle;
}

#createProfile{
	color: #fff;
} 
	
/* Overirde of JQuery datepicker calendar icon position */
.ui-datepicker-trigger{
	z-index: 1;
	margin-left: -20px;
}
/*
 End Family Circle Login and Create Family Circle Profile Forms  
***********************************************/

/************************************************
 Security
*/
#lock{
	display: block;
}

#gate{
	display: none;
}
/*
 Security
***************************************************/
/************************************************
 General use panels
*/
/* About Panel specifically for about page*/
#aboutPanel{
    color: #fff;
	width: 50%;
	margin: auto;
}

/*Panel Header */
.panelHeader{
	color: #fff;
	display: block;
	font-size: 18px;
	color: #fff;
}

/* Panel for showing with error messages */
.errorPanel {
    display: none;
    color: red;
	font-size: 18px;
}

.headerPanel{
	display: block;
	font-size: 24px;
	color: #fff;
}

.subPanel{
	max-width: 512px; /* Prevents responsive label and field formatting from getting screwed up */
    margin: 10px auto;
	padding: 10px;
    display: block;
    text-align: center;
	border-radius: 8px;
	border: 2px solid DarkGreen;
	overflow: hidden;
}

	#editAbout{
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		width: 67%;
		height: 150px;
		vertical-align: top;
		border-radius: 4px;
	}

	.subPanel input, .subPanel select{
        width: 65%;
		vertical-align: middle;
    }

    .subPanel label {
        width: 30%;
		display: inline-block;
		text-align: right;
		color: #fff;
		padding-right: 5px;
    }
	
	.supPanel textarea{
		resize: vertical;
	}
	
.textPanel{
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	color: #000;
	background-color: RGB(242, 227, 239);
	border-radius: 8px;
	border: 2px solid #000;
}	
	
	
/* Rows and Columns */
.row{
	display: inline-block;
	width: 100%;
}

.colOne{
	position: relative;
	float: left;
	width: 49%;
	padding: 5px 5px;
}

.colTwo{
	position: relative;
	float: left;
	width: 49%;
	padding: 5px 5px;
}

.colLeftPanel{
	position: relative;
	float: left;
	width: 34%;
	padding: 5px 5px;
}

.colRightPanel{
	position: relative;
	float: right;
	width: 20%;
	padding: 5px 5px;
}

.colCenterPanel{
	position: relative;
	width: 40%;
	display: inline-block;
	padding: 5px 5px;
}
/*
 End General use panels
**********************************************************/

/******************************************************
 Family Circle Dashboard
*/
#welcome{
	width: 100%;
	color: #fff;
	font-size: 24px;
	font-weight: bolder;
}

#welcome p{
	margin: 0;
}

#dashboard{
	border-radius: 8px;
	border: 2px solid #fff;
}

#dashboardMenu{
	width: 100%;
	height: 46px;
	margin: 14px 0;
	display: inline-block;
}

	#dashboardMenu img {
        max-width: 100%;
        max-height: 100%;
		vertical-align: middle;
		overflow: hidden;
    }

	#dashboardMenu ul {
		width: 100%;
		height: 100%;
		margin: 0;
		display: block;
		list-style-type: none;
		padding: 0;
	}
	
	#dashboardMenu li {
		width: 33.3%;
		height: 100%;
		display: block;
		padding: 0;
		float: left;
		margin: 0 -2px;
		border: 2px solid transparent;
	}

    .dashboardMenuItems{
		width: 100%;
		height: 100%;
		display: block;
		color: #fff;
		font-size: 18px;
		font-weight: bold;
		padding: 10px 0;
		text-decoration: none;
		text-align: center;
		overflow: hidden;
		cursor: pointer;
	}
	
	#dashboardMenu li:first-child{
		border-top-left-radius: 8px;
		border-bottom-left-radius: 8px;
	}
	
	#dashboardMenu li:last-child{
		border-top-right-radius: 8px;
		border-bottom-right-radius: 8px;
	}

    #dashboardMenu li:hover{
		background-color: #000;
		background-color: #111;
		border-color: #fff;
    }
	
	#dashboardMenu a:hover{
		color: red;
	}
	
#recentActivity{
	display: block;
	width: 100%;
	margin: 10px auto 0 auto;
}

	#recentActivity a{
		max-width: 200px;
		margin: 10px auto;
		text-align: center;
		border: 2px solid transparent;
		border-radius: 8px;
	}
	
	#recentActivity a:hover{
		border-color: #fff;
	}
	
	#recentActivity a img {
        max-width: 100%;
        max-height: 100%;
		vertical-align: middle;
		overflow: hidden;
    }

#proPicContainer{
	position: relative;
	width: 80%;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

#proPicLink{
	width: 100%;
	height: 100%;	
}

#bday, #proDescTxt{
	width: 80%;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	padding: 4px;
}

#famCirPreview{
	width: 80%;
	margin: 10px auto 0 auto;
	color: #fff;
}

	#famCirPreview a{
		max-width: 200px;
		margin: 10px auto;
		border: 2px solid transparent;
		border-radius: 8px;
	}

	#famCirPreview a:hover{
		border-color: #fff;
	}
	
	#famCirPreview a img {
        max-width: 100%;
        max-height: 100%;
		vertical-align: middle;
		overflow: hidden;
    }

#famCirList{
	border-radius: 8px;
	border: 2px solid #fff;
	margin-bottom: 4px;
}
/*
 End Family circle Dashboard
***********************************************/

/********************************************************
 Footer and footer contact form
*/	
.push{		
	height: 150px;
}

/*Footer*/
footer {
    width: 100%;
    height: auto;
    text-align: center;
    bottom: 20px;
    left: 0;
    position: absolute;
}


#footerLogo {
    background-color: tansparent;
    width: 320px;
    margin-right: auto;
    margin-left: auto;
    color: #ffffff;
    font-size: 100%;
    border-radius: 14px;
    display: block;
}
/*Contact form*/
#contact {
    display: none;
	padding: 10px;
}

#footerLogo button {
    height: 28px;
    font-size: .75em;
    background-color: #027a01;
    color: #fff;
    margin: 3px;
    border-radius: 8px;
    box-shadow: 1px 1px 6px 1px #000;
}

#footerLogo .subPanel {
    color: #000;
    text-align: center;
}

#footerLogo a {
    color: #fff;
    text-decoration: none;
    display: block;
}

    #footerLogo a:hover {
        color: red;
    }

	#footerLogoImg{
		border-radius: 14px;
	}
	
#footerLogo img {
    margin-top: 5px;
}

#footerLogo input, #footerLogo label {
    width: 90%;
	margin: 0 auto;
} 

#footerLogo label{
	text-align: center;
}

#emailStatus{
	height: 42px;
	text-align: left;
}

#msg {
    width: 90%;
}
/*
 End Footer and footer contact form
********************************************************/

/********************************************
 Styling for Tablet
*/
@media only screen and (max-width: 1280px) 
{

}

/********************************************
 Styling for Mobile
*/
@media only screen and (max-width: 768px) 
{
	#aboutPanel{
		width: 90%;
	}

	main{
		width: 80%;
		margin: 0 auto;
		font-size: 1em;
	}
	
	#topNav{
		display: none;
	}
	
	#mobileTopNav{
		display: block;
	}
	
	#toggleMenuBtn {
		display: block;
	}
	#famLogin{
		width: 90%;
	}

	#dgcanvas{
		width: 90%;
		height: 90%;
	}
	
	#dashboard{
		width: 100%;
		border-color: transparent;
	}
	
	.formButtons{
		width: 80%;
	}
	
	.panelHeader{
		text-align: center;
	}
	
	.subPanel input, .subPanel select{
        padding: 2px 5px 2px 5px;
        width: 80%;
		margin-left: auto;
        margin-right: auto;   
		vertical-align: middle;
    }
	
	#editAbout{
		padding: 2px 5px 2px 5px;
        width: 80%;
		margin-left: auto;
        margin-right: auto;   
		vertical-align: middle;
	}

    .subPanel label {
        width: 82%;
		margin-left: auto;
        margin-right: auto;   
		text-align: center;
    }
	/* End panels */
	
	/* Rows and Columns */
	.row{
		display: block;
	}

	.colLeftPanel, .colRightPanel, .colCenterPanel, .colOne, .colTwo{
		width: 90%;
		margin-left: auto;
        margin-right: auto;
		float: none;
	}
	
	.anchorList{
		display: block;
		width: 90%;
	}
	/* End rows and columns */

	#dashboardMenuPics{
		left: 0;
	}
	
	#dashboardMenuStories{
		right: 0;
	}
	
	#recentActivity{
		width: 80%;
		margin-left: auto;
        margin-right: auto;
	}
	
	#proPicLink{
		width: 100%;
		height: 100%;	
	}
	
	#imgUploadForm{
		width: 90%;
	}
	
	#myAlbums{
		width: 100%;
		margin: 0 auto;
		display: block;
	}
	
	.albumAnchors{
		width: 90%;
		height: auto;
		display: block;
	}

	.albumThumbnails{
		float: none;
		display: block;
		text-align: center;
		margin: 10px auto;
	}

	.albumThumbnails img{
		width: 60%;
		height: auto;
	}
	
	.albumInfo{
		width: 90%;
		margin: 4px auto;
		text-align: center;
		float: none;
	}

	.albumDate{
		width: 100%;
		float: none;
		display: block;
	}
	
	.commentUsers{
		text-align: center;
	}
	
	#imageViewer{
		width: 100%; 
		height: 100%;
	}
	
	#slidePanel{
		width: 100%;
	}
	
	#prev, #next{
		top: 96px;
		padding: 0;
	}
	
	/* Position the next button to the right */
	#next {
		right: -25px;
	}

	/* Position the prev button to the left */
	#prev {
		left: -25px;
	}
	
	#closeSlide{
		right: 5px;
	}
	
	footer {
		bottom: 0;
    }
	
	#footerLogo{
		width: 100%;
	}

    #contactPanel {
        width: 100%;
        margin: 0;
		border-radius: 0px;
    }
	
	#contactPanel button {
		float: none;
	}
	
	#famLogin button, #createProfileForm button{
		width: 50%;
    }
}