dojox/mvc/tests/mobile/demo/demo.css

Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.

.iphone label {
	font-size: 15px;
	font-weight: bold;
	color: #333;
	padding-left: 3px;
	text-shadow: rgba(255, 255, 255, 0.25);
}

.iphone body {
	min-height: 200px;
}

.android label { 
		overflow-x: hidden;
		-webkit-text-size-adjust: none;
		background-color: black;
		color: white;
		font-family: Helvetica;
		font-size: 14px;
		margin-left: 2px;			
}

.android body {
	font-family: Helvetica;
	font-size: 17px;
	color: white;
}

input { 
		width: 60%;
		display:inline-block; 
	
}

.row { 
		width: 100%;
		margin-bottom: 1px; margin-top: 3px;
		display:inline-block; 
}

/* Generate Demo */
div#view {
	display: table;
	border: 1px solid #ddd;
	border-radius: 10px;
	margin: 3px;
	padding: 3px;
	width: 100%;
	background-color: #F7F7F7; 
	color: #333;
}

.generate-row {
	display:inline-block;
	width: 100%;
	font-size: 15px;
	font-weight: bold;
	text-shadow: white 0 1px 1px;
	color: #333;
	font-weight: bold;
}

form#testForm div.row, form#repeatTestForm div.row {
	width: 100%;
	display:inline-block; 
	
}

form#testForm, form#repeatTestForm, button#generate1, .generate-textarea-row, button#updateModel, div#view, div#generateModel, div#generateView {
	margin-left: 15px;
	margin-right: 15px;
}

.spacer {display: block; margin-bottom:10px; padding-bottom:5px;}

.generate-heading { font-size:1.0em; font-weight:bold; }
.generate-label-cell { 
	text-align: left; 
	width: 20%;	 
	display:inline-block;
}
.generate-dijit-cell { text-align: left; width: 66%;  display:inline-block; }

.generate-textarea-row { text-align: left; width: 90%;	display:inline-block; }
.generate-textarea-cell { text-align: left; width: 90%; min-height: 220px;	display:inline-block; }
.generate-maincontent { text-align: left; width: 100%;}

/* CSS for buttons show case */
button.baseBtn {
	-webkit-background-clip: padding-box;
	-webkit-box-align: center;
	background-clip: padding-box;
	border-style: solid;
	border-width: 1px;
	color: black;
	font-family: 'Helvetica Neue', HelveticaNeue, Helvetica-Neue, Helvetica, 'BBAlpha Sans';
	font-size: 18px;
	font-weight: bold;
	vertical-align: middle;
	margin: 10px;
	height: 34px;
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}

button.roundBtn {
	border-bottom-left-radius: 17px;
	border-bottom-right-radius: 17px;
	border-top-left-radius: 17px;
	border-top-right-radius: 17px;
}

button.backBtn {
	border-bottom-left-radius: 0.4em 0.4em;
	border-bottom-right-radius: 0.4em 0.4em;
	border-top-left-radius: 0.4em 0.4em;
	border-top-right-radius: 0.4em 0.4em;
	margin-left: 0.893em;
	padding-left: 0.4em;
	height: 1.8em;
	overflow: visible;
	position: relative;
	z-index: 1;
}

