/* 
Title:		Main CSS
Author: 	3 Crown Creative
*/

@import "reset.css";

/* @group Elements */
body, html {color:#333; font-family:  Arial,sans-serif;line-height:1.4em;letter-spacing:.038em; font-size: .813em; }
body {min-width:966px;background: url(/images/bkgPurp.jpg);font-size:1em; }

h1, h2, h3, h4 {color:#A9218D;}
h1 { font-size: 2em; line-height: 1; margin: 0.5em 0; text-align:left } 
h2 { font-size: 1.75em; margin: 0.75em 0; } 
h3 { font-size: 1.5em; line-height: 1; margin: .5em 0; } 
h4 { font-size: 1em; line-height: 1.25; margin: 1.05em 0; font-weight:bold } 
h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; } 
h6 { font-size: 1em; font-weight: bold; } 
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; } 
strong {font-weight:bold; }
abbr,acronym {border-bottom:1px dotted #000;cursor:help;} 
em {font-style:italic; }
em strong, strong em {font-style:italic;font-weight:bold}
dl {margin:1em 1em 1em 2em;}
dl dd {margin-left:1em;}
ol {list-style: decimal outside;}
ol li, ul li {margin:0 0 .5em 1em;}
ul li {list-style-image:url(/images/bullet.jpg); }
th,td {border:1px solid #000;padding:.5em;}
th {font-weight:bold;text-align:center;}
caption {margin-bottom:.5em;text-align:center;}
fieldset,table {padding-bottom:1em;}
p {padding-bottom:.5em}

a img {border:none;}
a, a:hover {text-decoration: none}
a {color:#A9218D; text-decoration:none;}
a:hover {color:#A9218D; text-decoration:underline}
a:focus {outline: none}
img {border:0px}
/* @end Classes */

/* @group Structure */
.outerWrap {width:966px; margin:1.5em auto 0 auto; background: url(/images/bkgTopBot.gif) repeat-y; height:6px}
.wrapper {width:966px; margin:0 auto; background: url(/images/bkgShadow.png) repeat-y}
.container {  background:#FFFFFF; margin:0 18px  }

/* sidebar */
.sidebar {float:left; width:408px; padding:20px 0 0 0;}
body.portfolio .sidebar {width:340px; padding:20px 0 0 60px;}

.sidebar h1 {margin:0 0 0 60px;}
.sidebar h1 a {background:url(/images/logo.gif) no-repeat; display: block; width:311px; height:26px; text-indent:-2000px;}
#home .sidebar {padding:0; margin:-6px 0 0 0}
#home .sidebar h1 {display:none}
body.portfolio .sidebar h1, 
#home .content h1 {margin:0;}
#home .sidebar img {margin-top:40px}

#ourteam .sidebar  {background: url(/images/coins.jpg) no-repeat 0px 100px; height:656px; display:block;}
#contact .sidebar  {background: url(/images/medal.jpg) no-repeat 0px 100px;  height:552px; display:block;}
#thework .sidebar  {background: url(/images/emblem.jpg) no-repeat 20px 140px; height:556px; display:block;}
#services .sidebar  {background: url(/images/lion.jpg) no-repeat 0px 100px; height:540px; display:block;}

/* mainbar */
.mainbar { float:left; width:430px;padding:32px 60px 10px 32px}
body.portfolio .mainbar {padding-left:40px}

#home .content h1 a {background:url(/images/logoHome.jpg) no-repeat; width:389px; height:33px; display:block; text-indent:-2000px; margin-bottom:1em}
#home .content h2 { font-size:1em; margin:0;padding-bottom:.5em; color:#333}
#home .content h3 { font-size: 1.75em; margin: 0.75em 0; color:#A9218D }

.mobileOnly,
.printOnly {display:none}

/* foot */
.foot { width:930px; height:31px; }
.footOuter {width:966px;  margin:0 auto 20px auto; background: url(/images/bkgTopBot.gif) repeat-y; height:6px }
.foot p { font-size:.75em; color:#a4a2a2; padding:15px 0 0 30px}
#thework .foot p { padding:0 0 0 30px;}


/*  <NAVIGATION>
--------------------------------------------------*/
ul.nav {list-style:none; line-height:1; margin:0; padding:0}
ul.nav li {float:left; position:relative;list-style:none; height:22px;  margin:0; text-align:center}
ul.nav li a {font-weight: bold;color:#333333;text-decoration:none;letter-spacing:1.5px; font-size:1.08em; padding-right:25px; display:block; height:22px}
ul.nav li.thework a {height:18px}
body.portfolio .nav { height:145px;} 
body.default .nav {height:100px;} 

ul.nav li a:hover {font-weight:bold;color:#A9218D; text-decoration:none;  }
#home .nav .home a,
#ourteam .nav .ourteam a,
#thework .nav .thework a,
#services .nav .services a,
#contact .nav .contact a,
#web .nav .web a,
#design .nav .design a,
#photography .nav .photography a
	{text-decoration:none; color:#A9218D; cursor:default; }
ul.nav li.last a  {padding-right:0}
ul.nav li ul {background:#fff;width:90px;position:absolute;left: -999em;z-index:99 !important;}
ul.nav li:hover ul,  
ul.nav li.sfhover ul  {left: auto;}
ul.nav li li {display:block;float:none;padding:0px; width:auto; height:14px}
ul.nav li ul a,
#thework .nav .thework ul a
  {display:block;font-size:.85em; color:#666666; line-height:1.25em;text-align:left; padding:0; height:14px }
#thework .nav .thework ul a:hover {color:#A9218D; cursor: pointer}

body.portfolio ul.nav li ul,
#thework ul.nav li.thework ul
	{left:auto}

/*  main portfolio page */
p.links {font-weight: bold;color:#A9218D; font-size:1.08em; text-decoration:none;padding:30px 0 0 0;   }
p.links a {color:#333333; text-decoration:none; padding-left:10px}
p.links a:hover {font-weight:bold;color:#A9218D; text-decoration:none;  }


/*   Portfolio section links  */
.portSects {padding:60px 0 20px 0; width:100%}
.portSects .mainSection {float:left}
.subSections {float:right; padding:58px 32px 0 0}
.portSects p {text-align:center}
.portSects p strong {font-size:1.16em; font-weight:bold;color:#A9218D;}
.portSects .on {font-weight:bold;color:#A9218D; text-decoration:none; cursor: default}
.portSects a{font-weight: bold;color:#000000; text-decoration:none; padding-left:15px }
.portSects a:hover {font-weight:bold;color:#A9218D; text-decoration:none;  }

/*  thumbnail grid  */
#grid { margin-bottom:80px; }
#web #grid {margin-bottom:0}
#grid div { padding:0 23px 18px 0; float:left}
#web #grid div { padding:0 3px 3px 0;}
#grid img {cursor:pointer;background:#ffffff url(/images/thumbBack.jpg) no-repeat center;border: 1px solid #000000;padding:4px; margin:1px}
#grid img:hover  {padding:3px;border:2px solid #A9218D;}
#grid img.imgFrame {padding:3px;border:2px solid #A9218D;}
#grid img.imgNoFrame {border: 1px solid #000000;padding:4px;}

/*  enlarged image  */
.arrowNav {width:447px;}
a.arrowL {display:block; height:25px; width:24px; margin:0 398px .5em 0;background:url(/images/btn_arrow.gif) no-repeat 0 0; float:left;}
a.arrowL:hover { background-position:-25px 0}
a.arrowR {display:block; height:25px; width:24px; margin:-30px 0 .5em -390px;background:url(/images/btn_arrow.gif) no-repeat -50px 0;float:left;}
a.arrowR:hover { background-position:-75px 0}

.portfolioImgLg {float:left;width:422px}
.portfolioImgLg img { border:1px solid black}
.portfolioImgLg strong {color:#333333}
.portfolioImgLg p {font-size:.81em;color:#666666;letter-spacing:1px;text-align:left; margin:0}
#design .portfolioImgLg p, 
#photography .portfolioImgLg p 
    {width:330px;}

.portImgHide {display:none}
.portImgShow {display:block}


/* our team */
#ourteam .content .clear {margin-bottom:20px}
#ourteam .content .bioDesc {font-size:.85em; margin-bottom:1em; }
#ourteam .content .bioDesc em {font-size:1.08em; color:#A9218D; font-weight:bold; font-style:normal }
#ourteam .content .invisible {color:#ffffff; text-decoration:none}
#ourteam .content a.invisible  {color:#ffffff; text-decoration:none}
#ourteam .content a.invisible:hover {color:#ffffff; text-decoration:none}

/*  contact */
#contact .content {color:#949494; font-weight:bold;}
#contact .content a {color:#949494; font-weight:bold; font-style:italic; text-decoration:none}
#contact .content a:hover {color:#A9218D;}
.mail {padding-top:20px}
.mail span {color:#000}

/*  accordion */
h3.selected  { color: #A9218D;}
#accordion {margin:20px 0px;}
#accordion h3 {color: #666666}
h3.toggler {cursor:pointer;border: 1px solid #f5f5f5;border-right-color: #ddd;border-bottom-color: #ddd;
	margin: 0 0 1em 0;padding: 3px 5px 1px 5px; clear:both;font-size:.93em; font-weight: bold}
h3.back { }
div.element  {	margin:0px;padding:4px 4px 4px 10px;}
.toggler:hover   { color: #A9218D;}  


/*  miscellaneous */
.clear {clear:both}
.small {font-size:.77em}
.bullet {background:url(/images/bullet.jpg) no-repeat 0px 7px ; text-indent:10px}
a.pdf {background: url(/images/pdf.png) no-repeat left center;padding-left: 20px;line-height: 16px; }
a.facebook {background: url(/images/iconFacebook.jpg) no-repeat left center;padding-left: 24px;line-height: 20px; height:20px; display:block }
.shadow {box-shadow:0 4px 8px #333;-moz-box-shadow:0 4px 8px #333;-webkit-box-shadow:0 4px 8px #333;}

/*  image shadow  */
.imgShadow {float:left;background: url(/images/shadowAlpha.png) no-repeat bottom right !important;margin: 10px 10px 0 10px !important;}
.imgShadow img {display: block; position:relative;border: 1px solid #a9a9a9; margin: -6px 6px 6px -6px;padding: 4px;} 

/*  clearfix */
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */


@media only screen and (max-width: 480px) {
body, html {font-size: 1em; }
body {background:#fff; max-width: none; min-width: inherit;}
.outerWrap { display:none}
.wrapper {width:320px;  background: none;overflow:hidden}
.container {background:#fff; padding:1em .5em; margin:0 }
.mobileOnly {display:block}

/* sidebar disappears */
.sidebar {display:none !important}

/* mainbar */
.mainbar {float: none; width:307px;padding:0}
body.portfolio .mainbar {padding-left:0}
.content {padding-left:.5em; padding-right:.5em}
#home .content, #ourteam .content {padding-top:.75em}
#ourteam .content .bioDesc {font-size:1em;}
.subSections {padding:0; margin-right:1em}
.subSections a {margin-left:.5em; font-size:.7em; font-weight:normal}
.subSections a.on,
.subSections a:hover
   {color:#A9218D; border-bottom:1px dotted #A9218D; text-decoration:none; font-weight:bold}

/* footer */
.foot { width:320px; height: auto;margin:0 auto; }
.footOuter { display:none}
.foot p {padding:0}
#thework .foot p { padding:0}

/* navigation */
body.portfolio .nav,
#thework .nav
    {height:70px;} 
body.default .nav {height:22px;} 
ul.nav li.thework a {height:22px}
ul.nav li a 
    {letter-spacing:normal;color:#A9218D;font-size:.85em; padding:0 .29em;-webkit-tap-highlight-color:rgba(169,33,141,0.4); 
	  margin:0; height:22px !important; line-height:22px;border-right:1px solid #A9218D; }
ul.nav li.last a  {padding:0 .29em;border-right:none;}
ul.nav li a:hover,
#thework .nav .thework ul a:hover,
#home .nav .home a,
#ourteam .nav .ourteam a,
#thework .nav .thework a,
#services .nav .services a,
#contact .nav .contact a,
#web .nav .web a,
#design .nav .design a,
#photography .nav .photography a
	{background:#A9218D; color:#fff;border-right:1px solid #fff; }

ul.nav li:hover ul {left:-999em}
ul.nav li ul {background:#fff;width:190px; margin-top:.5em}
ul.nav li ul a,
#thework .nav .thework ul a
    {color:#666; font-size:.75em; padding:0 .29em; background:#fff;border-right:1px solid #fff ; line-height:22px; cursor:pointer}

ul.nav li li {float:left;width:auto;}
body.portfolio ul.nav li ul,
#thework ul.nav li.thework ul
	{left:-50px;}


/* logo */
#home .content h1 {display:none}
.mobileOnly h1 a {background:url(/images/logoMobile.png) no-repeat 0; width:243px; height:50px;display:block; text-indent:-2000px; margin:0 auto; }
.mobileOnly h1  {padding:0 0 .5em 0; margin:0}

.arrowNav {width:307px;}
a.arrowL { height:180px; width:15px; margin:77px 0 0 0;background: url(/images/btn-left-arrow.png) no-repeat 0 0;}
a.arrowL:hover { background-position:-15px 0}
a.arrowR { height:180px; width:15px; margin:53px 0 0 0;background:url(/images/btn-right-arrow.png) no-repeat -15px 0;}
a.arrowR:hover { background-position:0 0}

#web a.arrowL,
#web a.arrowR
   {margin-top:15px}


.mail .phone,
#contact .content a {font-style:normal; border-bottom:1px dotted #949494}
#home .content h2, #home .content p {padding-bottom:1em; text-align:justify}
#home .content h2 {padding-top:.75em;}
h3 {font-size:1.3em}
p.links {font-size:.9em; padding:1em 0}
p.links a {padding-left:.5em}
.portImgShow, 
.portImgHide 
    {float: none}
.portfolioImgLg {width:277px; !important}
.portfolioImgLg img,
.portfolioImgLg p
   {width:275px !important}

}