@charset "utf-8";

/* Artemis Computing - v3 - common */

/* @group basics0 - set the overall canvas */

body {

	font-family: "Segoe UI", "Gill Sans", Optima, sans-serif;

	font-size: 1.2em;

	line-height: 1.5em;

	color: #fff;

	background-color: #123569;

	background-color: #18518e;

	margin: 0px;

	padding: 0px;

	text-align: center;

}

.wrapContent {

	max-width: 1200px;

	margin: auto;

	overflow: hidden;

	box-sizing: border-box;

	text-align: left;

	padding: 20px;

	line-height: 2em;

}

/* for pages with different menu styles */

/* can put a max on this and the menu won't spread */

/* done in the page-specific sheet */

.wrapContentnopad {

	max-width: 100%;

	text-align: left;

	padding: 0;

}

.hide4desktop {

	visibility: hidden;

	display: none;

}

.hide4mobile, .hide4tablet {

	visibility: visible;

}

/* @end */

/* @group basics1 - links - default, basic, specialty */

a {

	color: #ffffcc;

	text-decoration: none;

	border-bottom: 1px dotted;

	border-bottom-color: transparent;

}

a.wul {

	border-bottom-color: #ffffcc;

}

a:hover {

	color: #ffcc33;

	border-bottom-color: #ffcc33;

}

/* liteBkg is applied to sections with links selectively */

/* there is also a darkBkg used selectively, mostly for show more(less) */



.liteBkg a {

	color: #003399;

	font-weight: 500;

	border-bottom-color: #0033ff;

}

.liteBkg a:visted {

	color: #003399;

}

.liteBkg a:hover {

	color: #8a0a03;

	border-bottom-color: #8a0a03;

}



a.more0, a.more1, a.more2 {

	font-family: "Segoe UI", "Gill Sans", Optima, sans-serif;

	color: #fff;

	background-color: #123569;

	border-bottom: 1px solid #7da9e8;

	text-decoration: none;

	display: inline-block;

	padding: 4px 16px 6px 16px;	

	border-radius: 50%;

	transition: all linear .2s .1s;

}

a.more0 {

	font-size: .9em;

	font-weight: 900;

}

/* more2 is kinda lika a ball, for visit site */

a.more2 {

	display: inline;

	width: auto;

	border: 0;

	padding: 15px 6px;

	border-radius: 50%;

	background-color: #123569;

	font-size: .9em;

	line-height: 1.2em;

}

a.more0:hover, a.more1:hover, a.more2:hover {

	background-color: #ffcc33;

	color: #000;

	border-color: #000;

}



a.clientUrl {

	font-family: "Courier New", Courier, monospace;

	color: #123569;

}

a.clientUrl:hover {

	color: #ffcc33;

	border-bottom-color: #ffcc33;

}

a.clientUrl2 {

	font-family: "Courier New", Courier, monospace;

	font-size: .9em;

}



/* used by alpha portfolio - button-like */

a.moreArrow1 {

	font-family: "Segoe UI", "Gill Sans", Optima, sans-serif;

	font-size: 1em;

	font-weight: 900;

	line-height: 1em;

	display: inline-block;

	color: #ddd;

	background-color:  #123569;

	border: 1px solid #123569;

	border-radius: 12px;

	padding: 10px 10px 20px 10px;

}

a.moreArrow1:after {

	content: url(assets/moreArrow1.png);

}

a.moreArrow1:hover {

	background-color: #ffcc33;

	color: #000;

}

a.moreArrow1:hover:after {

}



/* specialty links such as breadcrumbs */

/* at present these are all on portfolio pages, dark blue bkgs */

.breadcrumbs {

	font-size: .85em;

	font-weight: 400;

	text-align: left;

	color: #bbd1e6;

	margin: 0px 0 20px 0;

}

.breadcrumbs a {

	color: #ffff00;

	padding: 9px 6px;

	border-radius: 6px;

	border-bottom: 2px solid;

	border-bottom-color: transparent;

}

.breadcrumbs a:visited {

	color : #ffffcc;

}

.breadcrumbs a:before {

	content: "\00a0 \02c3 \00a0 \00a0 \00a0 ";

}

.breadcrumbs a:first-child:before {

	content: "";

}

.breadcrumbs a:hover, .breadcrumbs a:focus, .breadcrumbs a:active {

	background-color: #ffcc33;

	color: #000;

	border-bottom-color: #000;

}

