@media screen and (min-width:320px) and (max-width:480px){
	/* e.g. iPhone specific */
	body{
		font-size:70%;
	}
	
	p {
		font-size:70%;
	}

	#layout_login_bar {
		font-size: 50%;
	}

}



@media screen and (min-width:320px) and (max-width:1024px) {
	/* iPhone & iPad */
		
	body{
		font-family:Helvetica, Arial, Verdana, sans-serif;
		font-size: 80%;
	}
	
	p {
		font-size:80%;
	}
	
	#layout_login_bar {
		font-size: 90%;
	}
	
	/*h1 {
		padding-top: 3px;
		padding-bottom: 10px;
		margin: 0px 0px 3px 0px;
		font-size: 110%
	}
	
	h2 {
		padding-top: 3px;
		padding-bottom: 10px;
		margin: 0px 0px 3px 0px;
		font-size: 100%
	}
	
	h3 {
		padding-top: 3px;
		padding-bottom: 10px;
		margin: 0px 0px 3px 0px;
		font-size: 90%
	}*/
	


#layout_login_bar {
	display:table;
	width:100%;
	border-bottom: 2px solid #0066CC;
	margin-right: 10px;
}

#layout_permissions {
	position:float;
	display:table-cell;
	width:50%;
}

#layout_programmer {
	width: 12%;
}

#layout_help {
	width: 12%;
    display: block;
    position: float;
	float: left;
}

#layout_menu_button {
	width: 20%;
	float: right;
	display:block;

	font-size:12px;
	font-family:Arial,sans-serif;
	background-color:#DDDDDD;

	
    border: 1px solid #000;
    /*background: #AAA;*/
    height: 30px;
    font-weight:bold;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #aaa;
    margin: 2px;
    color: #000000;
}




#help {
    width:100%;
}

#helpbox {
    height:20%;
    width:96%;
    padding-left:2%;
	font-size: 10px;
}

#layout_column_container_2 {
	width: 100%;
}

#layout_column_container {
	/*background-color: #ccc;*/
	width:100%;
    right: 0%;
	border-right: 0px solid #0066CC;
}

#layout_column_left {
    /* this one displays first*/
	/*background-color: #fff;*/
	width:100%;
	padding-right:0%;
    left: 0%;
    overflow: hidden;
}

#layout_sidebar {
	width:100%;
	height:300px;
	overflow:auto;
    /*background-color:#fff;*/
    padding-left:1%;
    font-size:100%;
	display:none;
	border-bottom: 2px solid #0066CC;
    
}

#layout_photo {
    display:none;
}

#layout_framework {
    display:none;
}

#layout_search {
    display:none;
}

#layout_column_right {
	float:left;
	width:100%;
    left: 0%;
}

#layout_content {
	clear:both;
	padding-left: 1%;
	font-size: 100%;
	width: 98%;
}

#layout_footer {
	width:100%;
	border-top:10px solid #FFF;
	font-size: 50%;
}

#layout_email_links {
}

#layout_beta_output {
}

a.button {
	display:inline-block;
	width:95%;
	padding:1px;
	text-align:left;
	text-decoration:none;
	color:#666666;
	font-size: 150%;
}

.sidebar {
    font-size:80%;
}

.menu_category_expanded_0, .menu_category_expanded_1, .menu_category_expanded_2, .menu_category_expanded_3 {
    width:93%;
    float:left;
    border: 2px solid #FFF; /*#8ABFE5;*/
    background: #B8D2E5;
    /*height: 30px;*/
    font-weight:bold;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #aaa;
    margin: 3px;
    color: #222;
    padding-left:3px;
	padding-bottom:2px;
}

.menu_category_expanded_0 {
    width:84%;
    background: #B8D4E6;
}

.menu_category_expanded_1 {
    background: #C8E4F6;
	width:94%;
}

.menu_category_expanded_2 {
    background: #C8E4F6;
	width:94%;
}

.menu_category_expanded_3 {
    background: #D0E8FD;
}

.menu_category_contracted_0, .menu_category_contracted_1, .menu_category_contracted_2, .menu_category_contracted_3 {
    width:46%;
    float:left;
    border: 2px solid #FFF; /* #BFE5BA;*/
    background: #E5BDD2;
    height: 30px;
    font-weight:bold;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #aaa;
    margin: 2px;
    color: #222;
    padding-left:5px;
}

.menu_category_contracted_0 {
    width:40%;
    background: #E5BDD2;
}

.menu_category_contracted_1 {
    background: #Ecc6Da;
}

.menu_category_contracted_2 {
    background: #E2F5CD;
}

.menu_category_contracted_3 {
    background: #EAFDD5;
}

/* menu items */
.menu_item_0, .menu_item_1, .menu_item_2, .menu_item_3 {
    width:46%;
    float: left;
    border: 1px solid #000000;
    background: #dddddd;
    height: 30px;
	padding-left: 5px;
	padding-top:1px;
	padding-bottom:1px;
	padding-right:1px;
    font-weight: normal;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #aaa;
    margin: 2px;
    color: #222;
}

.menu_item_0 {
    width:40%;
    background: #dddddd;
}

.menu_item_1 {
    background: #dddddd;
}

.menu_item_2 {
    background: #dddddd;
	width:48%;
}

.menu_item_3 {
    
}

div.error {
	border: 1px solid red;
	padding: 1px;
	background: #FFFFCC;
	color: #AA0000;
	margin-bottom: 2px;
	width: 50%;
	font-size: 60%;
}

div.success {
	border: 1px solid green;
	padding: 1px;
	background: #ccffcc;
	color: green;
	margin-bottom: 2px;
	width: 50%;
	font-size: 60%;
}

h1, h2, h3, h4, h5, h6 {
	text-decoration: none;
	margin-top: 1;
	margin-bottom: 1;
	/*font-size: 18px;*/
	padding-top: 2px;
	padding-bottom: 0px;
}



/* overwrite styles for mobile */

.refresh_button {
	width: 100px;
	height: 20px;
	border-radius: 3px;
	box-shadow: 1px 1px 3px #aaa;
	margin: 3px;
}


.checkin_button, .checkout_button {
	width: 80px;
	height: 20px;
	border-radius: 3px;
	box-shadow: 1px 1px 3px #aaa;
	margin: 3px;
}
.checkin_button:hover, .checkout_button:hover  {
	box-shadow: 1px 1px 3px #999;
}
.checkin_button:disabled, .checkout_button:disabled {
    border: 1px solid #006;
}


.scratch_button, .did_not_start_button, .did_not_finish_button {
    border: 1px solid #006;
	width: 80px;
	height: 20px;
	border-radius: 3px;
	box-shadow: 1px 1px 3px #aaa;
	margin: 3px;
}
.scratch_button:hover, .did_not_start_button:hover, .did_not_finish_button:hover {
    border: 1px solid #a00;
	border-radius: 3px;
	box-shadow: 1px 1px 3px #aaa;
	margin: 3px;
}
.scratch_button:disabled, .did_not_start_button:disabled, .did_not_finish_button:disabled {
    border: 1px solid #006;
}

.unscratch_button {
    border: 1px solid #006;
	width: 80px;
	height: 20px;
	border-radius: 3px;
	box-shadow: 1px 1px 3px #aaa;
	margin: 3px;
}
.unscratch_button:hover {
    border: 1px solid #a00;
	border-radius: 3px;
	box-shadow: 1px 1px 3px #aaa;
	margin: 3px;
}
.unscratch_button:disabled {
    border: 1px solid #006;
}
	
}