button.backBtn:before, button.backBtn:after {
	content: "";
	width: .773em;
	height: 1.8em;
	top: -0.1em;
	left: auto;
	position: absolute;
	z-index: 2;
	-webkit-mask: 0 0 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABGCAYAAADb7SQ4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAiNJREFUeNrEWb9LQlEUvj5BcHoQvMnVKXD1D3CLwqBJbHJsazQaWoSCxgbHJiMIAiNok6AhCDdXVycnJ8EQOgeOYaG+d39998KH+HyP753zzjnfd325xfdSgVeV8B6BScuEV0IRSbxHeCMk/AVFXCA8ScQKSXxPqK0fQBBfE5r/D+Y8VzUT9jb94DPimqRYIYkrhGcpKhhxIqTxrpNcExdlQJTTTnRJnCc8ykhUSOIOoZ71ZFfEZ4S2zgUu+rguxZRHEnPbfKRVsOtUl0RtYpOLTYljIS2Z3nVk2DY9SbNCEt8RDm0rUpe4La1jvXSqmtum72raZI24KuNQIYl/nSGSOJb0Jq61M0pxhjwK9304hUjHGSKILzc5Q5drUzttdYY+I97pDH1FzG0zNFUb04gTG4kzJS5kdYauiZtZnaFr4ooKsCIVaDHxKAQxt1NBnGIVHfGCcEQYh3jGU8KBfMKLiyM+lgzAq/qT0ArVTg+Ei1B9fEPoovV4fcfQd2HedScX39GprwGTNjJn0maTELN6IuSzECLB6T5x2eM66jQgnIeSxa60GnS3uL56tr7b1Ai0JPVwYi6yho2U2lgfKym19VxjMRHzEGbvS9K+RBPzetGVUpf29lZHSl2/DMnLvwh1ZMQrKW3Ic4fvJOZS6ZMQW5hpmpT63DvtlFLfm7bBNruM2C2yXb7y3U6ZpRS5P/4jpUjihRTbCJ3q1eL3GMMfAQYAJmB6SBO619IAAAAASUVORK5CYII=') no-repeat;
	-webkit-mask-size: .773em 1.8em;
	overflow: hidden;
}

button.backBtn:before {
	left: -0.693em;
}

button.backBtn:after {
	left: -0.628em;
}

button.greyBtn {
	text-shadow: rgba(255, 255, 255, 0.246094) 0px 0.08em 0px;
	border-color: #999;
	border-top-color: #A6A6A6;
	background-color: #CCC;
	background-image: -webkit-gradient(linear, 0% 0, 0% 100%, from(white), color-stop(0.02, #E6E6E6), to(#BABABA));
}

button.greyBtn.backBtn:before {
	background: #999;
}

button.greyBtn.backBtn:after {
	background-color: #CCC;
	background-image: -webkit-gradient(linear, 0% 0, 0% 100%, from(white), color-stop(0.02, #E6E6E6), to(#BABABA));
}

button.greyBtnSelected, button.greyBtnSelected.backBtn:after {
	background-color:#bababa;
	background-image:-webkit-gradient(linear,0% 0,0% 100%,color-stop(0%,#a1a1a1),color-stop(10%,#adadad),color-stop(65%,#bababa),color-stop(100%,#bbb));
	background-image:linear-gradient(top,#a1a1a1 0,#adadad 10%,#bababa 65%,#bbb 100%);
}

/* CSS for forms show case */
form#testForm div.fieldset, form#repeatTestForm div.fieldset {
	display: table;
	border: 1px solid #ddd;
	border-radius: 10px;
/*	background-color: white; */
	margin: 3px;
	padding: 3px;
	width: 100%;
}

form#testForm div.field-row, form#repeatTestForm div.field-row {
		display: table-row;
		width: 100%;
}

form#testForm div.field-title, form#repeatTestForm div.field-title {
    font-size: 18px;
    font-weight: bold;
    margin: 1em .7em .3em;
}

form#testForm span, form#repeatTestForm span {
	display: table-cell;
	font-size: 15px;
	font-weight: bold;
	background-color: #F7F7F7;
	color: #333;
	padding-left: 3px;
	text-shadow: rgba(255, 255, 255, 0.25);
	vertical-align: middle;
	width: 25%;
}

form#testForm input {
	display: table-cell;
	width: 75%;
}

form#testForm input[type="radio"], form#testForm input[type="checkbox"] {
	width: 15px;
}

form#testForm select, form#testForm textarea {
	margin-left: 0px;
}

/* CSS for headings show case */
ul#headingTabBar {
	display:inline;
}
ul#headingTabBar li {
	margin: 6px 0 6px 0 !important;
}

