body
{
	font: 120% "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; background-color: transparent; -webkit-font-smoothing: antialiased;
	background-color:#00688B;
	color:#FFFFFF;
	text-align:center;
	/*overflow:hidden;*/
	margin:0 auto;
}

#personalwork
{
	color:#00688B;
}

/* top navigation bar starts here */

div.buttonBar
{
	overflow:hidden;
}

ul.buttons
{
	position:relative;
	float:left;
	left:50%;

	list-style: none;
	font-size:135%;
	padding:0px;
	text-decoration:none;
}

li.button
{
	float:left;
	position: relative;
	right:50%;

	display:block;
}

.button
{
	-webkit-border-radius: 11px;
	-moz-border-radius: 11px;
	-o-border-radius: 11px;
	border-radius: 11px;
	/*border: solid 1px #20538D;*/
	border:none;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
	/*-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);*/
	/*-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);*/
	/*box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0px;*/
	background-color: #62B1F6;/*61B329*//*4479BA*/
	color: #FFFFFF;
	-webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    transition-duration: 0.2s;

	width:100px;
	font-weight:bold;
	text-decoration:none;
	text-align: center;
	padding:10px 20px;

	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	user-select: none;
	margin:1px;

	cursor:pointer;
}

.button:hover, .button:focus
{
	background-color: #4682B4;/*397D02*//*356094*/
	/*border: solid 1px #2A4E77;*/
	text-decoration: none;
}

.button:active
{
	-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
	-moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
	box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
	background-color: #4682B4;/*476A34*//*2E5481*/
	/*border: solid 1px #203E5F;*/
}

.button.selected
{
	-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
	-moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
	box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
	background-color: #4682B4;/*476A34*//*2E5481*/
	/*border: solid 1px #203E5F;*/
}

.thin /*for buttons*/
{
	line-height:15px;
	width:auto;
}

.comingSoon
{
	background-color:#CD2626;
}
.comingSoon:hover, .comingSoon:focus
{
	background-color: #CD2626;
}
.comingSoon:active
{
	background-color: :#CD2626;
}

/* page styling starts here */

div.infobox
{
	text-align: center;
	margin: 0 auto;
	width:900px;
	color:#000000;

	padding:20px;
	padding-top: 10px;
	
	background-color:#FFFFFF;
	border:1px solid #FFFFFF;
	-webkit-border-radius:11px;
	-moz-border-radius:11px;
	-o-border-radius:11px;
	border-radius:11px;
}

.infodiv /* This is for the About div on the index page */
{
	background-color:#FFFFFF;
	border:1px solid #FFFFFF;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	-o-border-radius:3px;
	border-radius:3px;
	width:480px;
	
	-webkit-box-shadow: 0px 0px 8px #888888;
	-moz-box-shadow: 0px 0px 8px #888888;
	box-shadow: 0px 0px 8px #888888;
	
	padding:3px;
}

iframe.imgupload
{
	width:600px;
	height:400px;
	color:#FFFFFF;
}
img.single
{
	display:block;
	margin:auto;
	max-height:50%;
	max-width:70%;
	padding-bottom:5px;
}
.caption
{
	font-size:70%;
	font-style: italic;
}

.codemenu /* for BBCode Menu on creation page */
{
	width:600px;
	margin:auto;
}

/* The following is only for mobile devices and smaller screens */
@media only screen 
and (max-width: 550px)
{
	body
	{
		font-size: 100%;
	}
	div.infobox
	{
		width:200px;
	}
	li.button
	{
		right:45%;
	}
	.infodiv
	{
		width:400px;
		font-size:14pt;
	}
	img.single
	{
		width:160px;
	}
}