/* overall TODO get rid of pixels and use % or rem */
/* 
@import "./reset.css";
@import "./layout.css";
@import "./mainMenu.css";
@import "./theme.css";
@import "./form.css";
@import "./print.css";
*/ 

/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/* global-reset */

.html {
	font-size: 12pt;
}

.html * {
	margin: 0;
	padding: 0;

	font-size: 1em;
	font-family: "Tahoma";
	font-weight: normal;
}

.html a,
.html a:visited {
	text-decoration: none;
}

.html a:hover {
	OFFtext-decoration: underline;
}
	
/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/* phone-frame */

#IdPhoneContainer {
	position: relative;
	left: 20px;
	width: 450px;
	height: 850px;
	/* TODO 
	background-image: url("./imgs/phone-white.png");
	background-repeat: no-repeat;
	background-size: 100% 100%; 
	*/
}

#IdPhoneContainer #IdPhoneImg {
	position: absolute;
	width: 100%;
	height: 100%;
}

.modal,
.screen,
#IdPhoneContainer #IdPhoneViewport {
	position: absolute;
	top: 65px;
	left: 14px;
	width: 422px;
	height: 720px;
	OFFbackground: blue;
}

.modal .screen {
	position: absolute;
	top: 0;
	left: 0;
	width: 422px;
	height: 720px;
	OFFbackground: blue;
}

#IdPhoneContainer #IdPhoneViewport #IdAppBody {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 656px;
	background-color: red;

	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr="#ffffc3",endColorstr="#ffffd3");
}

#IdPhoneContainer #IdPhoneViewport #IdAppBody .main {
	/* total window less the menu height */
	height: 595px;
	OFFbackground-color: green;
}

#IdPhoneContainer #IdPhoneViewport #IdAppMenu {
	position: absolute;
	bottom: 0;
	left: -1px;
	width: 100%;
	height: 60px;
	background: rgb(230, 230, 230);
	border: 2px solid #ddd;
}

/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/* menu-bar */

.menuButtons a {
	display: inline-block;
	margin: 4px 17px 0 17px;
	decoration: none;
	border: none;
	height: expression(50 + "px");
	width: expression(50 + "px");
	background-image: url("./imgs/menu-icons.png");
	filter: alpha(opacity=20);
}

.menuButtons a.iconTella {
	background-position: 0 0;
}
.menuButtons a.iconCompose {
	background-position: -86px 0;
}
.menuButtons a.iconClock {
	background-position: -173px 0;
}
.menuButtons a.iconKey {
	background-position: -258px 0;
}
.menuButtons a.iconSettings {
	background-position: -345px 0;
}

.menuButtons a.active {
	filter: alpha(opacity=100);
}

/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/* formatting */

.centered {
	text-align: center;
}

.dropshadow {
filter: progid:DXImageTransform.Microsoft.shadow(color="#969696", Direction=145, Strength=3);
}

.hidden {
	display: none;
}

.small {
	font-size: small;
}

/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/* shared primary section */

.header h1,
.main,
.footer {
	text-align: center;
}

/*input[type="button"],
input[type="submit"],*/
.header button,
.header input,
.main button,
.footer button {
	cursor: pointer;
	background: #36f;
	color: white;
	text-align: center;
	font-size: 0.9em;
	font-weight: bold;
	margin-top: 0.15em;
}

/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/* header primary section */

.header {
	position: relative;
	OFFbackground-color: pink;
	border-bottom: 1px solid #ccc;
}

.header h1 {
	font-weight: bold;
	font-size: 1.5em;
	line-height: 2em;
	text-align: center;
	height: 50px;
	OFFbackground-color: green;
	color: #69c;
}

.header h1 span {
	color: #69c;
	margin: 0 0.1em;
	font-weight: bold;
	
}

.header .back-arrow {
	cursor: pointer;
}

.header a {
	position: absolute;
	display: block;
	height: 3em;
	width: 3em;
	background-repeat: no-repeat;
	background-position: center center;
	OFFbackground: red;
}

.header a.back-arrow {
	left: 0;
	top: 0;
	OFFbackground-color: red;
	background-image: url("./imgs/back-arrow.png");
	OFFbackground: red;
}