ul#headingTabBar li.mblTabButton {
	background-color: #5877A2;
	background: -webkit-gradient(linear, left top, left bottom, from(#8EA4C1), to(#4A6C9B), color-stop(0.5, #5877A2), color-stop(0.5, #476999));
}

ul#headingTabBar li.mblTabButtonSelected {
	background-color: #394D77;
	background: -webkit-gradient(linear, left top, left bottom, from(#7C87A4), to(#263E6C), color-stop(0.5, #394D77), color-stop(0.5, #243B69));
}

div#headings button.baseBtn {
	display: block;
	float: left;
	-webkit-background-clip: padding-box;
	-webkit-box-align: center;
	background-clip: padding-box;
	border-style: solid;
	border-width: 1px;
	margin: 6px 30px;
	color: white;
	font-family: 'Helvetica Neue', HelveticaNeue, Helvetica-Neue, Helvetica, 'BBAlpha Sans';
	font-size: 13px;
	font-weight: bold;
	-webkit-box-shadow: rgba(255, 255, 255, 0.0976563) 0px 0.1em 0px;
	vertical-align: middle;
	height: 29px;
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}

div#headings button.backBtn:before, div#headings button.backBtn:after {
	content: "";
	width: .773em;
	height: 29px;
	top: -0.1em;
	left: auto;
	position: absolute;
	z-index: 2;
	-webkit-mask: 0 0 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABGCAYAAADb7SQ4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAiNJREFUeNrEWb9LQlEUvj5BcHoQvMnVKXD1D3CLwqBJbHJsazQaWoSCxgbHJiMIAiNok6AhCDdXVycnJ8EQOgeOYaG+d39998KH+HyP753zzjnfd325xfdSgVeV8B6BScuEV0IRSbxHeCMk/AVFXCA8ScQKSXxPqK0fQBBfE5r/D+Y8VzUT9jb94DPimqRYIYkrhGcpKhhxIqTxrpNcExdlQJTTTnRJnCc8ykhUSOIOoZ71ZFfEZ4S2zgUu+rguxZRHEnPbfKRVsOtUl0RtYpOLTYljIS2Z3nVk2DY9SbNCEt8RDm0rUpe4La1jvXSqmtum72raZI24KuNQIYl/nSGSOJb0Jq61M0pxhjwK9304hUjHGSKILzc5Q5drUzttdYY+I97pDH1FzG0zNFUb04gTG4kzJS5kdYauiZtZnaFr4ooKsCIVaDHxKAQxt1NBnGIVHfGCcEQYh3jGU8KBfMKLiyM+lgzAq/qT0ArVTg+Ei1B9fEPoovV4fcfQd2HedScX39GprwGTNjJn0maTELN6IuSzECLB6T5x2eM66jQgnIeSxa60GnS3uL56tr7b1Ai0JPVwYi6yho2U2lgfKym19VxjMRHzEGbvS9K+RBPzetGVUpf29lZHSl2/DMnLvwh1ZMQrKW3Ic4fvJOZS6ZMQW5hpmpT63DvtlFLfm7bBNruM2C2yXb7y3U6ZpRS5P/4jpUjihRTbCJ3q1eL3GMMfAQYAJmB6SBO619IAAAAASUVORK5CYII=') no-repeat;
	-webkit-mask-size: .773em 29px;
	overflow: hidden;
}

div#headings button.backBtn:before {
	left: -0.5em;
}

div#headings button.backBtn:after {
	left: -0.5em;
}