.pdfLnk:after {

	content: url(pdf-logo-sm.png);

}



/* buttons */

a.blueButton0 {

	background-color: #0e2c58;

	border-radius: 50%;

	padding: 20px 30px;

	color: #fff;

	border-bottom: 2px solid #0e2c58;

	box-shadow: 1px 1px 4px #000;

}

a.blueButton0:hover {

	background-color: #ffcc33;

	color: #000;

	border-bottom-color: #fff;

}



/* @end */

/* @group basics3 - headings, text and image shadows */

h1 { font-size: 1.8em; line-height: 2em;}

h2 { font-size: 1.5em; line-height: 1.5em;}

h3 { font-size: 1.2em; }

h4 { font-size: 1em; }

h5 { font-size: 1em; }

h1, h2, h3, h4 {

	margin: 1em 0px;

}

h2.fancyfont {

	font-family: "ratio", sans-serif;

	font-weight: 100;

}

h3.tanfathead {

	font-family: "ratio", sans-serif;

	font-weight: 900;

	color: #d5decd;

	font-size: 1.5em;

	line-height: 1em;

	margin: 0 0 1.5em 0;

}

.ctrTxt {

	text-align: center;

}

.laTxt {

	text-align: left;

}

.raTxt {

	text-align: right;

}

.fltRt {

	float: right;

}

.fltRtLM {

	float: right;

	margin-left: 10px;

}

.clrBoth {

	clear: both;

	height: 1px;

	line-height: .1em;

	font-size: .1em;

}

.clrRight {

	clear: right;

	height: 0px;

	line-height: .05em;

	font-size: .1em;

}

.clrLeft {

	clear: left;

	height: 0px;

	line-height: .05em;

	font-size: .1em;

}

.scalable {

	height: auto !important;

	width: auto !important;

	max-width: 100%;

}

.scalable90 {

	height: auto !important;

	width: auto !important;

	max-width: 90%;

}

.sm7 {

	font-size: .7em;

	font-weight: 300; 

}

.sm75 { font-size: .75em; }

.sm8 { font-size: .8em; }

.sm85 { font-size: .85em; }

.sm9 { font-size: .9em; }

.sm95 { font-size: .95em; }

.smCaps9 {

	font-size: .9em;

	font-variant: small-caps;

}

.smCaps95 {

	font-size: .95em;

	font-variant: small-caps;

}

.lg11 { font-size: 1.1em; }

.lg12 { font-size: 1.2em; }

.lg13 { font-size: 1.3em; }



.boldfatnote0 {

	font-size: .9em;

	font-weight: 800;

	color: #555;

	letter-spacing: .05em;

}

.tan1 {

	color: #e8ece3;

}

.grnLite1 {

	color: #97ac80

}

.grnMed1 {

	color: #3d6431;	

}

.grnMed1bkg {

	background-color: #3d6431;	

}

.grnDark1 {

	color: #003300;	

}

.bluMed1 {

	color: #18518e;

}

.bluDark1 {

	color: #123569;

}

.canary {

	color: #ffffcc;

}



.fancyTxt {

	text-shadow: 0 0 2px rgba(0,0,0,.2);

}

.fancyFace {

	font-family: "Ratio", sans-serif;

}



.smHelpTip1 {

	color: #9ec4f6;

	font-style: italic;

	font-size: .95em;

	line-height: 1em;

}

.lgBoldClientNam {

	font-weight: 700;

	font-size: 1em;

}

.lgLiteClientNam {

	font-weight: 200;

	font-size: 1.8em;

	letter-spacing: .01em;

	line-height: 2em;

}





/* @end */

/* @group basics4 - lists */



/* set default to override browser agents, this site doesn't use normalize */



.listDblSpc li {

	margin-top: 15px;

}

.listDblHalfSpc li {

	margin-top: 6px;

}



.listFancyBar1, .listFancyBar2, .listFancyBar3 {

	list-style: none;

	padding-left: 0;

}

.listFancyBar1 li, .listFancyBar2 li, .listFancyBar3 li {

	background-image: url(assets/greenBar1.png);

	background-repeat: no-repeat;

	padding-left: 40px;

}

.listFancyBar2 li {

	background-image: url(assets/greenBar2.png);

}

.listFancyBar3 li {

	background-image: url(assets/blueBar1.png);

}

