/*******************************************************************************
 * Licensed Materials - Property of IBM
 * Mobile Browser Simulator
 * © Copyright IBM Corporation 2011, 2013. All Rights Reserved.
 *
 * U.S. Government Users Restricted Rights - Use, duplication or 
 * disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 *******************************************************************************/

.mbs { 
	 display: inline-block;
	 margin: 10px;
}

.mbs .left, .mbs .right {
	position: relative;
	z-index: 5;
}

.mbs .left {
	float: left;
}

.mbs .right {
	float: right;
}

.mbs .rotateLeft {
	width: 12px;
	height: 12px;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url("../images/rotate_left.png");
}

.mbs .rotateRight {
	width: 12px;
	height: 12px;
	background-image: url("../images/rotate_right.png");
}

.mbs .linkButton {
	width:  17px;
	height: 17px;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url("../images/link_icon.png");
}

.mbs  .dijitToolbarMain { 
   background-color:#eaf1fa; 
   display: inline-table;  
   position: relative;
   margin-bottom:-9px;

} 

.mbs .trashCan {
	width: 12px;
	height: 12px;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url("../images/delete.png");
}

.mbs .warning {
	width: 16px;
	height: 16px;
	position: absolute;
	top: 4px;
	left: 50%;
	right: 50%;
	z-index: 5;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url("../images/warning.png");
}

.mbs iframe {
	width: 200px;
	height: 200px;
	overflow: auto;
	overflow-x: hidden;
	overflow-y: hidden;
	background-color: white;
	
	border: 2px solid black;
	padding: 0px;
	margin: 0px;
	margin-top: -4px;
	margin-bottom: -4px;
}

.mbs .background {
	background: white;
	border: 0px;
	padding: 0px;
}

.mbs .wrapper {
	z-index: 0;
	width: auto;
	height: auto;
		 
	-webkit-box-shadow: 0px 6px 8px #444;
	box-shadow: 0px 6px 8px #444;
	-moz-box-shadow: 0 6px 8px rgba(0, 0, 0, 0.45);
}

.mbs .centerDeviceName {
	/*margin: 0 auto; */
	position: relative;
    margin-top:-7px; /*lift it up into wrapper's top padding*/
}

/********** Platform-specific stuff below **********/ 
/* Android */

.mbs.android .iframeContainer {
	padding-top: 30px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 30px;
	background-color: black;
	
	margin-left: 4px;
	margin-right: 4px;
	
	border-radius: 12px;
	-moz-border-radius: 12px 12px 12px 12px;
}

.mbs.android.rotated .iframeContainer {
	padding-left: 30px;
	padding-bottom: 10px;
	padding-top: 10px;
	padding-right: 30px;
	background-color: black;
	
	margin-bottom: 4px;
	margin-top: 4px;
	
	border-radius: 12px;
	-moz-border-radius: 12px 12px 12px 12px;
}

.mbs.android .wrapper {
	position: relative;
	
	padding-top: 20px;
	padding-bottom: 40px;
	padding-left: 4px;
	padding-right: 4px;
	background-color: #EBEBEB;
	margin: 10px;
	
	border: 2px solid silver;
	
	background-position: 0px top;
	background-repeat: no-repeat;
	background-image: url("../images/android_shine.png");
	
	border-radius: 18px;
	-moz-border-radius: 18px 18px 18px 18px;
}

.mbs.android.rotated .wrapper {
	position: relative;
	
	padding-left: 20px;
	padding-right: 40px;
	padding-bottom: 4px;
	padding-top: 4px;
}

/* BlackBerry */

.mbs.bb .iframeContainer {
	padding-top: 20px;
	padding-left: 8px;
	padding-right: 8px;
	padding-bottom: 20px;
	background-color: black;
}

.mbs.bb.rotated .iframeContainer {
	padding-left: 20px;
	padding-bottom: 8px;
	padding-top: 8px;
	padding-right: 20px;
	background-color: black;
}

.mbs.bb .wrapper {
	position: relative;
	
	padding-top: 50px;
	padding-bottom: 40px;
	padding-left: 4px;
	padding-right: 4px;
	background-color: #151515;
	margin: 10px;
	
	border-top: 0px;
	border-bottom: 0px;
	border-left: 8px ridge silver;
	border-right: 8px ridge silver;
	
	background-position: 0px top;
	background-repeat: no-repeat;
	background-image: url("../images/bb_shine.png");
	
	border-radius: 22px;
	-moz-border-radius: 22px 22px 22px 22px;
}

.mbs.bb.rotated .wrapper {
	position: relative;
	
	padding-left: 50px;
	padding-right: 40px;
	padding-bottom: 4px;
	padding-top: 4px;
	
	border-left: 0px;
	border-right: 0px;
	border-bottom: 8px ridge silver;
	border-top: 8px ridge silver;
}

/* iPhone */

.mbs.ios .wrapper {
	position: relative;
	
	padding-top: 40px;
	padding-bottom: 40px;
	padding-left: 10px;
	padding-right: 10px;
	background-color: black;
	margin: 10px;
	border-width: 4px;
	border-style: ridge;
	border-color: white;
	
	background-position: 0px top;
	background-repeat: no-repeat;
	background-image: url("../images/shine.png");
	
	border-radius: 18px;
	-moz-border-radius: 18px 18px 18px 18px;
}

.mbs.ios.rotated .wrapper {
	position: relative;
	
	padding-left: 40px;
	padding-right: 40px;
	padding-bottom: 18px;
	padding-top: 18px;
}

/* Windows Phone */

/* outer cyan part */
.mbs.windowsphone .wrapper {
	position: relative;
	
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 10px;
	padding-right: 10px;
	background-color: #44b3ea;
	margin: 10px;
	
	background-position: 0px top;
	background-repeat: repeat-y;
	background-image: url("../images/winphone_bg.png");
	
	border-radius: 6px;
	-moz-border-radius: 6px 6px 6px 6px;
}

.mbs.windowsphone.rotated .wrapper {
	position: relative;
	
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 10px;
	padding-top: 10px;
}

/* inner glassy part */
.mbs.windowsphone .iframeContainer {
	padding-top: 40px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 40px;
	background-color: black;
	
	background-position: 0px top;
	background-repeat: no-repeat;
	background-image: url("../images/winphone_shine.png");
	
	border-radius: 10px;
	-moz-border-radius: 10px 10px 10px 10px;
}

.mbs.windowsphone.rotated .iframeContainer {
	padding-left: 40px;
	padding-bottom: 10px;
	padding-top: 10px;
	padding-right: 40px;
	background-color: black;
}

/* Windows 8 */

/* outer gray part */
.mbs.windows8 .wrapper {
	position: relative;
	
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	background-color: black;
	margin: 10px;
	
	background-position: 0px top;
	background-repeat: repeat-y;
	background-image: url("../images/win8_bg.png");
	
	border-radius: 6px;
	-moz-border-radius: 6px 6px 6px 6px;
}

.mbs.windows8.rotated .wrapper {
	position: relative;
	
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-top: 10px;
}

/* inner glassy part */
.mbs.windows8 .iframeContainer {
	padding-top: 20px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	background-color: black;
	
	background-position: 0px top;
	background-repeat: no-repeat;
	background-image: url("../images/win8_shine.png");
	
	border-radius: 10px;
	-moz-border-radius: 10px 10px 10px 10px;
}

.mbs.windows8.rotated .iframeContainer {
	padding-left: 20px;
	padding-bottom: 20px;
	padding-top: 20px;
	padding-right: 20px;
	background-color: black;
}