.header a.cancel-x {
	right: 0;
	top: 0;
	background-image: url("./imgs/cancel-x.png");
	OFFbackground: red;
}

/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/* main primary section */

.main {
	overflow: auto;
}

.main * {
	color: #36c;	
}

.main h2 {
	OFFbackground: blue;
	font-size: 1.4em;
	margin-top: 10px;
}

.main .contentBox {
	margin: 20px;
	padding: 1em;
	background: white;
	border: 1px solid #ccc;
}

/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/* footer primary section */

.footer {
}

.footer * {
	color: #36c;
}

/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/* modal */

OFF.modal {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	height: expression(500 + "px");
	height: expression(100 + "%");
	background: blue;
}

OFF.modal .screen {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

.modal .screen {
	background-color: black;
	filter: alpha(opacity=50);
}

.modal .messageBox {
	position: absolute;
	top: 35%;
	left: 5%;
	width: 90%;
	height: 30%;
	background-color: #ffffc3;
	background-image: linear-gradient(90deg, #ffffc3 0%, #ffffd3 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr="#ffffc3",endColorstr="#ffffd3");
	border: 1px solid black;

}

.modal .messageBox h1 {
	padding: 0.5em;
	background: #69c;
	color: white;
	font-weight: bold;
	border-bottom: 1px solid black;

}

.modal .messageBox p {
	text-align: center;
	margin: 1em;
}

.modal .messageBox .buttonContainer {
	text-align: center;
}

.modal .messageBox .buttonContainer a {
	display: inline-block;
	margin: 1em;
	padding: 1em;
	border: 1px solid black;
	background: #69c;
	color: white;
}


/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/* forms */

form {
	OFFbackground: blue;
}

form .ie6_footer,
form footer {
	display: block;
	margin-top: 0.5em;
	OFFpadding: 1em;
}

.radioContainer {
	cursor: pointer;
}

.vertical {
	text-align: center;
}

.radioContainer.vertical label {
	display: block;
}

.grid2x2 .radioContainer {
	OFFbackground: pink;
	width: 46%;
	height: 2.5em;
	margin: 0;
}

/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/* expanded / collapsed containers */

.collapsed .hideWhenCollapsed {
	display: none;
}

.collapsed .showWhenExpanded {
	display: none;
}

.expanded .hideWhenCollapsed {
	display: block;
}

.expanded .showWhenExpanded {
	display: block;
}


/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/* taf message containers */

.messageContainer,
.messageIndex,
.contactName,
.messageDate,
.messageTime,
.xImg,
.messageText {

}

.messageContainer
 {
	margin: 1em 0.5em;
	border: 2px solid #69c;
	background: white;
	text-align: left;
	OFFbackground: yellow;
}

.previewContainer {
	OFFbackground: blue;
}

.previewContainer tr {
	height: 2em;
	OFFbackground: pink;
}

.previewContainer td.messageText {
	OFFbackground: blue;
	width: 40%;
	height: 3em;
}

table {
	OFFbackground: red;
}

.buttonContainer {
	width: 100%;
	OFFbackground: green;
}

.editContainer {
	width: 100%;
	OFFbackground: purple;
}

.messageCounter,
.contactName,
.messageDate,
.messageTime,
.xImg {
	display: inline;
	OFFbackground: red;
}

.messageText {
	display: block;
	font-style: bold;
	text-align: left;
}

.messageContainer .buttonContainer {
	text-align: center;
}

.messageContainer .buttonContainer button {
	margin: 0 0.25em;
	padding: 0.1em 0.25em;
}

/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/* package-summary containers */

.packageContainer	{
	margin: 1em 0.5em;
	border: 2px solid #69c;
	background: white;
	text-align: left;
}

.filterButtonsContainer {
	text-align: center;
}


.filterButtonsContainer button {
	margin: 1em .75em 0.75em 0.25em;
	width: 11em;
	height: 3.25em;
	font-size: 1em;
	font-weight: bold;
}

.filterButtonsContainer button.inactive {
	background: #fff;
	color: #36f;
	font-weight: normal;
}

/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/* tella-home */

#IdTellaTalk {
	position: absolute;
	top: 13%;
	left: 50%;
	width: expression(52 + "%");
	OFFheight: expression(80 + "px");
	margin-left: expression(-30 + "%");
	border: 3px solid rgb(255, 255, 0);
	background: #fff;
	overflow: hidden;
	text-align: center;
	padding: 1em;
}

#IdTellaImage {
	position: absolute;
	top: 39%;
	left: 50%;
	margin-left: -27%;
	overflow: hidden;
}

