/*--------------------------------------

Circle Art - 02.12.9 

Anna Hough

--------------------------------------------------------------------*/

body { background-color:#ffffff; font-size:62.5%; font-family:Arial, Helvetica, sans-serif; color:#676767;}

/* Main site resets 
------------------------------------------------------------------- */

h1 { padding:0px; margin:0px; font-size:1.8em; }
h2 { padding:0px; margin:0px; font-size:1.6em;}
h3, h4, h5, h6 { padding:0px; margin:0px;}

p { padding:0px 0px 0px 1px; margin:0px 0px 5px 0px; color:#676767;}

a { padding:0px; margin:0px; text-decoration:none; outline:none; color:#676767; cursor:pointer;}
a:hover { text-decoration:underline; color:#676767;}
a span { visibility:hidden;}

ul { padding:0px; margin:0px;}
ul li { padding:0px; margin:0px; list-style-type:none;}

ol { padding:0px; margin:0px;}
ol li { padding:0px; margin:0px; list-style-type:decimal;}

img { border:none;}

hr { height:1px; color:#f0f0f0;}

table { padding:0px; margin:0px; border:0px;}
table thead, table th { padding:0px; margin:0px; border:0px;}
table tbody, table td { padding:0px; margin:0px; border:0px;}
table tfoot, table tfoot td { padding:0px; margin:0px; border:0px;}

/* Main layout tags 
---------------------------------------------------------------------*/

#siteContainer { margin-left:auto; margin-right:auto; width:960px;  margin-top:46px;  height:100%;   }
#container { width:960px; float:left;  height:auto; position:relative; margin:0px; background-color:#FFFFFF; border:1px solid #cccccc; border-bottom:none;}
#header { display:block; width:960px; float:left;  }
#content { float:left; padding:0px; margin:0px; } /* 20 span */
#contentIndex { float:left; width:960px;} /* 32 span*/
#sideBar { float:left; padding:0px; margin:0px;} /* 12 span */
#footer { background-color:#FFFFFF; padding:12px 0px 12px 0px; margin:0px 0px 20px 0px; color:#cccccc; font-size:1.1em; width:960px; float:left; background-image:url(../images/bg_footer.gif); background-position:0 0; background-repeat:no-repeat; border:1px solid #cccccc; border-top:none; }

/* main 960 column tags
-----------------------------------------------------------------------*/
.column { float:left; width:30px; display:block; height:auto;}
.columnContainer { clear:both;}

.span2  { width:60px;}
.span3  { width:90px;}
.span4  { width:120px;}
.span5  { width:150px;}
.span6  { width:180px;}
.span7  { width:210px;}
.span8  { width:240px;}
.span9  { width:270px;}
.span10 { width:300px;}
.span11 { width:330px;}
.span12 { width:360px;}
.span13 { width:390px;}
.span14 { width:420px;}
.span15 { width:450px;}
.span16 { width:480px;}
.span17 { width:510px;}
.span18 { width:540px;}
.span19 { width:570px;}
.span20 { width:600px;}
.span21 { width:630px;}
.span22 { width:660px;}
.span23 { width:690px;}
.span24 { width:720px;}
.span25 { width:750px;}
.span26 { width:780px;}
.span27 { width:810px;}
.span28 { width:840px;}
.span29 { width:870px;}
.span30 { width:900px;}
.span31 { width:930px;}
.span32 { width:960px;}


.above { margin:10px 0px 0px 0px;}
.below { margin:0px 0px 10px 0px;}
.spacing { margin:10px 0px 10px 0px;} /* spacing above and below */

/* header 
-------------------------------------------------------------------- */
#header .logo { padding:30px 0px 0px 30px; float:left;}

#header .navigation { float:right; padding:42px 30px 0px 0px;}
#header .navigation li { float:right; padding:0px 0px 0px 24px;}
#header .navigation li a { display:block; background-image:url(../images/bg_sub_navigation.gif); background-repeat:no-repeat; height:20px;  }
#header .navigation li a:hover { background-position: 0 -20px; text-decoration:none;}
#header .navigation li a.curent { background-position:0 -20px; text-decoration:none;}
#header .navigation li a span { visibility:hidden;}
#header .navigation li.photography a { background-position:0 0; width:127px;}
#header .navigation li.photography a:hover, #header .navigation li.photography a.curent { background-position:0 -20px;}
#header .navigation li.prices a { background-position: -127px 0px; width:76px;}
#header .navigation li.prices a:hover, #header .navigation li.prices a.curent { background-position: -127px -20px;}
#header .navigation li.ordering a { background-position: -203px 0px; width:89px;}
#header .navigation li.ordering a:hover, #header .navigation li.ordering a.curent { background-position: -203px -20px;}
#header .navigation li.conact a { background-position: -292px 0px; width:83px;}
#header .navigation li.conact a:hover, #header .navigation li.conact a.current { background-position: -292px -20px;}

/* Footer 
---------------------------------------------------------------------- */
#footer .copyright { float:left; padding:0px 0px 0px 30px;}
#footer .footerNavigation { float:right; padding:0px 30px 0px 0px;}
#footer .footerNavigation li { float:right; padding:0px 0px 0px 10px; color:#cccccc;}
#footer .footerNavigation li a { text-decoration:none; color:#cccccc;}
#footer .footerNavigation li a:hover { color:#CC3399; text-decoration:underline;}

/* index page tags 
-------------------------------------------------------------------- */

.mainImage { float:left; padding:76px 0px 0px 69px;}

/* -- tag cloud tags -- */
.tagCloud { float:right; width:335px; margin:276px 0px 26px 0px; position:relative; height:130px; padding: 0px 36px 0px 0px;}
.tagCloud a { background-repeat:no-repeat; background-position:0 0; display:block; position:absolute;  }

.tagCloud a.flowers { top:21px; left:51px; background-image:url(../images/tag_flowers.gif); width:52px; height:7px;  }
.tagCloud a.flowers:hover { background-position:0 -7px; }
.tagCloud a.sea { top:13px; left:112px; background-image:url(../images/tag_sea.gif); width:72px;  height:25px;}
.tagCloud a.sea:hover { background-position:0 -25px; }
.tagCloud a.fresia { top:0px; left:192px; background-image:url(../images/tag_fresia.gif); width:49px; height:13px;}
.tagCloud a.fresia:hover { background-position: 0 -13px;}
.tagCloud a.seascapes { top:121px; left:231px; background-image:url(../images/tag_seascapes.gif); width:62px; height:9px; }
.tagCloud a.seascapes:hover  { background-position:0 -9px;}
.tagCloud a.rose { top:21px; left:281px; background-image:url(../images/tag_rose.gif); width:47px; height:9px;}
.tagCloud a.rose:hover { background-position:0 -9px;}
.tagCloud a.tulips { top:36px; left:0px; background-image:url(../images/tag_tulips.gif); width:63px; height:23px;}
.tagCloud a.tulips:hover { background-position:-1px -23px;}
.tagCloud a.abstract { top:47px; left:134px; background-image:url(../images/tag_abstract.gif); width:40px; height:7px; }
.tagCloud a.abstract:hover { background-position:0 -7px;}
.tagCloud a.landscapes { top:38px; left:195px; background-image:url(../images/tag_landscapes.gif); width:130px; height:23px;}
.tagCloud a.landscapes:hover { background-position:0 -23px;}
.tagCloud a.sunset { top:63px; left:96px; background-image:url(../images/tag_sunset.gif); width:56px; height:9px;}
.tagCloud a.sunset:hover { background-position:0 -9px;} 
.tagCloud a.colour { top:79px; left:21px; background-image:url(../images/tag_colour.gif); width:30px; height:7px;}
.tagCloud a.colour:hover { background-position:0 -7px;}
.tagCloud a.orchid { top:57px; left:54px; background-image:url(../images/tag_orchid.gif); width:30px; height:7px;}
.tagCloud a.orchid:hover { background-position:0 -7px;}
.tagCloud a.twist { top:84px; left:59px; background-image:url(../images/tag_twist.gif); width:89px; height:13px;}
.tagCloud a.twist:hover { background-position:0 -13px;}
.tagCloud a.ripples { top:65px; left:162px; background-image:url(../images/tag_ripples.gif); width:120px; height:34px;}
.tagCloud a.ripples:hover { background-position:0 -34px;}
.tagCloud a.lights { top:78px; left:292px; background-image:url(../images/tag_lights.gif); width:29px; height:10px;}
.tagCloud a.lights:hover { background-position:0 -10px;}
.tagCloud a.sky { top:107px; left:30px; background-image:url(../images/tag_sky.gif);  width:52px; height:20px;}
.tagCloud a.sky:hover { background-position:0 -20px;}
.tagCloud a.sand { top:115px; left:110px; background-image:url(../images/tab_sand.gif); width:36px; height:6px; }
.tagCloud a.sand:hover { background-position:0 -6px;}
.tagCloud a.beach { top:112px; left:153px; background-image:url(../images/tag_beach.gif); width:60px; height:13px;}
.tagCloud a.beach:hover { background-position:0 -13px;} 
.tagCloud a.reeds { top:99px; left:220px; background-image:url(../images/tag_reeds.gif); width:40px; height:9px;}
.tagCloud a.reeds:hover { background-position:0 -9px;}
.tagCloud a.shells { top:99px; left:276px; background-image:url(../images/tag_shells.gif); width:45px; height:12px;}
.tagCloud a.shells:hover { background-position:0 -12px;}
.tagCloud a.water { top:9px; left:252px; background-image:url(../images/tag_water.gif); width:26px; height:7px; }
.tagCloud a.water:hover { background-position:0 -7px;} 


/* section tags ------------------------------------------------   */

.pictures { padding:0px 30px 0px 30px; margin:30px 0px 60px 0px; border-right:1px solid #cccccc;}
.pictures li { padding:0px 0px 30px 0px;}
.pictures li a.image { display:block; width:180px; border:1px solid #ffffff; }
.pictures li a.border { border:1px solid #f0f0f0;}
.pictures li a.image:hover { border:1px solid #cc3399  }
.pictures li a.title { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:2em; color:#676767; padding:5px 0px 0px 0px; display:block;  }
.pictures li a.title:hover { color:#cc3399}
.none { border:none;}

.photographyPictures { margin:15px 0px 0px 0px;}

.heading { background-image:url(../images/section_bg_header.gif); background-position:30px 25px; background-repeat:no-repeat; padding:54px 0px 0px 30px;}

.otherHeading { padding:0px 0px 0px 21px;}
.otherOptions { float:left; width:100%; padding:14px 0px 30px 30px;}
.otherOptions li { float:left; padding:0px 10px 0px 10px; border-left:1px solid #f0f0f0; font-size:2em; color:#999999; font-family:Verdana, Arial, Helvetica, sans-serif}
.otherOptions li.none { border:none; padding:0px 10px 0px 0px;}
.otherOptions li a { color:#999999;}
.otherOptions li a:hover { color:#cc3399;}

/* photography page tags ------------------------------------------*/
.photoIntro { font-size:1.7em; font-family:Arial, Helvetica, sans-serif; padding:5px 0px 10px 30px; color:#999999;}
.sectionHeadings { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:2em; color:#000000; padding:20px 0px 0px 30px;}
.sectionHeadings:hover { color:#cc3399;}
.more { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:2em; padding:0px 30px 30px 0px; text-align:right; color:#000000; display:block; }
.more:hover { color:#cc3399;}

.photoFooter { height:30px; width:960px; background-image:url(../images/bg_footer.gif); background-position:0 0; background-repeat:no-repeat;}

/* ordering -----------------------------------------------------*/

.orderingContainer { padding:20px 0px 0px 30px; float:left;}
.orderingContainer h1 { color:#000000; font-weight:normal; font-size:2.8em; text-transform:capitalize; padding:0px 0px 0px 10px; display:block; float:left;}
.orderingContainer  p {  font-size:1.4em; padding:0px 0px 15px 0px;}
.orderingContainer .pandp { font-size:1em; color:#999999;}
.orderingContainer .border { border:1px solid #f0f0f0;}
.orderingContainer img { margin:0px 10px 20px 0px; float:left;}
.orderingContainer a.back { float:left; display:block; width:400px; padding:0px 0px 20px 0px; font-size:1.2em;}

.orderingOptions ul { float:left; width:450px; padding:22px 0px 0px 0px;}
.orderingOptions ul li { float:left; width:450px; padding:0px 0px 10px 0px; border-bottom:1px solid #f0f0f0; margin:0px 0px 10px 0px; font-size:1.6em;}
.orderingOptions ul li div { float:left; padding:0px 10px 0px 0px;}
.orderingOptions ul li .size { width:141px;}
.orderingOptions ul li .price { padding:0px 20px 0px 0px; font-size:0.8em;}
.orderingOptions ul li .total { font-weight:bold; color:#333333; font-size:1.2em; line-height:1.1em; text-align:right; width:154px; }
.orderingOptions ul li .button { float:left; text-align:right; width:37px; padding:0px}
.orderingOptions ul li .button input { width:14px; float:right}
.orderingOptions ul li div a { color:#cc3399;}
.orderingOptions ul li label { font-size:1.1em;}

.submitButtonContainer { float:right; width:450px; text-align:right;}
.submitButtonContainer .submit { float:right; height:15px; width:128px; border:none;}

.orderDetailContainer { width:450px; font-size:1.2em; padding:0px 0px 0px 0px; border-bottom:1px solid #cccccc; float:right; margin:0px 0px 10px 0px; }
.orderDetailContainer .orderHeading { font-size:1.6em; color:#000000; }
.orderDetailContainer p { display:block; float:right; text-align:right;}
.orderDetailContainer .orderprice { font-weight:bold; padding:0px 0px 0px 5px;}

.continueShopping .heading { padding:54px 0px 10px 30px;}

.warning { height:108px; float:left; width:450px;}
.warning p.noSize { font-size:1.6em; font-weight:bold; padding:0px; color:#df2ca2; float:left; width:450px; text-align:left;}
.warning p { text-align:left; width:450px;}
.warning a.noSizeLink { color:#df2ca2; float:left;}



/* contact form ----------------------------------------------*/

/* form resets & standard tags */
form { padding:0px; margin:0px;}
fieldset { padding:30px 0px 20px 30px; margin:0px; border:0px; width:900px;}
fieldset.small { width:450px; padding:0px 0px 0px 0px;}
fieldset.section { border-top:1px solid #cccccc;}
legend { display:none; }
legend span { display:none;}
legend.sectionTitle { display:block; width:900px; float:left; margin:15px 0px 20px 0px; height:16px; background-image:url(../images/heading_personal_details.gif); background-position:0 0; background-repeat:no-repeat; }
label { float:left; width:123px; font-size:1.6em; color:#9a9a9a; }
input { float:left; width:272px; color:#9a9a9a; padding:2px; font-size:1.4em; border:1px solid #cccccc; line-height:1.5em;}
input.radio { width:20px; float:left; border:none;}
select { width:59px; border:1px solid #cccccc; color:#9a9a9a;}
textarea { width:272px; border:1px solid #cccccc; color:#9a9a9a; padding:2px; }
.button{ padding:0px 0px 0px 123px; float:left;}
.formButton { width:65px; height:15px; border:none;}

.row { width:450px; float:left; margin:0px 0px 15px 0px;}
.long { width:700px;}

.thankyou { padding:30px 0px 0px 30px; height:400px;} 
.thankyou h2 { font-family:Arial, Helvetica, sans-serif; font-size:2.2em; margin:0px 0px 5px 0px; font-weight:normal;} 
.thankyou p { font-size:1.5em;}

/* ordering -----------------------------------------------*/
.content { float:left; padding:20px 0px 0px 30px;}
.content h3 { font-size:1.4em; padding:0px 0px 5px 0px; font-weight:bold; }
.content p { font-size:1.4em; color:#676767; padding:0px 0px 0px 0px;}
.content .sizing { padding:0px 0px 10px 0px;}