.listBlueBullet {

	list-style-image: url(assets/blueBullet.png);

}

.listLiteGreenBullet {

	list-style-image: url(assets/liteGreenBullet.png);

}







/* @end */

/* @group basics5 - sidebars, formatted regions */



.kudo0 {

	width: 100%;

	max-width: 400px;

	float: right;

	font-size: .95em;

	font-style: italic;

	text-align: right;

	margin: 20px 0 10px 40px;

	padding-left: 10px;

	border-left: 3px dotted #ccc;

}





/* for linkedIn and Paypal */

/* the facebook feed on faq uses its own */

.rightSidebar250 {

	float: right;

	width: 250px;

	margin-left: 20px;

}



/* for contact form */

/* border goes away when narrower */



.rightSidebar60pwb {

	float: right;

	width: 45%;

	margin-left: 40px;

	padding-left: 20px;

	border-left: 3px dotted #89a16f; 

	text-align: center;

}









/* set of circular indented-looking sidebar regions */

/* look similar, same size, but different background colors */

.memo0a, .memo1a, .memo2a  {

	float: right;

	width: 240px;

	margin-left: 20px;

}

.memo0a div, .memo1a div, .memo2a div {

	padding: 20px 30px;

	color: #fff;

	background-color: #89a16f;

	border-bottom: 6px solid #fff;

	border-radius: 50%;

	text-align: center;

	font-size: .95em;

	line-height: 1.5em;

	font-family: courier;

}

/* these match backgrounds on services page */

.memo1a div {

	background-color: #e7ebf1;

	color: #222;

	box-shadow: inset 0 0 10px rgba(0,0,0,.1);

}

.memo2a div {

	background-color: #d4dce6;

	color: #222;

	box-shadow: inset 0 0 10px rgba(0,0,0,.2);

}



.memo5dots4help {

	float: right;

	width: 240px;

	margin-left: 20px;

	color: #9ec4f6;

	font-style: italic;

	font-size: .95em;

	line-height: 1.2em;

	text-align: center;

	padding-left: 10px;

	border-left: 3px dotted #1f5fbc;

}





.make2cols {

	column-count: 2;

	-webkit-column-count: 2;

	-moz-column-count: 2;

}

.make2cols p:first-child {

	margin-top: 0;

}



/* @end */



/* @group basicsRow- page top w header and contains menu */

/*                   colors may be changed on individual pages */

.wrapRowTop {

	background-color: #e8ece3;

	display: block;

	padding-top: 10px;

}

.wrapRowTop div img {

	float: left;

	margin: 5px 30px 5px 5px;

	width: 163px;

	height: 75px;

}

.addressBlockTop {

	float: right;

	display: inline-block;

	text-align: right;

	font-size: .9em;

	line-height: 1.2em;

	padding: 0 20px 0 0;

	text-shadow: 1px 1px 1px rgba(255,255,255, .5);

	color: #000033;

}

.wrapRowTop .coNamBlock {

	text-align: left;

	padding: 10px 0 20px 0;

	color: #000033;

	text-shadow: 1px 1px 1px rgba(255,255,255, .5);

}

.conam {

	font-weight: 500;

	font-size: 1.1em;

}

.conamB {

	font-weight: 700;

	font-size: 1.1em;

}

.artemisLogoTop {

	position: fixed;

	left: 5px; top: 5px;

	z-index: 9999 !important;

}

.wrapRowTop div.artemisLogoTop img {

	width: 163px;

	height: 140px;

}

/* @end */



.wrapRowMain0 {

	background-color: #18518e;

}

.wrapRowMain0 .wrapContent {

	background-color: #123569;

	color: #fff;

}

.wrapRowMain0 h2, .wrapRowMain6 h2, .wrapRowMain7 h2 {

	font-weight: 500;

	font-style: italic;

	letter-spacing: .05em;

	word-spacing: .1em;

}

.wrapRowMain6 {

	background-color: #3d6431;

}

.wrapRowMain6 .wrapContent {

	background-color: #3d6431;

	color: #fff;

}

.wrapRowMain7 {

	background-color: #123569;

}

.wrapRowMain7 .wrapContent {

	background-color: #123569;

	color: #fff;

}

.wrapRowMain8 {

	background-color: #89a16f;

}

.wrapRowMain8 .wrapContent {

	background-color: #edf6e6;

	color: #000;

}