/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/* compose shared */

.composePages * {

}

/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/* compose step 1 */

.composePages.step1 .main {

}

/* CSS3 */
/*
.composePages.step1 .facesContainer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-density?: dense;
	gap: 1rem;
}

.composePages.step1 .facesContainer header {
	grid-column: 1 / span 2;
}


liquid layout: uses three columns
@media screen and (width > 200px) {
	.composePages.step1 .facesContainer {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

liquid layout: uses four columns
@media screen and (width > 600px) {
	.composePages.step1 .facesContainer {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}

*/
/* ie6 */
.composePages.step1 .facesContainer {
	width: 90%;
	padding: 1em 0;
}

.composePages.step1 .facesContainer a {
	display: inline-block;
	/* combined with horizontal margins should = 50% */
	width: 44%;
	margin: 3%;
	/* height of background image (93px) + any offset */
	padding-top: 98px;

	background-repeat: no-repeat;
	background-position: top center;
	OFFbackground-color: red;
}

/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/* compose step 2 */

/* make main content box have margin */ 

.composePages.step2 .instructions {
	margin: 1.5em;
	OFFbackground: red;
}

.composePages.step2 .instructions {
	OFFbackground: red;
}

.composePages.step2 .instructions p {
	margin-bottom: 1em;
	text-align: left;
}

.composePages.step2 form {
	OFFbackground: orange;
	text-align: center;
}

.composePages.step2 .footer {
	OFFbackground: green;
	text-align: center;
	margin-top: 4em;
}

.composePages.step2 .footer p {
	margin-bottom: 1em;
}

/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/* compose step 3 */

.composePages.step3 button {
	width: 35%;
	height: 7%;
	margin-top: 1.15em;
}

.composePages.step3 .main h2 {
	color: #ccc;
	OFFfont-size: 1em;
}

/* "That's a total of X messages" */
.composePages.step3 .main h4,
#IdMessageTotalText {
	margin-top: 1em;
	font-size: 0.9em;
	color: #aaa;
	OFFfont-family: Tahoma, Arial, Verdana, sans-serif;
}

.composePages.step3 .main .labelLeft {
	margin-top: 1em;
}

.composePages.step3 .main .labelLeft label {
	display: inline-block;
	font-size: 0.6em;
	text-align: center;
}

.composePages.step3 .main .labelLeft input {
	display: inline-block;
	width: 5em;
}


/* Table layout (move html labelLefts from divs to container to work)
.composePages.step3 .main .contentBox.labelLeft {
	display: table;
	margin: 0 auto;
}

.composePages.step3 .main .contentBox.labelLeft div {
	display: table-row;
	background-color: blue;
}

.composePages.step3 .main .labelLeft label,
.composePages.step3 .main .labelLeft input {
	display: table-cell;
	OFFmargin-bottom: 10px;
	font-size: .6em;
	background-color: red;
}

.composePages.step3 .main .labelLeft label {
	width: 200px;
	padding-right: 5%;
	text-align: left;
	background-color: yellow;
}

.composePages.step3 .main .labelLeft input {
	width: 200px;
	background-color: orange;
}

.composePages.step3 .main .labelLeft h3 {
	display: table-caption;
	width: 350px;
	background-color: pink;
}
*/

/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/* compose step 4 */



/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/* ie6 */

OFF#IdContactHeader {
	background-image: url("./imgs/tellafriend-colored.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 1em;
	height: 2em;
	padding: 25px;
	border-bottom: 2px solid #aaa;
}



/* 
@media print {
	* {
		color: black;
		background: transparent;
	}
	
	@page {
		size: 8.5in 11in;
		margin: 0.25in;
	}
}
*/