button.defaultBtn {
	text-shadow: rgba(255, 255, 255, 0.246094) 0px 0.08em 0px;
	border-color: #9CACC0;
	background-color: #5877A2;
	background: -webkit-gradient(linear, left top, left bottom, from(#8EA4C1), to(#4A6C9B), color-stop(0.5, #5877A2), color-stop(0.5, #476999));

}

button.defaultBtn.backBtn:before {
	background: #999;
}

button.defaultBtn.backBtn:after {
	background-color: #CCC;
	background: -webkit-gradient(linear, left top, left bottom, from(#8EA4C1), to(#4A6C9B), color-stop(0.5, #5877A2), color-stop(0.5, #476999));
}

button.defaultBtnSelected, button.defaultBtnSelected.backBtn:after {
	background-color: #394D77;
	background: -webkit-gradient(linear, left top, left bottom, from(#7C87A4), to(#263E6C), color-stop(0.5, #394D77), color-stop(0.5, #243B69));
}

/* CSS for jsonp show case */
div div.searchResult {
	border: 2px solid #999;
	border-bottom-left-radius: 15px 15px;
	border-bottom-right-radius: 15px 15px;
	border-top-left-radius: 15px 15px;
	border-top-right-radius: 15px 15px;
	color: white;
	margin: 1%;
	padding: 15px;
	text-align: center;
	text-shadow: grey 0px 2px 0px;
	list-style-type: none;
}

div div.searchResult .user {
	margin: 10px 0;
	font-size: 24px;
	line-height: 20px;
}

div div.searchResult .text {
	margin: 10px 0 5px;
	font-size: 12px;
	font-weight: bold;
}

div.searchResult img {
	width:48px;
	height:48px;
}

/* CSS for overall layout */
.hidden {
	display:none;
}

div .navPane {
	width:250px;
	border-right:1px solid black;
}

/* CSS for list show case */
.list .row {
	padding: 10px;
	border-bottom: 1px solid #444;
	position: relative;
	background-color: white;
	z-index: 6; /* Must be greater than the .buttons z-index */
}
.list .row.mblListItem {
	padding: 0px;
}

.list .row.last {
	border-bottom: none;
}

.list .row.hold {
	background-color: #ddd;
}

.list .buttons {
	position: absolute;
	text-align: center;
	padding-top: 10px;
	width: 100%;
	height: 100%;
	z-index: 5;
}

.list .buttons .mblButton {
}

.list .buttons .deleteBtn {
	background-color: red;

}
.list .buttons .cancelBtn {
	margin-left: 10px;
	background-color: blue;
}

.row.collapsed {
	-webkit-animation-name: collapse-vert;
	-webkit-animation-duration: 0.5s;
	-webkit-animation-timing-function: linear;
}

div#list .mblRoundRectList, div#list .mblRoundRect {
	margin: 10px 10px 10px 10px;
}

@-webkit-keyframes collapse-vert {
	from {
		height: 100%;
		padding: 10px;
	}
	to {
		height: 0px;
		padding: 0px;
	}
}

/* CSS for tabs show case */
div.tabContent {
	width: 100%;
	text-align: center;
	display: table;
	overflow: hidden;
	height: 100px;
	font-size: 20px;
}

div.tabContent span {
	width: 100%;
	vertical-align: middle;
	display: table-cell;
}

div#tabBarContent {
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}

div.mblTabButton {
	height: 61px;
}

div.mblTabButtonImgDiv {
	display: block;
	height: 40px;
}

div.mblTabButtonImgDiv IMG {
	margin-top: 8px;
}

#tabContainer .mblTabPanelHeader {
	height: 70px;
}

ul#demoTabBar img.mblTabBarButtonIcon, ul#demoTabs img.mblTabBarButtonIcon {
	height: 30px;
	width: 30px;
}

ul#demoTabBar, ul#demoTabs {
	height: 36px;
}

div#tContainer .mblTabPanelPane, div#tabBarContent {
	border-style: solid;
	border-width: 1px;
}

div#tContainer .mblTabPanelPane, ul#demoTabBar, ul#demoTabs {
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
}

div#tContainer, div#tabPanel {
	-moz-box-shadow: 10px 10px 5px #888;
	-webkit-box-shadow: 10px 10px 5px #888;
	box-shadow: 10px 10px 5px #888;
	margin-left: 5px;
	margin-right: 5px;
}