/* @group basicsX - contact row and page bottom */

/*                  colors may be changed on individual pages */



.wrapRowContact {

	background-color: #23609c;

}

.wrapRowContact .wrapContent {

	background-color: #286cb0;

	background-image: url(assets/section-arrow-down-blue1.png);

	background-position: top center;

	background-repeat: no-repeat;

}

.wrapRowContact .wrapContent h2 {

	letter-spacing: .07em;

	word-spacing: .15em;

	margin-top: 80px;

	font-family: "ratio", sans-serif;

	font-weight: 300;

	font-size: 1.8em;

}

.wrapRowContact a, .termsOfUse a {

	padding: 6px 15px;

	border-radius: 12px;

	margin: 0 10px;

}

.wrapRowContact a:hover, .termsOfUse a:hover {

	color: #000;

	background-color: #ffcc33;

	border-bottom-color: #000;

}



.wrapRowPgBotAddress {

	background-color: #18518e;

}

.wrapRowPgBotAddress .wrapContent {

	background-color: #18518e;

	text-align: center;

}

.wrapRowPgBotFoot {

	background-color: #123569;

}

.wrapRowPgBotFoot .wrapContent {

	background-color: #123569;

}



.termsOfUse {

	float: left;

	text-align: left;

	line-height: 200%;

	margin: 20px 0 0 20px;

	font-size: .8em;

}



.artemis {

	float: right;

	text-align: center;

	width: 120px;

	margin: 20px 0;

}

.artemisLogo {
	float: right;
	background-image: url(assets/SeaWingDesignsLogo.png);
	background-position: 0px;
	height: 60px;
	width: 70px;
	margin-top: 20px;
	margin-right: 25px;
	border: 0;
}

.artemisLogo:hover {

	background-position: 70px;

	background-color: transparent;

}

a.logolink:hover {

	background-color: transparent;

	border-bottom: transparent;

}

/* @end */









/* for contact us form */

/* for overlay, and also form for page */



/* for original full page */

.paystmtbutton {

	background-image: url(assets/pay-stmt.png);

	background-position: 0px;

	height: 85px;

	width: 150px;

}

.paystmtbutton:hover {

	background-position: 150px;

}

/* for sop */

.paystmtbutton2 {

	background-image: url(assets/pay-stmt2.png);

	background-position: 0px;

	height: 46px;

	width: 150px;

}

.paystmtbutton2:hover {

	background-position: 150px;

}





.sopcontact {

	text-align: left;

	border-left: 2px solid #123569;

	padding: 12px;

}

.sopcontact h2:first-child {

	color: #97ac80;

	text-align: center;

}

.sopcontact h3:first-child {

	margin-top: 0;

	letter-spacing: .05em;

}

.sopcontact .boldfatnote0 p:first-child {

	padding-top: 50px;

}











.simpleContactForm {

	margin: 10px;

	padding: 10px;

	font-size: .9em;

	line-height: 1.5em;

	color: #333;

}

.simpleContactForm .col1 {

	display: inline-block;

	width: 150px;

	vertical-align: middle;

	text-align: right;

	margin: 0 10px 0 0;

}

.simpleContactForm input, .simpleContactForm textarea {	

	background-color: #fff;

	color: #000;

	border: 1px solid #ccc;

	border-radius: 8px;

	padding: 6px 12px;

	margin: 3px;

	font-size: 1.2em;

	vertical-align: middle;

	display: inline-block;

}

.simpleContactForm select {

	background-color: #fff;

	color: #000;

	padding: 3px;

	margin: 3px;

	font-size: 1em;

	border: 1px solid #ccc;

}

.simpleContactForm .col1a{

	display: inline-block;

	width:150px;

	margin-left: 10px;

}

.simpleContactForm .col1b {

	display: inline-block;

	width:250px;

	margin-left: 10px;

}

.simpleContactForm .sendplain {

	border-radius: 6px;

   color: #123569;

   margin-top: 20px;

}

.simpleContactForm .sendmsg {

	color: #fff;

	background-color: #123569;

	border-bottom: 1px solid #7da9e8;

	text-decoration: none;

	font-weight: 900;

	padding: 8px 20px;	

   margin-top: 20px;

	border-radius: 100%;

}



.simpleContactForm .sendmsg:hover, .simpleContactForm .sendplain:hover {

	background: #ffcc33;

	color: #000;

}